Mobile Prototype Essential

7,892 views

Published on

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

Published in: Technology
11 Comments
45 Likes
Statistics
Notes
No Downloads
Views
Total views
7,892
On SlideShare
0
From Embeds
0
Number of Embeds
2,462
Actions
Shares
0
Downloads
459
Comments
11
Likes
45
Embeds 0
No embeds

No notes for slide

Mobile Prototype Essential

  1. 1. Mobile UX Prototype모바일 UX 프로토타입HTML5를 홗용한 프로토타이핑ECONOVATION | 동 준 상 강사 naebon1@gmail.com 1
  2. 2. Mobile UX Prototype모바일 UX 프로토타입위너스랩 UX디자인 팀장동 준 상 (naebon1@gmail.com)Lecture Project에코노베이션 두산그룹 모바일 프로젝트삼성멀티캠퍼스 삼성중공업 모바일 프로젝트T 아카데미 중소기업청, 교직원공제회 +저술 : 모바일 UX디자인, 모바일 프로토타입 개발번역 : HTML5 Multimedia Development(에이콘), jQuery UI 1.8(에이콘) 2
  3. 3. 타겟 디바이스에서의 사용성 검증을 위한목차 모바일 UX 프로토타입 개발 01 Why 모바일 프로젝트에서 프로토타입 개발 이유 02 Plan 제작계획 명세서, 정보구조도, 와이어프레임 03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인 04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑 05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스 06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징 4
  4. 4. 타겟 디바이스에서의 사용성 검증을 위한목차 모바일 UX 프로토타입 개발 01 Why 모바일 프로젝트에서 프로토타입 개발 이유 02 Plan 제작계획 명세서, 정보구조도, 와이어프레임 03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인 04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑 05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스 06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징 5
  5. 5. 타겟 디바이스에서의 사용성 검증을 위한목차 모바일 UX 프로토타입 개발 01 Why 모바일 프로젝트에서 프로토타입 개발 이유 02 Plan 제작계획 명세서, 정보구조도, 와이어프레임 03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인 04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑 05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스 06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징 6
  6. 6. 타겟 디바이스에서의 사용성 검증을 위한목차 모바일 UX 프로토타입 개발 01 Why 모바일 프로젝트에서 프로토타입 개발 이유 02 Plan 제작계획 명세서, 정보구조도, 와이어프레임 03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인 04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑 05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스 06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징 7
  7. 7. 타겟 디바이스에서의 사용성 검증을 위한목차 모바일 UX 프로토타입 개발 01 Why 모바일 프로젝트에서 프로토타입 개발 이유 02 Plan 제작계획 명세서, 정보구조도, 와이어프레임 03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인 04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑 05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스 06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징 8
  8. 8. 타겟 디바이스에서의 사용성 검증을 위한목차 모바일 UX 프로토타입 개발 01 Why 모바일 프로젝트에서 프로토타입 개발 이유 02 Plan 제작계획 명세서, 정보구조도, 와이어프레임 03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인 04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑 05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스 06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징 9
  9. 9. 타겟 디바이스에서의 사용성 검증을 위한목차 모바일 UX 프로토타입 개발 01 Why 모바일 프로젝트에서 프로토타입 개발 이유 02 Plan 제작계획 명세서, 정보구조도, 와이어프레임 03 Design 레이아웃, 컬러, 폰트를 고려한 스크린디자인 04 Develop HTML5+CSS3+JQM을 홗용한 프로토타이핑 05 Simulate 검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스 06 Publish 웹 서버를 통한 프로토타입의 배포, 폰갭 패키징 10
  10. 10. 01 Mobile UX Prototyping 프로토타입의 필요성 | Why? 개발목적에 따른 프로토타입 붂류 Idea < Description < Mockup < Prototype Agile Project – more frequent iteration 11
  11. 11. 01 Mobile UX Prototyping 프로토타입의 필요성 | Why? 개발목적에 따른 프로토타입 붂류 Idea < Description < Mockup < Prototype Agile Project – more frequent iteration 12
  12. 12. 01 Mobile UX Prototyping 프로토타입의 필요성 | Why? 개발목적에 따른 프로토타입 붂류 Idea < Description < Mockup < Prototype Agile Project – more frequent iteration 13
  13. 13. 01 Mobile UX Prototyping 프로토타입의 필요성 | Why? 개발목적에 따른 프로토타입 붂류 Idea < Description < Mockup < Prototype Agile Project – more frequent iteration 14
  14. 14. 01 모바일 프로젝트에서 프로토타입의 필요성 한 장의 사진이 천마디 말보다 낫다. A picture is worth a thousand words 하나의 프로토타입이 천장의 사진보다 낫다. A prototype is worth a thousand pictures 15
  15. 15. 01 모바일 프로젝트에서 프로토타입의 필요성 한 장의 사진이 천마디 말보다 낫다. A picture is worth a thousand words 하나의 프로토타입이 천장의 사진보다 낫다. A prototype is worth a thousand pictures 16
  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. 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. 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. 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. 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. 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. 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. 23. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 24
  24. 24. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 아이디어, 컨셉을 젂달하기 위한 프로토타입 성능, 기능, 디자인을 검증하기 위한 프로토타입 비즈니스 모델에 대한 수요예측을 위한 프로토타입 25
  25. 25. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 아이디어, 컨셉을 젂달하기 위한 프로토타입 성능, 기능, 디자인을 검증하기 위한 프로토타입 비즈니스 모델에 대한 수요예측을 위한 프로토타입 26
  26. 26. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 아이디어, 컨셉을 젂달하기 위한 프로토타입 성능, 기능, 디자인을 검증하기 위한 프로토타입 비즈니스 모델에 대한 수요예측을 위한 프로토타입 27
  27. 27. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 아이디어, 컨셉을 젂달하기 위한 프로토타입 성능, 기능, 디자인을 검증하기 위한 프로토타입 비즈니스 모델에 대한 수요예측을 위한 프로토타입 Concept 28
  28. 28. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 아이디어, 컨셉을 젂달하기 위한 프로토타입 성능, 기능, 디자인을 검증하기 위한 프로토타입 비즈니스 모델에 대한 수요예측을 위한 프로토타입 Concept Capability 29
  29. 29. 01 모바일 프로젝트에서 프로토타입의 필요성 개발목적에 따른 붂류 아이디어, 컨셉을 젂달하기 위한 프로토타입 성능, 기능, 디자인을 검증하기 위한 프로토타입 비즈니스 모델에 대한 수요예측을 위한 프로토타입 Concept Capability Customer 30
  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. 31. 01 모바일 프로젝트에서 프로토타입의 필요성 좋은 프로토타입의 조건 Quick You can create multiple versions 32
  32. 32. 01 모바일 프로젝트에서 프로토타입의 필요성 좋은 프로토타입의 조건 Quick Cheap You can create You wouldnt mind multiple versions throwing it away 33
  33. 33. 01 모바일 프로젝트에서 프로토타입의 필요성 좋은 프로토타입의 조건 Quick Cheap Minimal You can create You wouldnt mind Contains only multiple versions throwing it away core features 34
  34. 34. 01 모바일 프로젝트에서 프로토타입의 필요성 좋은 프로토타입의 조건 Quick Cheap Minimal You can create You wouldnt mind Contains only multiple versions throwing it away core features Testable You can put it in front of people 35
  35. 35. 01 모바일 프로젝트에서 프로토타입의 필요성 좋은 프로토타입의 조건 Quick Cheap Minimal You can create You wouldnt 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 whats working 36
  36. 36. 01 모바일 프로젝트에서 프로토타입의 필요성 매체별 젂달능력 bandwidth 37
  37. 37. 01 모바일 프로젝트에서 프로토타입의 필요성 매체별 젂달능력 idea bandwidth 38
  38. 38. 01 모바일 프로젝트에서 프로토타입의 필요성 매체별 젂달능력 docs idea bandwidth 39
  39. 39. 01 모바일 프로젝트에서 프로토타입의 필요성 매체별 젂달능력 mockup docs idea bandwidth 40
  40. 40. 01 모바일 프로젝트에서 프로토타입의 필요성 매체별 젂달능력 prototype mockup docs idea bandwidth 41
  41. 41. 01 모바일 프로젝트에서 프로토타입의 필요성 매체별 젂달능력 video prototype mockup docs idea bandwidth 42
  42. 42. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입별 속성 fast slow low fidelity high fidelity 43
  43. 43. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입별 속성 Paper sketches fast slow low fidelity high fidelity 44
  44. 44. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입별 속성 Paper sketches Mockups fast slow low fidelity high fidelity 45
  45. 45. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입별 속성 Paper sketches Wireframes Mockups fast slow low fidelity high fidelity 46
  46. 46. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입별 속성 Paper sketches Wireframes Mockups Comps fast slow low fidelity high fidelity 47
  47. 47. 01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입별 속성 HTML5, JQM Paper sketches Wireframes Mockups Comps fast slow low fidelity high fidelity 48
  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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 58. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 59
  59. 59. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 급변하는 시장에 대처하기 위한 애자일 개발젂략 모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응 기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현 60
  60. 60. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 급변하는 시장에 대처하기 위한 애자일 개발젂략 모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응 기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현 61
  61. 61. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 급변하는 시장에 대처하기 위한 애자일 개발젂략 모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응 기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현 62
  62. 62. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 급변하는 시장에 대처하기 위한 애자일 개발젂략 모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응 기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현 Iteration 63
  63. 63. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 급변하는 시장에 대처하기 위한 애자일 개발젂략 모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응 기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현 Iteration Experience 64
  64. 64. 01 모바일 프로젝트에서 프로토타입의 필요성 Frequent Release & Iteration 급변하는 시장에 대처하기 위한 애자일 개발젂략 모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응 기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현 Iteration Experience Iteration 65
  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. 66. 01 모바일 프로젝트에서 프로토타입의 필요성 Prototyping Life-cycle Design 67
  67. 67. 01 모바일 프로젝트에서 프로토타입의 필요성 Prototyping Life-cycle Design Communicate 68
  68. 68. 01 모바일 프로젝트에서 프로토타입의 필요성 Prototyping Life-cycle Design Communicate Evaluate 69
  69. 69. 01 모바일 프로젝트에서 프로토타입의 필요성 Prototyping Life-cycle Design Communicate Iterate Evaluate 70
  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. 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. 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. 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. 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. 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. 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. 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. 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. 79. 02 Mobile UX Prototyping 프로젝트 기획 | Plannig 80
  80. 80. 02 Mobile UX Prototyping 프로젝트 기획 | Plannig 프로젝트 명세 (Project Specification ) 정보구조 설계 (Information Architecture) 와이어프레임 (wireframe) 81
  81. 81. 02 Mobile UX Prototyping 프로젝트 기획 | Plannig 프로젝트 명세 (Project Specification ) 정보구조 설계 (Information Architecture) 와이어프레임 (wireframe) 82
  82. 82. 02 Mobile UX Prototyping 프로젝트 기획 | Plannig 프로젝트 명세 (Project Specification ) 정보구조 설계 (Information Architecture) 와이어프레임 (wireframe) 83
  83. 83. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 84
  84. 84. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 85
  85. 85. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 86
  86. 86. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 87
  87. 87. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 Name of Project 88
  88. 88. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 Name of Project Google Reader (Postage, Total Fit) 89
  89. 89. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 Name of Project Google Reader (Postage, Total Fit) Definition of Project 90
  90. 90. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 Name of Project Google Reader (Postage, Total Fit) 구글리더를 통해 제공되는 다양한 정보를 Definition of Project 모바일 앱으로 만들어 보다 높은 사용성을 제공 91
  91. 91. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 Name of Project Google Reader (Postage, Total Fit) 구글리더를 통해 제공되는 다양한 정보를 Definition of Project 모바일 앱으로 만들어 보다 높은 사용성을 제공 Key function & Goal 92
  92. 92. 02 모바일 프로젝트의 시작 - 프로젝트 기획 프로젝트 명세서 | Project Spec 프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정 프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의 브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능 Name of Project Google Reader (Postage, Total Fit) 구글리더를 통해 제공되는 다양한 정보를 Definition of Project 모바일 앱으로 만들어 보다 높은 사용성을 제공 구글리더의 컨텎츠를 리스트형태로 제공 Key function & Goal 즐겨 찾는 카테고리 저장, 이미 읽은 기사와 나중에 읽을 기사를 북마킹, 쉬운 체크기능 93
  93. 93. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 94
  94. 94. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 95
  95. 95. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 96
  96. 96. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 97
  97. 97. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 메인 98
  98. 98. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 메인 로그인 예약확인 99
  99. 99. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 메인 로그인 예약확인 비행 예약신청 스케줄 100
  100. 100. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 메인 로그인 예약확인 비행 예약신청 이용실적 운행상황 스케줄 101
  101. 101. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 102
  102. 102. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 103
  103. 103. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 메인 104
  104. 104. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 메인 비행 예약확인 스케줄 105
  105. 105. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 인트로 메인 비행 예약확인 이용실적 운행상황 스케줄 106
  106. 106. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 메인 107
  107. 107. 02 모바일 프로젝트의 시작 - 프로젝트 기획 정보구조도 – 아이디어의 체계화 108
  108. 108. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 109
  109. 109. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 110
  110. 110. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 111
  111. 111. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 112
  112. 112. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 113
  113. 113. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 창공을 나는 비행기 이미지 (창밖을 바라보는 고객 이미지) Kite Air logo Copyright 인트로 114
  114. 114. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 Kite Air 메인 창공을 나는 비행기 이미지 (창밖을 바라보는 고객 이미지) 메인메뉴 (테이블) Kite Air logo Copyright Copyright 인트로 메인 115
  115. 115. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 Kite Air 메인 비행스케줄 창공을 나는 비행기 이미지 출발지 선택 (창밖을 바라보는 고객 이미지) 도착지 선택 메인메뉴 (테이블) 날짜 선택 Kite Air logo 확인 Copyright Copyright 주요메뉴 탭바 인트로 메인 스케줄 116
  116. 116. 02 모바일 프로젝트의 시작 - 프로젝트 기획 와이어프레임 – 정보구조의 시각화 인트로 메인뷰 스케줄 확인 117
  117. 117. 03 Mobile UX Prototyping 스크린디자인 | Design 118
  118. 118. 03 Mobile UX Prototyping 스크린디자인 | Design 가상의 사용자를 고려한 레이아웃 조화와 균형, 인갂 본연의 미적 기준 모바일 네비게이션 119
  119. 119. 03 Mobile UX Prototyping 스크린디자인 | Design 가상의 사용자를 고려한 레이아웃 조화와 균형, 인갂 본연의 미적 기준 모바일 네비게이션 120
  120. 120. 03 Mobile UX Prototyping 스크린디자인 | Design 가상의 사용자를 고려한 레이아웃 조화와 균형, 인갂 본연의 미적 기준 모바일 네비게이션 121
  121. 121. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 가상의 사용자를 고려한 레이아웃 122
  122. 122. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 가상의 사용자를 고려한 레이아웃 Jenny HTC WP7 480 X 800px Michael Samsung Android 320 X 480px 123
  123. 123. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 가상의 사용자를 고려한 레이아웃 Jenny HTC WP7 480 X 800px Michael Samsung Android 320 X 480px 124
  124. 124. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 가상의 사용자를 고려한 레이아웃 Jenny HTC WP7 480 X 800px Michael Samsung Android 320 X 480px 125
  125. 125. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 가상의 사용자를 고려한 레이아웃 126
  126. 126. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 가상의 사용자를 고려한 레이아웃 127
  127. 127. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 가상의 사용자를 고려한 레이아웃 W:H W:H W:H 3:5 2:3 2:3 128
  128. 128. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 가상의 사용자를 고려한 레이아웃 129
  129. 129. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 가상의 사용자를 고려한 레이아웃 130
  130. 130. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 가상의 사용자를 고려한 레이아웃 640X960 131
  131. 131. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 조화와 균형, 인갂 본연의 미적 기준 132
  132. 132. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 조화와 균형, 인갂 본연의 미적 기준 133
  133. 133. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 조화와 균형, 인갂 본연의 미적 기준 134
  134. 134. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 조화와 균형, 인갂 본연의 미적 기준 135
  135. 135. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 조화와 균형, 인갂 본연의 미적 기준 136
  136. 136. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 조화와 균형, 인갂 본연의 미적 기준 레이아웃을 위핚 2/3 그리드 라인 혹은 6등 분핛선 137
  137. 137. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 조화와 균형, 인갂 본연의 미적 기준 138
  138. 138. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 조화와 균형, 인갂 본연의 미적 기준 레이아웃을 위핚 6등 분핛선 | Nike+ 139
  139. 139. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 140
  140. 140. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 141
  141. 141. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 142
  142. 142. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 143
  143. 143. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 144
  144. 144. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 Color를 사용함으로써, 사용자에게 차별화된 즐거움과 보다 높은 수준의 개인화, 그리고 뚜렷한 정보구조를 제시할 수 있다. - WP7 UX Guideline, ‘Color’ 145
  145. 145. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 Color를 사용함으로써, 사용자에게 차별화된 즐거움과 보다 높은 수준의 개인화, 그리고 뚜렷한 정보구조를 제시할 수 있다. - WP7 UX Guideline, ‘Color’ 146
  146. 146. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 147
  147. 147. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 단, 모바일 환경에서의 Color는 1. 브랜드를 표현하기 위한 기본색상 2. 기본색상과 잘 어울리는 보조색상 으로 한정하여, 젃제된 배색을 사용 하는 것이 필요하다. 모바일에서 컬 러의 사용은 다찿로움과 화려함의 표 현보다는 문맥과 컨텎츠를 강조하는 데 주목적이 있다. 148
  148. 148. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 단, 모바일 환경에서의 Color는 1. 브랜드를 표현하기 위한 기본색상 2. 기본색상과 잘 어울리는 보조색상 으로 한정하여, 젃제된 배색을 사용 하는 것이 필요하다. 모바일에서 컬 러의 사용은 다찿로움과 화려함의 표 현보다는 문맥과 컨텎츠를 강조하는 데 주목적이 있다. 149
  149. 149. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 단, 모바일 환경에서의 Color는 1. 브랜드를 표현하기 위한 기본색상 2. 기본색상과 잘 어울리는 보조색상 으로 한정하여, 젃제된 배색을 사용 하는 것이 필요하다. 모바일에서 컬 러의 사용은 다찿로움과 화려함의 표 현보다는 문맥과 컨텎츠를 강조하는 데 주목적이 있다. 150
  150. 150. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 151
  151. 151. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 152
  152. 152. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 앱 기본컬러 앱 텍스트, 아이콘 앱 보조컬러1 앱 보조컬러2 153
  153. 153. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 컬러 – 색의 대비, 조화, 그리고 문맥 앱 기본컬러 앱 텍스트, 아이콘 앱 보조컬러1 앱 보조컬러2 154
  154. 154. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 폰트 – 스타일, 위치, 상대적 크기 155
  155. 155. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 폰트 – 스타일, 위치, 상대적 크기 156
  156. 156. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 폰트 – 스타일, 위치, 상대적 크기 157
  157. 157. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션의 역할 158
  158. 158. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션의 역할 현재 화면의 제목을 표시 현재 정보구조의 위치를 명시 현재 수행중인 임무, 과업을 표시 이젂 혹은 다음 화면으로 이동할 수 있는 방법을 제공 현재 컨텎츠 혹은 컨텍스트를 벗어날 수 있는 방법을 제공 159
  159. 159. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션의 역할 현재 화면의 제목을 표시 현재 정보구조의 위치를 명시 현재 수행중인 임무, 과업을 표시 이젂 혹은 다음 화면으로 이동할 수 있는 방법을 제공 현재 컨텎츠 혹은 컨텍스트를 벗어날 수 있는 방법을 제공 160
  160. 160. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션의 역할 현재 화면의 제목을 표시 현재 정보구조의 위치를 명시 현재 수행중인 임무, 과업을 표시 이젂 혹은 다음 화면으로 이동할 수 있는 방법을 제공 현재 컨텎츠 혹은 컨텍스트를 벗어날 수 있는 방법을 제공 161
  161. 161. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션이 갖출 덕목 162
  162. 162. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션이 갖출 덕목 젂체 컨텎츠의 흐름을 이어주는 없어서는 앆 될, 매우 중요한 역할을 하지만 163
  163. 163. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션이 갖출 덕목 젂체 컨텎츠의 흐름을 이어주는 없어서는 앆 될, 매우 중요한 역할을 하지만 164
  164. 164. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션이 갖출 덕목 젂체 컨텎츠의 흐름을 이어주는 없어서는 앆 될, 매우 중요한 역할을 하지만 정보구조상 주연이 아닌 조연 이라는 점을 이해 165
  165. 165. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션이 갖출 덕목 젂체 컨텎츠의 흐름을 이어주는 없어서는 앆 될, 매우 중요한 역할을 하지만 정보구조상 주연이 아닌 조연 이라는 점을 이해 simple 166
  166. 166. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션이 갖출 덕목 젂체 컨텎츠의 흐름을 이어주는 없어서는 앆 될, 매우 중요한 역할을 하지만 정보구조상 주연이 아닌 조연 이라는 점을 이해 simple clear 167
  167. 167. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션이 갖출 덕목 젂체 컨텎츠의 흐름을 이어주는 없어서는 앆 될, 매우 중요한 역할을 하지만 정보구조상 주연이 아닌 조연 이라는 점을 이해 simple clear semantic 168
  168. 168. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 앱 네비게이션의 특징 169
  169. 169. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 앱 네비게이션의 특징 예상하지 못 한 홖경에서 사용 170
  170. 170. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 앱 네비게이션의 특징 예상하지 못 한 홖경에서 사용 사용자는 대체로 바쁘고 주의가 산만한 상황 171
  171. 171. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 앱 네비게이션의 특징 예상하지 못 한 홖경에서 사용 사용자는 대체로 바쁘고 주의가 산만한 상황 스캔을 통해 여러 개의 정보를 비교하고, 중요도를 파악 172
  172. 172. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 앱 네비게이션의 특징 예상하지 못 한 홖경에서 사용 사용자는 대체로 바쁘고 주의가 산만한 상황 스캔을 통해 여러 개의 정보를 비교하고, 중요도를 파악 사용자의 임무를 강조 173
  173. 173. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 앱 네비게이션을 위한 준비 174
  174. 174. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 앱 네비게이션을 위한 준비 웹 네비게이션과의 차이를 이해 175
  175. 175. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 앱 네비게이션을 위한 준비 웹 네비게이션과의 차이를 이해 세심하게 준비된 정보구조도 IA Diagram 176
  176. 176. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 앱 네비게이션을 위한 준비 웹 네비게이션과의 차이를 이해 세심하게 준비된 정보구조도 IA Diagram 해당 컨덴츠를 갂결하면서도 확실히 설명하는 라벨링 177
  177. 177. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 앱 네비게이션을 위한 준비 웹 네비게이션과의 차이를 이해 세심하게 준비된 정보구조도 IA Diagram 해당 컨덴츠를 갂결하면서도 확실히 설명하는 라벨링 멋있는 아이콘 대싞, 의미를 젂달하는(semantic) 아이콘 178
  178. 178. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 앱 네비게이션을 위한 준비 웹 네비게이션과의 차이를 이해 세심하게 준비된 정보구조도 IA Diagram 해당 컨덴츠를 갂결하면서도 확실히 설명하는 라벨링 멋있는 아이콘 대싞, 의미를 젂달하는(semantic) 아이콘 Nike+ Navi-bar 179
  179. 179. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 앱 네비게이션을 위한 준비 웹 네비게이션과의 차이를 이해 세심하게 준비된 정보구조도 IA Diagram 해당 컨덴츠를 갂결하면서도 확실히 설명하는 라벨링 멋있는 아이콘 대싞, 의미를 젂달하는(semantic) 아이콘 Nike+ Navi-bar Asiana Tab-bar 180
  180. 180. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션 바의 붂류 Navigation Bar (typical) 181
  181. 181. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션 바의 붂류 Identity Bar (for Branding) 182
  182. 182. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션 바의 붂류 Action Bar (focus on task) 183
  183. 183. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션 바의 붂류 Informative Nav Bar (for direct edit) 184
  184. 184. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션 바의 붂류 Custom, Doudle Title Bar 185
  185. 185. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 글로벌 vs. 로컬 네비게이션 186
  186. 186. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 글로벌 vs. 로컬 네비게이션 로컬 네비게이션 (ui요소명 : 네비게이션 바) 187
  187. 187. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 글로벌 vs. 로컬 네비게이션 로컬 네비게이션 (ui요소명 : 네비게이션 바) 글로벌 네비게이션 (ui요소명 : 탭 바) 188
  188. 188. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 글로벌 vs. 로컬 네비게이션 운항스케줄 출발지 선택 도착지 선택 날짜 선택 확인 주요메뉴 탭바 189
  189. 189. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 글로벌 vs. 로컬 네비게이션 운항스케줄 로컬 네비게이션 (ui요소명 : 네비게이션 바) 출발지 선택 < Back 운항스케줄 Kite Air 도착지 선택 날짜 선택 확인 주요메뉴 탭바 190
  190. 190. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 글로벌 vs. 로컬 네비게이션 운항스케줄 로컬 네비게이션 (ui요소명 : 네비게이션 바) 출발지 선택 < Back 운항스케줄 Kite Air 도착지 선택 날짜 선택 글로벌 네비게이션 (ui요소명 : 탭 바) 확인 Home Check-in Time-table MyRounge 주요메뉴 탭바 191
  191. 191. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션을 위한 라벨링, 아이콘 192
  192. 192. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션을 위한 라벨링, 아이콘 글로벌, 로컬 요소가 일체화된 대핚항공 네비게이션-바 193
  193. 193. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 네비게이션을 위한 라벨링, 아이콘 글로벌, 로컬 요소가 일체화된 대핚항공 네비게이션-바 iOS의 전형적인 특성을 살린 아시아나 탭-바 194
  194. 194. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 iOS HIG case study colorsnap 195
  195. 195. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 iOS HIG case study VirtualWater 196
  196. 196. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 iOS HIG case study meernotes 197
  197. 197. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 Android UI case study EasyTether Astro Spotify 198
  198. 198. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 Android UI case study 360 Live appSaver Seesmic 199
  199. 199. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 Android UI case study Foursquare Document to Go Open Home 200
  200. 200. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 WP7 UI case study AP News MSN Video Weather Bug 201
  201. 201. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 WP7 UI case study Flixter Shazam travelocity 202
  202. 202. 03 모바일 프로젝트의 시각적구현 - 스크린디자인 WP7 UI case study Home-Depot Seesmic photobucket 203
  203. 203. 04 Mobile UX Prototyping 프로토타입 개발 | Dev 프로토타입 mark-up을 위한 HTML5 프로토타입 style을 위한 CSS3, webkit 프로토타입 interactivity를 위한 JQM 204
  204. 204. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발 팀별 프로젝트로 제출할 모바일 웹은 젂통 header 적인 header-content-footer 구조를 기본 으로 합니다. 개발언어는 html, css 입니다. 이미 제출한 기획 및 UX문서에 따라 메인, content 서브1, 서브2의 화면구성과 주요메뉴를 결 정하여 웹서버에 등록하고, 자싞의 스마트 폰으로 확인합니다. html, css 파일과 웹서버의 ftp정보는 별도 footer 첨부, 공지합니다.
  205. 205. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발 Case Study – Hautelook (SC)
  206. 206. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발 Case Study – Hautelook (SC)
  207. 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. 208. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발 HEAD 요소 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Today'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. 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. 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. 211. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발 <link rel="apple-touch-icon" href="./images/icon.png"/>  57X57사이즈의 이미지를 만들어 images폴더에 저장하면, 사용자가 홈화면저장 메뉴를 선택했을 때 네이티브 앱과 같은 아이콘이 홈 화면 에 생성됩니다.
  212. 212. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발 <meta name=apple-mobile-web-app-status-bar-style content=default>  웹 앱의 젂체 붂위기에 따라 화면 최상단의 status-bar의 컬러를 바꿀 수 있습니다. default는 회색 계열이며, black, transparent 옵션을 선택할 수 있습니다.
  213. 213. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발 <meta name="apple-mobile-web- app-capable" content="yes">  사용자가 홈화면저장 메뉴를 선택했 을 때 네이티브 앱과 같이 화면 젂체에 꽉 차는 (화면 상하단의 사파리 브라 우저 네비게이션이 사라지는) 레이아 웃을 사용할 수 있습니다.
  214. 214. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발 <meta name=viewport content=initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user- scalable=no;/>  뷰포트 크기를 설정합니다. 퍼블리싱한 웹페이지가 body의 크기대로 스마트폰 의 화면에 나타납니다. 사용자가 확대 축소할 수 있도록 할 수 있고, 이때 확 대 크기의 배율도 정할 수 있습니다.
  215. 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. 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. 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. 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. 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. 220. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발 플랫폼별, 스크린별 레이아웃 템플릿 221
  221. 221. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발 플랫폼별, 스크린별 레이아웃 템플릿 222
  222. 222. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발 플랫폼별, 스크린별 레이아웃 템플릿 223
  223. 223. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발 플랫폼별 UI개발 도구 224
  224. 224. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발 플랫폼별 UI개발 도구 225
  225. 225. 04 모바일 프로젝트의 실체적구현 – 프로토타입 개발 플랫폼별 UI개발 도구 226
  226. 226. 05 Mobile UX Prototyping 프로토타입 검증 | Simulate 227
  227. 227. 05 Mobile UX Prototyping 프로토타입 검증 | Simulate 모바일 적응 브라우저 (webkit-engine) 모바일 젂용 시뮬레이터 타겟 디바이스에서 검증 228
  228. 228. 05 Mobile UX Prototyping 프로토타입 검증 | Simulate 모바일 적응 브라우저 (webkit-engine) 모바일 젂용 시뮬레이터 타겟 디바이스에서 검증 229
  229. 229. 05 Mobile UX Prototyping 프로토타입 검증 | Simulate 모바일 적응 브라우저 (webkit-engine) 모바일 젂용 시뮬레이터 타겟 디바이스에서 검증 230
  230. 230. 05 모바일 프로젝트의 성능검증 – 시뮬레이션 구글 크롬 브라우저 231
  231. 231. 05 모바일 프로젝트의 성능검증 – 시뮬레이션 구글 크롬 브라우저 232
  232. 232. 05 모바일 프로젝트의 성능검증 – 시뮬레이션 애플 사파리 브라우저 233
  233. 233. 05 모바일 프로젝트의 성능검증 – 시뮬레이션 애플 사파리 브라우저 234
  234. 234. 05 모바일 프로젝트의 성능검증 – 시뮬레이션 Xcode Simulator 235
  235. 235. 05 모바일 프로젝트의 성능검증 – 시뮬레이션 Xcode Simulator 236
  236. 236. 05 모바일 프로젝트의 성능검증 – 시뮬레이션 Android Emulator 237
  237. 237. 05 모바일 프로젝트의 성능검증 – 시뮬레이션 Android Emulator 238
  238. 238. 05 모바일 프로젝트의 성능검증 – 시뮬레이션 Opera Simulator 239
  239. 239. 05 모바일 프로젝트의 성능검증 – 시뮬레이션 Opera Simulator 240
  240. 240. 05 모바일 프로젝트의 성능검증 – 시뮬레이션 Opera Simulator 241
  241. 241. 06 Mobile UX Prototyping 프로토타입 배포 | Publish 242
  242. 242. 06 Mobile UX Prototyping 프로토타입 배포 | Publish 웹 서버를 통한 배포 폰갭, 앱스프레소, WAC을 통한 패키징 사용성 테스트 스크립트 243
  243. 243. 06 Mobile UX Prototyping 프로토타입 배포 | Publish 웹 서버를 통한 배포 폰갭, 앱스프레소, WAC을 통한 패키징 사용성 테스트 스크립트 244
  244. 244. 06 Mobile UX Prototyping 프로토타입 배포 | Publish 웹 서버를 통한 배포 폰갭, 앱스프레소, WAC을 통한 패키징 사용성 테스트 스크립트 245
  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. 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. 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. 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. 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. 250. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포 패키징 툴 251
  251. 251. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포 패키징 툴 – 폰갭 PhoneGap 252
  252. 252. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포 패키징 툴 –PhoneGap (in Xcode) 253
  253. 253. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포 패키징 툴 –PhoneGap (in Eclipse) 254
  254. 254. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포 사용성 테스트, 테스트 스크립트 255
  255. 255. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포 사용성 테스트, 테스트 스크립트 사용성 테스트를 통해 UI디자이너는 프로젝트 결과물이 1. 디자인 컨셉을 잘 반영하였는지, 2. 기능적 요소가 문제 없이 작동하는지, 3. 프로젝트의 최종목적인, 사용자 만족을 주는 정도를 평가할 수 있다. 256
  256. 256. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포 사용성 테스트, 테스트 스크립트 사용성 테스트를 통해 UI디자이너는 프로젝트 결과물이 1. 디자인 컨셉을 잘 반영하였는지, 2. 기능적 요소가 문제 없이 작동하는지, 3. 프로젝트의 최종목적인, 사용자 만족을 주는 정도를 평가할 수 있다. 257
  257. 257. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포 사용성 테스트, 테스트 스크립트 사용성 테스트를 통해 UI디자이너는 프로젝트 결과물이 1. 디자인 컨셉을 잘 반영하였는지, 2. 기능적 요소가 문제 없이 작동하는지, 3. 프로젝트의 최종목적인, 사용자 만족을 주는 정도를 평가할 수 있다. 258
  258. 258. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포 사용성 테스트, 테스트 스크립트 사용성 테스트를 통해 UI디자이너는 프로젝트 결과물이 1. 디자인 컨셉을 잘 반영하였는지, 2. 기능적 요소가 문제 없이 작동하는지, 3. 프로젝트의 최종목적인, 사용자 만족을 주는 정도를 평가할 수 있다. 259
  259. 259. 06 모바일 프로젝트의 사용성평가 – 프로토타입 배포 사용성 테스트, 테스트 스크립트 사용성 테스트를 통해 UI디자이너는 프로젝트 결과물이 1. 디자인 컨셉을 잘 반영하였는지, 2. 기능적 요소가 문제 없이 작동하는지, 3. 프로젝트의 최종목적인, 사용자 만족을 주는 정도를 평가할 수 있다. 260
  260. 260. 01 모바일 프로젝트에서 프로토타입의 필요성 사용성 테스트 일정계획 (1W) 2days Planning 261
  261. 261. 01 모바일 프로젝트에서 프로토타입의 필요성 사용성 테스트 일정계획 (1W) 2days 3days Planning Recruiting 262
  262. 262. 01 모바일 프로젝트에서 프로토타입의 필요성 사용성 테스트 일정계획 (1W) 2days 3days 1days Planning Recruiting Study 263
  263. 263. 01 모바일 프로젝트에서 프로토타입의 필요성 사용성 테스트 일정계획 (1W) 2days 3days 1days 1days Planning Recruiting Study Findings 264
  264. 264. 01 모바일 프로젝트에서 프로토타입의 필요성 사용성 테스트 일정계획 (1W) 2days 3days 1days 1days Planning Recruiting Study Findings 사용성 테스트의 목적을 정의하는 것으로 시작핚다. 265
  265. 265. 01 모바일 프로젝트에서 프로토타입의 필요성 사용성 테스트 일정계획 (1W) 2days 3days 1days 1days Planning Recruiting Study Findings 테스트 과정 가운데 가장 많은 불확실성이 졲재한다. 사용성 테스트의 목적을 정의하는 것으로 시작핚다. 266
  266. 266. 01 모바일 프로젝트에서 프로토타입의 필요성 사용성 테스트 일정계획 (1W) 2days 3days 1days 1days Planning Recruiting Study Findings 테스트 과정 가운데 가장 많은 불확실성이 졲재한다. 사용성 테스트의 목적을 관렦비용과 외부 여건을 감앆해 정의하는 것으로 시작핚다. 실제 테스트는 싞속히 짂행한다. 267
  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. 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. 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. 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. 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. 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. 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. 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

×