모바일 UI 설계 방법

들어가며..

개발자, 디자이너, 기획자 누구나 UI(User Interface)를 설계할 수 있다. 그리고 설계된 UI를 사용자에게 선보이고 피드백 받을 수 있다. 그런데 한가지 중요한 점이 있다. 사용자 경험(UX)은 누구나 설계할 수 없다는 것이다. UI와 UX가 어떻게 다르냐고? 아마 이 둘의 차이점은 수많은 블로그와 서적에서 다루었기 때문에 오늘은 다루지 않을 것이다.(기회가 된다면 정리한 자료를 바탕으로 블로그에 정리하겠다.) 오늘은 모바일 UI 설계에서 유의해야 할 점과 UX관점에서 서비스를 만드는 방법을 소개하겠다.

UI와 UX의 관계

모바일 UI 설계 방법

모바일 UI 설계방법은 아주 다양한 방법이 있다. 초창기 모바일 UI는 아이폰의 HIG(Human Interface Guidelines)에 따라 만드는 경우가 많았다. Android의 경우에는 현재의 Material Design이 나오기 전에 굉장히 중구난방 UI의 앱들이 쏟아졌다. 크게 모바일 UI는 아래와 같이 나눌 수 있다.

모바일 UI의 종류

1. List & Detail : 기능을 분류한 뒤 카테고리화 해서 List로 표현한 뒤 사용자가 선택하면 Detail 화면을 보여준다.
2. Tabs : 사용자가 가장 많이 사용하는(사용할 것이라 예상되는) 4~5가지 기능을 선별해 상 하단의 Tab형태로 보여준다.
3. View : 하나의 One View로 보여준다.(요즘엔 One View + Slide Menu가 많이 보인다.) 

List & Detail

Tabs

View + Slide Menu

메뉴트리

이런 UI를 구성하기 전에 먼저 해야할 것이 있다. 바로 기능의 정의다. 기능을 정리할때는 다양한 기능을 모두 펼친 다음에 이를 그룹핑해서 Naming을 한다. 물론 중요한 개념이나 아이디어가 있다면 이 기능이 1번 기능이 되어야 한다. 방법은 다양하다. 이를 메뉴트리라고 부르는데 아래와 사진과 같은 개념으로 정리하면 된다.

메뉴트리

여기까지 되었으면 제빠르게 프로토타이핑을 시작한다. 프로토타입 방법은 두가지 방법이 있는데 미니멀 프로토타입과 MVP 방법이 있다. 두가지를 살펴보면

프로토타입

1. Minimal Prototype : 자신이 생각한 화면을 종이에 간단하게 스케치 한다. 실제 화면이 어떻게 동작되는지는 알 수 없다.

Minimal Prototype

2. MVP(Minimum Viable Product) : 고객의 피드백을 받아 최소한을 구현한 제품이다. 초창기에는 PPT나 이미지로 만들었으나 최근에는 동작하는 다양한 Prototype 툴이 있다. 자주사용하는 프로토타입 제작 Tool을 공유한다.

• 프로토.io(https://proto.io/) : ios와 android 의 다양한 위젯으로 화면을 설계하고 web화면으로 동작을 볼 수 있다.
  레이아웃을 그룹핑할 수 있으며, 동작되는 화면이 마치 앱을 제작한것 같은 느낌이 든다. 단, 조금의 배움이 필요하다.

• 플루이드ui(https://www.fluidui.com/) : 비교적 간단한 프로토타이핑을 할 수 있다. 물론 동작 가능하다. 간단하게 동작하고 어려운 툴을 배우는게 싫다면 추천한다.

• 저스트인마인드(www.justinmind.com) : 유일하게 PC에 설치해서 사용해야하는 툴이다. 그만큼 강력하고 복잡한 UI 설계가 가능하다. 물론 html 등으로 export해서 사용성을 테스트할 수 있다. 복잡한 앱을 만들어야 한다면 추천한다.

와이어프레임(WireFrame)

와이어 프레임과 프로토타입은 비슷한 절차이다. 프로토타입이 내가 만들 제품에 대한 최소한의 검증이었다면, 와이어 프레임은 각 화면단위의 UI를 설계하는 작업이다. 아주 힘든 노가다(?) 작업이다. 모든 화면을 설계하고 화면간의 이동과 관계를 모두 표현해야 한다.

WireFrame

다양한 Tips

1. 다양한 App을 참고하라. 처음 모바일 UI를 설계하는 사람들의 특징이 있다. 본인이 스티브 잡스 또는 조니 아이브라도 된마냥 독창적인 UI를 설계하려고 한다. 그러나 애플의 가이드 그리고 구글의 가이드가 나와있으며, 다양한 앱이 지구상에 존재한다. 많은 App의 화면을 보고 이를 참고하는 것이 제일 쉽고 안전한 방법이다. 사용자는 새롭게 배워야 하는 화면을 사용하고 싶은게 아니라 익숙한 기능을 자유자제로 사용하고 싶어한다.
   
   
2. 숨기지 말아라. 메뉴트리를 그리고 많은 기능들이 있다고 치자. 그런데 난 슬라이드 메뉴를 사용하고 싶어서 중요한 기능을 슬라이드 메뉴에 모두 적용했다. 이것은 과연 잘한 것일까? 답은 No다. 중요한 기능은 숨기지 말고 과감하게 꺼내라. 사용자는 기능을 찾는 시간을 가장 싫어한다. 작은 화면에 무엇을 꺼내야 할지 모르겠다면, 제공하는 앱의 메인 기능 그리고 가장 많이 사용할 것 같은 기능을 찾아서 꺼내야 한다.
   
   
3. 익숙한 아이콘을 사용하자. 모바일앱에서 아이콘은 이제 어느정도 정형화 되어있다. 그런데 나는 독창적인 앱을 만들고 싶다고 이쁘고 굉장한 아이콘을 사용했다면 사용자에게 외면받을 가능성이 더 커진 것이다. 익숙하고 쉬운 아이콘을 사용하자. 만약 제공하려는 기능의 익숙한 아이콘이 없다면 당당하게 글자버튼을 넣어라!! "관찰하기" 이렇게 말이다.
   
   
4. 두번 물어보지 말아라. 혹시 사용자가 글을 작성했는데 "진짜 작성하겠습니까?"와 같은 팝업을 띄웠다면 당신은 사용자에게 푹푹 찌는 여름날 두배의 짜증을 선사한 것이다. 진짜 심각하고 돌이킬 수 없는 상황에서만 팝업을 사용해라. 사용자는 자신이 방금전에 한 행동에 책임질 수 있다.
   
   
5. 기본에 충실해라. 안드로이드 앱에 아이폰의 UI를 아이폰앱에 안드로이드 UI를 일부로 적용하지 말아라. 사용자는 당신이 제공하는 앱만 사용하는 것이 아니다. 사용자의 수많은 앱의 사용 경험속에 당신의 앱이 존재한다. 당신이 만든 앱이 사용자가 사용하는 경험에 자연스럽게 녹아들 수 있게 기본 가이드는 준수하는 것이 좋다.