모바일 UX/UI 기획 및 실무 교육을 다녀와서

CUSTOMER 설정

1. 모바일 사용자 구분

1. Repetive Now User (습관적 사용자)

2. Bored Now User (지루한 사용자)

3. Urgent Now User (목적 사용자)

2. 고객 프로파일 작성

1. 인구통계학적 분석

2. 사회심리학적 분석

3. 행태분석학적 분석

4. 지리분석학적 분석

PERSONA(페르소나) 설정

1. 페르소나

1. 목적

① End Goal (전략목표)

② Experience Goal (실제사용자 경험)

③ Life Goal (유추된 경험)
 

2. 구성요소

① Behavior (행동)

② Activity (행동에 영향을 끼치는 활동)

③ Contextual (사회, 문화적 맥락)

④ Specific (기술적 사양)

* behavior >> activity >> task(목표가 있는 활동) 순으로 발전, 다량의 Tasks로 하나의 App을 완성한다.
 

2. Task & Flow 작성

1. 구성요소

① 페이지(page)

② 레이어(layer)

③ 메뉴(manu)

④ 패스(path, arrow)

⑤ 디시젼 포이트(dicision point)

⑥ 조건(condition)

모바일 APP 스케치

1. UX의 중요성

:기존에 제품을 “사용하기” 측면에서 벗어나 “가치”를 제공하는 시대로 접어들었음. 고객들에게 usable, useful, enjoyful을 제공!

2. 스케칭

: 누구나 쉽고 간편하게 사용이 가능하다. 단, 스케치 시 정해진 규칙(임의로 정해진)에 따라야 한다.
 

모바일 UI/ UX

1. HIG(human interface guidelines) UX pattern 구성요소

1. 은유 (mataphor)

2. 직접조작 (direct manipulation)

3. 직관 (see & point)

4. 반응 (feedback)

5. 편리한 이용 (use control)

6. 미적 완벽함 (aesthetic integrity)
 

2. HIG UX pattern 구성요소 Ⅱ

 

1. blank zone(status bar) : 최상단 통신사명, 시간, 배터리 등을 노출하는 상태바

2. title(URL text field) : 상단 헤더 부분

3. button

① click though : 페이지를 완전히 넘어가게 하는 버튼

② option key : "layer" or "component"를 호출하는 버튼

③ button : 단순한 yes / no를 구분하는 버튼 (ex: 확인, 취소, 새로고침..)

4. layer : 페이지로 이동, 상태를 조작하기 위해 나타나는 임시 페이지, 디자인

5. component : 아이폰이 제공하는 기본 기능창 (키보드, 숫자 picker..)

6. pattern : 페이지가 똑같을 경우, 편리상 pattern이라 지칭
 

3. 레이아웃 (layout)

1. 레이아웃(layout)

① 화면상의 전반적인 구성

② 정보의 양에 따라 배치를 고려( inch도 고려함)

③ 정보의 그룹화 : 유사정보 근접배치

④ 정보의 정렬 : dom tree 방식에 의한 구조설계

2. 색(color)

① CI 컬러 채택

② 인덱스 컬러 사용

3. 모양(shape)

① 어떤 대상을 형태로 표현하기 위한 디자인 요소

4. 타이포

① 모바일에서는 기본폰트 사용

5. 그래픽

① 1페이지 당 22kb

② 명확한 이미지의 아이콘 채택

6. 해상도

	아이폰3S	아이폰4	아이패드
해상도	480x320	960x640	1024x768
입력해상도	640x480	1280x720	1280x720
사이즈	3.5 inch	3.5 inch	9.7 inch

예) 모바일 어플리케이션 “Stampled" 스케치 



------------------------------------------------------
교육을 받으면서 인상 깊은 몇가지는 

1. 페르소나
어플을 기획하고 개발하는 과정에서 여러 이슈들이 발생한다.
이슈들에 대해 커뮤니케이션을 하다보면 개발, 디자인, 기획에서 생각하는 사용자가 각기 다르다는 걸 느끼는데,
이렇게 각기 생각하는 사용자가 다르기 때문에 생기는 어려움이 많다. (각 팀원들을 설득하기 어렵고, 지속적으로 한 방향으로 프로젝트가 진행되기도 어렵다.)
따라서 프로젝트 진행 전에 각 팀원들이 페르소나를 만들어 사용자를 동일화 시킨다.
이후에 구성원 모두가 "그"(모두가 만든 페르소나)가 app을 잘 사용할 수 있는 방법과 아이디어를 모은다면 이전보다 훨씬 훌륭한 작품을 만들 수 있지 않을까?

2. 스케치
기존의 돔트리방식에서 벗어나 조금은 혼잡하더라도 한눈에 볼 수 있는 스케치를 하였다.
(처음 스케치를 접하는 사람들이 복잡하다고 느낄 지 모르겠지만, 오히려 가장 잘 정리되는 건 스케치 방식이다.)
기존의 웹기획 방식으로는 모바일 기획문서를 만들기엔 한계가 분명하다. 뎁스로 판단하기 어려운 프로시져(또는 팝업, 푸쉬), 레이어, 컴포넌트(키보드, 숫자 picker)등이 산발적으로 분포하기 때문이다.
반면 스케치된 설계도의 장점은 한눈에 모든 프로세스를 보기 쉽고, 연동이 어떻게 되어있는지 잘 파악할 수 있다는 점을 뽑을 수 있다. 또한 작성된 스케치를 바탕으로 PPT 스토리보드를 제작하면 훨씬 편리하고 꼼꼼하게 작성할 수 있었다.

3.task & flow
task & flow 를 작성하고 이들의 조합을 가지고 앱을 만드는 것이 기획에서 체계적인 체계를 유지하며, 기능 수정 및 보완시 더 효과적으로 세부내용으로 접근할 수 있다는 장점을 느낄 수 있었다.


**이 글은 에코노베이션에서 진행된  모바일 UX/UI 기획 및 설계실무를 다녀와서 작성하였습니다.