UX 사례 연구 - 모바일 SW의 UX (출처:소프트웨어공학센터)

원본: http://www.sw-eng.kr/member/customer/Webzine/BoardView.do?boardId=00000000000000045849&currPage=&searchPrefaceId=&titOrder=&writeOrder=®DtOrder=&searchCondition=TOT&searchKeyword=

UX 사례 연구 - 모바일 SW의 UX 

UI(User Interface)와 UX(User eXperience)에 대한 관심이 높아지면서 다양한 PC 기반의 소프트웨어에 적용되고 있는 추세이고, 모바일 디바이스 사용의 증가는 UI/UX에 대한 또 다른 수요를 나타내고 있다. 특히, 웹 브라우저 위주의 PC 기반에 비해 다양한 디바이스의 크기, 환경과 특정할 수 없는 사용자의 특성이 너무나 다양하게 나타나고 있어 사용자 경험을 반영하는 UX에 대한 중요성이 더 커지는 추세다. 이번 회에서는 모바일 소프트웨어에 UX를 적용하는 방법에 대해 살펴보도록 한다. 적용 방법을 잘 이해하여 모바일 소프트웨어의 사용성을 높일 수 있기를 기대한다. 

사례 연구 전 확인 사항 

UX의 정의 

UX에 대한 정의는 많은 사람들이 혼돈하기 쉽다. 사전적인 의미로는 “어떤 제품을 사용하면서 느끼고 생각하는 모든 경험”을 말한다. 제품 또는 소프트웨어를 통해 사용자가 겪게 되는 경험을 나타내는 것이고, 다양한 사용자의 이러한 경험들을 모아서 표준적인 UX를 만들게 되는 것이다.

UI와 비교하여 정의해보면, UI는 화면의 레이아웃이나 시각적인 디자인, 소프트웨어의 브랜드 등을 나타내는 것이고, 더 심화해서는 사용자의 네비게이션 정도를 보여준다. 따라서, UI는 디자이너 관점이 많이 적용되고, 시각적인 것에 치중하게 된다. 이에 반해 UX는 그 동안 사용하던 사용자의 경험을 반영하기 때문에 디자이너보다는 사용자 관점이 전적으로 반영되고, 특히 사용자와 소프트웨어 간 상호작용에 대한 디자인을 많이 고민하게 된다(그림1).  

<그림1> UI와 UX의 비교 

 

출처: https://www.devsaran.com 

UX의 프로세스 UX를 디자인하기 위해서는 사용자의 경험을 찾아내어 정리하는 것이 매우 중요하다. 사용자를 조사하여 문제와 경험을 이해하여 인사이트(Insight)를 찾아내고, 비전 수립 후 스케치와 프로토타입을 반복하여 최적의 사용자 경험을 도출하고 검증한다. 만들어진 사용자 경험을 디자인 한다(그림2). 

 

<그림2> UX 프로세스 

 출처: http://impatientdesigner.com/ 

 <참고사이트>

<197호 웹진: 공학 트렌드> UX 사례 연구 - UX 전략

  

UX 디자인에서 고려해야 할 사항 

시각적인 것을 중요시하는 UI와는 달리, 사용자의 사용성을 중요시 하는 UX를 디자인 하는데 고려해야 할 것으로 세가지를 들 수 있다. 사용자가 경험에 대해 일반적인 사람은 어떤 반응을 보이는지, 업무적인 측면을 고려하면 어떤 형태로 정리될 수 있는지, 상호작용을 하는 주체는 누구인지를 종합적으로 바라보면서 정리해야 한다(그림3). 

<그림3> UX에서 고려해야 하는 사항 

 출처: nectardesign.com  

먼저, 일반적인 사람의 반응을 고려하는 것은, 사용자 경험에 대한 사람들의 감정(feeling), 태도(Attitude), 행동(Behavior)을 살펴봐야 한다는 것이다. 여기서 말하는 일반적인 사람은 특정 사용자가 아닌, 해당 소프트웨어를 사용하게 되는 보편적인 사람을 말한다. 

다음으로, 업무적인 측면을 고려하는 것은, 사용자의 판단에 의한 경험도 필요하지만 정형화된 틀에 맞춰야 하는 것이 있는지 살펴보는 것이다. 특히, 기업에서 사용되는 그룹웨어 같은 업무에 필요한 소프트웨어나 사용자가 반드시 지켜야 하는 규칙을 가지고 있는 소프트웨어에서는 심도 있게 고민되어야 한다. 

