에코노베이션에서 진행중인 모바일 UX 검증을 위한 프로토타입 개발 강의의 교안입니다. HTML5, CSS3, JQ, JQUI, JQM을 활용한 실무예제 코드는 이후 별도의 사이트링크로 공유예정입니다.

1. Mobile UX Prototype
모바일 UX 프로토타입
HTML5를 홗용한 프로토타이핑
ECONOVATION | 동 준 상 강사 naebon1@gmail.com
1

2. Mobile UX Prototype
모바일 UX 프로토타입
위너스랩 UX디자인 팀장
동 준 상 (naebon1@gmail.com)
Lecture Project
에코노베이션 두산그룹 모바일 프로젝트
삼성멀티캠퍼스 삼성중공업 모바일 프로젝트
T 아카데미 중소기업청, 교직원공제회 +
저술 : 모바일 UX디자인, 모바일 프로토타입 개발
번역 : HTML5 Multimedia Development(에이콘), jQuery UI 1.8(에이콘)
2

3. 타겟 디바이스에서의 사용성 검증을 위한
목차
모바일 UX 프로토타입 개발
01 Why 모바일 프로젝트에서 프로토타입 개발 이유
02 Plan 제작계획 명세서, 정보구조도, 와이어프레임
03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인
04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑
05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스
06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징
4

4. 타겟 디바이스에서의 사용성 검증을 위한
목차
모바일 UX 프로토타입 개발
01 Why 모바일 프로젝트에서 프로토타입 개발 이유
02 Plan 제작계획 명세서, 정보구조도, 와이어프레임
03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인
04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑
05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스
06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징
5

5. 타겟 디바이스에서의 사용성 검증을 위한
목차
모바일 UX 프로토타입 개발
01 Why 모바일 프로젝트에서 프로토타입 개발 이유
02 Plan 제작계획 명세서, 정보구조도, 와이어프레임
03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인
04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑
05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스
06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징
6

6. 타겟 디바이스에서의 사용성 검증을 위한
목차
모바일 UX 프로토타입 개발
01 Why 모바일 프로젝트에서 프로토타입 개발 이유
02 Plan 제작계획 명세서, 정보구조도, 와이어프레임
03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인
04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑
05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스
06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징
7

7. 타겟 디바이스에서의 사용성 검증을 위한
목차
모바일 UX 프로토타입 개발
01 Why 모바일 프로젝트에서 프로토타입 개발 이유
02 Plan 제작계획 명세서, 정보구조도, 와이어프레임
03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인
04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑
05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스
06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징
8

8. 타겟 디바이스에서의 사용성 검증을 위한
목차
모바일 UX 프로토타입 개발
01 Why 모바일 프로젝트에서 프로토타입 개발 이유
02 Plan 제작계획 명세서, 정보구조도, 와이어프레임
03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인
04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑
05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스
06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징
9

9. 타겟 디바이스에서의 사용성 검증을 위한
목차
모바일 UX 프로토타입 개발
01 Why 모바일 프로젝트에서 프로토타입 개발 이유
02 Plan 제작계획 명세서, 정보구조도, 와이어프레임
03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인
04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑
05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스
06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징
10

10. 01 Mobile UX Prototyping
프로토타입의 필요성 | Why?
개발목적에 따른 프로토타입 붂류
Idea < Description < Mockup < Prototype
Agile Project – more frequent iteration
11

11. 01 Mobile UX Prototyping
프로토타입의 필요성 | Why?
개발목적에 따른 프로토타입 붂류
Idea < Description < Mockup < Prototype
Agile Project – more frequent iteration
12

12. 01 Mobile UX Prototyping
프로토타입의 필요성 | Why?
개발목적에 따른 프로토타입 붂류
Idea < Description < Mockup < Prototype
Agile Project – more frequent iteration
13

13. 01 Mobile UX Prototyping
프로토타입의 필요성 | Why?
개발목적에 따른 프로토타입 붂류
Idea < Description < Mockup < Prototype
Agile Project – more frequent iteration
14

14. 01 모바일 프로젝트에서 프로토타입의 필요성
한 장의 사진이 천마디 말보다 낫다.
A picture is worth a thousand words
하나의 프로토타입이 천장의 사진보다 낫다.
A prototype is worth a thousand pictures
15

15. 01 모바일 프로젝트에서 프로토타입의 필요성
한 장의 사진이 천마디 말보다 낫다.
A picture is worth a thousand words
하나의 프로토타입이 천장의 사진보다 낫다.
A prototype is worth a thousand pictures
16

16. 01 모바일 프로젝트에서 프로토타입의 필요성
한 장의 사진이 천마디 말보다 낫다.
A picture is worth a thousand words
하나의 프로토타입이 천장의 사진보다 낫다.
A prototype is worth a thousand pictures
Testable, early version of an idea
17

17. 01 모바일 프로젝트에서 프로토타입의 필요성
프로토타입 제작 목적
To answer questions and generate new ones
Validate your assumptions
Compare alternatives
Fail early and cheaply
To Visualize your ideas and share them with others
18

18. 01 모바일 프로젝트에서 프로토타입의 필요성
프로토타입 제작 목적
To answer questions and generate new ones
Validate your assumptions
Compare alternatives
Fail early and cheaply
To Visualize your ideas and share them with others
19

19. 01 모바일 프로젝트에서 프로토타입의 필요성
프로토타입 제작 목적
To answer questions and generate new ones
Validate your assumptions
Compare alternatives
Fail early and cheaply
To visualize your ideas and share them with others
20

20. 01 모바일 프로젝트에서 프로토타입의 필요성
프로토타입 제작 목적
To answer questions and generate new ones
Validate your assumptions
Compare alternatives
Fail early and cheaply
To visualize your ideas and share them with others
아이디어의
시각화
21

21. 01 모바일 프로젝트에서 프로토타입의 필요성
프로토타입 제작 목적
To answer questions and generate new ones
Validate your assumptions
Compare alternatives
Fail early and cheaply
To visualize your ideas and share them with others
아이디어의 문제제기
시각화 가설검증
22

22. 01 모바일 프로젝트에서 프로토타입의 필요성
프로토타입 제작 목적
To answer questions and generate new ones
Validate your assumptions
Compare alternatives
Fail early and cheaply
To visualize your ideas and share them with others
아이디어의 문제제기 대안검토
시각화 가설검증 학습효과
23

23. 01 모바일 프로젝트에서 프로토타입의 필요성
개발목적에 따른 붂류
24

24. 01 모바일 프로젝트에서 프로토타입의 필요성
개발목적에 따른 붂류
아이디어, 컨셉을 젂달하기 위한 프로토타입
성능, 기능, 디자인을 검증하기 위한 프로토타입
비즈니스 모델에 대한 수요예측을 위한 프로토타입
25

25. 01 모바일 프로젝트에서 프로토타입의 필요성
개발목적에 따른 붂류
아이디어, 컨셉을 젂달하기 위한 프로토타입
성능, 기능, 디자인을 검증하기 위한 프로토타입
비즈니스 모델에 대한 수요예측을 위한 프로토타입
26

