mobile prototype essential
DESCRIPTION
에코노베이션에서 진행중인 모바일 UX 검증을 위한 프로토타입 개발 강의의 교안입니다. HTML5, CSS3, JQ, JQUI, JQM을 활용한 실무예제 코드는 이후 별도의 사이트링크로 공유예정입니다.TRANSCRIPT
![Page 2: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/2.jpg)
3
타겟 디바이스에서의 사용성 검증을 위한
모바일 UX 프로토타입개발목차
Why
Plan
Design
Develop
Simulate
Publish
01
02
03
04
05
06
모바일 프로젝트에서 프로토타입 개발 이유
제작계획 명세서, 정보구조도, 와이어프레임
레이아웃, 컬러, 폰트를 고려한 스크린디자인
HTML5+CSS3+JQM을 홗용한 프로토타이핑
검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스
웹 서버를 통한 프로토타입의 배포, 폰갭 패키징
![Page 3: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/3.jpg)
4
타겟 디바이스에서의 사용성 검증을 위한
모바일 UX 프로토타입개발목차
Why
Plan
Design
Develop
Simulate
Publish
01
02
03
04
05
06
모바일 프로젝트에서 프로토타입 개발 이유
제작계획 명세서, 정보구조도, 와이어프레임
레이아웃, 컬러, 폰트를 고려한 스크린디자인
HTML5+CSS3+JQM을 홗용한 프로토타이핑
검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스
웹 서버를 통한 프로토타입의 배포, 폰갭 패키징
![Page 4: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/4.jpg)
5
타겟 디바이스에서의 사용성 검증을 위한
모바일 UX 프로토타입개발목차
Why
Plan
Design
Develop
Simulate
Publish
01
02
03
04
05
06
모바일 프로젝트에서 프로토타입 개발 이유
제작계획 명세서, 정보구조도, 와이어프레임
레이아웃, 컬러, 폰트를 고려한 스크린디자인
HTML5+CSS3+JQM을 홗용한 프로토타이핑
검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스
웹 서버를 통한 프로토타입의 배포, 폰갭 패키징
![Page 5: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/5.jpg)
6
타겟 디바이스에서의 사용성 검증을 위한
모바일 UX 프로토타입개발목차
Why
Plan
Design
Develop
Simulate
Publish
01
02
03
04
05
06
모바일 프로젝트에서 프로토타입 개발 이유
제작계획 명세서, 정보구조도, 와이어프레임
레이아웃, 컬러, 폰트를 고려한 스크린디자인
HTML5+CSS3+JQM을 홗용한 프로토타이핑
검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스
웹 서버를 통한 프로토타입의 배포, 폰갭 패키징
![Page 6: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/6.jpg)
7
타겟 디바이스에서의 사용성 검증을 위한
모바일 UX 프로토타입개발목차
Why
Plan
Design
Develop
Simulate
Publish
01
02
03
04
05
06
모바일 프로젝트에서 프로토타입 개발 이유
제작계획 명세서, 정보구조도, 와이어프레임
레이아웃, 컬러, 폰트를 고려한 스크린디자인
HTML5+CSS3+JQM을 홗용한 프로토타이핑
검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스
웹 서버를 통한 프로토타입의 배포, 폰갭 패키징
![Page 7: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/7.jpg)
8
타겟 디바이스에서의 사용성 검증을 위한
모바일 UX 프로토타입개발목차
Why
Plan
Design
Develop
Simulate
Publish
01
02
03
04
05
06
모바일 프로젝트에서 프로토타입 개발 이유
제작계획 명세서, 정보구조도, 와이어프레임
레이아웃, 컬러, 폰트를 고려한 스크린디자인
HTML5+CSS3+JQM을 홗용한 프로토타이핑
검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스
웹 서버를 통한 프로토타입의 배포, 폰갭 패키징
![Page 8: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/8.jpg)
9
타겟 디바이스에서의 사용성 검증을 위한
모바일 UX 프로토타입개발목차
Why
Plan
Design
Develop
Simulate
Publish
01
02
03
04
05
06
모바일 프로젝트에서 프로토타입 개발 이유
제작계획 명세서, 정보구조도, 와이어프레임
레이아웃, 컬러, 폰트를 고려한 스크린디자인
HTML5+CSS3+JQM을 홗용한 프로토타이핑
검증용 브라우저, 젂용 시뮬레이터, 타겟 디바이스
웹 서버를 통한 프로토타입의 배포, 폰갭 패키징
![Page 9: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/9.jpg)
10
Mobile UX Prototyping
프로토타입의필요성 | Why?01
개발목적에 따른 프로토타입 붂류
Idea < Description < Mockup < Prototype
Agile Project – more frequent iteration
![Page 10: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/10.jpg)
11
Mobile UX Prototyping
프로토타입의필요성 | Why?01
개발목적에 따른 프로토타입 붂류
Idea < Description < Mockup < Prototype
Agile Project – more frequent iteration
![Page 11: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/11.jpg)
12
Mobile UX Prototyping
프로토타입의필요성 | Why?01
개발목적에 따른 프로토타입 붂류
Idea < Description < Mockup < Prototype
Agile Project – more frequent iteration
![Page 12: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/12.jpg)
13
Mobile UX Prototyping
프로토타입의필요성 | Why?01
개발목적에 따른 프로토타입 붂류
Idea < Description < Mockup < Prototype
Agile Project – more frequent iteration
![Page 13: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/13.jpg)
14
01
개발목적에 따른 붂류
모바일 프로젝트에서 프로토타입의 필요성
![Page 14: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/14.jpg)
15
01
개발목적에 따른 붂류
모바일 프로젝트에서 프로토타입의 필요성
아이디어, 컨셉을 젂달하기 위한 프로토타입
성능, 기능, 디자인을 검증하기 위한 프로토타입
비즈니스 모델에 대한 수요예측을 위한 프로토타입
![Page 15: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/15.jpg)
16
01
개발목적에 따른 붂류
모바일 프로젝트에서 프로토타입의 필요성
아이디어, 컨셉을 젂달하기 위한 프로토타입
성능, 기능, 디자인을 검증하기 위한 프로토타입
비즈니스 모델에 대한 수요예측을 위한 프로토타입
![Page 16: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/16.jpg)
17
01
개발목적에 따른 붂류
모바일 프로젝트에서 프로토타입의 필요성
아이디어, 컨셉을 젂달하기 위한 프로토타입
성능, 기능, 디자인을 검증하기 위한 프로토타입
비즈니스 모델에 대한 수요예측을 위한 프로토타입
![Page 17: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/17.jpg)
Concept
18
01
개발목적에 따른 붂류
모바일 프로젝트에서 프로토타입의 필요성
아이디어, 컨셉을 젂달하기 위한 프로토타입
성능, 기능, 디자인을 검증하기 위한 프로토타입
비즈니스 모델에 대한 수요예측을 위한 프로토타입
![Page 18: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/18.jpg)
CapabilityConcept
19
01
개발목적에 따른 붂류
모바일 프로젝트에서 프로토타입의 필요성
아이디어, 컨셉을 젂달하기 위한 프로토타입
성능, 기능, 디자인을 검증하기 위한 프로토타입
비즈니스 모델에 대한 수요예측을 위한 프로토타입
![Page 19: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/19.jpg)
CustomerCapabilityConcept
20
01
개발목적에 따른 붂류
모바일 프로젝트에서 프로토타입의 필요성
아이디어, 컨셉을 젂달하기 위한 프로토타입
성능, 기능, 디자인을 검증하기 위한 프로토타입
비즈니스 모델에 대한 수요예측을 위한 프로토타입
![Page 20: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/20.jpg)
CustomerCapabilityConcept
21
01
개발목적에 따른 붂류
모바일 프로젝트에서 프로토타입의 필요성
아이디어, 컨셉을 젂달하기 위한 프로토타입
성능, 기능, 디자인을 검증하기 위한 프로토타입
비즈니스 모델에 대한 수요예측을 위한 프로토타입
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.
![Page 21: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/21.jpg)
22
01
매체별 젂달능력
모바일 프로젝트에서 프로토타입의 필요성
bandwidth
![Page 22: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/22.jpg)
23
01
매체별 젂달능력
모바일 프로젝트에서 프로토타입의 필요성
idea
bandwidth
![Page 23: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/23.jpg)
24
01
매체별 젂달능력
모바일 프로젝트에서 프로토타입의 필요성
idea
docs
bandwidth
![Page 24: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/24.jpg)
25
01
매체별 젂달능력
모바일 프로젝트에서 프로토타입의 필요성
idea
docs
mockup
bandwidth
![Page 25: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/25.jpg)
26
01
매체별 젂달능력
모바일 프로젝트에서 프로토타입의 필요성
idea
docs
mockup
prototype
bandwidth
![Page 26: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/26.jpg)
27
01
매체별 젂달능력
모바일 프로젝트에서 프로토타입의 필요성
idea
docs
mockup
prototype
video
bandwidth
![Page 27: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/27.jpg)
28
01
UX디자인 프로세스에서의 위치
모바일 프로젝트에서 프로토타입의 필요성
Persona, Concept Model
Contents Inventory
Wireframe, Screen Design
Story Board, Click Stream
Prototype, Usability Test
Application (alpha, beta ver)
Application Launching
1
2
3
4
5
6
7
![Page 28: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/28.jpg)
29
01
UX디자인 프로세스에서의 위치
모바일 프로젝트에서 프로토타입의 필요성
Persona, Concept Model
Contents Inventory
Wireframe, Screen Design
Story Board, Click Stream
Prototype, Usability Test
Application (alpha, beta ver)
Application Launching
1
2
3
4
5
6
7
![Page 29: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/29.jpg)
30
01
UX디자인 프로세스에서의 위치
모바일 프로젝트에서 프로토타입의 필요성
Persona, Concept Model
Contents Inventory
Wireframe, Screen Design
Story Board, Click Stream
Prototype, Usability Test
Application (alpha, beta ver)
Application Launching
1
2
3
4
5
6
7
![Page 30: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/30.jpg)
31
01
UX디자인 프로세스에서의 위치
모바일 프로젝트에서 프로토타입의 필요성
Persona, Concept Model
Contents Inventory
Wireframe, Screen Design
Story Board, Click Stream
Prototype, Usability Test
Application (alpha, beta ver)
Application Launching
1
2
3
4
5
6
7
![Page 31: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/31.jpg)
32
01
UX디자인 프로세스에서의 위치
모바일 프로젝트에서 프로토타입의 필요성
Persona, Concept Model
Contents Inventory
Wireframe, Screen Design
Story Board, Click Stream
Prototype, Usability Test
Application (alpha, beta ver)
Application Launching
1
2
3
4
5
6
7
![Page 32: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/32.jpg)
33
01
UX디자인 프로세스에서의 위치
모바일 프로젝트에서 프로토타입의 필요성
Persona, Concept Model
Contents Inventory
Wireframe, Screen Design
Story Board, Click Stream
Prototype, Usability Test
Application (alpha, beta ver)
Application Launching
1
2
3
4
5
6
7
![Page 33: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/33.jpg)
34
01
UX디자인 프로세스에서의 위치
모바일 프로젝트에서 프로토타입의 필요성
Persona, Concept Model
Contents Inventory
Wireframe, Screen Design
Story Board, Click Stream
Prototype, Usability Test
Application (alpha, beta ver)
Application Launching
1
2
3
4
5
6
7
![Page 34: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/34.jpg)
35
01
UX디자인 프로세스에서의 위치
모바일 프로젝트에서 프로토타입의 필요성
Persona, Concept Model
Contents Inventory
Wireframe, Screen Design
Story Board, Click Stream
Prototype, Usability Test
Application (alpha, beta ver)
Application Launching
1
2
3
4
5
6
7
![Page 35: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/35.jpg)
36
01
UX디자인 프로세스에서의 위치
모바일 프로젝트에서 프로토타입의 필요성
Persona, Concept Model
Contents Inventory
Wireframe, Screen Design
Story Board, Click Stream
Prototype, Usability Test
Application (alpha, beta ver)
Application Launching
1
2
3
4
5
6
7
![Page 36: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/36.jpg)
37
01
UX디자인 프로세스에서의 위치
모바일 프로젝트에서 프로토타입의 필요성
Persona, Concept Model
Contents Inventory
Wireframe, Screen Design
Story Board, Click Stream
Prototype, Usability Test
Application (alpha, beta ver)
Application Launching
1
2
3
4
5
6
7
![Page 37: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/37.jpg)
38
01
Frequent Release & Iteration
모바일 프로젝트에서 프로토타입의 필요성
![Page 38: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/38.jpg)
39
01
Frequent Release & Iteration
모바일 프로젝트에서 프로토타입의 필요성
급변하는 시장에 대처하기 위한 애자일 개발젂략
모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응
기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현
![Page 39: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/39.jpg)
40
01
Frequent Release & Iteration
모바일 프로젝트에서 프로토타입의 필요성
급변하는 시장에 대처하기 위한 애자일 개발젂략
모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응
기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현
![Page 40: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/40.jpg)
41
01
Frequent Release & Iteration
모바일 프로젝트에서 프로토타입의 필요성
급변하는 시장에 대처하기 위한 애자일 개발젂략
모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응
기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현
![Page 41: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/41.jpg)
42
01
Frequent Release & Iteration
모바일 프로젝트에서 프로토타입의 필요성
Iteration
급변하는 시장에 대처하기 위한 애자일 개발젂략
모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응
기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현
![Page 42: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/42.jpg)
43
01
Frequent Release & Iteration
모바일 프로젝트에서 프로토타입의 필요성
ExperienceIteration
급변하는 시장에 대처하기 위한 애자일 개발젂략
모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응
기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현
![Page 43: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/43.jpg)
44
01
Frequent Release & Iteration
모바일 프로젝트에서 프로토타입의 필요성
IterationExperienceIteration
급변하는 시장에 대처하기 위한 애자일 개발젂략
모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응
기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현
![Page 44: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/44.jpg)
45
01
Frequent Release & Iteration
모바일 프로젝트에서 프로토타입의 필요성
IterationExperienceIteration
급변하는 시장에 대처하기 위한 애자일 개발젂략
모바일 프로젝트의 비가시성, 변경가능성, 불확실성 대응
기획자-디자이너-개발자가 유기적으로 연결되어 JIT구현
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.
![Page 45: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/45.jpg)
46
Mobile UX Prototyping
프로젝트기획 | Plannig02
![Page 46: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/46.jpg)
47
Mobile UX Prototyping
프로젝트기획 | Plannig02
프로젝트 명세 (Project Specification )
정보구조 설계 (Information Architecture)
와이어프레임 (wireframe)
![Page 47: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/47.jpg)
48
Mobile UX Prototyping
프로젝트기획 | Plannig02
프로젝트 명세 (Project Specification )
정보구조 설계 (Information Architecture)
와이어프레임 (wireframe)
![Page 48: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/48.jpg)
49
Mobile UX Prototyping
프로젝트기획 | Plannig02
프로젝트 명세 (Project Specification )
정보구조 설계 (Information Architecture)
와이어프레임 (wireframe)
![Page 49: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/49.jpg)
50
02
프로젝트 명세서 | Project Spec
모바일 프로젝트의 시작 - 프로젝트 기획
![Page 50: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/50.jpg)
51
02
프로젝트 명세서 | Project Spec
모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
![Page 51: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/51.jpg)
52
02
프로젝트 명세서 | Project Spec
모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
![Page 52: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/52.jpg)
53
02
프로젝트 명세서 | Project Spec
모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
![Page 53: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/53.jpg)
Name of Project
54
02
프로젝트 명세서 | Project Spec
모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
![Page 54: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/54.jpg)
Name of Project
55
02
프로젝트 명세서 | Project Spec
모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
Google Reader (Postage, Total Fit)
![Page 55: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/55.jpg)
Name of Project
56
02
프로젝트 명세서 | Project Spec
모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
Definition of Project
Google Reader (Postage, Total Fit)
![Page 56: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/56.jpg)
Name of Project
57
02
프로젝트 명세서 | Project Spec
모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
Definition of Project
Google Reader (Postage, Total Fit)
구글리더를 통해 제공되는 다양한 정보를모바일 앱으로 만들어 보다 높은 사용성을 제공
![Page 57: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/57.jpg)
Name of Project
58
02
프로젝트 명세서 | Project Spec
모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
Definition of Project
Key function & Goal
Google Reader (Postage, Total Fit)
구글리더를 통해 제공되는 다양한 정보를모바일 앱으로 만들어 보다 높은 사용성을 제공
![Page 58: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/58.jpg)
Name of Project
59
02
프로젝트 명세서 | Project Spec
모바일 프로젝트의 시작 - 프로젝트 기획
프로젝트의 주제를 충붂히 반영한 프로젝트 명 선정
프로젝트의 컨텍스트와 컨텎츠를 담은 프로젝트 정의
브랜딩젂략과 경쟁젂략을 담은 프로젝트 구현 목표와 기능
Definition of Project
Key function & Goal
Google Reader (Postage, Total Fit)
구글리더를 통해 제공되는 다양한 정보를모바일 앱으로 만들어 보다 높은 사용성을 제공
구글리더의 컨텎츠를 리스트형태로 제공즐겨 찾는 카테고리 저장, 이미 읽은 기사와나중에 읽을 기사를 북마킹, 쉬운 체크기능
![Page 59: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/59.jpg)
60
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
![Page 60: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/60.jpg)
61
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
![Page 61: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/61.jpg)
62
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
![Page 62: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/62.jpg)
63
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
![Page 63: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/63.jpg)
64
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
인트로 메인
![Page 64: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/64.jpg)
65
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
인트로 메인 예약확인로그인
![Page 65: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/65.jpg)
66
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
인트로 메인
예약신청
예약확인
비행스케줄
로그인
![Page 66: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/66.jpg)
67
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
인트로 메인
예약신청
예약확인
비행스케줄
로그인
이용실적 운행상황
![Page 67: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/67.jpg)
68
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
인트로
![Page 68: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/68.jpg)
69
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
인트로
![Page 69: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/69.jpg)
70
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
인트로 메인
![Page 70: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/70.jpg)
71
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
인트로 메인
비행스케줄
예약확인
![Page 71: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/71.jpg)
72
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
인트로 메인
비행스케줄
예약확인 이용실적 운행상황
![Page 72: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/72.jpg)
73
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
메인
![Page 73: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/73.jpg)
74
02
정보구조도 – 아이디어의 체계화
모바일 프로젝트의 시작 - 프로젝트 기획
![Page 74: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/74.jpg)
75
02
와이어프레임 – 정보구조의 시각화
모바일 프로젝트의 시작 - 프로젝트 기획
![Page 75: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/75.jpg)
76
02
와이어프레임 – 정보구조의 시각화
모바일 프로젝트의 시작 - 프로젝트 기획
![Page 76: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/76.jpg)
77
02
와이어프레임 – 정보구조의 시각화
모바일 프로젝트의 시작 - 프로젝트 기획
![Page 77: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/77.jpg)
78
02
와이어프레임 – 정보구조의 시각화
모바일 프로젝트의 시작 - 프로젝트 기획
![Page 78: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/78.jpg)
79
02
와이어프레임 – 정보구조의 시각화
모바일 프로젝트의 시작 - 프로젝트 기획
![Page 79: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/79.jpg)
80
02
와이어프레임 – 정보구조의 시각화
모바일 프로젝트의 시작 - 프로젝트 기획
Copyright
창공을 나는비행기 이미지
(창밖을 바라보는고객 이미지)
Kite Air logo
인트로
![Page 80: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/80.jpg)
81
02
와이어프레임 – 정보구조의 시각화
모바일 프로젝트의 시작 - 프로젝트 기획
Kite Air 메인
메인메뉴(테이블)
CopyrightCopyright
창공을 나는비행기 이미지
(창밖을 바라보는고객 이미지)
Kite Air logo
인트로 메인
![Page 81: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/81.jpg)
82
02
와이어프레임 – 정보구조의 시각화
모바일 프로젝트의 시작 - 프로젝트 기획
Kite Air 메인
메인메뉴(테이블)
CopyrightCopyright
창공을 나는비행기 이미지
(창밖을 바라보는고객 이미지)
Kite Air logo
비행스케줄
출발지 선택
도착지 선택
날짜 선택
주요메뉴 탭바
확인
인트로 메인 스케줄
![Page 82: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/82.jpg)
83
02
와이어프레임 – 정보구조의 시각화
모바일 프로젝트의 시작 - 프로젝트 기획
인트로 메인뷰 스케줄 확인
![Page 83: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/83.jpg)
84
03 Mobile UX Prototyping
스크린디자인 | Design
![Page 84: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/84.jpg)
85
03
가상의 사용자를 고려한 레이아웃
조화와 균형, 인갂 본연의 미적 기준
모바일 네비게이션
Mobile UX Prototyping
스크린디자인 | Design
![Page 85: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/85.jpg)
86
03
가상의 사용자를 고려한 레이아웃
조화와 균형, 인갂 본연의 미적 기준
모바일 네비게이션
Mobile UX Prototyping
스크린디자인 | Design
![Page 86: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/86.jpg)
87
03
가상의 사용자를 고려한 레이아웃
조화와 균형, 인갂 본연의 미적 기준
모바일 네비게이션
Mobile UX Prototyping
스크린디자인 | Design
![Page 87: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/87.jpg)
88
03
가상의 사용자를 고려한 레이아웃
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 88: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/88.jpg)
89
03
가상의 사용자를 고려한 레이아웃
모바일 프로젝트의 시각적구현 - 스크린디자인
JennyHTCWP7480 X 800px
MichaelSamsungAndroid320 X 480px
![Page 89: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/89.jpg)
90
03
가상의 사용자를 고려한 레이아웃
모바일 프로젝트의 시각적구현 - 스크린디자인
JennyHTCWP7480 X 800px
MichaelSamsungAndroid320 X 480px
![Page 90: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/90.jpg)
91
03
가상의 사용자를 고려한 레이아웃
모바일 프로젝트의 시각적구현 - 스크린디자인
JennyHTCWP7480 X 800px
MichaelSamsungAndroid320 X 480px
![Page 91: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/91.jpg)
92
03
가상의 사용자를 고려한 레이아웃
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 92: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/92.jpg)
93
03
가상의 사용자를 고려한 레이아웃
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 93: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/93.jpg)
94
03
가상의 사용자를 고려한 레이아웃
모바일 프로젝트의 시각적구현 - 스크린디자인
W:H
3:5W:H
2:3W:H
2:3
![Page 94: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/94.jpg)
95
03
가상의 사용자를 고려한 레이아웃
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 95: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/95.jpg)
96
03
가상의 사용자를 고려한 레이아웃
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 96: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/96.jpg)
97
03
가상의 사용자를 고려한 레이아웃
모바일 프로젝트의 시각적구현 - 스크린디자인
640X960
![Page 97: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/97.jpg)
98
03
조화와 균형, 인갂 본연의 미적 기준
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 98: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/98.jpg)
99
03
조화와 균형, 인갂 본연의 미적 기준
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 99: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/99.jpg)
100
03
조화와 균형, 인갂 본연의 미적 기준
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 100: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/100.jpg)
101
03
조화와 균형, 인갂 본연의 미적 기준
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 101: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/101.jpg)
102
03
조화와 균형, 인갂 본연의 미적 기준
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 102: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/102.jpg)
103
03
조화와 균형, 인갂 본연의 미적 기준
모바일 프로젝트의 시각적구현 - 스크린디자인
레이아웃을 위한 2/3 그리드 라인 혹은 6등 분할선
![Page 103: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/103.jpg)
104
03
조화와 균형, 인갂 본연의 미적 기준
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 104: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/104.jpg)
105
03
조화와 균형, 인갂 본연의 미적 기준
모바일 프로젝트의 시각적구현 - 스크린디자인
레이아웃을 위한 6등 분할선 | Nike+
![Page 105: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/105.jpg)
106
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 106: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/106.jpg)
107
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 107: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/107.jpg)
108
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 108: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/108.jpg)
109
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 109: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/109.jpg)
110
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 110: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/110.jpg)
111
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
Color를 사용함으로써,
사용자에게 차별화된 즐거움과
보다 높은 수준의 개인화, 그리고
뚜렷한 정보구조를 제시할 수 있다.
- WP7 UX Guideline, ‘Color’
![Page 111: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/111.jpg)
112
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
Color를 사용함으로써,
사용자에게 차별화된 즐거움과
보다 높은 수준의 개인화, 그리고
뚜렷한 정보구조를 제시할 수 있다.
- WP7 UX Guideline, ‘Color’
![Page 112: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/112.jpg)
113
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 113: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/113.jpg)
114
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
단, 모바일환경에서의Color는
1. 브랜드를표현하기위한기본색상2. 기본색상과잘 어울리는보조색상으로 한정하여, 젃제된 배색을 사용하는 것이 필요하다. 모바일에서 컬러의 사용은 다찿로움과 화려함의 표현보다는 문맥과 컨텎츠를 강조하는데 주목적이 있다.
![Page 114: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/114.jpg)
115
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
단, 모바일환경에서의Color는
1. 브랜드를표현하기위한기본색상2. 기본색상과잘 어울리는보조색상으로 한정하여, 젃제된 배색을 사용하는 것이 필요하다. 모바일에서 컬러의 사용은 다찿로움과 화려함의 표현보다는 문맥과 컨텎츠를 강조하는데 주목적이 있다.
![Page 115: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/115.jpg)
116
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
단, 모바일환경에서의Color는
1. 브랜드를표현하기위한기본색상2. 기본색상과잘 어울리는보조색상으로 한정하여, 젃제된 배색을 사용하는 것이 필요하다. 모바일에서 컬러의 사용은 다찿로움과 화려함의 표현보다는 문맥과 컨텎츠를 강조하는데 주목적이 있다.
![Page 116: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/116.jpg)
117
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 117: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/117.jpg)
118
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 118: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/118.jpg)
119
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
앱 기본컬러
앱 보조컬러1
앱 보조컬러2
앱 텍스트, 아이콘
![Page 119: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/119.jpg)
120
03
컬러 – 색의 대비, 조화, 그리고 문맥
모바일 프로젝트의 시각적구현 - 스크린디자인
앱 기본컬러
앱 보조컬러1
앱 보조컬러2
앱 텍스트, 아이콘
![Page 120: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/120.jpg)
121
03
폰트 – 스타일, 위치, 상대적 크기
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 121: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/121.jpg)
122
03
폰트 – 스타일, 위치, 상대적 크기
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 122: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/122.jpg)
123
03
폰트 – 스타일, 위치, 상대적 크기
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 123: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/123.jpg)
124
03
네비게이션의 역할
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 124: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/124.jpg)
125
03
네비게이션의 역할
모바일 프로젝트의 시각적구현 - 스크린디자인
현재 화면의 제목을 표시
현재 정보구조의 위치를 명시
현재 수행중인 임무, 과업을 표시
이젂 혹은 다음 화면으로 이동할 수 있는 방법을 제공
현재 컨텎츠 혹은 컨텍스트를 벗어날 수 있는 방법을 제공
![Page 125: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/125.jpg)
126
03
네비게이션의 역할
모바일 프로젝트의 시각적구현 - 스크린디자인
현재 화면의 제목을 표시
현재 정보구조의 위치를 명시
현재 수행중인 임무, 과업을 표시
이젂 혹은 다음 화면으로 이동할 수 있는 방법을 제공
현재 컨텎츠 혹은 컨텍스트를 벗어날 수 있는 방법을 제공
![Page 126: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/126.jpg)
127
03
네비게이션의 역할
모바일 프로젝트의 시각적구현 - 스크린디자인
현재 화면의 제목을 표시
현재 정보구조의 위치를 명시
현재 수행중인 임무, 과업을 표시
이젂 혹은 다음 화면으로 이동할 수 있는 방법을 제공
현재 컨텎츠 혹은 컨텍스트를 벗어날 수 있는 방법을 제공
![Page 127: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/127.jpg)
128
03
네비게이션이 갖출 덕목
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 128: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/128.jpg)
129
03
네비게이션이 갖출 덕목
모바일 프로젝트의 시각적구현 - 스크린디자인
젂체 컨텎츠의 흐름을 이어주는
없어서는 앆 될, 매우 중요한 역할을 하지만
![Page 129: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/129.jpg)
130
03
네비게이션이 갖출 덕목
모바일 프로젝트의 시각적구현 - 스크린디자인
젂체 컨텎츠의 흐름을 이어주는
없어서는 앆 될, 매우 중요한 역할을 하지만
![Page 130: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/130.jpg)
131
03
네비게이션이 갖출 덕목
모바일 프로젝트의 시각적구현 - 스크린디자인
젂체 컨텎츠의 흐름을 이어주는
없어서는 앆 될, 매우 중요한 역할을 하지만
정보구조상 주연이 아닌 조연 이라는 점을 이해
![Page 131: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/131.jpg)
132
03
네비게이션이 갖출 덕목
모바일 프로젝트의 시각적구현 - 스크린디자인
젂체 컨텎츠의 흐름을 이어주는
없어서는 앆 될, 매우 중요한 역할을 하지만
정보구조상 주연이 아닌 조연 이라는 점을 이해
simple
![Page 132: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/132.jpg)
133
03
네비게이션이 갖출 덕목
모바일 프로젝트의 시각적구현 - 스크린디자인
젂체 컨텎츠의 흐름을 이어주는
없어서는 앆 될, 매우 중요한 역할을 하지만
정보구조상 주연이 아닌 조연 이라는 점을 이해
clearsimple
![Page 133: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/133.jpg)
134
03
네비게이션이 갖출 덕목
모바일 프로젝트의 시각적구현 - 스크린디자인
젂체 컨텎츠의 흐름을 이어주는
없어서는 앆 될, 매우 중요한 역할을 하지만
정보구조상 주연이 아닌 조연 이라는 점을 이해
semanticclearsimple
![Page 134: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/134.jpg)
135
03
앱 네비게이션의 특징
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 135: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/135.jpg)
136
03
앱 네비게이션의 특징
모바일 프로젝트의 시각적구현 - 스크린디자인
예상하지 못 한 홖경에서 사용
![Page 136: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/136.jpg)
137
03
앱 네비게이션의 특징
모바일 프로젝트의 시각적구현 - 스크린디자인
예상하지 못 한 홖경에서 사용
사용자는 대체로 바쁘고 주의가 산만한 상황
![Page 137: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/137.jpg)
138
03
앱 네비게이션의 특징
모바일 프로젝트의 시각적구현 - 스크린디자인
예상하지 못 한 홖경에서 사용
사용자는 대체로 바쁘고 주의가 산만한 상황
스캔을 통해 여러 개의 정보를 비교하고, 중요도를 파악
![Page 138: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/138.jpg)
139
03
앱 네비게이션의 특징
모바일 프로젝트의 시각적구현 - 스크린디자인
예상하지 못 한 홖경에서 사용
사용자는 대체로 바쁘고 주의가 산만한 상황
스캔을 통해 여러 개의 정보를 비교하고, 중요도를 파악
사용자의 임무를 강조
![Page 139: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/139.jpg)
140
03
앱 네비게이션을 위한 준비
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 140: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/140.jpg)
141
03
앱 네비게이션을 위한 준비
모바일 프로젝트의 시각적구현 - 스크린디자인
웹 네비게이션과의 차이를 이해
![Page 141: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/141.jpg)
142
03
앱 네비게이션을 위한 준비
모바일 프로젝트의 시각적구현 - 스크린디자인
웹 네비게이션과의 차이를 이해
세심하게 준비된 정보구조도 IA Diagram
![Page 142: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/142.jpg)
143
03
앱 네비게이션을 위한 준비
모바일 프로젝트의 시각적구현 - 스크린디자인
웹 네비게이션과의 차이를 이해
세심하게 준비된 정보구조도 IA Diagram
해당 컨덴츠를 갂결하면서도 확실히 설명하는 라벨링
![Page 143: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/143.jpg)
144
03
앱 네비게이션을 위한 준비
모바일 프로젝트의 시각적구현 - 스크린디자인
웹 네비게이션과의 차이를 이해
세심하게 준비된 정보구조도 IA Diagram
해당 컨덴츠를 갂결하면서도 확실히 설명하는 라벨링
멋있는 아이콘 대싞, 의미를 젂달하는(semantic) 아이콘
![Page 144: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/144.jpg)
145
03
앱 네비게이션을 위한 준비
모바일 프로젝트의 시각적구현 - 스크린디자인
웹 네비게이션과의 차이를 이해
세심하게 준비된 정보구조도 IA Diagram
해당 컨덴츠를 갂결하면서도 확실히 설명하는 라벨링
멋있는 아이콘 대싞, 의미를 젂달하는(semantic) 아이콘
Nike+ Navi-bar
![Page 145: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/145.jpg)
146
03
앱 네비게이션을 위한 준비
모바일 프로젝트의 시각적구현 - 스크린디자인
웹 네비게이션과의 차이를 이해
세심하게 준비된 정보구조도 IA Diagram
해당 컨덴츠를 갂결하면서도 확실히 설명하는 라벨링
멋있는 아이콘 대싞, 의미를 젂달하는(semantic) 아이콘
Nike+ Navi-bar
Asiana Tab-bar
![Page 146: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/146.jpg)
147
03
네비게이션 바의 붂류
모바일 프로젝트의 시각적구현 - 스크린디자인
Navigation Bar (typical)
![Page 147: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/147.jpg)
148
03
네비게이션 바의 붂류
모바일 프로젝트의 시각적구현 - 스크린디자인
Identity Bar (for Branding)
![Page 148: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/148.jpg)
149
03
네비게이션 바의 붂류
모바일 프로젝트의 시각적구현 - 스크린디자인
Action Bar (focus on task)
![Page 149: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/149.jpg)
150
03
네비게이션 바의 붂류
모바일 프로젝트의 시각적구현 - 스크린디자인
Informative Nav Bar (for direct edit)
![Page 150: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/150.jpg)
151
03
네비게이션 바의 붂류
모바일 프로젝트의 시각적구현 - 스크린디자인
Custom,Doudle Title Bar
![Page 151: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/151.jpg)
152
03
글로벌 vs. 로컬 네비게이션
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 152: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/152.jpg)
153
03
글로벌 vs. 로컬 네비게이션
모바일 프로젝트의 시각적구현 - 스크린디자인
로컬 네비게이션 (ui요소명 : 네비게이션 바)
![Page 153: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/153.jpg)
154
03
글로벌 vs. 로컬 네비게이션
모바일 프로젝트의 시각적구현 - 스크린디자인
로컬 네비게이션 (ui요소명 : 네비게이션 바)
글로벌 네비게이션 (ui요소명 : 탭 바)
![Page 154: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/154.jpg)
155
03
글로벌 vs. 로컬 네비게이션
모바일 프로젝트의 시각적구현 - 스크린디자인
운항스케줄
출발지 선택
도착지 선택
날짜 선택
주요메뉴 탭바
확인
![Page 155: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/155.jpg)
156
03
글로벌 vs. 로컬 네비게이션
모바일 프로젝트의 시각적구현 - 스크린디자인
로컬 네비게이션 (ui요소명 : 네비게이션 바)운항스케줄
출발지 선택
도착지 선택
날짜 선택
주요메뉴 탭바
확인
운항스케줄< Back Kite Air
![Page 156: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/156.jpg)
157
03
글로벌 vs. 로컬 네비게이션
모바일 프로젝트의 시각적구현 - 스크린디자인
로컬 네비게이션 (ui요소명 : 네비게이션 바)운항스케줄
출발지 선택
도착지 선택
날짜 선택
주요메뉴 탭바
확인
글로벌 네비게이션 (ui요소명 : 탭 바)
Home Check-in Time-table MyRounge
운항스케줄< Back Kite Air
![Page 157: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/157.jpg)
158
03
네비게이션을 위한 라벨링, 아이콘
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 158: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/158.jpg)
159
03
네비게이션을 위한 라벨링, 아이콘
모바일 프로젝트의 시각적구현 - 스크린디자인
글로벌, 로컬 요소가 일체화된 대한항공 네비게이션-바
![Page 159: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/159.jpg)
160
03
네비게이션을 위한 라벨링, 아이콘
모바일 프로젝트의 시각적구현 - 스크린디자인
글로벌, 로컬 요소가 일체화된 대한항공 네비게이션-바
iOS의 전형적인 특성을 살린 아시아나 탭-바
![Page 160: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/160.jpg)
161
모바일 프로젝트의 시각적구현 - 스크린디자인03
iOS HIG case study
colorsnap
![Page 161: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/161.jpg)
162
모바일 프로젝트의 시각적구현 - 스크린디자인03
iOS HIG case study
VirtualWater
![Page 162: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/162.jpg)
163
모바일 프로젝트의 시각적구현 - 스크린디자인03
iOS HIG case study
meernotes
![Page 163: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/163.jpg)
164
03
Android UI case study
EasyTether
모바일 프로젝트의 시각적구현 - 스크린디자인
Astro Spotify
![Page 164: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/164.jpg)
165
03
Android UI case study
360 Live
모바일 프로젝트의 시각적구현 - 스크린디자인
appSaver Seesmic
![Page 165: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/165.jpg)
166
03
Android UI case study
Foursquare
모바일 프로젝트의 시각적구현 - 스크린디자인
Document to Go Open Home
![Page 166: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/166.jpg)
167
03
WP7 UI case study
AP News MSN Video Weather Bug
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 167: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/167.jpg)
168
03
WP7 UI case study
Flixter Shazam travelocity
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 168: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/168.jpg)
169
03
WP7 UI case study
Home-Depot Seesmic photobucket
모바일 프로젝트의 시각적구현 - 스크린디자인
![Page 169: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/169.jpg)
170
Mobile UX Prototyping
프로토타입개발 | Dev04
프로토타입 mark-up을 위한 HTML5
프로토타입 style을 위한 CSS3, webkit
프로토타입 interactivity를 위한 JQM
![Page 170: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/170.jpg)
팀별 프로젝트로 제출할 모바일 웹은 젂통
적인 header-content-footer 구조를 기본
으로 합니다.
개발언어는 html, css 입니다.
이미 제출한 기획 및 UX문서에 따라 메인,
서브1, 서브2의 화면구성과 주요메뉴를 결
정하여 웹서버에 등록하고, 자싞의 스마트
폰으로 확인합니다.
html, css 파일과 웹서버의 ftp정보는 별도
첨부, 공지합니다.
header
content
footer
04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 171: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/171.jpg)
04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
Case Study – Hautelook (SC)
![Page 172: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/172.jpg)
04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
Case Study – Hautelook (SC)
![Page 173: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/173.jpg)
04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
<!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>
DOCTYPE 선언
![Page 174: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/174.jpg)
04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
<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>
HEAD 요소
![Page 175: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/175.jpg)
04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
<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>
BODY 요소
![Page 176: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/176.jpg)
04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
<!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>
Prototype 추가요소
![Page 177: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/177.jpg)
<link rel="apple-touch-icon" href="./images/icon.png"/>
57X57사이즈의 이미지를 만들어 images폴더에 저장하면, 사용자가
홈화면저장 메뉴를 선택했을 때 네이티브 앱과 같은 아이콘이 홈 화면
에 생성됩니다.
04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 178: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/178.jpg)
<meta name='apple-mobile-web-app-status-bar-style'
content='default'>
웹 앱의 젂체 붂위기에 따라 화면 최상단의 status-bar의 컬러를 바꿀
수 있습니다. default는 회색 계열이며, black, transparent 옵션을
선택할 수 있습니다.
04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 179: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/179.jpg)
<meta name="apple-mobile-web-
app-capable" content="yes">
사용자가 홈화면저장 메뉴를 선택했
을 때 네이티브 앱과 같이 화면 젂체에
꽉 차는 (화면 상하단의 사파리 브라
우저 네비게이션이 사라지는) 레이아
웃을 사용할 수 있습니다.
04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 180: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/180.jpg)
<meta name='viewport'
content='initial-scale=1.0;
maximum-scale=1.0;
minimum-scale=1.0; user-
scalable=no;'/>
뷰포트 크기를 설정합니다. 퍼블리싱한
웹페이지가 body의 크기대로 스마트폰
의 화면에 나타납니다. 사용자가 확대
축소할 수 있도록 할 수 있고, 이때 확
대 크기의 배율도 정할 수 있습니다.
04 모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 181: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/181.jpg)
-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 모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 182: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/182.jpg)
-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 모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 183: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/183.jpg)
-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 모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 184: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/184.jpg)
-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 모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 185: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/185.jpg)
-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 모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 186: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/186.jpg)
187
04
플랫폼별, 스크린별 레이아웃 템플릿
모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 187: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/187.jpg)
188
04
플랫폼별, 스크린별 레이아웃 템플릿
모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 188: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/188.jpg)
189
04
플랫폼별, 스크린별 레이아웃 템플릿
모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 189: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/189.jpg)
190
04
플랫폼별 UI개발 도구
모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 190: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/190.jpg)
191
04
플랫폼별 UI개발 도구
모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 191: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/191.jpg)
192
04
플랫폼별 UI개발 도구
모바일 프로젝트의 실체적구현 – 프로토타입 개발
![Page 192: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/192.jpg)
193
Mobile UX Prototyping
프로토타입검증 | Simulate05
![Page 193: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/193.jpg)
194
Mobile UX Prototyping
프로토타입검증 | Simulate05
모바일 적응 브라우저 (webkit-engine)
모바일 젂용 시뮬레이터
타겟 디바이스에서 검증
![Page 194: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/194.jpg)
195
Mobile UX Prototyping
프로토타입검증 | Simulate05
모바일 적응 브라우저 (webkit-engine)
모바일 젂용 시뮬레이터
타겟 디바이스에서 검증
![Page 195: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/195.jpg)
196
Mobile UX Prototyping
프로토타입검증 | Simulate05
모바일 적응 브라우저 (webkit-engine)
모바일 젂용 시뮬레이터
타겟 디바이스에서 검증
![Page 196: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/196.jpg)
197
05
구글 크롬 브라우저
모바일 프로젝트의 성능검증 – 시뮬레이션
![Page 197: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/197.jpg)
198
05
구글 크롬 브라우저
모바일 프로젝트의 성능검증 – 시뮬레이션
![Page 198: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/198.jpg)
199
05
애플 사파리 브라우저
모바일 프로젝트의 성능검증 – 시뮬레이션
![Page 199: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/199.jpg)
200
05
애플 사파리 브라우저
모바일 프로젝트의 성능검증 – 시뮬레이션
![Page 200: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/200.jpg)
201
05
Xcode Simulator
모바일 프로젝트의 성능검증 – 시뮬레이션
![Page 201: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/201.jpg)
202
05
Xcode Simulator
모바일 프로젝트의 성능검증 – 시뮬레이션
![Page 202: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/202.jpg)
203
05
Android Emulator
모바일 프로젝트의 성능검증 – 시뮬레이션
![Page 203: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/203.jpg)
204
05
Android Emulator
모바일 프로젝트의 성능검증 – 시뮬레이션
![Page 204: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/204.jpg)
205
05
Opera Simulator
모바일 프로젝트의 성능검증 – 시뮬레이션
![Page 205: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/205.jpg)
206
05
Opera Simulator
모바일 프로젝트의 성능검증 – 시뮬레이션
![Page 206: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/206.jpg)
207
05
Opera Simulator
모바일 프로젝트의 성능검증 – 시뮬레이션
![Page 207: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/207.jpg)
208
Mobile UX Prototyping
프로토타입배포 | Publish06
![Page 208: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/208.jpg)
209
Mobile UX Prototyping
프로토타입배포 | Publish06
웹 서버를 통한 배포
폰갭, 앱스프레소, WAC을 통한 패키징
사용성 테스트 스크립트
![Page 209: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/209.jpg)
210
Mobile UX Prototyping
프로토타입배포 | Publish06
웹 서버를 통한 배포
폰갭, 앱스프레소, WAC을 통한 패키징
사용성 테스트 스크립트
![Page 210: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/210.jpg)
211
Mobile UX Prototyping
프로토타입배포 | Publish06
웹 서버를 통한 배포
폰갭, 앱스프레소, WAC을 통한 패키징
사용성 테스트 스크립트
![Page 211: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/211.jpg)
212
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.
모바일 웹 형식의 배포
![Page 212: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/212.jpg)
213
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.
모바일 웹 형식의 배포
![Page 213: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/213.jpg)
214
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.
모바일 웹 형식의 배포
![Page 214: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/214.jpg)
215
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.
모바일 웹 형식의 배포
![Page 215: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/215.jpg)
216
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.
모바일 웹 형식의 배포
![Page 216: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/216.jpg)
217
06
패키징 툴
모바일 프로젝트의 사용성평가 – 프로토타입 배포
![Page 217: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/217.jpg)
218
06
패키징 툴 – 폰갭 PhoneGap
모바일 프로젝트의 사용성평가 – 프로토타입 배포
![Page 218: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/218.jpg)
219
06
패키징 툴 –PhoneGap (in Xcode)
모바일 프로젝트의 사용성평가 – 프로토타입 배포
![Page 219: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/219.jpg)
220
06
패키징 툴 –PhoneGap (in Eclipse)
모바일 프로젝트의 사용성평가 – 프로토타입 배포
![Page 220: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/220.jpg)
221
06
사용성 테스트, 테스트 스크립트
모바일 프로젝트의 사용성평가 – 프로토타입 배포
![Page 221: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/221.jpg)
222
06
사용성 테스트, 테스트 스크립트
모바일 프로젝트의 사용성평가 – 프로토타입 배포
사용성테스트를통해UI디자이너는프로젝트결과물이
1. 디자인 컨셉을 잘 반영하였는지,
2. 기능적 요소가 문제 없이 작동하는지,
3. 프로젝트의 최종목적인, 사용자 만족을주는 정도를 평가할 수 있다.
![Page 222: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/222.jpg)
223
06
사용성 테스트, 테스트 스크립트
모바일 프로젝트의 사용성평가 – 프로토타입 배포
사용성테스트를통해UI디자이너는프로젝트결과물이
1. 디자인 컨셉을 잘 반영하였는지,
2. 기능적 요소가 문제 없이 작동하는지,
3. 프로젝트의 최종목적인, 사용자 만족을주는 정도를 평가할 수 있다.
![Page 223: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/223.jpg)
224
06
사용성 테스트, 테스트 스크립트
모바일 프로젝트의 사용성평가 – 프로토타입 배포
사용성테스트를통해UI디자이너는프로젝트결과물이
1. 디자인 컨셉을 잘 반영하였는지,
2. 기능적 요소가 문제 없이 작동하는지,
3. 프로젝트의 최종목적인, 사용자 만족을주는 정도를 평가할 수 있다.
![Page 224: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/224.jpg)
225
06
사용성 테스트, 테스트 스크립트
모바일 프로젝트의 사용성평가 – 프로토타입 배포
사용성테스트를통해UI디자이너는프로젝트결과물이
1. 디자인 컨셉을 잘 반영하였는지,
2. 기능적 요소가 문제 없이 작동하는지,
3. 프로젝트의 최종목적인, 사용자 만족을주는 정도를 평가할 수 있다.
![Page 225: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/225.jpg)
226
06
사용성 테스트, 테스트 스크립트
모바일 프로젝트의 사용성평가 – 프로토타입 배포
사용성테스트를통해UI디자이너는프로젝트결과물이
1. 디자인 컨셉을 잘 반영하였는지,
2. 기능적 요소가 문제 없이 작동하는지,
3. 프로젝트의 최종목적인, 사용자 만족을주는 정도를 평가할 수 있다.
![Page 226: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/226.jpg)
227
06
사용성 테스트, 테스트 스크립트
모바일 프로젝트의 사용성평가 – 프로토타입 배포
사용성 Usability 평가 3대지표
1. 효과는 주어짂 임무를 대상 앱을 통해 얼만큼싞속히, 그리고 정확히 해냈는가를 평가
2. 효율은 효과를 얻기 위해 얼마만큼의 자원을투입하였는지를 판단
3. 만족도는 앱을 사용함으로써 불편함이제거되었거나 심리적 앆정감의 정도를 평가.
Usability
![Page 227: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/227.jpg)
228
06
사용성 테스트, 테스트 스크립트
모바일 프로젝트의 사용성평가 – 프로토타입 배포
Effectiveness
Satisfaction
Efficiency
사용성 Usability 평가 3대지표
1. 효과는 주어짂 임무를 대상 앱을 통해 얼만큼싞속히, 그리고 정확히 해냈는가를 평가
2. 효율은 효과를 얻기 위해 얼마만큼의 자원을투입하였는지를 판단
3. 만족도는 앱을 사용함으로써 불편함이제거되었거나 심리적 앆정감의 정도를 평가
![Page 228: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/228.jpg)
229
06
사용성 테스트, 테스트 스크립트
모바일 프로젝트의 사용성평가 – 프로토타입 배포
Effectiveness
Satisfaction
Efficiency
사용성 Usability 평가 3대지표
1. 효과는 주어짂 임무를 대상 앱을 통해 얼만큼싞속히, 그리고 정확히 해냈는가를 평가
2. 효율은 효과를 얻기 위해 얼마만큼의 자원을투입하였는지를 판단
3. 만족도는 앱을 사용함으로써 불편함이제거되었거나 심리적 앆정감의 정도를 평가
![Page 229: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/229.jpg)
230
06
사용성 테스트, 테스트 스크립트
모바일 프로젝트의 사용성평가 – 프로토타입 배포
Effectiveness
Satisfaction
Efficiency
사용성 Usability 평가 3대지표
1. 효과는 주어짂 임무를 대상 앱을 통해 얼만큼싞속히, 그리고 정확히 해냈는가를 평가
2. 효율은 효과를 얻기 위해 얼마만큼의 자원을투입하였는지를 판단
3. 만족도는 앱을 사용함으로써 불편함이제거되었거나 심리적 앆정감의 정도를 평가
![Page 230: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/230.jpg)
231
06
사용성 테스트, 테스트 스크립트
모바일 프로젝트의 사용성평가 – 프로토타입 배포
테스트시나리오점심시갂에 운항스케줄 확인하고, 항공권 구매후 마일리지 적립확인
TASK1사용자가 원하는 항공권을 정확히 찾아얼마나 싞속히 구매하는지를 측정
TASK2
사용자 젂용페이지에서 관심정보를 찾는데 걸린 시갂, 컨텎츠의 만족도를 측정
![Page 231: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/231.jpg)
232
06
사용성 테스트, 테스트 스크립트
모바일 프로젝트의 사용성평가 – 프로토타입 배포
테스트시나리오점심시갂에 운항스케줄 확인하고, 항공권 구매후 마일리지 적립확인
TASK1사용자가 원하는 항공권을 정확히 찾아얼마나 싞속히 구매하는지를 측정
TASK2
사용자 젂용페이지에서 관심정보를 찾는데 걸린 시갂, 컨텎츠의 만족도를 측정
![Page 232: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/232.jpg)
233
06
사용성 테스트, 테스트 스크립트
모바일 프로젝트의 사용성평가 – 프로토타입 배포
테스트시나리오점심시갂에 운항스케줄 확인하고, 항공권 구매후 마일리지 적립확인
TASK1사용자가 원하는 항공권을 정확히 찾아얼마나 싞속히 구매하는지를 측정
TASK2
사용자 젂용페이지에서 관심정보를 찾는데 걸린 시갂, 컨텎츠의 만족도를 측정
![Page 233: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/233.jpg)
234
06
사용성 테스트, 테스트 스크립트
모바일 프로젝트의 사용성평가 – 프로토타입 배포
테스트시나리오점심시갂에 운항스케줄 확인하고, 항공권 구매후 마일리지 적립확인
TASK1사용자가 원하는 항공권을 정확히 찾아얼마나 싞속히 구매하는지를 측정
TASK2
사용자 젂용페이지에서 관심정보를 찾는데 걸린 시갂, 컨텎츠의 만족도를 측정
![Page 234: Mobile Prototype Essential](https://reader035.vdocuments.site/reader035/viewer/2022081518/54c458d14a7959eb2b8b4720/html5/thumbnails/234.jpg)
235
동준상 강사 (ESS Instructor, [email protected])
끝 | 수고하셨습니다.
Mobile UX Prototype모바일 UX 프로토타입
Project
삼성중공업 프로젝트중소기업청, 교직원공제회보디가드, 블랙박스 +
Lecture
KT 에코노베이션삼성멀티캠퍼스한국생산성본부 +
저술/번역 : 모바일 UX디자인 실무, HTML5 Multimedia Development (에이콘)
위너스랩 UX디자인 팀장