마지막으로 상호작용에 대해 고려해야 하는 것은, 사용자가 명령을 내리고 소프트웨어는 명령을 수행하는 단순한 인터페이스가 아니라 사용자가 소프트웨어에 대해 충분히 경험할 수 있도록 상호작용의 범위를 확대해야 한다. 

모바일 소프트웨어의 UX 

모바일 소프트웨어에서 UX가 더 강조되는 이유는 작은 화면으로 소프트웨어를 사용해야 하고 항상 휴대를 하고 있기 때문에 원하는 정보만 직관적으로 신속하게 보여주고 반응해야 한다. 또, 더 많이 구매되고 설치되기 때문에 불특정 다수의 경험을 표준화하여 반영해야 한다. 

모바일 디바이스의 성장으로 인해 UX는 “Mobile First” 디자인이 늘어나는 추세다. PC 기반에서의 대표적인 변화는 “Touch”일 것이다. 단순한 버튼 클릭의 명령이 아닌 손가락을 통한 다양한 명령들이 입력되는 것이 모바일 UX의 대표적인 변화다. 또 다른 변화는 “Simple Text”와 “Powerful Image”다. 최대한 간결한 문자나 문장을 사용해서 많은 의미를 전달해야 하고, 효과적인 이미지를 통해 강력한 의미를 함축적으로 전달해야 하는 것이 모바일 소프트웨어 UX의 큰 변화 방향이다. 이 방향을 기준으로 모바일 소프트웨어 UX를 디자인하기 위해 필요한 원칙과 방법이 그림4와 그림5에 나타나 있다. 

<그림4> 모바일 소프트웨어 UX 디자인 원칙 

그림4를 살펴보면, 사용자 관점에서 보고 싶은 것이 잘 보이게 배치가 되어야 하고, 사용자의 행동과 상황, 반응을 예측해서 쉽고 빠르고 직관적으로 대응되어야 한다. 그리고, 사용자가 비정상적인 행동으로 오류를 발생시켜도 소프트웨어는 정상 작동되도록 해야 한다. 이 모든 것을 개발 중에도 지속적으로 사용자 의견을 받아 반영하는 것이 좋다. 

 <그림5> 모바일 소프트웨어 UX 적용 방법의 기준 

 출처: http://venturebeat.com/ 

그림5를 살펴보면, 모바일 디바이스는 오른손 엄지 손가락을 많이 사용하기 때문에 좌측 상단을 제어하기는 매우 곤란하다. 클릭 위치 관련한 사용성 기준인 (a)와 드래그 관련한 사용성 기준인 (c)에 나타나있다. (b)는 버튼의 크기가 너무 작거나 애매한 버튼은 보기도 안 좋고 사용하기도 어렵기 때문에 우측 그림과 같이 직관적인 버튼 모양을 만들어 사용성을 높여야 한다. (d)는 버튼이 너무 많아도 안되고 너무 적어도 안되기 때문에 적당한 버튼과 사용 용도에 따른 이미지 선택으로 사용자가 사용하기 쉽게 디자인되어 있다. 

하루에도 너무나 많은 컨텐츠가 생성되고 있는 요즘, 눈에 띄게 UI나 UX를 구성해서 소프트웨어를 개발하는 경우가 종종 있다. 이러한 현상은 눈에 띄기는 좋으나 사용자가 자주 사용하는 소프트웨어가 되기는 어렵다. UI, UX는 독특한 구성보다는 보편적인 구성을 통해 사용자가 친근하고 사용하기 편하다는 느낌을 줘야 좋은 디자인이라고 할 수 있다. 개발자 관점이 아니라 사용자 관점이어야 한다는 이유가 여기에 있다. 

사례 연구 

애플(Apple)의 HIG(Human Interface Guidelines) 

출처: NHN - iOS Human Interface Guidelines 애플에는 iOS 기반으로 앱(Application)을 만들 때 몇 가지 원칙을 제공하고 있다. 미적 조화(Aesthetic Integrity), 일관성(Consistency), 조작성(Direct Manipulation), 반응성(Feedback), 은유성(Metaphors), 통제성(User Control) 등 6가지이다. 6가지를 종합해보면, 사용자가 바라보는 관점이고, 쉽게 이해가 되고, 쉽게 조작할 수 있게 만들도록 되어 있다.  

<참고사이트>

iOS Human Interface Guidelines

  

애플의 HIG를 기준으로 앱을 설계할 때, UI, UX를 디자인하는 방법은 앞에서 살펴보았던 모바일 소프트웨어 UX 프로세스와 유사하다. 사용자가 필요로 하는 기능을 확인하고, UX 비전을 수립한 후, UX를 디자인하고, 앱의 기능을 확인하여 이상이 없을 경우 출시하게 된다(그림6). 아래는 HIG에서 제시하는 적용 사례를 말하고 있다. 

 <그림6> HIG 기준 UI, UX 디자인 방법 