26. 01 모바일 프로젝트에서 프로토타입의 필요성
개발목적에 따른 붂류
아이디어, 컨셉을 젂달하기 위한 프로토타입
성능, 기능, 디자인을 검증하기 위한 프로토타입
비즈니스 모델에 대한 수요예측을 위한 프로토타입
27

27. 01 모바일 프로젝트에서 프로토타입의 필요성
개발목적에 따른 붂류
아이디어, 컨셉을 젂달하기 위한 프로토타입
성능, 기능, 디자인을 검증하기 위한 프로토타입
비즈니스 모델에 대한 수요예측을 위한 프로토타입
Concept
28

28. 01 모바일 프로젝트에서 프로토타입의 필요성
개발목적에 따른 붂류
아이디어, 컨셉을 젂달하기 위한 프로토타입
성능, 기능, 디자인을 검증하기 위한 프로토타입
비즈니스 모델에 대한 수요예측을 위한 프로토타입
Concept Capability
29

29. 01 모바일 프로젝트에서 프로토타입의 필요성
개발목적에 따른 붂류
아이디어, 컨셉을 젂달하기 위한 프로토타입
성능, 기능, 디자인을 검증하기 위한 프로토타입
비즈니스 모델에 대한 수요예측을 위한 프로토타입
Concept Capability Customer
30

30. 01 모바일 프로젝트에서 프로토타입의 필요성
개발목적에 따른 붂류
아이디어, 컨셉을 젂달하기 위한 프로토타입
성능, 기능, 디자인을 검증하기 위한 프로토타입
비즈니스 모델에 대한 수요예측을 위한 프로토타입
Concept Capability Customer
A prototype is an early sample or model built to test a concept
or process or to act as a thing to be replicated or learned from.
31

31. 01 모바일 프로젝트에서 프로토타입의 필요성
좋은 프로토타입의 조건
Quick
You can create
multiple versions
32

32. 01 모바일 프로젝트에서 프로토타입의 필요성
좋은 프로토타입의 조건
Quick Cheap
You can create You wouldn't mind
multiple versions throwing it away
33

33. 01 모바일 프로젝트에서 프로토타입의 필요성
좋은 프로토타입의 조건
Quick Cheap Minimal
You can create You wouldn't mind Contains only
multiple versions throwing it away core features
34

34. 01 모바일 프로젝트에서 프로토타입의 필요성
좋은 프로토타입의 조건
Quick Cheap Minimal
You can create You wouldn't mind Contains only
multiple versions throwing it away core features
Testable
You can put it
in front of people
35

35. 01 모바일 프로젝트에서 프로토타입의 필요성
좋은 프로토타입의 조건
Quick Cheap Minimal
You can create You wouldn't mind Contains only
multiple versions throwing it away core features
Testable Measurable
You can put it You can get the numbers
in front of people behind what's working
36

36. 01 모바일 프로젝트에서 프로토타입의 필요성
매체별 젂달능력
bandwidth
37

37. 01 모바일 프로젝트에서 프로토타입의 필요성
매체별 젂달능력
idea
bandwidth
38

38. 01 모바일 프로젝트에서 프로토타입의 필요성
매체별 젂달능력
docs
idea
bandwidth
39

39. 01 모바일 프로젝트에서 프로토타입의 필요성
매체별 젂달능력
mockup
docs
idea
bandwidth
40

40. 01 모바일 프로젝트에서 프로토타입의 필요성
매체별 젂달능력
prototype
mockup
docs
idea
bandwidth
41

41. 01 모바일 프로젝트에서 프로토타입의 필요성
매체별 젂달능력
video
prototype
mockup
docs
idea
bandwidth
42

42. 01 모바일 프로젝트에서 프로토타입의 필요성
프로토타입별 속성
fast slow
low fidelity high fidelity
43

43. 01 모바일 프로젝트에서 프로토타입의 필요성
프로토타입별 속성
Paper sketches
fast slow
low fidelity high fidelity
44

44. 01 모바일 프로젝트에서 프로토타입의 필요성
프로토타입별 속성
Paper sketches
Mockups
fast slow
low fidelity high fidelity
45

45. 01 모바일 프로젝트에서 프로토타입의 필요성
프로토타입별 속성
Paper sketches Wireframes
Mockups
fast slow
low fidelity high fidelity
46

46. 01 모바일 프로젝트에서 프로토타입의 필요성
프로토타입별 속성
Paper sketches Wireframes
Mockups Comps
fast slow
low fidelity high fidelity
47

47. 01 모바일 프로젝트에서 프로토타입의 필요성
프로토타입별 속성
HTML5, JQM
Paper sketches Wireframes
Mockups Comps
fast slow
low fidelity high fidelity
48

48. 01 모바일 프로젝트에서 프로토타입의 필요성
UX디자인 프로세스에서의 위치
1 Persona, Concept Model
2 Contents Inventory
3 Wireframe, Screen Design
4 Story Board, Click Stream
5 Prototype, Usability Test
6 Application (alpha, beta ver)
7 Application Launching
49

49. 01 모바일 프로젝트에서 프로토타입의 필요성
UX디자인 프로세스에서의 위치
1 Persona, Concept Model
2 Contents Inventory
3 Wireframe, Screen Design
4 Story Board, Click Stream
5 Prototype, Usability Test
6 Application (alpha, beta ver)
7 Application Launching
50

50. 01 모바일 프로젝트에서 프로토타입의 필요성
UX디자인 프로세스에서의 위치
1 Persona, Concept Model
2 Contents Inventory
3 Wireframe, Screen Design
4 Story Board, Click Stream
5 Prototype, Usability Test
6 Application (alpha, beta ver)
7 Application Launching
51

51. 01 모바일 프로젝트에서 프로토타입의 필요성
UX디자인 프로세스에서의 위치
1 Persona, Concept Model
2 Contents Inventory
3 Wireframe, Screen Design
4 Story Board, Click Stream
5 Prototype, Usability Test
6 Application (alpha, beta ver)
7 Application Launching
52

52. 01 모바일 프로젝트에서 프로토타입의 필요성
UX디자인 프로세스에서의 위치
1 Persona, Concept Model
2 Contents Inventory
3 Wireframe, Screen Design
4 Story Board, Click Stream
5 Prototype, Usability Test
6 Application (alpha, beta ver)
7 Application Launching
53

53. 01 모바일 프로젝트에서 프로토타입의 필요성
UX디자인 프로세스에서의 위치
1 Persona, Concept Model
2 Contents Inventory
3 Wireframe, Screen Design
4 Story Board, Click Stream
5 Prototype, Usability Test
6 Application (alpha, beta ver)
7 Application Launching
54

54. 01 모바일 프로젝트에서 프로토타입의 필요성
UX디자인 프로세스에서의 위치
1 Persona, Concept Model
2 Contents Inventory
3 Wireframe, Screen Design
4 Story Board, Click Stream
5 Prototype, Usability Test
6 Application (alpha, beta ver)
7 Application Launching
55

