Chapter 05. 모바일 UI/UX 디자인 프로세스. Chapter 05 모바일 UI/UX 디자인 프로세스 1. 모바일 UI/UX 디자인 프로세스의 개요 2. 정보구조 설계 3. 와이어프레임 4. 프로토타이핑.

Presentation on theme: "Chapter 05. 모바일 UI/UX 디자인 프로세스. Chapter 05 모바일 UI/UX 디자인 프로세스 1. 모바일 UI/UX 디자인 프로세스의 개요 2. 정보구조 설계 3. 와이어프레임 4. 프로토타이핑."— Presentation transcript:

1 Chapter 05. 모바일 UI/UX 디자인 프로세스

2 Chapter 05 모바일 UI/UX 디자인 프로세스 1. 모바일 UI/UX 디자인 프로세스의 개요 2. 정보구조 설계 3. 와이어프레임 4. 프로토타이핑

3 01 UI 디자인 프로세스 모바일 UI/UX 디자인 프로세스의 개요 1 그림 5-1 UI 디자인 프로세스

4 02 UX 디자인 프로세스 모바일 UI/UX 디자인 프로세스의 개요 1 그림 5-2 Anniestudio 사의 UX 디자인 프로세스

5 01 정보구조 설계의 개념 정보구조 설계 2 정보구조 (Information Architecture) 의 설계 인터페이스 구조와 내비게이션 체계를 만드는 활동을 말한다. 1. 사용자 (User) 제공하려는 서비스를 이용할 사용자를 말하며 이들의 행동과 요구 사항을 반영 2. 콘텐츠 (Contents) 사용자가 이용하는 핵심 서비스의 크기와 형태, 구조, 조직 3. 상황 (Context) 사용자의 하드웨어적 환경, 사용자의 기대치 반영, 기술적 제약, 사업적 요구사항, 프로젝트 관리 등이 포함

6 01 정보구조 설계의 개념 정보구조 설계 2 좋은 정보구조 설계를 위한 주의 사항 1. 불필요한 정보 삭제 또는 노출 자제 2. 정보량 분산 3. 명확한 분류 기준 4. 사용자들의 생각과 행동 5. 주요 동선의 흐름

7 02 모바일에서의 정보구조 설계 정보구조 설계 2 모바일에서의 정보구조 설계는 웹에서의 환경과 크게 다르지 않음 하지만 모바일의 환경적 특성상 복잡한 정보구조는 적합하지 않음 PC 의 웹에서처럼 2 계층 이상의 메뉴를 구성하는 것은 사용자가 서비스를 이해하는 데 더욱 많은 시간을 할애해야 할 수도 있음 따라서 하위 메뉴를 최대한 줄이고 가장 사용빈도가 높은 콘텐츠를 1 계층으로 배치하는 것이 더 유용한 방법

8 02 모바일에서의 정보구조 설계 정보구조 설계 2 (a) 2 계층 이상의 메뉴 구조 (b) 1 계층 메뉴 구조 그림 5-3 계층별 메뉴 구조

9 03 정보구조의 기능 정의 정보구조 설계 2 정보구조를 설계함에 있어 기능 정의 문서를 작성하는 것도 효율적인 방법 정보구조를 구성하는 기능 정의는 각각 자신의 업무와 스타일에 맞게 제작하여 사용할 수 있는데 클라이언트가 존재하는 경우 납품 기일을 기재하거나 모바일의 경우 구현 방식을 요소에 포함할 수 있음

10 01 와이어프레임의 개념 와이어프레임 3 실제 세부 디자인을 진행하기 전에 선으로 스케치해보는 것 디자인이 제작되기 전 가장 기초적인 단계 웹 앱의 형태로 제공되는 목업 툴이 증가하면서 와이어프레임을 작성하는 방법도 다양해짐 그림 5-4 와이어프레임 (Wireframe)

11 02 와이어프레임 작성 와이어프레임 3 스텐실 기기를 본뜬 틀. 실제 크기는 아니더라도 외형이나 비율은 실제를 바탕으로 제공된다. 그림 5-5 스텐실 (Stencil)

