Transcript
Page 1: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

모바일 스크린 디자인하기

10 Principles

for Mobile Design

다음커뮤니케이션 UX2팀 | 김기성

1

Page 2: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

2

Page 3: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

ericsson-mobility-report-november-2013

3

Page 4: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

MOBILE: 이동하기[움직이기] 쉬운,

가동성의, 고정되어 있지 않은

4

Page 5: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

CONTEXT

DEVICE

INTER- ACTION

5

Page 6: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

CONTEXT

Immersion

6

Page 7: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

CONTEXT

Both Hands Connectivity

7

Page 8: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

CONTEXT

Lean Back

8

Page 9: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

DEVICE 9

Page 10: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

DEVICE

근접센서

10

Page 11: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

DEVICE

가속도 센서

11

Page 12: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

DEVICE 12

Page 13: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

DEVICE 13

Page 14: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

DEVICE 자이로센서

14

Page 15: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

INTERACTION 15

Page 16: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

INTERACTION 16

Page 17: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

INTERACTION 17

Page 18: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

INTERACTION 18

Page 19: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

모바일 스크린 디자인 원칙

10 Principles

for Mobile Design

19

Page 20: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

1. DIET INFORMATION 정보 다이어트 하기

Page 21: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

PARETO'S LAW 전체 결과의 80%가 전체 원인의 20%에서 일어나는 현상

예를 들어, 20%의 고객이 백화점 전체 매출의 80%에 해

당하는 만큼 쇼핑하는 현상을 설명할 때 이 용어를 사용

할 수 있음. 2 대 8 법칙이라고도 함.

21 DIET INFORMATION

Page 22: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

PC

Powerful Features

Mobile

Essential Features

Basic & Intuitive

Basic Function

Intuitive Structure

Powerful & Detail

Powerful Editing

Detail Management Tool

DIET INFORMATION

22

Page 23: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

DIET INFORMATION

23

Page 24: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Desk-top

편지쓰기, 전체선택 , 새로고침, 편지함, 검색, 별표기,

답장, 전달, 삭제, 이동, 내게쓰기, 스팸차단, 환경설정,

상세검색, 스팸클리너, 첨부파일, 문자보관함, 탭구조, 사용량

DIET INFORMATION

24

Page 25: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Desk-top

편지쓰기, 전체선택 , 새로고침, 편지함, 검색, 별표기,

답장, 전달, 삭제, 이동, 내게쓰기, 스팸차단, 환경설정,

상세검색, 스팸클리너, 첨부파일, 문자보관함, 탭구조, 사용량

DIET INFORMATION

25

Page 26: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

DIET INFORMATION

26

Page 27: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Desk-top

Mobile

편지쓰기, 전체선택 , 새로고침, 편지함, 검색, 별표기,

답장, 전달, 삭제, 이동, 내게쓰기, 스팸차단, 환경설정,

상세검색, 스팸클리너, 첨부파일, 문자보관함, 탭구조, 사용량

편지쓰기, 전체선택 , 새로고침, 편지함, 검색, 별표기,

답장, 전달, 삭제, 이동, 내게쓰기, 스팸차단, 환경설정,

상세검색, 스팸클리너, 첨부파일, 문자보관함, 탭구조, 사용량

DIET INFORMATION

27

Page 28: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

2. REDUCE DRILL DOWN 정보의 단계 줄이기

Page 29: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

STROLLING AROUND 주변의 다양한 방해요소들(Distractions)으로 인해

넓고 깊은 구조를 가지는 PC의 메뉴구조에 비해

모바일은 좁고 얕은 구조를 가지는 것이 사용자들이

작은 화면에서 좀 더 쉽게 정보에 접근할 수 있는

방법일 수 있음.

29 REDUCE DRILL DOWN

Page 30: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

PC

Broad Menu

Structure

Mobile

Narrow Menu

Structure

Narrow & Shallow

Tab menu

Vertical Menu Layout

Sidebar

3~5 menu

Broad & Deep

Breadcrumb

Static Menu Layout

5~9 menu

REDUCE DRILL DOWN

30

Page 31: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Top Level View

Category View

Detail/Edit View

REDUCE DRILL DOWN

31

Page 32: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Top Level View

REDUCE DRILL DOWN

32

Page 33: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Category View

REDUCE DRILL DOWN

33

Page 34: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Detail/Edit View

