Mobile Design Pattern
모바일 UX 디자인시 알아야 할 패턴들
UX1 | UX Design Consulting Firm
Most Distinctive & Creative UX Design Company
NOTICE: Proprietary and Confidential
This material is proprietary to UX1
It contains trade secret and confidential information which is solely the property of UX1
This material is for client’s internal use only. It shall not be used, reproduced, copied, disclosed, transmitted,
in whole or in part, without the express consent of UX1
ⓒ 2014 UX1. All rights reserved.

2This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Pattern은 Design에
영감(Inspiration)을
불어 넣는다

3This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
모바일 IA 패턴

4This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
참고: Designing for mobile by Elaine
Information Architecture > 1.1. 기본적인 정보 탐색 패턴
사용자들은 정보를 탐색하는 목적에 따라서 탐색하는 방식도 달라지기 마련이다. IA 설계에 있어서 가장 기본적인 사
항은 컨텐츠/정보의 형태와 구성과 더불어 사용자들의 정보 탐색 패턴을 발견하는 일이다.
Source : Louis Rosenfeld

5This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
참고: Designing for mobile by Elaine
Information Architecture > 1.1. 기본적인 정보 탐색 패턴
IA GURU인 피터 모빌은 2010년에 출간한 [Search Pattern]을 통해서 다음과 가튼 7가지 기본 정보 탐색 패턴이 있
다고 하였다
SOURCE : Search Patterns.Peter Moville. 2010
We search to find results
We ask to find answers
We use filters so the right stuff finds us
Browsing involves wandering and wayfinding
We flow between modes

6This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
참고: Designing for mobile by Elaine
Information Architecture > 1.2. 모바일 정보 탐색 패턴
모바일은 그 경험의 특성상 복잡한 이동보다는 특정 화면을 중심으로 정보를 찾아들어갔다가 나올 때에는 단순한 행
위 또는 메타포를 반복적으로 선택하는, 간결한 정보 탐색 패턴이 대다수이다
SOURCE : www.lamarca.ca SOURCE : unideal.net

7This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
참고: Designing for mobile by Elaine
Information Architecture > 1.2. 모바일 정보 탐색 패턴
그러나 모바일은 컨텍스트나 기기 자체가 실제 환경에 기반한다는 특징 때문에 다음과 같이 PC에서는 찾아볼 수 없는
복잡한 탐색이 존재하기도 한다.
I’m Here
다른 사용자의 공간으로 이동
Rewind
Zoom out
Forward
Zoom in
실제 ↔ 가상
Jumping

8This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
참고: Designing for mobile by Elaine
Information Architecture > 1.3. SNS에서의 정보 탐색 패턴
SNS는 물리적인 컨텐츠보다는 사용자와 그들의 행위, 다른 사용자와의 관계/교류방식, 이를 뒷받침하는 시스템 기능
이 중요하기 때문에 사용자(Self), 행위들(Activities), 관계/교류방식(Community)의 3가지 요소가 가장 기본적이
며, 이들을 둘러 싼 여러가지 패턴들에 의해서 서비스 형상이 결정된다
SOURCE : Social Web Systems Common Model, Alberto San José

9This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
참고: Designing for mobile by Elaine
Information Architecture > 1.4. Hierachy
메인 화면에서 출발하여 각 서브 메인 및 하위 페이지들까지 계층적으로 접근하는 방식. (웹 IA와 유사). 메뉴가 복잡
할 경우에는 사용자들의 탐색 흐름이 끊길 수 있는 위험이 존재

10This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Information Architecture > 1.5. Hub & Spoke
메인 화면을 중심으로 페이지들이 연결되어 있음. 메뉴가 복잡하지 않아서 사용자들이 쉽게 탐색할 수 있다. 다음에
나오는 Nested doll과 짝을 이루는 경우가 많다. 그러나 메뉴가 복잡할 경우 메인화면의 부담이 지나치게 가중될 수
있다. 그래서 좌/우측에 숨겨진 확장메뉴를 추가로 배치하여 문제점을 보완한다
참고: Designing for mobile by Elaine

11This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Information Architecture > 1.6. Nested doll
메인 화면에서 순차적으로 정보를 탐색해 들어갔다가 다시 역순으로 바깥으로 나오는 패턴. 순차적인 구조(Linear)로
인해 사용자들이 쉽게 탐색 경로를 예측하고 되돌이킬 수 있다는 장점이 있는 반면 탐색 중간에 다른 경로로 이동할
수 없다는 단점이 있다.
참고: Designing for mobile by Elaine

12This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Information Architecture > 1.7. Tabbed view
화면내 상시적으로 노출된 Tab 메뉴를 클릭해서 각 정보들을 탐색하는 방식. 이때 Tab 메뉴는 글로벌 네비게이션을
담당하고 해당 메뉴내 탐색은 Hub & Spoke나 Nested doll 패턴을 이용하는 경우가 많다. 앱초창기에 많이 쓰였고 지
금도 여러 앱에서 찾아볼 수 있는 패턴이지만 UI 표현에 제약을 가한다는 단점이 있다
참고: Designing for mobile by Elaine

13This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Information Architecture > 1.8. Dashboard
도시락(Bento box) 패턴이라고도 하며 메인화면내 모듈 단위의 정보가 여러 개 노출되어 있어서 보다 상세한 정보를
보려고 할 경우 각 상세페이지에 들어가게 되는 패턴이다. Hub & Spoke와 유사하며 테블릿에 많이 활용된다
참고: Designing for mobile by Elaine

14This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
모바일 IxD 패턴

15This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.1. Gestures
모바일에서 사용자의 조작에 따른 가장 기본적인 7가지 인터렉션 패턴
참고: Designing for mobile by Elaine
Tab Long Tab Double Tab Small Swipe Large Swipe Pich/Spread

16This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.2. Transitions
탭을 했을 때 나타나는 인터렉션의 변화(Trasitions)
참고: Designing for mobile by Elaine
Quick Change Expand Flip
Open to Full Screen

17This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.2. Transitions
Swipe을 했을 때 나타나는 인터렉션의 변화(Trasitions)
참고: Designing for mobile by Elaine
Horizontal slide along Horizontal slide over

18This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.2. Transitions
참고: Designing for mobile by Elaine
Animated Scrolling Contextual Change

19This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.3. Call to Actions
참고: Designing for mobile by Elaine

20This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.4. Contextual Tools
참고: Designing for mobile by Elaine

21This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.5. Inline Actions

22This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.6. Multi-state Buttons

23This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.7. Dialog Invitations

24This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.8. Tip Invitations

25This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.9. Tour Invitations

26This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.10. Transparency Invitations

27This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.11. Constraints

28This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.12. Direct Contact

29This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.11. Ratation
참고: Designing for mobile by Elaine

30This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.12. Autonomy
참고: Designing for mobile by Elaine

31This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Interaction Design > 2.13. Feedback
참고: Designing for mobile by Elaine

32This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
모바일 UI 패턴

33This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
3. Navigation > 3.1. Springboard
참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil

34This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
3. Navigation > 3.2. List Menu
참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil

35This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
3. Navigation > 3.3. tab Menu
참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil

36This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
3. Navigation > 3.4. Gallery
참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil

37This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
3. Navigation > 3.5. Dashboard
참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil

38This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
3. Navigation > 3.6. Metaphor
참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil

39This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
3. Navigation > 3.7. Mega menu
참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil

40This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
3. Navigation > 3.8. Page Carousel
참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil

41This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
3. Navigation > 3.9. Image Carousel
참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil

42This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
3. Navigation > 3.10. Tool bar

43This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
3. Navigation > 3.11. Option Menu