Chapter 04. 모바일 UX 의 개요. Chapter 04 모바일 UX 의 개요 1. 모바일 UX 의 현황 2. 모바일 앱의 최신 경향 3. 모바일 디자인의 최신 경향.

Presentation on theme: "Chapter 04. 모바일 UX 의 개요. Chapter 04 모바일 UX 의 개요 1. 모바일 UX 의 현황 2. 모바일 앱의 최신 경향 3. 모바일 디자인의 최신 경향."— Presentation transcript:

1 Chapter 04. 모바일 UX 의 개요

2 Chapter 04 모바일 UX 의 개요 1. 모바일 UX 의 현황 2. 모바일 앱의 최신 경향 3. 모바일 디자인의 최신 경향

3 01 모바일 환경의 특징 모바일 UX 의 현황 1 하드웨어 구성과의 연관성 사용자와 24 시간을 함께 하는 밀접성 사용자와 상호작용하는 환경 터치와 제스처, 오디오를 이용한 입력 기기가 지닌 센서를 적용하는 환경 휴대성이 극대화된 환경 모바일 전용 운영체제 탑재 그림 4-1 모바일 콘텍스트 모델 (Mobile Context Model)

4 02 모바일 앱의 종류 모바일 UX 의 현황 1 모바일 웹 (Mobile Web) 모바일 브라우저에서 구동되며 개발 기간이 짧고 업데이트나 수정 변경이 용이하며, 웹 브라우징을 통한 접근성을 가지고 있다. 네이티브 앱 (Native App) 네이티브 앱은 앱 스토어를 통해 다운로드하여 설치하며 빠른 구동 속도와 스마트폰에 최적화된 개발이 가능하다. 하이브리드 앱 (Hybrid App) 하이브리드 앱은 필수적인 요소만으로 개발이 가능하고 동적 데이터는 실시간 통신으로 가능하다. 웹 앱 (Web App) 웹 앱은 앱에서 사용할 수 있는 기능을 갖추고 있으며 어떠한 디바이스나 OS 에서도 볼 수 있도록 제작되 고 있기 때문에 마치 앱을 쓰는 것과 같은 경험을 제공한다.

5 03 모바일 UX 와 웹의 차이 모바일 UX 의 현황 1 그림 4-2 UX 구조 (UX Wheel)

6 01 모바일 콘텐츠의 특성 모바일 앱의 최신 경향 2 1 개인화 (Personalization) 사용자 개인이 설정한 모바일 기기에 따라 개인의 특성에 맞는 콘텐츠가 제공되며 개인 전용 단말 기기 의 특성상 증대된 보안성을 가지고 있음 2 편재성 (Ubiquity) 모바일 기기를 통한 이동성을 구현해 공간성의 제약을 해소하여 어디서든지 정보 검색과 통신이 가능 3 편의성 (Convenience) 하드웨어적 측면과 전송 속도의 개선 및 킬러 앱 개발과 같은 소프트웨어 측면의 진화로 정보 검색 및 통 신 부분에서의 편리성을 제공 4 차별성 (Distinction) 사용자의 이용 패턴을 분석하여 개인에게 차별화된 서비스를 제공 5 즉시연결성 (Instant Connectivity) 모바일 기기를 통해 언제 어디서나 사용자가 원하는 즉시 서비스를 이용 가능 6 지역 기반 (Localization) 위치 기반 GPS 수신기를 통해 주변의 유용한 정보 제공이 가능

7 02 모바일 콘텐츠의 생성과 분류 모바일 앱의 최신 경향 2 대칭형 콘텐츠 커뮤니케이션과 정보, 정보와 오락 등 두 종류 이상의 기능이 결합되어 교육용 게임이나 헬스케 어와 관련된 새로운 콘텐츠를 생성 비대칭형 콘텐츠 각각 고유의 형태로 결합되어 커뮤니케이션 중심의 음성통화, 화상통화 또는 정보나 오락 중심 의 게임, 만화 등으로 콘텐츠가 다시 분리되어도 고유의 기능을 할 수 있는 콘텐츠를 의미

8 03.1 위치 기반 서비스 03 모바일 서비스의 시장 분류 모바일 앱의 최신 경향 2 그림 4-3 위치 기반 서비스 (LBS) 의 구성도