(1) 전체 스크린을 활용 - 날씨 앱 

인셋(Inset)과 프레임(Frame)을 고려하지 않고 전체 화면을 사용하면, 여유 공간과 직관적인 이미지 묘사가 가능하다. 그림7 (a)의 날씨 앱을 보면, 이러한 접근법을 통해 현재 날씨를 직관적으로 표현하고, 시간별 데이터를 제공할 여유공간이 확보된다.  

(2) 반투명 요소는 그 뒤의 힌트 제공 - 옵션 창 

iOS에서는 옵션 창을 대개는 투명한 창으로 사용하고 있다. 반투명한 요소는 뒤에 가려진 화면을 일부 보여주기 때문에 연관성을 가진 것으로 이해될 수 있고, 추가적인 컨텐츠가 가능하다는 것을 사용자에게 알려준다. 그림7 (b)를 보면, 메인 화면의 옵션을 보여주는 것으로 이해되고, 언제든지 볼 수 있다는 의미로 상단에 꺾쇠 표시가 나타나 있다.  

(3) 여백을 많이 사용 - 메시지 앱 

웹 기반에서는 더 화려하고 더 다양한 기능을 포함하다 보니 화면이 복잡하게 구성되는 경우가 많다. 모바일의 경우, 화면이 작기 때문에 컨텐츠가 화면에 꽉 차게 되면 답답한 느낌을 주게 되고, 중요 정보가 무엇인지 혼란스럽다. 그림7 (c)의 메시지 앱을 보면, 중요한 컨텐츠가 무엇인지 알아보기 쉽고, 차분하고 평안한 느낌을 전달한다. 

(4) 상호작용에 필요한 UI를 일관되고 단순화 

모바일에서 사용되는 앱을 보면, 버튼이나 화면 구성이 대동소이하다. 작은 화면에서 구성할 수 있는 대안이 얼마 없기도 하지만, 사용자가 많은 앱을 사용해야 하기 때문에 상호작용에 필요한 UI는 일관되고 단순화 시켜서 만들어야 한다. 새로운 앱을 사용하더라도 키 컬러나 상호작용 방법을 직관적인 표현함으로써 사용자의 사용성을 높여야 한다. 그림7 (d)를 보면, 뒤로 돌아가는 버튼과 삭제, 업로드, 작성 등의 버튼을 일관된 색과 모양으로 제시하기 때문에 사용자는 별도의 설명 없이 모양만으로도 인지를 할 수 있게 된다.  

<그림7> HIG를 적용한 사례 

이 외에도 HIG에서는 iOS를 구성하는 기본 프레임을 정의해서 제공하고 있다(그림8). 용도에 따라 화면 구성을 선택하게 되고, 선택된 화면에 맞는 상호작용에 필요한 요소를 사용한다. 이러한 구성은 iOS에서 구동되는 앱을 개발할 때 기본 적용하게 되고, 별도의 화면 구성이 필요한 경우 다른 요소를 추가해도 되지만 가급적 원안을 따르는 것이 사용자에게 혼란을 주지 않게 된다. 

기대 효과와 결론 

모바일 소프트웨어는 앞으로 더 많이 개발될 것으로 예상되지만, 기본적인 화면 크기, 구성, 사용자 제어에 필요한 요소들은 변화가 거의 없을 것으로 보인다. 휴대가 용이해야 하는 모바일 디바이스의 특성 때문이다. 모바일 UX도 마찬가지로, 모바일 OS에서 제공하는 UI, UX 가이드를 따르기만 해도 개발에 큰 무리가 없을 것으로 보인다. 물론, 만들고자 하는 모바일 소프트웨어의 특성을 고려한 UX 전략은 잊어버려서는 안 되는 부분이다.  

<참고자료>

http://uxdesign.com/about-user-experience-design/article/top-ten-seven-definitions-of-ux-design/24 

http://bahns.net/2642331 

http://www.slideshare.net/JonathanDong/ux-essential-7749096?from_action=save 

http://uxmag.com/articles/the-top-ux-predictions-for-2016 

http://nectardesign.com http://impatientdesigner.com/what-exactly-is-ux-design 

https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/ 

http://www.slideshare.net/stevenbrown374/ios-hig-40409821  

출처: http://www.sw-eng.kr/member/customer/Webzine/BoardView.do?boardId=00000000000000045849&currPage=&searchPrefaceId=&titOrder=&writeOrder=®DtOrder=&searchCondition=TOT&searchKeyword=