Mobile Prototype Essential

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

01 모바일 프로젝트에서 프로토타입의 필요성 좋은 프로토타입의 조건 Quick Cheap Minimal You can create You wouldnt mind Contains only multiple versions throwing it away core features 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

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

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

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

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

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

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

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

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

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

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

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

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

01 모바일 프로젝트에서 프로토타입의 필요성 프로토타입별 속성 HTML5, JQM Paper sketches Wireframes Mockups Comps fast slow low fidelity high fidelity 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

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

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

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

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

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

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

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

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

01 모바일 프로젝트에서 프로토타입의 필요성 Prototyping Life-cycle Design Communicate Iterate Evaluate 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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">  </html>

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>

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>

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>

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

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

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

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

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;}

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; }

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));}

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);}

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)));

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

01 모바일 프로젝트에서 프로토타입의 필요성 UT4 - Usability Study • Facilitating sessions is harder than it looks; if you can’t do it, hire someone. • Use the ‚think aloud‛ protocol; the goal is to listen and observe, not demo your product. 1. Review participant background (10 minutes): Go over screener responses and delve deeper into areas of interest. 2. Scenario based tasks (40 minutes): Evaluate user experience by asking participants to complete tasks with the paper prototype. 3. Wrap-up interview (10 minutes): Ask participant about their overall impressions of the product. 281

01 모바일 프로젝트에서 프로토타입의 필요성 UT4 - Usability Study • Facilitating sessions is harder than it looks; if you can’t do it, hire someone. • Use the ‚think aloud‛ protocol; the goal is to listen and observe, not demo your product. 1. Review participant background (10 minutes): Go over screener responses and delve deeper into areas of interest. 2. Scenario based tasks (40 minutes): Evaluate user experience by asking participants to complete tasks with the paper prototype. 3. Wrap-up interview (10 minutes): Ask participant about their overall impressions of the product. 282

01 모바일 프로젝트에서 프로토타입의 필요성 UT4 - Usability Study • Facilitating sessions is harder than it looks; if you can’t do it, hire someone. • Use the ‚think aloud‛ protocol; the goal is to listen and observe, not demo your product. 1. Review participant background (10 minutes) Go over screener responses and delve deeper into areas of interest. 2. Scenario based tasks (40 minutes): Evaluate user experience by asking participants to complete tasks with the paper prototype. 3. Wrap-up interview (10 minutes): Ask participant about their overall impressions of the product. 283

01 모바일 프로젝트에서 프로토타입의 필요성 UT4 - Usability Study • Facilitating sessions is harder than it looks; if you can’t do it, hire someone. • Use the ‚think aloud‛ protocol; the goal is to listen and observe, not demo your product. 1. Review participant background (10 minutes) Go over screener responses and delve deeper into areas of interest. 2. Scenario based tasks (40 minutes) Evaluate user experience by asking participants to complete tasks with the paper prototype. 3. Wrap-up interview (10 minutes): Ask participant about their overall impressions of the product. 284

01 모바일 프로젝트에서 프로토타입의 필요성 UT4 - Usability Study • Facilitating sessions is harder than it looks; if you can’t do it, hire someone. • Use the ‚think aloud‛ protocol; the goal is to listen and observe, not demo your product. 1. Review participant background (10 minutes) Go over screener responses and delve deeper into areas of interest. 2. Scenario based tasks (40 minutes) Evaluate user experience by asking participants to complete tasks with the paper prototype. 3. Wrap-up interview (10 minutes) Ask participant about their overall impressions of the product. 285

01 모바일 프로젝트에서 프로토타입의 필요성 UT5 - Usability Findings • Format will depend on your company’s goals & needs; some company’s needs are met with a ‚quick findings,‛ others may need a detailed report with video clips. • Overall: Participants liked the concept and would use it if free. • Navigation : Understood tab structure & navigation between events. • Content: Wanted additional info on list view and detail view (e.g. text reviews instead of ratings alone). • Web Site vs. iPhone: Some participants expected the app to have a sister web site; thought certain tasks were more appropriate for desktop. 286

06 모바일 프로젝트의 사용성평가 – 프로토타입 배포 사용성 테스트, 테스트 스크립트 사용성 Usability 평가 3대 지표 1. 효과는 주어짂 임무를 대상 앱을 통해 얼만큼 싞속히, 그리고 정확히 해냈는가를 평가 2. 효율은 효과를 얻기 위해 얼마만큼의 자원을 투입하였는지를 판단 3. 만족도는 앱을 사용함으로써 불편함이 Usability 제거되었거나 심리적 앆정감의 정도를 평가. 291

06 모바일 프로젝트의 사용성평가 – 프로토타입 배포 사용성 테스트, 테스트 스크립트 사용성 Usability 평가 3대 지표 1. 효과는 주어짂 임무를 대상 앱을 통해 얼만큼 싞속히, 그리고 정확히 해냈는가를 평가 Efficiency 2. 효율은 효과를 얻기 위해 얼마만큼의 자원을 투입하였는지를 판단 Satisfaction 3. 만족도는 앱을 사용함으로써 불편함이 제거되었거나 심리적 앆정감의 정도를 평가 Effectiveness 292

06 모바일 프로젝트의 사용성평가 – 프로토타입 배포 사용성 테스트, 테스트 스크립트 테스트 시나리오 점심시갂에 운항스케줄 확인하고, 항공 권 구매후 마일리지 적립확인 TASK1 사용자가 원하는 항공권을 정확히 찾아 얼마나 싞속히 구매하는지를 측정 TASK2 사용자 젂용페이지에서 관심정보를 찾는 데 걸린 시갂, 컨텎츠의 만족도를 측정 295

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

http://www.nextapp.co.kr	1110
http://nextapp.co.kr	429
http://passionate01.tistory.com	327
http://search.daum.net	17
http://blog.naver.com	3
http://cafe.naver.com	2
http://www.nextapp.co.kr&_=1354777913484 HTTP	1
http://www.bebezoa.com	1
http://mail1.naver.com	1
http://www.nextapp.co.kr HTTP	1
http://211.202.2.82	1

Mobile Prototype Essential

by Junsang Dong

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 1,893

Statistics

Mobile Prototype Essential Presentation Transcript