9 스마트폰, 태블릿 PC, PDA 를 이용한 은행 업무, 지불 업무, 티켓 업무와 같은 서비스를 제공하는 비즈니스 모델 무선 데이터 장비를 이용하여 정보, 서비스, 상품 등을 교환하는 것 03.2 M- 커머스 03 모바일 서비스의 시장 분류 모바일 앱의 최신 경향 2 (a) M- 커머스로 처리하는 다양한 업무 (b) M- 커머스를 사용한 예시 그림 4-4 M- 커머스 (M-Commerce)

10 여러 개 (Multi) 의 채널을 전체 (Omni) 채널 관점으로 바라보고, 각 채널을 유기적으로 결합하여 소 비자에게 일관성 있는 경험을 제공하는 것을 의미 각 채널을 통합적으로 관리함으로써 일관된 고객 경험을 제공하는 것 03.3 옴니 채널 03 모바일 서비스의 시장 분류 모바일 앱의 최신 경향 2 그림 4-5 옴니 채널 (Omni-Channel)

11 각종 사물에 센서와 통신 기능을 내장하여 인터넷에 연결하는 기술을 의미 사물이란 가전제품, 모바일 장비, 웨어러블 컴퓨터 등 다양한 임베디드 (Embeded) 시스템 안드로이드웨어, 샤오미의 미밴드, 바코드 스캐닝과 아마존 대시나 드론 등이 대표적인 예 03.4 사물 인터넷 03 모바일 서비스의 시장 분류 모바일 앱의 최신 경향 2 (a) 가정에서 사용하는 사물 인터넷 (b) 아마존 대시 (Amazon Dash) https://www.youtube.com/watch?v=fUyUNjyC6Qswww.youtube.com/watch?v=fUyUNjyC6Qs

12 03.4 사물 인터넷 03 모바일 서비스의 시장 분류 모바일 앱의 최신 경향 2 (c) 안드로이드웨어 (Android wear)(d) 미밴드 (Mi Band) 그림 4-6 사물 인터넷 (Internet of Things) (e) 아이와치 (iWatch)(f) 드론 (Drone)

13 인터넷상의 유틸리티 데이터 서버에 프로그램을 두고 필요할 때 컴퓨터나 휴대폰 등에 불러와서 사용하는 웹 기반 소프트웨어 서비스 개인이 가진 단말기를 통해서는 주로 입출력 작업만 이루어지고, 정보 분석 및 처리, 저장, 관리, 유통 등의 작업은 클라우드라고 불리는 제 3 의 공간에서 이루어지는 컴퓨팅 시스템 형태 03.5 클라우드 컴퓨팅 03 모바일 서비스의 시장 분류 모바일 앱의 최신 경향 2

14 스큐모피즘 (Skeuomorphism) 은 다양한 해상도의 기기들에서 일관된 느낌을 전달하기가 어렵고 콘텐츠를 보여주기에는 효율적이지 않으며 그래픽 요소의 과다한 사용으로 인해 비용적인 측면 에서도 대안이 필요하게 되었다. 01.1 플랫 디자인 그림 4-8 스큐모픽 디자인 (Skeuomorphic Design) 01 플랫 디자인과 머티리얼 디자인 모바일 디자인의 최신 경향 3

15 입체적인 기능의 복잡한 요소를 배제하고 기본적인 요소들인 레이아웃과 대비 색상 폰트 등을 이 용하여 디자인한 것 01.1 플랫 디자인 그림 4-9 구글과 마이크로소프트의 플랫 디자인 (Flat Design) 01 플랫 디자인과 머티리얼 디자인 모바일 디자인의 최신 경향 3 (a) 구글의 플랫 디자인 (b) MS Windows 8 의 플랫 디자인

16 물질의 질감이나 광원 효과, 그림자 효과 등을 통해 깊이를 더한 것으로 디자인보다는 단순하고 편리한 기술 개발에 주력했던 구글이 디자인을 중점으로 개편하면서 발표한 것 머티리얼 디자인의 원리 : 메타포 (Metaphor), 뚜렷한 그래픽 (Bold, Graphic, Intentional), 의미 있 는 움직임 (Motion provides meaning) 01.2 머티리얼 디자인 그림 4-10 구글의 머티리얼 디자인 (Material Design) 01 플랫 디자인과 머티리얼 디자인 모바일 디자인의 최신 경향 3