12 02 와이어프레임 작성 와이어프레임 3 템플릿 (Template) 일반적으로 가로 화면으로 구성 왼쪽의 넓은 공간을 디자인 화면으로 활용하고 오른쪽 부분을 파일명과 설명 화면으로 정의 모바일에서는 특정 기기의 OS 에 따라 UI 가 달라질 수 있음 그림 5-6 파워포인트를 이용한 목업 템플릿 (Mockup Template) (a) 아이폰 목업 템플릿 (b) 아이패드 목업 템플릿

13 02 와이어프레임 작성 와이어프레임 3 그림 5-7 드로잉으로 제작된 와이어프레임

14 02 와이어프레임 작성 와이어프레임 3 그림 5-8 와이어프레임의 예

15 01 프로토타이핑의 개념 프로토타이핑 4 사전적으로 원형이나 견본 + 그것을 만들어 내는 행위 그림 5-9 프로토타이핑 (Prototyping)

16 02.1 종이 프로토타이핑 02 프로토타이핑의 방법 프로토타이핑 4 종이 프로토타이핑 (Paper Prototyping) 일반적으로 제품이나 서비스가 동작하는 방식을 보여주는 데 가장 빠른 방법 프로토타입은 최종 제품이 아니기 때문에 테스트 하는 동안 발견된 오류를 피드백하고 수정하는 작업을 하기에 용이 그림 5-10 종이 프로토타이핑 (Paper Prototyping)

17 02.2 디지털 프로토타이핑 02 프로토타이핑의 방법 프로토타이핑 4 디지털 프로토타이핑 (Digital Prototyping) 프로토타입 (Prototype) 툴을 사용하여 실제와 비슷한 느낌으로 페이지를 이동시킴 테스트 하는 동안 사용자들은 시스템과 상호작용하고 최종 제품과 비슷한 사용 경험을 얻을 수도 있음 종이 프로토타이핑과는 달리 상호작용이 가능

18 CACOO 웹에서 손쉽게 플로우 차트 (Flow Chart) 와 와이어프레임을 작성할 수 있는 도구 기본적인 스텐실은 무료지만 협업 기능과 공간을 확대하기 위해서는 유료 버전을 사용해야 함 와이어프레임을 작성하는 정도는 충분히 무료로 사용할 수 있음 03 와이어프레임과 프로토타이핑 제작 툴 프로토타이핑 4 그림 5-11 CACOO

19 UX 핀 (UX Pin) 와이어프레임뿐만 아니라 상호작용이 가능한 프로토타입을 만드는 웹 앱의 형태로 서비스 UI 요소 라이브러리와 디자인 요소들이 포함된 툴 킷을 제공 03 와이어프레임과 프로토타이핑 제작 툴 프로토타이핑 4 그림 5-12 UX 핀 (UX Pin)

20 아이폰 목업 (iPhone Mockup) 간단한 드래그 앤 드롭 방식으로 와이어프레임을 만들 수 있음 손 스케치 목업 버전과 스텐실 스케치 목업 버전, 두 가지로 사용 가능 03 와이어프레임과 프로토타이핑 제작 툴 프로토타이핑 4 그림 5-13 아이폰 목업 (iPhone Mockup) (a) 손 스케치 목업 버전 (b) 스텐실 스케치 목업 버전

21 POP 앱 (Prototyping on Paper App) 종이에 그린 것을 찍어서 바로 프로토타이핑을 해볼 수 있도록 도와주는 앱 시뮬레이션이 가능하므로 간단하게 사용하기에 적합 03 와이어프레임과 프로토타이핑 제작 툴 프로토타이핑 4 그림 5-14 POP 앱

22 Fluid UI 모바일 전용 프로토타이핑 툴로 웹에서 바로 조작, 구현 및 테스트할 수 있는 강력한 도구 HTML5 와 JavaScript 로 만든 웹 앱 정교하며 링크 연결 및 페이지 전환 등 상호작용 기능도 좋음 03 와이어프레임과 프로토타이핑 제작 툴 프로토타이핑 4 그림 5-15 Fluid UI