REDUCE DRILL DOWN

34

Page 35: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Top Level View Category View Detail/Edit View

REDUCE DRILL DOWN

35

Page 36: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Top Level View Category View Detail/Edit View

REDUCE DRILL DOWN

36

Page 37: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

3. CONTENTS OVER NAVIGATION 내비게이션 보다는 콘텐츠에 집중하기

Page 38: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

OCCAM'S RAZOR 모바일의 작은 화면에서는 복잡한 내비게이션

메뉴보다 콘텐츠에 먼저 집중할 수 있도록 간결

한 구성을 하는 것이 사용자가 원하는 정보에 더

빨리 접근할 수 있는 방법이다.

CONTENTS OVER NAVIGATION

Page 39: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Contents > Navi

Emphasize contents

Pivot and Explore

Contextual Navigation menus

Contents < Navi

Lots of Navigation type

A number of Menu

PC

Rich Navigation

Mobile

Essential Navigation

CONTENTS OVER NAVIGATION

39

Page 40: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

다음카페

퀵 & 슬라이드 기능으로 가고 싶은 게시판으로의 빠른 이동 제공

CONTENTS OVER NAVIGATION

40

Page 41: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

위드 WITH

화보처럼 보여지는 나의 일상 플릭 한번으로 이어지는 콘텐츠 소비

CONTENTS OVER NAVIGATION

41

Page 42: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

* 미디어 다음

Dive Deeper

Pivot Contents

다음앱

콘텐츠 소비를 유지시켜줄 수 있도록 Depth를 타고 들어 갈 수 있고 (Dive Deeper) 또 다른 카테고리로 쉽게 이동(Povot Contents) 할 수 있어야 함.

CONTENTS OVER NAVIGATION

42

Page 43: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

4. FOCUS ON PRIMARY TASK 주요 과업에 집중하기

Page 44: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

STEP BY STEP 작은 화면을 지닌 모바일에서는 한번에 하나의 Task를 보여줄 수 있도록 함.

멀티태스킹은 백그라운드 앱의 트랜지션을 통해 활용.

FOCUS ON PRIMARY TASK

Page 45: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

PC

Multi -Task

Mobile

Single -Task

Compact Screen

Single-Window

Primary Information

Big Screen

Multi-Window

Various Information

FOCUS ON PRIMARY TASK

45

Page 46: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

FOCUS ON PRIMARY TASK

46

Page 47: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

FOCUS ON PRIMARY TASK

47

Page 48: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

FOCUS ON PRIMARY TASK

48

Page 49: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

FOCUS ON PRIMARY TASK

49

Page 50: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

FOCUS ON PRIMARY TASK

50

Page 51: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

FOCUS ON PRIMARY TASK

51

Page 52: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

FOCUS ON PRIMARY TASK

52

Page 53: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

5. ECONOMIZE LABOR 번거로운 입력 줄이기

Page 54: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

REAL NATURE 인간은 본성적으로 귀찮은 것을 싫어하는 존재,

작은 화면에서 줄 수 있는 입력의 오류를 최소화 하는 방법에 대한

고민이 필요함. 모바일에서는 입력하는 Context에 대한 인지,

그리고 모바일 기기의 특성을 이용하는 것을 항상 고려해야 함.

54 ECONOMIZE LABOR

Page 55: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

* Southwest Airlines website

Difficult Input

Mobile Device

Short input

Using Smart Sensors

Easy to Write

Static Location

Fast Input

Extra Peripherals

ECONOMIZE LABOR

PC

Easy Input-

Method

Mobile

Difficult Input-

Method

55

Page 56: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

ECONOMIZE LABOR

56

Page 58: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

ECONOMIZE LABOR

58

Page 59: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

ECONOMIZE LABOR

59

Page 60: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

ECONOMIZE LABOR

60

Page 61: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

6. KEEP CONTENTS SEAMLESSLY 콘텐츠의 연속성을 유지하기

Page 62: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

SEAMLESS 어떤 형태의 모드에서라도 소비하는 콘텐츠에 끊김 없이 집

중할 수 있어야 함. 디바이스가 변경되어도 스크린 사이즈가

변경되더라도 콘텐츠 소비의 연속성을 유지하고 화면구성의

변화를 통해 상황에 맞는 이점(Benefit)을 만들어 내야 함.

62 KEEP CONTENTS SEAMLESSLY

Page 63: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