17 · 메타포 · 뚜렷한 그래픽 · 의미 있는 움직임 01.2 머티리얼 디자인 그림 4-11 메타포 (Metaphor) 01 플랫 디자인과 머티리얼 디자인 모바일 디자인의 최신 경향 3 그림 4-12 뚜렷한 그래픽 (Bold, Graphic, Intentional) 그림 4-13 의미 있는 움직임 (Motion provides meaning)

18 빅 폰트 (Big Font) 전체 화면을 이미지나 영상으로 하는 디자인은 심플함을 추구하는데, 심플한 인터페이스에 빅 폰트를 이용하면 군더더기를 빼면서 심플한 화면 유지 가능 패럴렉스 스크롤링 (Parallax Scrolling) 시간차를 두고 스크롤에 따라 오브젝트와 배경 이미지가 이동하면서 변하는 방식 02 빅 폰트와 패럴렉스 스크롤링 모바일 디자인의 최신 경향 3 그림 4-14 빅 폰트 (Big Font) 와 패럴렉스 스크롤링 (Parallax Scrolling) https://www.youtube.com/watch?v=HnLyU3WDDVQ

19 그리드 (Grid) 형 레이아웃을 기반으로 한 디자인 구글 나우 (Google now) 나 핀터레스트 (Pinterest) 에서 사용하고 있음. 모듈 방식으로 정렬하여 각 항목을 쉽게 볼 수 있음 03 카드 디자인 모바일 디자인의 최신 경향 3 그림 4-15 카드 디자인 (Card Design) 의 사용 예

20 스크린을 한 손가락 또는 여러 손가락으로 터치하여 여러 가지 다양한 조작을 할 수 있는 행동 04 터치 제스처 모바일 디자인의 최신 경향 3 그림 4-16 모바일 기기에서의 터치 범위

21 04 터치 제스처 모바일 디자인의 최신 경향 3 (a) 스마트 폰의 내비게이션 (b) 태블릿 PC 의 예 그림 4-17 터치 UI 의 영역

22 탭 (Tap) 화면을 한 손가락으로 짧고 가볍게 두드리는 제스처로 주로 컨트롤이나 아이 템을 실행하고 선택하기 위한 기본 동작 더블 탭 (Double tap) 화면을 재빨리 두 번 두드리는 제스처로 화면을 축소 또는 확대하거나 현재의 화면에서 빠져 나오는 역할 04 터치 제스처 모바일 디자인의 최신 경향 3 그림 4-19 탭 (Tap) 그림 4-20 더블 탭 (Double tap)

23 프레스 (Press) 주로 메뉴나 팝업과 같은 화면의 요소 (Component) 를 나타나게 하거나 글씨 를 확대 또는 복사하기 위한 용도로 사용 팬 (Pan) 손가락을 떼지 않고 길게 끄는 동작으로, 움직이는 방향이나 시간 제한은 없 으며 손가락을 뗄 때까지 패닝 (Panning) 으로 인식 04 터치 제스처 모바일 디자인의 최신 경향 3 그림 4-21 프레스 (Press) 그림 4-22 팬 (Pan)

24 드래그 (Drag) 화면의 특정 오브젝트를 손가락으로 길게 끄는 동작으로, 아이템을 개별 이동 할 때 사용 스와이프 (Swipe) 한 손가락을 화면 위에 터치한 상태에서 일정 거리를 움직이며 손가락을 쓰는 동작 04 터치 제스처 모바일 디자인의 최신 경향 3 그림 4-23 드래그 (Drag) 그림 4-24 스와이프 (Swipe)

25 플릭 (Flick) 화면 이동이나 페이지 넘김에 사용하며 손가락을 터치하면서 수평 또는 수직 방향으로 빠르게 스크롤 하는 동작 핀치 (Pinch) 두 손가락을 다른 방향으로 벌리거나 오므리는 동작으로 화면 확대나 축소에 사용 04 터치 제스처 모바일 디자인의 최신 경향 3 그림 4-25 플릭 (Flick) 그림 4-26 핀치 (Pinch)

26 04 터치 제스처 모바일 디자인의 최신 경향 3

27 04 터치 제스처 모바일 디자인의 최신 경향 3