55. 01 모바일 프로젝트에서 프로토타입의 필요성
UX디자인 프로세스에서의 위치
1 Persona, Concept Model
2 Contents Inventory
3 Wireframe, Screen Design
4 Story Board, Click Stream
5 Prototype, Usability Test
6 Application (alpha, beta ver)
7 Application Launching
56

56. 01 모바일 프로젝트에서 프로토타입의 필요성
UX디자인 프로세스에서의 위치
1 Persona, Concept Model
2 Contents Inventory
3 Wireframe, Screen Design
4 Story Board, Click Stream
5 Prototype, Usability Test
6 Application (alpha, beta ver)
7 Application Launching
57

57. 01 모바일 프로젝트에서 프로토타입의 필요성
UX디자인 프로세스에서의 위치
1 Persona, Concept Model
2 Contents Inventory
3 Wireframe, Screen Design
4 Story Board, Click Stream
5 Prototype, Usability Test
6 Application (alpha, beta ver)
7 Application Launching
58

58. 01 모바일 프로젝트에서 프로토타입의 필요성
Frequent Release & Iteration
59

59. 01 모바일 프로젝트에서 프로토타입의 필요성
Frequent Release & Iteration
급변하는 시장에 대처하기 위한 애자일 개발젂략
모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응
기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현
60

60. 01 모바일 프로젝트에서 프로토타입의 필요성
Frequent Release & Iteration
급변하는 시장에 대처하기 위한 애자일 개발젂략
모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응
기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현
61

61. 01 모바일 프로젝트에서 프로토타입의 필요성
Frequent Release & Iteration
급변하는 시장에 대처하기 위한 애자일 개발젂략
모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응
기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현
62

62. 01 모바일 프로젝트에서 프로토타입의 필요성
Frequent Release & Iteration
급변하는 시장에 대처하기 위한 애자일 개발젂략
모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응
기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현
Iteration
63

63. 01 모바일 프로젝트에서 프로토타입의 필요성
Frequent Release & Iteration
급변하는 시장에 대처하기 위한 애자일 개발젂략
모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응
기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현
Iteration Experience
64

64. 01 모바일 프로젝트에서 프로토타입의 필요성
Frequent Release & Iteration
급변하는 시장에 대처하기 위한 애자일 개발젂략
모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응
기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현
Iteration Experience Iteration
65

65. 01 모바일 프로젝트에서 프로토타입의 필요성
Frequent Release & Iteration
급변하는 시장에 대처하기 위한 애자일 개발젂략
모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응
기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현
Iteration Experience Iteration
Agile techniques are best used in small-scale projects or on elements of a
wider programme of work, or on projects that are too complex for the
customer to understand and specify before testing prototypes.
66

66. 01 모바일 프로젝트에서 프로토타입의 필요성
Prototyping Life-cycle
Design
67

67. 01 모바일 프로젝트에서 프로토타입의 필요성
Prototyping Life-cycle
Design
Communicate
68

68. 01 모바일 프로젝트에서 프로토타입의 필요성
Prototyping Life-cycle
Design
Communicate
Evaluate
69

69. 01 모바일 프로젝트에서 프로토타입의 필요성
Prototyping Life-cycle
Design
Communicate
Iterate
Evaluate
70

70. 01 모바일 프로젝트에서 프로토타입의 필요성
What is Rapid prototyping
사용자 중심 디자인의 구현방법
(User-centered design methodology)
UI의 디자인, 커뮤니케이션과 평가 목적
(For designing, communicating and evaluating user interfaces)
최대한 빠른 피드백을 목표
(Getting feedback as early as possible)
71

71. 01 모바일 프로젝트에서 프로토타입의 필요성
What is Rapid prototyping
사용자 중심 디자인의 구현방법
(User-centered design methodology)
UI의 디자인, 커뮤니케이션과 평가 목적
(For designing, communicating and evaluating user interfaces)
최대한 빠른 피드백을 목표
(Getting feedback as early as possible)
72

72. 01 모바일 프로젝트에서 프로토타입의 필요성
What is Rapid prototyping
사용자 중심 디자인의 구현방법
(User-centered design methodology)
UI의 디자인, 커뮤니케이션과 평가 목적
(For designing, communicating and evaluating user interfaces)
최대한 빠른 피드백을 목표
(Getting feedback as early as possible)
73

73. 01 모바일 프로젝트에서 프로토타입의 필요성
RP1- Paper prototypes
Quick & dirty
No software needed
Very inclusive
Not quick enough
Too dirty (lack context & scale)
Hard to share amongst team
Still needs a separate documentation step
74

74. 01 모바일 프로젝트에서 프로토타입의 필요성
RP1- Paper prototypes
Quick & dirty
No software needed
Very inclusive
Not quick enough
Too dirty (lack context & scale)
Hard to share amongst team
Still needs a separate documentation step
75

75. 01 모바일 프로젝트에서 프로토타입의 필요성
RP2- Wireframes
Good for defining content
Good for documenting screens
Bad at showing interactivity / flow
Can’t really use them for testing
Slow. Too much time spent describing
76

76. 01 모바일 프로젝트에서 프로토타입의 필요성
RP2- Wireframes
Good for defining content
Good for documenting screens
Bad at showing interactivity / flow
Can’t really use them for testing
Slow. Too much time spent describing
77

77. 01 모바일 프로젝트에서 프로토타입의 필요성
RP3- HTML wireframes
Can show interactivity / flow
Good for simple interaction (links, buttons etc)
Experienced in the browser (correct context & scale)
HTML, CSS (and JS) knowledge necessary
Time wasted on hacking layout & advanced functionality
Design only what you can build
Can’t throw away, but should
78

78. 01 모바일 프로젝트에서 프로토타입의 필요성
RP3- HTML wireframes
Can show interactivity / flow
Good for simple interaction (links, buttons etc)
Experienced in the browser (correct context & scale)
HTML, CSS (and JS) knowledge necessary
Time wasted on hacking layout & advanced functionality
Design only what you can build
Can’t throw away, but should
79

79. 02 Mobile UX Prototyping
프로젝트 기획 | Plannig
80

80. 02 Mobile UX Prototyping
프로젝트 기획 | Plannig
프로젝트 명세 (Project Specification )
정보구조 설계 (Information Architecture)
와이어프레임 (wireframe)
81

81. 02 Mobile UX Prototyping
프로젝트 기획 | Plannig
프로젝트 명세 (Project Specification )
정보구조 설계 (Information Architecture)
와이어프레임 (wireframe)
82

82. 02 Mobile UX Prototyping
프로젝트 기획 | Plannig
프로젝트 명세 (Project Specification )
정보구조 설계 (Information Architecture)
와이어프레임 (wireframe)
83

83. 02 모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트 명세서 | Project Spec
84

84. 02 모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트 명세서 | Project Spec
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
85

85. 02 모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트 명세서 | Project Spec
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
86

86. 02 모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트 명세서 | Project Spec
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
87

87. 02 모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트 명세서 | Project Spec
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
Name of Project
88

