1. 모바일 UX/UI개발
Best Practice for UX Deliverables
Mobile UX Design Essential
한국생산성본부 / KT Econovation Smart School 동준상 강사 | @jonathanis
2. UX디자인 문서 작성 | Content List
1. 사용자 요구 분석 | User Needs Analysis
Mobile UX Design Essential | 001
3. UX디자인 문서 작성 | Content List
1. 사용자 요구 분석 | User Needs Analysis
2. 컨텐츠 개발전략 | Contents Strategy
Mobile UX Design Essential | 001
4. UX디자인 문서 작성 | Content List
1. 사용자 요구 분석 | User Needs Analysis
2. 컨텐츠 개발전략 | Contents Strategy
3. 모바일 컨텐츠 디자인 | Mobile Contents Design
Mobile UX Design Essential | 001
5. UX디자인 문서 작성 | Content List
1. 사용자 요구 분석 | User Needs Analysis
2. 컨텐츠 개발전략 | Contents Strategy
3. 모바일 컨텐츠 디자인 | Mobile Contents Design
Slideshare를 통해 퍼블리싱된 본 ‘UX디자인 문서작성 연습’은 2011년 5월2일부터 시행
된 KT ESS 단국대 특강의 수업에 사용된 내용입니다.
본 자료는 수업내용에 맞춰 다시 작성되었으므로 목차에 소개된 UX문서 작성사례 중 생략
된 내용이 있습니다. 슬라이드 독자 여러분의 양해 부탁 드립니다.
동준상 naebon1@gmail.com
Mobile UX Design Essential | 001
6. UX 디자인 문서작성 | Practice - UX Deliverables
1. 사용자 요구 분석 | User Needs Analysis
1. 페르소나 | Persona
Mobile UX Design Essential | 001
7. UX 디자인 문서작성 | Practice - UX Deliverables
1. 사용자 요구 분석 | User Needs Analysis
1. 페르소나 | Persona
2. 사용성 테스트 계획서 | Usability Test Plan
Mobile UX Design Essential | 001
8. UX 디자인 문서작성 | Practice - UX Deliverables
1. 사용자 요구 분석 | User Needs Analysis
1. 페르소나 | Persona
2. 사용성 테스트 계획서 | Usability Test Plan
3. 사용성 테스트 보고서 | Usability Report
Mobile UX Design Essential | 001
9. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
페르소나는,
"A persona is
Mobile UX Design Essential | 001
10. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
페르소나는, 제품의 핵심기
능, 정보 네비게이션, 사용
자와의 인터랙션, 그리고 비
주얼 디자인에 이르는 사용
자 중심의 의사결정을 지원
하는 정보체계이다.
"A persona is
Mobile UX Design Essential | 001
11. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
페르소나는, 제품의 핵심기
능, 정보 네비게이션, 사용
자와의 인터랙션, 그리고 비
주얼 디자인에 이르는 사용
자 중심의 의사결정을 지원
하는 정보체계이다.
"A persona is a user archetype you can use to help guide decisions about
product features, navigation, interactions, and even visual design.‚
Kim Goodwin, Cooper.com
Mobile UX Design Essential | 001
12. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
사용자분석의 당면과제 | Problem of Usability
사용자중심 디자인은 자연스럽지 않다
Being user-centered is not natural / Users are complicated and varied / Those who may be doing
user and market research are not typically the people who actually design and build the product
/ The word "user" isn't very helpful (like "injury" is to the ER) / Raw data isn't inherently useful,
and neither are most reports
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
13. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
사용자분석의 당면과제 | Problem of Usability
사용자중심 디자인은 자연스럽지 않다
사용자는 복잡하고 서로 다르다.
Being user-centered is not natural / Users are complicated and varied / Those who may be doing
user and market research are not typically the people who actually design and build the product
/ The word "user" isn't very helpful (like "injury" is to the ER) / Raw data isn't inherently useful,
and neither are most reports
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
14. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
사용자분석의 당면과제 | Problem of Usability
사용자중심 디자인은 자연스럽지 않다
사용자는 복잡하고 서로 다르다.
사용자 분석 담당자가 실질적인 디자인이나 제작에 참여하지 않을 수 있다.
Being user-centered is not natural / Users are complicated and varied / Those who may be doing
user and market research are not typically the people who actually design and build the product
/ The word "user" isn't very helpful (like "injury" is to the ER) / Raw data isn't inherently useful,
and neither are most reports
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
15. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
사용자분석의 당면과제 | Problem of Usability
사용자중심 디자인은 자연스럽지 않다
사용자는 복잡하고 서로 다르다.
사용자 분석 담당자가 실질적인 디자인이나 제작에 참여하지 않을 수 있다.
사용자라는 말 자체가 너무 광범위한 의미이다.
Being user-centered is not natural / Users are complicated and varied / Those who may be doing
user and market research are not typically the people who actually design and build the product
/ The word "user" isn't very helpful (like "injury" is to the ER) / Raw data isn't inherently useful,
and neither are most reports
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
16. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
사용자분석의 당면과제 | Problem of Usability
사용자중심 디자인은 자연스럽지 않다
사용자는 복잡하고 서로 다르다.
사용자 분석 담당자가 실질적인 디자인이나 제작에 참여하지 않을 수 있다.
사용자라는 말 자체가 너무 광범위한 의미이다.
사용자 분석결과 데이터 자체는 그리 큰 도움이 되지 않는다.
Being user-centered is not natural / Users are complicated and varied / Those who may be doing
user and market research are not typically the people who actually design and build the product
/ The word "user" isn't very helpful (like "injury" is to the ER) / Raw data isn't inherently useful,
and neither are most reports
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
17. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
페르소나의 효용, 전략 | Effectiveness of Persona
사용자를 명확한 실체로 표현(가정)할 수 있도록 도와준다.
Make assumptions about users explicit (articulate a common language to talk meaningfully about
users) / Place the focus on specific users rather than on "everyone“ / In limiting our choices,
personas help us make better decisions / Personas engage the product design and development
team (personas are fun)
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
18. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
페르소나의 효용, 전략 | Effectiveness of Persona
사용자를 명확한 실체로 표현(가정)할 수 있도록 도와준다.
모두에게 초점을 맞추는 대신, 특정 굮의 사용자에게 집중한다.
Make assumptions about users explicit (articulate a common language to talk meaningfully about
users) / Place the focus on specific users rather than on "everyone“ / In limiting our choices,
personas help us make better decisions / Personas engage the product design and development
team (personas are fun)
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
19. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
페르소나의 효용, 전략 | Effectiveness of Persona
사용자를 명확한 실체로 표현(가정)할 수 있도록 도와준다.
모두에게 초점을 맞추는 대신, 특정 굮의 사용자에게 집중한다.
우리의 선택권을 제한함으로써, 우리가 보다 나은 결정을 할 수 있도록 돕는다.
Make assumptions about users explicit (articulate a common language to talk meaningfully about
users) / Place the focus on specific users rather than on "everyone“ / In limiting our choices,
personas help us make better decisions / Personas engage the product design and development
team (personas are fun)
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
20. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
페르소나의 효용, 전략 | Effectiveness of Persona
사용자를 명확한 실체로 표현(가정)할 수 있도록 도와준다.
모두에게 초점을 맞추는 대신, 특정 굮의 사용자에게 집중한다.
우리의 선택권을 제한함으로써, 우리가 보다 나은 결정을 할 수 있도록 돕는다.
페르소나를 통해 디자인팀과 개발팀이 교류하며 (즐겁게) 작업할 수 있다.
Make assumptions about users explicit (articulate a common language to talk meaningfully about
users) / Place the focus on specific users rather than on "everyone“ / In limiting our choices,
personas help us make better decisions / Personas engage the product design and development
team (personas are fun)
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
21. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
Source: WebCredible
Mobile UX Design Essential | 001
22. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
Source: WebCredible
Mobile UX Design Essential | 001
23. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
Source: WebCredible
Mobile UX Design Essential | 001
24. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
Source: WebCredible
Mobile UX Design Essential | 001
25. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
Source: fluid
Mobile UX Design Essential | 001
26. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
Source: fluid
Mobile UX Design Essential | 001
27. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
이름 김성수 공모전을 준비하는 경영학과학생
사진 배경 | background 학과 공부와 어학원, 학과 사무실 조
photo 나이 : 22세 교 업무로 바쁜 상황 / 학습과 리포트
소속 : 단국대 경영학과 3학년, 학과조교 작성을 위해 11인치 넷북을 사용중 /
모바일 앱 사용경험 : 갤럭시(안드로이드) 친구와 협업과제가 있으나 시간부족
목표 : 졸업후
내용설명 : 올해 대학교 3학년인 김성수씨는 그 어느 때보다도 바쁜 시간을 보내
대학원 진학 /
고 있다.
광고공모전 입
상
6개월내에 제일기획 등이 주관하는 광고공모전이 5회나 예정되어 있어서 그간 친
불편함 : 시간 구들과 준비해 온 주제를 가지고 출품작을 만들어야 하지만, 일산에서 붂당까지
부족으로 협업 의 등교, 리포트와 어학원 그리고 개인적인 공부까지 동시에 진행하면서 피로가
과제 일정지연 쌓이고 있다.
동종 업종 벤치마킹을 통해 최적의 카피안을 팀원들에게 제시해야 하는 김성수
시나리오 : 등 씨의 일정이 지연되면서 친구들과의 협업 일정 전체가 지연되고 있다.
하교시간에 정
보 업데이트 이동시간은 물론 잠깐의 여유시간에 관심 카피안을 검색해 스마트폰으로 알려…
photo: The Christian Science Monitor
Mobile UX Design Essential | 001
28. 1. 사용자 요구 분석 | User Needs Analysis
페르소나 | Persona
이름 name 핵심 인적사항 primary persona
사진 배경 background | 나이, 역할, 전공붂야, 주요내용 main points | 사용자로서
photo 사용자 경험기간 수준 등 age, role, field, 경험하고 있는 서비스와 제품, 주로
level of skill, experience 사용하는 제품굮
목표
goals
불편함 구술내용
frustration narrative
시나리오
scenario
Mobile UX Design Essential | 001
29. UX 디자인 문서작성 | Practice - UX Deliverables
2. 컨텐츠 개발전략 | Contents Strategy
1. 벤치마킹 | Bench Marking
Mobile UX Design Essential | 001
30. UX 디자인 문서작성 | Practice - UX Deliverables
2. 컨텐츠 개발전략 | Contents Strategy
1. 벤치마킹 | Bench Marking
2. 컨셉모델 | Concept Model
Mobile UX Design Essential | 001
31. UX 디자인 문서작성 | Practice - UX Deliverables
2. 컨텐츠 개발전략 | Contents Strategy
1. 벤치마킹 | Bench Marking
2. 컨셉모델 | Concept Model
3. 컨텐츠 인벤토리 | Contents Inventory
Mobile UX Design Essential | 001
32. 2. 컨텐츠 개발전략 | Contents Strategy
컨셉모델 | Concept Model
Mobile UX Design Essential | 001
33. 2. 컨텐츠 개발전략 | Contents Strategy
컨셉모델 | Concept Model
Mobile UX Design Essential | 001
34. 2. 컨텐츠 개발전략 | Contents Strategy
컨셉모델 | Concept Model
Mobile UX Design Essential | 001
35. 2. 컨텐츠 개발전략 | Contents Strategy
컨셉모델 | Concept Model
Mobile UX Design Essential | 001
36. 2. 컨텐츠 개발전략 | Contents Strategy
컨셉모델 | Concept Model
Mobile UX Design Essential | 001
37. 2. 컨텐츠 개발전략 | Contents Strategy
컨셉모델 | Concept Model
별지로 배포된 모눈 종이에 연필로 컨셉모델을 그립니다.
Draw a concept model onto the grid paper
Mobile UX Design Essential | 001
38. 2. 컨텐츠 개발전략 | Contents Strategy
컨셉모델 | Concept Model
파워포인트 도형 요소를 사용하여 컨셉모델을 구성합니다.
Build a concept model with PPTX shape elements.
Mobile UX Design Essential | 001
39. 2. 컨텐츠 개발전략 | Contents Strategy
컨텐츠 인벤토리 | Contents Inventory
웹사이트의 컨텐츠 인벤토리 | Typical contents inventory for a web site
ID / Page Name / Link / Document Type / Owner / Keywords / Meta / Notes
Mobile UX Design Essential | 001
40. 2. 컨텐츠 개발전략 | Contents Strategy
컨텐츠 인벤토리 | Contents Inventory
웹사이트의 컨텐츠 인벤토리 | Typical contents inventory for a web site
ID / Page Name / Link / Document Type / Owner / Keywords / Meta / Notes
모바일앱, 웹의 컨텐츠 인벤토리 | Contents inventory for a mobile application
ID / View Name / Nav / UI Element / Owner / SDK & Dev Lang / Meta / Notes
Mobile UX Design Essential | 001
41. 2. 컨텐츠 개발전략 | Contents Strategy
컨텐츠 인벤토리 | Contents Inventory
ID View Name File Name UI Element Owner SDK, Dev Lang Meta Desc Issue
Image + Table Intro and main
1.0.0.0 welcome nikeplus_intro.m UI team Xcode Log-in
View navigation
Text +Table User main Request det
1.1.0.0 start user_profile.m UI+Dev team Xcode, Obj-C
View page ailed profile
Run-type
1.1.1.0 run_menu record_list.m Table View UI team Xcode SNS cheer
list page
1.1.1.1 run_basic record_default.m Table View UI+Dev team Xcode, Obj-C Run-type 1 Music
1.1.1.2 run _time record_compete.m Table View UI+Dev team Xcode, Obj-C Run-type 2 Time unit
Guide for
1.2.0.0 tour Info_app.m Image View UI team Xcode Sensor
new one
Nike+앱의 컨텐츠를 일부 수정하여 구성했습니다.
Mobile UX Design Essential | 001
42. 2. 컨텐츠 개발전략 | Contents Strategy
컨텐츠 인벤토리 | Contents Inventory
ID View Name File Name UI Element Owner SDK, Dev Lang Meta Desc Issue
Mobile UX Design Essential | 001
43. UX 디자인 문서작성 | Practice - UX Deliverables
3. 모바일 컨텐츠 디자인 | Mobile Contents Design
1. 플로우차트 | Flowchart
Mobile UX Design Essential | 001
44. UX 디자인 문서작성 | Practice - UX Deliverables
3. 모바일 컨텐츠 디자인 | Mobile Contents Design
1. 플로우차트 | Flowchart
2. 와이어프레임 | Wireframe
Mobile UX Design Essential | 001
45. UX 디자인 문서작성 | Practice - UX Deliverables
3. 모바일 컨텐츠 디자인 | Mobile Contents Design
1. 플로우차트 | Flowchart
2. 와이어프레임 | Wireframe
3. 스크린 디자인 | Screen Design
Mobile UX Design Essential | 001
46. UX 디자인 문서작성 | Practice - UX Deliverables
3. 모바일 컨텐츠 디자인 | Mobile Contents Design
1. 플로우차트 | Flowchart
2. 와이어프레임 | Wireframe
3. 스크린 디자인 | Screen Design
4. 스토리보드 | Story Board, Clickstream
Mobile UX Design Essential | 001
47. UX 디자인 문서작성 | Practice - UX Deliverables
3. 모바일 컨텐츠 디자인 | Mobile Contents Design
1. 플로우차트 | Flowchart
2. 와이어프레임 | Wireframe
3. 스크린 디자인 | Screen Design
4. 스토리보드 | Story Board, Clickstream
5. 프로토타입 | Prototype with mobile-web
Mobile UX Design Essential | 001
48. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design
와이어프레임 | Wireframe
source : justin delabar
Mobile UX Design Essential | 001
49. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design
와이어프레임 | Wireframe
source : Ian James Cox
Mobile UX Design Essential | 001
50. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design
와이어프레임 | Wireframe
Navigation bar
Mobile UX Design Essential | 001
51. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design
스크린 디자인 | Screen Design
source : erinthompsonstudio
Mobile UX Design Essential | 001
52. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design
스크린 디자인 | Screen Design
source : seedandsprout
Mobile UX Design Essential | 001
53. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design
스크린 디자인 | Screen Design
Navigation bar
Mobile UX Design Essential | 001
54. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design
스토리보드 | Story Board
source : Paul Stanton
Mobile UX Design Essential | 001
55. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design
프로토타입 | Prototype
HTML5 + CSS3 +
FTP로 별도 배포된 HTML, CSS문서를 수정, 변환하여 모바일앱 프로토타입을 만
듭니다. 완성된 모바일웹은 지정된 FTP를 통해 각자의 스마트폰으로 확인할 수 있습
니다.
페이지에 삽입된 facebook Like버튺을 통해 팀원갂의 평가를 하고, 강사의 평가
점수를 더해 우수팀을 선정합니다.
Mobile UX Design Essential | 001
56. 모바일 UX/UI개발
Best Practice for UX Deliverables
동준상 Jonathan Dong / @jonathanis / naebon1@gmail.com
Lecture Project
KT ESS 중소기업청 채용/통계 앱
KT연수원 교직원공제회 모바일 웹
삼성멀티캠퍼스 서울여대 모바일웹
한국생산성본부 + 보디가드, 블랙박스 +
57. 모바일 UX/UI개발
Best Practice for UX Deliverables
수고하셨습니다.
Thank you.
동준상 Jonathan Dong / @jonathanis / naebon1@gmail.com
Lecture Project
KT ESS 중소기업청 채용/통계 앱
KT연수원 교직원공제회 모바일 웹
삼성멀티캠퍼스 서울여대 모바일웹
한국생산성본부 + 보디가드, 블랙박스 +