PC

Mass Contents

Mobile

Light Contents

Short Contents

Broken Consumtion

Long Contents

In-Depth Contents

KEEP CONTENTS SEAMLESSLY

63

Keep Contents Experience

Page 64: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

KEEP CONTENTS SEAMLESSLY

64

Page 65: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

KEEP CONTENTS SEAMLESSLY

65

Page 66: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

KEEP CONTENTS SEAMLESSLY

66

Page 67: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

KEEP CONTENTS SEAMLESSLY

67

Page 68: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

KEEP CONTENTS SEAMLESSLY

68

Page 69: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

7. DESIGN FOR INPUT METHOD 입력방식에 맞추어 화면 디자인하기

Page 70: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

FITT'S LAW 목표까지 움직이는데 필요한 시간은 목표크기와

목표거리까지의 함수이다.

70 DESIGN FOR INPUT METHOD

Page 71: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Natural Input

Finger based

Bigger Target

Detail Input

Keyboard / Mouse based

Small Target

PC

Mouse Keyboard

Mobile

Finger

DESIGN FOR INPUT METHOD

71

Page 72: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

* Microsoft Windows8 Interface Guideline DESIGN FOR INPUT METHOD

72

Page 73: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

* Microsoft Windows8 Interface Guideline DESIGN FOR INPUT METHOD

73

Page 74: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

* Microsoft Windows8 Interface Guideline DESIGN FOR INPUT METHOD

74

Page 75: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

DESIGN FOR INPUT METHOD

75

Page 76: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

DESIGN FOR INPUT METHOD

76

Page 77: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

* Mobile Frontier DESIGN FOR INPUT METHOD

77

Page 78: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

REACH

OK

Disruptive Action

(Cancel/Delete)

Left to Right Arrangement

* Mobile First

EASY

Primary Action/ Navigation

DESIGN FOR INPUT METHOD

78

Page 79: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

OK

EASY

REACH

DESIGN FOR INPUT METHOD

79

Page 81: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

DESIGN FOR INPUT METHOD

81

http://www.viddler.com/v/a2f0f1be

Page 82: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

DESIGN FOR INPUT METHOD

82

Page 83: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

DESIGN FOR INPUT METHOD

83

Page 84: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

8. SELECT OPTIMAL USER INTERFACE 올바른 사용자 인터페이스 선택하기

Page 85: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

MENTAL MODEL 사람들은 경험을 통해 축적한 개념화를

토대로 시스템이나 환경을 이해하고

이들과 상호작용을 한다.

SELECT OPTIMAL USER INTERFACE

Page 86: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

PC

GUI

Mobile

NUI

Touch Interaction

Touch

- Tap / Double Tap

- Pinch In/Out

- Flick / Swipe

Click Interaction

Pointer

- Click / Hover

- Selecting / Dragging

- etc.

SELECT OPTIMAL USER INTERFACE

86

Page 87: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

PC Action (Mouse) Mobile Action (Touch)

Pointing X

Hovering X

Clicking Tap

Double Clicking Double Tap

Triple Clicking Triple Tap

Selecting Tap

Pressing Press

Wheeling Flick

Drag Press and Drag

X Rotate

X Pinch

X Multi-finger Gesture …

SELECT OPTIMAL USER INTERFACE

87

Page 88: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Desk-top

Mobile

SELECT OPTIMAL USER INTERFACE

88

Page 89: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Desk-top Mobile

SELECT OPTIMAL USER INTERFACE

89

Page 90: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

SELECT OPTIMAL USER INTERFACE

90

Page 91: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

9. CHOOSE NATURAL TRANSITION 자연스러운 변화(Transition) 선택하기

Page 92: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

92

Mapping 제어장치와 효과 간의 관계.

핸들을 돌리거나 스위치를 올리거나 버튼을 누를 때

기대하는 효과가 사람들의 기대와

비슷할 때 매핑이 잘되었다고 하며 효과가

기대와 다를 때 매핑이 나쁘다고 한다.

배치, 움직임, 의미의 유사성을 통해 좋은 대응관계를

만드는 것이 중요하다.

CHOOSE NATURAL TRANSITION

Page 93: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

PC

Pointer

Mobile

Gesture

Real Gesture-mapping

Tap / Pinch In / Out

Rotate, Throw, Blow, etc.

Pointer-mapping

Move, Click, Double Click,