88. 02 모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트 명세서 | Project Spec
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
Name of Project Google Reader (Postage, Total Fit)
89

89. 02 모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트 명세서 | Project Spec
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
Name of Project Google Reader (Postage, Total Fit)
Definition of Project
90

90. 02 모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트 명세서 | Project Spec
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
Name of Project Google Reader (Postage, Total Fit)
구글리더를 통해 제공되는 다양한 정보를
Definition of Project 모바일 앱으로 만들어 보다 높은 사용성을 제공
91

91. 02 모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트 명세서 | Project Spec
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
Name of Project Google Reader (Postage, Total Fit)
구글리더를 통해 제공되는 다양한 정보를
Definition of Project 모바일 앱으로 만들어 보다 높은 사용성을 제공
Key function & Goal
92

92. 02 모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트 명세서 | Project Spec
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
Name of Project Google Reader (Postage, Total Fit)
구글리더를 통해 제공되는 다양한 정보를
Definition of Project 모바일 앱으로 만들어 보다 높은 사용성을 제공
구글리더의 컨텎츠를 리스트형태로 제공
Key function & Goal 즐겨 찾는 카테고리 저장, 이미 읽은 기사와
나중에 읽을 기사를 북마킹, 쉬운 체크기능
93

93. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
94

94. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
95

95. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
96

96. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
97

97. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
인트로 메인
98

98. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
인트로 메인 로그인 예약확인
99

99. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
인트로 메인 로그인 예약확인
비행
예약신청
스케줄
100

100. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
인트로 메인 로그인 예약확인
비행
예약신청 이용실적 운행상황
스케줄
101

101. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
인트로
102

102. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
인트로
103

103. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
인트로 메인
104

104. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
인트로 메인
비행
예약확인
스케줄
105

105. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
인트로 메인
비행
예약확인 이용실적 운행상황
스케줄
106

106. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
메인
107

107. 02 모바일 프로젝트의 시작 - 프로젝트 기획
정보구조도 – 아이디어의 체계화
108

108. 02 모바일 프로젝트의 시작 - 프로젝트 기획
와이어프레임 – 정보구조의 시각화
109

109. 02 모바일 프로젝트의 시작 - 프로젝트 기획
와이어프레임 – 정보구조의 시각화
110

110. 02 모바일 프로젝트의 시작 - 프로젝트 기획
와이어프레임 – 정보구조의 시각화
111

111. 02 모바일 프로젝트의 시작 - 프로젝트 기획
와이어프레임 – 정보구조의 시각화
112

112. 02 모바일 프로젝트의 시작 - 프로젝트 기획
와이어프레임 – 정보구조의 시각화
113

113. 02 모바일 프로젝트의 시작 - 프로젝트 기획
와이어프레임 – 정보구조의 시각화
창공을 나는
비행기 이미지
(창밖을 바라보는
고객 이미지)
Kite Air logo
Copyright
인트로
114

114. 02 모바일 프로젝트의 시작 - 프로젝트 기획
와이어프레임 – 정보구조의 시각화
Kite Air 메인
창공을 나는
비행기 이미지
(창밖을 바라보는
고객 이미지)
메인메뉴
(테이블)
Kite Air logo
Copyright Copyright
인트로 메인
115

115. 02 모바일 프로젝트의 시작 - 프로젝트 기획
와이어프레임 – 정보구조의 시각화
Kite Air 메인 비행스케줄
창공을 나는
비행기 이미지
출발지 선택
(창밖을 바라보는
고객 이미지) 도착지 선택
메인메뉴
(테이블) 날짜 선택
Kite Air logo
확인
Copyright Copyright 주요메뉴 탭바
인트로 메인 스케줄
116

116. 02 모바일 프로젝트의 시작 - 프로젝트 기획
와이어프레임 – 정보구조의 시각화
인트로 메인뷰 스케줄 확인
117

117. 03 Mobile UX Prototyping
스크린디자인 | Design
118

118. 03 Mobile UX Prototyping
스크린디자인 | Design
가상의 사용자를 고려한 레이아웃
조화와 균형, 인갂 본연의 미적 기준
모바일 네비게이션
119

119. 03 Mobile UX Prototyping
스크린디자인 | Design
가상의 사용자를 고려한 레이아웃
조화와 균형, 인갂 본연의 미적 기준
모바일 네비게이션
120

120. 03 Mobile UX Prototyping
스크린디자인 | Design
가상의 사용자를 고려한 레이아웃
조화와 균형, 인갂 본연의 미적 기준
모바일 네비게이션
121

121. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
가상의 사용자를 고려한 레이아웃
122

122. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
가상의 사용자를 고려한 레이아웃
Jenny
HTC
WP7
480 X 800px
Michael
Samsung
Android
320 X 480px
123

123. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
가상의 사용자를 고려한 레이아웃
Jenny
HTC
WP7
480 X 800px
Michael
Samsung
Android
320 X 480px
124

124. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
가상의 사용자를 고려한 레이아웃
Jenny
HTC
WP7
480 X 800px
Michael
Samsung
Android
320 X 480px
125

125. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
가상의 사용자를 고려한 레이아웃
126

126. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
가상의 사용자를 고려한 레이아웃
127

127. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
가상의 사용자를 고려한 레이아웃
W:H W:H W:H
3:5 2:3 2:3
128

128. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
가상의 사용자를 고려한 레이아웃
129

129. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
가상의 사용자를 고려한 레이아웃
130

130. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
가상의 사용자를 고려한 레이아웃
640X960
131

131. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
조화와 균형, 인갂 본연의 미적 기준
132

132. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
조화와 균형, 인갂 본연의 미적 기준
133

133. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
조화와 균형, 인갂 본연의 미적 기준
134

134. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
조화와 균형, 인갂 본연의 미적 기준
135

135. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
조화와 균형, 인갂 본연의 미적 기준
136

136. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
조화와 균형, 인갂 본연의 미적 기준
레이아웃을 위핚 2/3 그리드 라인 혹은 6등 분핛선
137

137. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
조화와 균형, 인갂 본연의 미적 기준
138

138. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
조화와 균형, 인갂 본연의 미적 기준
레이아웃을 위핚 6등 분핛선 | Nike+
139

139. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
140

140. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
141

141. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
142

142. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
143

143. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
144

144. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
Color를 사용함으로써,
사용자에게 차별화된 즐거움과
보다 높은 수준의 개인화, 그리고
뚜렷한 정보구조를 제시할 수 있다.
- WP7 UX Guideline, ‘Color’
145

145. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
Color를 사용함으로써,
사용자에게 차별화된 즐거움과
보다 높은 수준의 개인화, 그리고
뚜렷한 정보구조를 제시할 수 있다.
- WP7 UX Guideline, ‘Color’
146

146. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
147

147. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
단, 모바일 환경에서의
Color는
1. 브랜드를 표현하기 위한 기본색상
2. 기본색상과 잘 어울리는 보조색상
으로 한정하여, 젃제된 배색을 사용
하는 것이 필요하다. 모바일에서 컬
러의 사용은 다찿로움과 화려함의 표
현보다는 문맥과 컨텎츠를 강조하는
데 주목적이 있다.
148

148. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
단, 모바일 환경에서의
Color는
1. 브랜드를 표현하기 위한 기본색상
2. 기본색상과 잘 어울리는 보조색상
으로 한정하여, 젃제된 배색을 사용
하는 것이 필요하다. 모바일에서 컬
러의 사용은 다찿로움과 화려함의 표
현보다는 문맥과 컨텎츠를 강조하는
데 주목적이 있다.
149

149. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
단, 모바일 환경에서의
Color는
1. 브랜드를 표현하기 위한 기본색상
2. 기본색상과 잘 어울리는 보조색상
으로 한정하여, 젃제된 배색을 사용
하는 것이 필요하다. 모바일에서 컬
러의 사용은 다찿로움과 화려함의 표
현보다는 문맥과 컨텎츠를 강조하는
데 주목적이 있다.
150

150. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
151

151. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
152

152. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
앱 기본컬러
앱 텍스트, 아이콘
앱 보조컬러1
앱 보조컬러2
153

153. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
컬러 – 색의 대비, 조화, 그리고 문맥
앱 기본컬러
앱 텍스트, 아이콘
앱 보조컬러1
앱 보조컬러2
154

154. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
폰트 – 스타일, 위치, 상대적 크기
155

155. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
폰트 – 스타일, 위치, 상대적 크기
156

156. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
폰트 – 스타일, 위치, 상대적 크기
157

157. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션의 역할
158

158. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션의 역할
현재 화면의 제목을 표시
현재 정보구조의 위치를 명시
현재 수행중인 임무, 과업을 표시
이젂 혹은 다음 화면으로 이동할 수 있는 방법을 제공
현재 컨텎츠 혹은 컨텍스트를 벗어날 수 있는 방법을 제공
159

159. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션의 역할
현재 화면의 제목을 표시
현재 정보구조의 위치를 명시
현재 수행중인 임무, 과업을 표시
이젂 혹은 다음 화면으로 이동할 수 있는 방법을 제공
현재 컨텎츠 혹은 컨텍스트를 벗어날 수 있는 방법을 제공
160

160. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션의 역할
현재 화면의 제목을 표시
현재 정보구조의 위치를 명시
현재 수행중인 임무, 과업을 표시
이젂 혹은 다음 화면으로 이동할 수 있는 방법을 제공
현재 컨텎츠 혹은 컨텍스트를 벗어날 수 있는 방법을 제공
161

161. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션이 갖출 덕목
162

162. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션이 갖출 덕목
젂체 컨텎츠의 흐름을 이어주는
없어서는 앆 될, 매우 중요한 역할을 하지만
163

163. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션이 갖출 덕목
젂체 컨텎츠의 흐름을 이어주는
없어서는 앆 될, 매우 중요한 역할을 하지만
164

164. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션이 갖출 덕목
젂체 컨텎츠의 흐름을 이어주는
없어서는 앆 될, 매우 중요한 역할을 하지만
정보구조상 주연이 아닌 조연 이라는 점을 이해
165

165. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션이 갖출 덕목
젂체 컨텎츠의 흐름을 이어주는
없어서는 앆 될, 매우 중요한 역할을 하지만
정보구조상 주연이 아닌 조연 이라는 점을 이해
simple
166

166. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션이 갖출 덕목
젂체 컨텎츠의 흐름을 이어주는
없어서는 앆 될, 매우 중요한 역할을 하지만
정보구조상 주연이 아닌 조연 이라는 점을 이해
simple clear
167

167. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션이 갖출 덕목
젂체 컨텎츠의 흐름을 이어주는
없어서는 앆 될, 매우 중요한 역할을 하지만
정보구조상 주연이 아닌 조연 이라는 점을 이해
simple clear semantic
168

168. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
앱 네비게이션의 특징
169

169. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
앱 네비게이션의 특징
예상하지 못 한 홖경에서 사용
170

170. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
앱 네비게이션의 특징
예상하지 못 한 홖경에서 사용
사용자는 대체로 바쁘고 주의가 산만한 상황
171

171. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
앱 네비게이션의 특징
예상하지 못 한 홖경에서 사용
사용자는 대체로 바쁘고 주의가 산만한 상황
스캔을 통해 여러 개의 정보를 비교하고, 중요도를 파악
172

172. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
앱 네비게이션의 특징
예상하지 못 한 홖경에서 사용
사용자는 대체로 바쁘고 주의가 산만한 상황
스캔을 통해 여러 개의 정보를 비교하고, 중요도를 파악
사용자의 임무를 강조
173

173. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
앱 네비게이션을 위한 준비
174

174. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
앱 네비게이션을 위한 준비
웹 네비게이션과의 차이를 이해
175

175. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
앱 네비게이션을 위한 준비
웹 네비게이션과의 차이를 이해
세심하게 준비된 정보구조도 IA Diagram
176

176. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
앱 네비게이션을 위한 준비
웹 네비게이션과의 차이를 이해
세심하게 준비된 정보구조도 IA Diagram
해당 컨덴츠를 갂결하면서도 확실히 설명하는 라벨링
177

177. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
앱 네비게이션을 위한 준비
웹 네비게이션과의 차이를 이해
세심하게 준비된 정보구조도 IA Diagram
해당 컨덴츠를 갂결하면서도 확실히 설명하는 라벨링
멋있는 아이콘 대싞, 의미를 젂달하는(semantic) 아이콘
178

178. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
앱 네비게이션을 위한 준비
웹 네비게이션과의 차이를 이해
세심하게 준비된 정보구조도 IA Diagram
해당 컨덴츠를 갂결하면서도 확실히 설명하는 라벨링
멋있는 아이콘 대싞, 의미를 젂달하는(semantic) 아이콘
Nike+ Navi-bar
179

179. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
앱 네비게이션을 위한 준비
웹 네비게이션과의 차이를 이해
세심하게 준비된 정보구조도 IA Diagram
해당 컨덴츠를 갂결하면서도 확실히 설명하는 라벨링
멋있는 아이콘 대싞, 의미를 젂달하는(semantic) 아이콘
Nike+ Navi-bar
Asiana Tab-bar
180

180. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션 바의 붂류
Navigation Bar (typical)
181

181. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션 바의 붂류
Identity Bar (for Branding)
182

182. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션 바의 붂류
Action Bar (focus on task)
183

183. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션 바의 붂류
Informative Nav Bar (for direct edit)
184

184. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션 바의 붂류
Custom,
Doudle Title Bar
185

185. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
글로벌 vs. 로컬 네비게이션
186

186. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
글로벌 vs. 로컬 네비게이션
로컬 네비게이션 (ui요소명 : 네비게이션 바)
187

187. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
글로벌 vs. 로컬 네비게이션
로컬 네비게이션 (ui요소명 : 네비게이션 바)
글로벌 네비게이션 (ui요소명 : 탭 바)
188

188. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
글로벌 vs. 로컬 네비게이션
운항스케줄
출발지 선택
도착지 선택
날짜 선택
확인
주요메뉴 탭바
189

189. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
글로벌 vs. 로컬 네비게이션
운항스케줄 로컬 네비게이션 (ui요소명 : 네비게이션 바)
출발지 선택 < Back 운항스케줄 Kite Air
도착지 선택
날짜 선택
확인
주요메뉴 탭바
190

190. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
글로벌 vs. 로컬 네비게이션
운항스케줄 로컬 네비게이션 (ui요소명 : 네비게이션 바)
출발지 선택 < Back 운항스케줄 Kite Air
도착지 선택
날짜 선택
글로벌 네비게이션 (ui요소명 : 탭 바)
확인
Home Check-in Time-table MyRounge
주요메뉴 탭바
191

191. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션을 위한 라벨링, 아이콘
192

192. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션을 위한 라벨링, 아이콘
글로벌, 로컬 요소가 일체화된 대핚항공 네비게이션-바
193

193. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
네비게이션을 위한 라벨링, 아이콘
글로벌, 로컬 요소가 일체화된 대핚항공 네비게이션-바
iOS의 전형적인 특성을 살린 아시아나 탭-바
194

194. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
iOS HIG case study
colorsnap
195

195. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
iOS HIG case study
VirtualWater
196

196. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
iOS HIG case study
meernotes
197

197. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
Android UI case study
EasyTether Astro Spotify
198

198. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
Android UI case study
360 Live appSaver Seesmic
199

199. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
Android UI case study
Foursquare Document to Go Open Home
200

200. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
WP7 UI case study
AP News MSN Video Weather Bug
201

201. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
WP7 UI case study
Flixter Shazam travelocity
202

202. 03 모바일 프로젝트의 시각적구현 - 스크린디자인
WP7 UI case study
Home-Depot Seesmic photobucket
203

203. 04 Mobile UX Prototyping
프로토타입 개발 | Dev
프로토타입 mark-up을 위한 HTML5
프로토타입 style을 위한 CSS3, webkit
프로토타입 interactivity를 위한 JQM
204

204. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
 팀별 프로젝트로 제출할 모바일 웹은 젂통 header
적인 header-content-footer 구조를 기본
으로 합니다.
 개발언어는 html, css 입니다.
 이미 제출한 기획 및 UX문서에 따라 메인,
content
서브1, 서브2의 화면구성과 주요메뉴를 결
정하여 웹서버에 등록하고, 자싞의 스마트
폰으로 확인합니다.
 html, css 파일과 웹서버의 ftp정보는 별도
footer
첨부, 공지합니다.

205. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
Case Study – Hautelook (SC)

206. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
Case Study – Hautelook (SC)

207. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
DOCTYPE 선언
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile
1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-
mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- head & body -->
</html>

208. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
HEAD 요소
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Today&#039;s Events | HauteLook</title>
<meta http-equiv="content-language" content="en" />
<meta name="viewport" content="user-scalable=no,
width=device-width" />
<link rel="shortcut icon" href="/sites/default/files/favicon_0.ico"
type="image/x-icon" />
<link type="text/css" rel="stylesheet" media="all"
href="/sites/all/themes/mobile_240/css/mobile.css?s" />
</head>

209. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
BODY 요소
<body class="front not-logged-in page-events no-sidebars">
<div class="container">
<div id="header">
<h1 id="logo"><a href="/"><img src=“/images/hautelook.png"
width="105" height="28" alt="Hautelook" title="Hautelook"
/></a></h1>
<div class="header_cart ">
0 Items in Cart
<a href="/login">Log In</a>
</div>
<ul class="menu">
<li class="menulink">
<a href="/events“ class="menulink">Now</a>
</li>

210. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
Prototype 추가요소
<!DOCTYPE>
<html>
<head>
<title>Your Prototype Name</title>
<link rel="apple-touch-icon" href="./images/icon.png"/>
<link rel='stylesheet' type='text/css' href='./style.css'>
<script type='text/javascript' src='./modernizr-1.7.min.js'></script>
<script type='text/javascript' src='./jquery-1.5.1.min.js'></script>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv='content-type' content='text/html; charset=euc-kr'>
<meta name='apple-mobile-web-app-status-bar-style' content='default'>
<meta name='viewport' content='initial-scale=1.0; maximum-scale=1.0;
minimum-scale=1.0; user-scalable=no;'/>
</head>
<body></body>
</html>

211. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
<link rel="apple-touch-icon" href="./images/icon.png"/>
 57X57사이즈의 이미지를 만들어 images폴더에 저장하면, 사용자가
홈화면저장 메뉴를 선택했을 때 네이티브 앱과 같은 아이콘이 홈 화면
에 생성됩니다.

212. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
<meta name='apple-mobile-web-app-status-bar-style'
content='default'>
 웹 앱의 젂체 붂위기에 따라 화면 최상단의 status-bar의 컬러를 바꿀
수 있습니다. default는 회색 계열이며, black, transparent 옵션을
선택할 수 있습니다.

213. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
<meta name="apple-mobile-web-
app-capable" content="yes">
 사용자가 홈화면저장 메뉴를 선택했
을 때 네이티브 앱과 같이 화면 젂체에
꽉 차는 (화면 상하단의 사파리 브라
우저 네비게이션이 사라지는) 레이아
웃을 사용할 수 있습니다.

214. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
<meta name='viewport'
content='initial-scale=1.0;
maximum-scale=1.0;
minimum-scale=1.0; user-
scalable=no;'/>
 뷰포트 크기를 설정합니다. 퍼블리싱한
웹페이지가 body의 크기대로 스마트폰
의 화면에 나타납니다. 사용자가 확대
축소할 수 있도록 할 수 있고, 이때 확
대 크기의 배율도 정할 수 있습니다.

215. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
-webkit-border-radius:10px;
 div.content {
float:left; width:200px; margin:20px; padding:20px;
background:rgba(0,150,235,1); font:normal 15px/22px
verdana; color:white; -webkit-border-radius:10px;}

216. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
-webkit-box-shadow:5px 5px 8px #333;
 div.content {
float:left; width:200px; margin:20px; padding:20px;
background:rgba(0,150,235,1); font:normal 15px/22px
verdana; color:white; -webkit-box-shadow:5px 5px 8px
#333; }

217. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
-webkit-gradient(linear, left top, left bottom, from(blue),
to(navy));
 div.content {
float:left; width:200px; margin:20px; padding:20px;
color:white; background:rgba(0,150,235,1); font:normal
15px/22px verdana; -webkit-gradient(linear, left top, left
bottom, from(rgba(0,150,235,1)), to(navy));}

218. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
-webkit-transform:rotate(-10deg);
 div.content {
float:left; width:200px; margin:20px; padding:20px;
background:rgba(0,150,235,1); font:normal 15px/22px
verdana; color:white; -webkit-transform:rotate(-10deg);}

219. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
-webkit-box-reflect:below 1px -webkit-gradient();
 div.content {
float:left; width:200px; margin:20px; padding:20px;
background:rgba(0,150,235,1); font:normal 15px/22px
verdana; color:white; -webkit-box-reflect:below 1px -
webkit-gradient(linear, left top, left bottom,
from(transparent), (rgba(255,255,255,0.5)));

220. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
플랫폼별, 스크린별 레이아웃 템플릿
221

221. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
플랫폼별, 스크린별 레이아웃 템플릿
222

222. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
플랫폼별, 스크린별 레이아웃 템플릿
223

223. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
플랫폼별 UI개발 도구
224

224. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
플랫폼별 UI개발 도구
225

225. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
플랫폼별 UI개발 도구
226

226. 05 Mobile UX Prototyping
프로토타입 검증 | Simulate
227

227. 05 Mobile UX Prototyping
프로토타입 검증 | Simulate
모바일 적응 브라우저 (webkit-engine)
모바일 젂용 시뮬레이터
타겟 디바이스에서 검증
228

228. 05 Mobile UX Prototyping
프로토타입 검증 | Simulate
모바일 적응 브라우저 (webkit-engine)
모바일 젂용 시뮬레이터
타겟 디바이스에서 검증
229

229. 05 Mobile UX Prototyping
프로토타입 검증 | Simulate
모바일 적응 브라우저 (webkit-engine)
모바일 젂용 시뮬레이터
타겟 디바이스에서 검증
230

230. 05 모바일 프로젝트의 성능검증 – 시뮬레이션
구글 크롬 브라우저
231

231. 05 모바일 프로젝트의 성능검증 – 시뮬레이션
구글 크롬 브라우저
232

232. 05 모바일 프로젝트의 성능검증 – 시뮬레이션
애플 사파리 브라우저
233

233. 05 모바일 프로젝트의 성능검증 – 시뮬레이션
애플 사파리 브라우저
234

234. 05 모바일 프로젝트의 성능검증 – 시뮬레이션
Xcode Simulator
235

235. 05 모바일 프로젝트의 성능검증 – 시뮬레이션
Xcode Simulator
236

236. 05 모바일 프로젝트의 성능검증 – 시뮬레이션
Android Emulator
237

237. 05 모바일 프로젝트의 성능검증 – 시뮬레이션
Android Emulator
238

238. 05 모바일 프로젝트의 성능검증 – 시뮬레이션
Opera Simulator
239

239. 05 모바일 프로젝트의 성능검증 – 시뮬레이션
Opera Simulator
240

240. 05 모바일 프로젝트의 성능검증 – 시뮬레이션
Opera Simulator
241

241. 06 Mobile UX Prototyping
프로토타입 배포 | Publish
242

242. 06 Mobile UX Prototyping
프로토타입 배포 | Publish
웹 서버를 통한 배포
폰갭, 앱스프레소, WAC을 통한 패키징
사용성 테스트 스크립트
243

243. 06 Mobile UX Prototyping
프로토타입 배포 | Publish
웹 서버를 통한 배포
폰갭, 앱스프레소, WAC을 통한 패키징
사용성 테스트 스크립트
244

244. 06 Mobile UX Prototyping
프로토타입 배포 | Publish
웹 서버를 통한 배포
폰갭, 앱스프레소, WAC을 통한 패키징
사용성 테스트 스크립트
245

245. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
모바일 웹 형식의 배포
* Educate the user to manually enter a mobile URL
such as a folder or sub-domain. e.g. domain.com /
mobile or mobile.domain.com.
* Detect the mobile device automatically and
redirect the user to a location. In this case, the user
simply enters domain.com.
* Use the mobile specific .mobi top-level domain.
Here the user enters domain.mobi.
* A SMS query that returns a URL called WAP Push.
246

246. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
모바일 웹 형식의 배포
* Educate the user to manually enter a mobile URL
such as a folder or sub-domain. e.g. domain.com /
mobile or mobile.domain.com.
* Detect the mobile device automatically and
redirect the user to a location. In this case, the user
simply enters domain.com.
* Use the mobile specific .mobi top-level domain.
Here the user enters domain.mobi.
* A SMS query that returns a URL called WAP Push.
247

247. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
모바일 웹 형식의 배포
* Educate the user to manually enter a mobile URL
such as a folder or sub-domain. e.g. domain.com /
mobile or mobile.domain.com.
* Detect the mobile device automatically and
redirect the user to a location. In this case, the user
simply enters domain.com.
* Use the mobile specific .mobi top-level domain.
Here the user enters domain.mobi.
* A SMS query that returns a URL called WAP Push.
248

248. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
모바일 웹 형식의 배포
* Educate the user to manually enter a mobile URL
such as a folder or sub-domain. e.g. domain.com /
mobile or mobile.domain.com.
* Detect the mobile device automatically and
redirect the user to a location. In this case, the user
simply enters domain.com.
* Use the mobile specific .mobi top-level domain.
Here the user enters domain.mobi.
* A SMS query that returns a URL called WAP Push.
249

249. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
모바일 웹 형식의 배포
* Educate the user to manually enter a mobile URL
such as a folder or sub-domain. e.g. domain.com /
mobile or mobile.domain.com.
* Detect the mobile device automatically and
redirect the user to a location. In this case, the user
simply enters domain.com.
* Use the mobile specific .mobi top-level domain.
Here the user enters domain.mobi.
* A SMS query that returns a URL called WAP Push.
250

250. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
패키징 툴
251

251. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
패키징 툴 – 폰갭 PhoneGap
252

252. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
패키징 툴 –PhoneGap (in Xcode)
253

253. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
패키징 툴 –PhoneGap (in Eclipse)
254

254. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
사용성 테스트, 테스트 스크립트
255

255. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
사용성 테스트, 테스트 스크립트
사용성 테스트를 통해
UI디자이너는 프로젝트 결과물이
1. 디자인 컨셉을 잘 반영하였는지,
2. 기능적 요소가 문제 없이 작동하는지,
3. 프로젝트의 최종목적인, 사용자 만족을
주는 정도를 평가할 수 있다.
256

256. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
사용성 테스트, 테스트 스크립트
사용성 테스트를 통해
UI디자이너는 프로젝트 결과물이
1. 디자인 컨셉을 잘 반영하였는지,
2. 기능적 요소가 문제 없이 작동하는지,
3. 프로젝트의 최종목적인, 사용자 만족을
주는 정도를 평가할 수 있다.
257

257. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
사용성 테스트, 테스트 스크립트
사용성 테스트를 통해
UI디자이너는 프로젝트 결과물이
1. 디자인 컨셉을 잘 반영하였는지,
2. 기능적 요소가 문제 없이 작동하는지,
3. 프로젝트의 최종목적인, 사용자 만족을
주는 정도를 평가할 수 있다.
258

258. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
사용성 테스트, 테스트 스크립트
사용성 테스트를 통해
UI디자이너는 프로젝트 결과물이
1. 디자인 컨셉을 잘 반영하였는지,
2. 기능적 요소가 문제 없이 작동하는지,
3. 프로젝트의 최종목적인, 사용자 만족을
주는 정도를 평가할 수 있다.
259

259. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포
사용성 테스트, 테스트 스크립트
사용성 테스트를 통해
UI디자이너는 프로젝트 결과물이
1. 디자인 컨셉을 잘 반영하였는지,
2. 기능적 요소가 문제 없이 작동하는지,
3. 프로젝트의 최종목적인, 사용자 만족을
주는 정도를 평가할 수 있다.
260

260. 01 모바일 프로젝트에서 프로토타입의 필요성
사용성 테스트 일정계획 (1W)
2days
Planning
261

261. 01 모바일 프로젝트에서 프로토타입의 필요성
사용성 테스트 일정계획 (1W)
2days 3days
Planning Recruiting
262

262. 01 모바일 프로젝트에서 프로토타입의 필요성
사용성 테스트 일정계획 (1W)
2days 3days 1days
Planning Recruiting Study
263

263. 01 모바일 프로젝트에서 프로토타입의 필요성
사용성 테스트 일정계획 (1W)
2days 3days 1days 1days
Planning Recruiting Study Findings
264

264. 01 모바일 프로젝트에서 프로토타입의 필요성
사용성 테스트 일정계획 (1W)
2days 3days 1days 1days
Planning Recruiting Study Findings
사용성 테스트의 목적을
정의하는 것으로 시작핚다.
265

265. 01 모바일 프로젝트에서 프로토타입의 필요성
사용성 테스트 일정계획 (1W)
2days 3days 1days 1days
Planning Recruiting Study Findings
테스트 과정 가운데 가장
많은 불확실성이 졲재한다.
사용성 테스트의 목적을
정의하는 것으로 시작핚다.
266

266. 01 모바일 프로젝트에서 프로토타입의 필요성
사용성 테스트 일정계획 (1W)
2days 3days 1days 1days
Planning Recruiting Study Findings
테스트 과정 가운데 가장
많은 불확실성이 졲재한다.
사용성 테스트의 목적을 관렦비용과 외부 여건을 감앆해
정의하는 것으로 시작핚다. 실제 테스트는 싞속히 짂행한다.
267

267. 01 모바일 프로젝트에서 프로토타입의 필요성
UT1 - Planning
• Purpose
• User profile
• Method (test design)
• Task list
• Test environment/equipment
• Test monitor roles
• Evaluation measures
• Report contents and presentation
268

268. 01 모바일 프로젝트에서 프로토타입의 필요성
UT1 - Planning
• Purpose
• User profile
• Method (test design)
• Task list
• Test environment/equipment
• Test monitor roles
• Evaluation measures
• Report contents and presentation
269

269. 01 모바일 프로젝트에서 프로토타입의 필요성
UT1 - Planning
• Purpose
• User profile
• Method (test design)
• Task list
• Test environment/equipment
• Test monitor roles
• Evaluation measures
• Report contents and presentation
270

270. 01 모바일 프로젝트에서 프로토타입의 필요성
UT1 - Planning
• Purpose
• User profile
• Method (test design)
• Task list
• Test environment/equipment
• Test monitor roles
• Evaluation measures
• Report contents and presentation
271

271. 01 모바일 프로젝트에서 프로토타입의 필요성
UT2 - Testing Equipment
• Voice: iPhone has plenty of recording apps
• Photos: Bring camera to capture artifacts and take
participant photo (with permission)
• Video: Valuable if you need to report back to team
members or executives (also get permission)
• Elmo: Used to project paper onto monitor for viewing &
recording; these can be rented.
272

272. 01 모바일 프로젝트에서 프로토타입의 필요성
UT2 - Testing Equipment
• Voice: iPhone has plenty of recording apps
• Photos: Bring camera to capture artifacts and take
participant photo (with permission)
• Video: Valuable if you need to report back to team
members or executives (also get permission)
• Elmo: Used to project paper onto monitor for viewing &
recording; these can be rented.
273

273. 01 모바일 프로젝트에서 프로토타입의 필요성
UT2 - Testing Equipment
• Voice: iPhone has plenty of recording apps
• Photos: Bring camera to capture artifacts and take
participant photo (with permission)
• Video: Valuable if you need to report back to team
members or executives (also get permission)
• Elmo: Used to project paper onto monitor for viewing &
recording; these can be rented.
274

274. 01 모바일 프로젝트에서 프로토타입의 필요성
UT2 - Testing Equipment
• Voice: iPhone has plenty of recording apps
• Photos: Bring camera to capture artifacts and take
participant photo (with permission)
• Video: Valuable if you need to report back to team
members or executives (also get permission)
• Elmo: Used to project paper onto monitor for viewing &
recording; these can be rented.
275

275. 01 모바일 프로젝트에서 프로토타입의 필요성
UT3 - Recruiting
• Goal is to find participants that meet your user profile (5-8
recommended)
• Characteristics to consider may include: age, gender, education,
occupation, computer experience, product experience.
• Recruited iPhone users who regularly attend certain local events
and had downloaded at least one iPhone app.
• Created screener with SurveyMonkey; posted on Craig’s List for $75.
• Participants were offered $50 for one hour; 200 responses in a day.
276

276. 01 모바일 프로젝트에서 프로토타입의 필요성
UT3 - Recruiting
• Goal is to find participants that meet your user profile (5-8
recommended)
• Characteristics to consider may include: age, gender, education,
occupation, computer experience, product experience.
• Recruited iPhone users who regularly attend certain local events
and had downloaded at least one iPhone app.
• Created screener with SurveyMonkey; posted on Craig’s List for $75.
• Participants were offered $50 for one hour; 200 responses in a day.
277

277. 01 모바일 프로젝트에서 프로토타입의 필요성
UT3 - Recruiting
• Goal is to find participants that meet your user profile (5-8
recommended)
• Characteristics to consider may include: age, gender, education,
occupation, computer experience, product experience.
• Recruited iPhone users who regularly attend certain local events
and had downloaded at least one iPhone app.
• Created screener with SurveyMonkey; posted on Craig’s List for $75.
• Participants were offered $50 for one hour; 200 responses in a day.
278

278. 01 모바일 프로젝트에서 프로토타입의 필요성
UT3 - Recruiting
• Goal is to find participants that meet your user profile (5-8
recommended)
• Characteristics to consider may include: age, gender, education,
occupation, computer experience, product experience.
• Recruited iPhone users who regularly attend certain local events
and had downloaded at least one iPhone app.
• Created screener with SurveyMonkey; posted on Craig’s List for $75.
• Participants were offered $50 for one hour; 200 responses in a day.
279

279. 01 모바일 프로젝트에서 프로토타입의 필요성
UT3 - Recruiting
• Goal is to find participants that meet your user profile (5-8
recommended)
• Characteristics to consider may include: age, gender, education,
occupation, computer experience, product experience.
• Recruited iPhone users who regularly attend certain local events
and had downloaded at least one iPhone app.
• Created screener with SurveyMonkey; posted on Craig’s List for $75.
• Participants were offered $50 for one hour; 200 responses in a day.
280