Hover, Drag, etc.

CHOOSE NATURAL TRANSITION

93

Page 94: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

94

Page 95: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Gesture Transition Description Gesture Usage

Press

Quick Change

애니메이션 없이 View변경 2개의 다른 타입의 툴이나 콘텐츠가

변환될 때 이용

Expand

스크린 상의 아이템이 콘텐츠를

밀어내며 확장

스크린 내 콘텐츠의 리스가 확장될

때 이용

Flip

마치 뒷면에 다른 View가 있는

것처럼 돌아가는 인터랙션

추가적인 설정, 정보를 보여주는 경

우 이용

CHOOSE NATURAL TRANSITION

95

Page 96: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Gesture Transition Description Gesture Usage

Press

Open to full screen

스크린상 아이템이 열려 전체 화

면으로 확장

아이템을 열거나 보고 있을 때 이용,

이 Transition은 아이템을 닫을 때

반대로 이용

Swipe

Horizontal slide along

스크린 상 이전 뷰를 밀어내고 새

로운 뷰가 좌 혹은 우로 슬라이드

새롭거나 관련된 콘텐츠를 보기위해

목록을 선택한 경우, 혹은 이전 스크

린에서 돌아가는 경우 이용

Horizontal slide over

새로운 뷰가 좌/우로 슬라이드 추가적인 콘텐츠를 보는 경우 이용

CHOOSE NATURAL TRANSITION

96

Page 97: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

* Daum App Page Transition – Horizontal Slide along CHOOSE NATURAL TRANSITION

97

Page 98: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

* Daum App Setting – Modal View CHOOSE NATURAL TRANSITION

98

Page 99: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

* Daum App Today Widget – Flip CHOOSE NATURAL TRANSITION

99

Page 100: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

10. SHOW EMOTIONAL ANIMATION 감성적인 애니메이션 보여주기

Page 101: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

MIMICRY 자연세계에서 일어나는 다양한 환경, 행동

들로 부터 사용성을 향상시키기 위해 일부

특징들을 따라 하는 행위

SHOW EMOTIONAL ANIMATION

Page 102: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

PC

Static

Mobile

Rich

Personal Context

Natural Context

Life on Device

Browser / App Type

Public Area

Static / Fixed Context

Browser Dependency

SHOW EMOTIONAL ANIMATION

102

Page 103: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

SLOW IN AND OUT

SHOW EMOTIONAL ANIMATION

103

Page 104: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

SHOW EMOTIONAL ANIMATION

104

Page 105: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

ANTICIPATE

SHOW EMOTIONAL ANIMATION

105

Page 106: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

SHOW EMOTIONAL ANIMATION

106

Page 107: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

SECONDARY ACTION

SHOW EMOTIONAL ANIMATION

107

Page 108: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

SHOW EMOTIONAL ANIMATION

108

Page 109: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

SUMMARY

Page 110: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

1. DIET INFORMATION | 정보 다이어트 하기

2. REDUCE DRILL DOWN | 정보의 단계 줄이기

3. CONTENTS OVER NAVIGATION | 내비게이션 보다는 콘텐츠에 집중하기

4. FOCUS ON PRIMARY TASK | 주요 과업에 집중하기

5. ECONOMIZE LABOR | 번거로운 입력 줄이기

6. KEEP CONTENS SEAMLESSLY | 콘텐츠의 연속성을 유지하기

7. DESIGN FOR INPUT METHOD | 입력방식에 맞추어 화면 디자인하기

8. SELECT OPTIMAL USER INTERFACE | 올바른 사용자 인터페이스 선택하기

9. CHOOSE NATURAL TRANSITION | 자연스러운 변화(Transition) 선택하기

10. SHOW EMOTIONAL ANIMATION | 감성적인 애니메이션 보여주기

Page 111: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Mobile은 PC의 축소판?

111

Page 112: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

Mobile에 대한

명확한 이해를 통해

1. 정보구조는 콘텐츠에 집중할 수 있도록 간결화 하고

2. 인터페이스는 콘텐츠 소비에 순차적으로 끊김이 없어야 하며

3. 인터랙션은 자연스런 동작을 통해 콘텐츠 이동에 도움을 주어야 함

112

Page 113: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

“New Rule is

Mobile First” Eric Schmidt, Google CEO

113

Page 114: 모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

감사합니다. [email protected]

@pentaxzs


Recommended