SlideShare ist ein Scribd-Unternehmen logo
1 von 44
Downloaden Sie, um offline zu lesen
Studio XID

Exceptionally Intelligent Design
Lean Prototyping: 

디자인 프로세스에서 

프로토타입을 어떻게 사용할까?
Mar 26th, Tony Kim
studioXID all right reserved 2015copyright C
Tony Kim, 김수
2
• Studio XID 

CEO, Captain Design
• Google 

Interaction Designer
• Naver China

UX Manager

• KAIST

Industrial Design
studioXID all right reserved 2015copyright C
뭘 했나요?
3
2006 2007 2008 2009 2010 2011 2012 2013 2014
연구원 디자이너 대장
studioXID all right reserved 2015copyright C4
Original source: http://disney.wikia.com/wiki/Captain_America/Gallery
Captain Design
프로토타입을 왜 만들어야할까? 

어떻게 만들어야할까?
studioXID all right reserved 2015copyright C
프로토타입의 종류
• 시각적 완성도: Lo-Fi vs. Mid-Fi vs. Hi-Fi

• 작동 여부: Static vs. Working (Interactive)

• 사용기간: Throwaway vs. Evolutionary

• 구현 대상: Behavioral (Skin) vs. Structural (Bone)
6
studioXID all right reserved 2015copyright C
다른 디자인 산출물과의 비교
7 Source: http://grahamtodman.co.uk/blog/category/sketches/
스케치 (Sketch)
studioXID all right reserved 2015copyright C8 Source: http://www.strangesystems.net/archives/2005/03/using_wireframe.php
화면설계 (Wireframe)
다른 디자인 산출물과의 비교
studioXID all right reserved 2015copyright C9 Source: http://www.ac4d.com/2013/09/28/heartline-a-lifeline-to-your-loved-ones-storyboard/
스토리보드 (Storyboard)
다른 디자인 산출물과의 비교
studioXID all right reserved 2015copyright C10 Source: http://www.seekoften.com/portfolio/web/modern-website-mockup-in-photoshop.php
목업 (Mockup, Design)
다른 디자인 산출물과의 비교
Prototyping for Lean UX - NEXT
studioXID all right reserved 2015copyright C
디자인 프로세스에서 

협의의 프로토타입
• 시각적 완성도: Lo-Fi vs. Mid-Fi vs. Hi-Fi

• 작동 여부: Static vs. Working (Interactive)

• 사용기간: Throwaway vs. Evolutionary

• 구현 대상: Behavioral (Skin) vs. Structural (Bone)
12
큰 회사들은 서비스를 

어떻게 디자인하고 있을까?
studioXID all right reserved 2015copyright C
Waterfall UX 프로세스
14 Source: http://upload.wikimedia.org/wikipedia/commons/b/bf/Waterfall_model_revised.svg
studioXID all right reserved 2015copyright C
Lean UX 프로세스
15 Source: http://welovelean.wordpress.com/2013/05/01/10-things-ive-learnt-about-lean-startup/
studioXID all right reserved 2015copyright C
Lean UX 프로세스
16 Source: http://www.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/
studioXID all right reserved 2015copyright C
Lean vs. Waterfall
17 Source: http://irfanebrahim.com/2014/11/02/waterfall-vs-agile-vs-lean-explained-in-1-picture/
studioXID all right reserved 2015copyright C
우리는 모두 Lean으로 간다!
18
Lean Waterfall
Source: Result from 1:1 interviews on June, July in 2014
studioXID all right reserved 2015copyright C
Lean UX에서 산출물
19 Source: Result from 1:1 interviews on June, July in 2014
“우리는 화면설계를
하지 않아요”
studioXID all right reserved 2015copyright C
디자인 산출물에 대한 오너쉽
20
제품컨셉정의

기능정의

사용자 시나리오

화면설계

화면디자인

프로토타입
PM
Designer
기획자, 

UX 연구원
UI 디자이너
studioXID all right reserved 2015copyright C
구글의 디자인 산출물
21
Sketch

(Lo-Fi)
Mockup

(Hi-Fi)
Prototype

(Hi-Fi)
Prototyping for Lean UX - NEXT
studioXID all right reserved 2015copyright C
구글의 디자인 산출물
23
studioXID all right reserved 2015copyright C
한입크기의 프로젝트 규모
24 Source: http://wallpaperszoo.com/wp-content/uploads/2014/04/turtle-eating-strawberry.jpg
studioXID all right reserved 2015copyright C
구글의 프로토타입
• 한입크기 기능만 만든다

• 협업을 지원할 수 있어야 한다
• 커뮤니케이션을 위한 수단

• 다른 직군과의 대화, 내부 보고

• 사용자로부터의 피드백
25
프로토타이핑 꼭 해야할까요?
studioXID all right reserved 2015copyright C
디자인 패러다임의 변화
27
Page base
Interaction
Object base
Interaction
Sensor aid
Interaction
• By Apple
• Page transition
• Page level hierarchy
• By Google
• Layer concept
• Z-index
• By Facebook
• Contextual input
• Sensor signal
Clear
인터랙션

= Selling Point
Facebook Paper
인터랙션

= 아이덴티티
마이크로인터랙션

= 차별화 요소
Facebook Paper
studioXID all right reserved 2015copyright C
2차원 공간의 한계
31 Source: Wireframe for Naver Japanese dictionary handwriting feature
studioXID all right reserved 2015copyright C
해결방안은? 프로토타입!
• “86%의 디자이너들은 정적인 UI설계보다 

동적인 인터랙션을 설계하는데 어려움을 느낀다.”*
• 쓸만한 툴이 없을까?
32 * How designers design and program behaviours, HCII, CMU, Brad A. Myers, 2008
studioXID all right reserved 2015copyright C
쓸만한 프로토타이핑툴
33
제한적인 인터랙션 정교한 인터랙션 센서기반 인터랙션
화면설계툴 프로토타이핑툴
협업툴
studioXID all right reserved 2015copyright C
오리가미 Origami
34 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/
studioXID all right reserved 2015copyright C
프레이머 Framer
35 Source: http://framerjs.com/static/images/home/ss-framer.jpg
studioXID all right reserved 2015copyright C
픽세이트 Pixate
36 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/
스냅 SNAP
Close Beta: 2015년 4월
프로토타이핑을 잘하려면?
studioXID all right reserved 2015copyright C
인터랙션의 분해
39 Source: http://microinteractions.com/what-is-a-microinteraction/
studioXID all right reserved 2015copyright C40 Source: http://billwscott.com/share/DragAndDropModules-InterestingMoments.pdf
studioXID all right reserved 2015copyright C
부드러운 움직임: 가속도
41 Source: http://cubic-bezier.com/
정리
studioXID all right reserved 2015copyright C
프로토타이핑을 잘하려면…
• 한입 크기로 만들자. 

• 문서작업은 잊어라. 그려보고 만들어보자.

• 내 디자인은 내 손으로 프로토타이핑해보자.
• 대충 시작해서 완벽해질때까지 계속 수정하자. 

• Mid-Fi와 Hi-Fi를 동시에 지원하는 툴을 하나만 고르자.

(혹은, 그래픽툴 하나 + 프로토타이핑툴 하나)

• 인터랙션을 분해하는 연습
43
Tony Kim | CEO, Caption Design of Studio XID | tony@studioxid.com
감사합니다.

Q & A

Weitere ähnliche Inhalte

Andere mochten auch

Softwares de apoio ao desenvolvimento 2012
Softwares de apoio ao desenvolvimento   2012Softwares de apoio ao desenvolvimento   2012
Softwares de apoio ao desenvolvimento 2012Diogo Winck
 
How to Market Unsexy Products
How to Market Unsexy ProductsHow to Market Unsexy Products
How to Market Unsexy ProductsIntelligent_ly
 
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile AppsCodeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile AppsIntelligent_ly
 
Immigration Issues for Startups
Immigration Issues for StartupsImmigration Issues for Startups
Immigration Issues for StartupsIntelligent_ly
 
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)keesung kim
 
Rob의 케이스를 통해 살펴본 리더의 조건 (@Daum, 2013.1.23)
Rob의 케이스를 통해 살펴본 리더의 조건 (@Daum, 2013.1.23)Rob의 케이스를 통해 살펴본 리더의 조건 (@Daum, 2013.1.23)
Rob의 케이스를 통해 살펴본 리더의 조건 (@Daum, 2013.1.23)keesung kim
 
2010 UXEYE 혁신적인 UI를 위해 하지말아야할 7가지
2010 UXEYE 혁신적인 UI를 위해 하지말아야할 7가지2010 UXEYE 혁신적인 UI를 위해 하지말아야할 7가지
2010 UXEYE 혁신적인 UI를 위해 하지말아야할 7가지Jay Chaeyong Yi
 
사용자경험유지하기(@UX Storming/2012)
사용자경험유지하기(@UX Storming/2012)사용자경험유지하기(@UX Storming/2012)
사용자경험유지하기(@UX Storming/2012)keesung kim
 
Sales 101: How to Write an Email that Everyone Responds To
Sales 101: How to Write an Email that Everyone Responds To Sales 101: How to Write an Email that Everyone Responds To
Sales 101: How to Write an Email that Everyone Responds To Intelligent_ly
 
Framer js a/s talk
Framer js a/s talkFramer js a/s talk
Framer js a/s talkSewon Ann
 
프로토타이핑 테스트
프로토타이핑 테스트프로토타이핑 테스트
프로토타이핑 테스트YoonKab
 
인터랙 데일리캡쳐_최고은, 한혜리, 조재현
인터랙 데일리캡쳐_최고은, 한혜리, 조재현인터랙 데일리캡쳐_최고은, 한혜리, 조재현
인터랙 데일리캡쳐_최고은, 한혜리, 조재현고은 최
 
Social Dating : Cupit (Win 8 App Prototype)
Social Dating : Cupit (Win 8 App Prototype)Social Dating : Cupit (Win 8 App Prototype)
Social Dating : Cupit (Win 8 App Prototype)Hyunwoo Kim
 
실리콘밸리의 한국인 2015 - 정진호 발표
실리콘밸리의 한국인 2015 - 정진호 발표실리콘밸리의 한국인 2015 - 정진호 발표
실리콘밸리의 한국인 2015 - 정진호 발표StartupAlliance
 
모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)
모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)
모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)keesung kim
 
[Hci korea 2014] designing scalable web service
[Hci korea 2014] designing scalable web service[Hci korea 2014] designing scalable web service
[Hci korea 2014] designing scalable web serviceTony (Soo) Kim
 
Balsamiq 프로토타이핑 세미나 발표자료
Balsamiq 프로토타이핑 세미나 발표자료Balsamiq 프로토타이핑 세미나 발표자료
Balsamiq 프로토타이핑 세미나 발표자료Jc Kim
 
[Nux]02 introduction pdf
[Nux]02 introduction pdf[Nux]02 introduction pdf
[Nux]02 introduction pdfjylee_kgit
 

Andere mochten auch (20)

Softwares de apoio ao desenvolvimento 2012
Softwares de apoio ao desenvolvimento   2012Softwares de apoio ao desenvolvimento   2012
Softwares de apoio ao desenvolvimento 2012
 
How to Market Unsexy Products
How to Market Unsexy ProductsHow to Market Unsexy Products
How to Market Unsexy Products
 
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile AppsCodeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
 
Immigration Issues for Startups
Immigration Issues for StartupsImmigration Issues for Startups
Immigration Issues for Startups
 
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
포털관점에서본웹디자인 및 UX동향(@웹월드컨퍼런스 2012, 2012.11)
 
Rob의 케이스를 통해 살펴본 리더의 조건 (@Daum, 2013.1.23)
Rob의 케이스를 통해 살펴본 리더의 조건 (@Daum, 2013.1.23)Rob의 케이스를 통해 살펴본 리더의 조건 (@Daum, 2013.1.23)
Rob의 케이스를 통해 살펴본 리더의 조건 (@Daum, 2013.1.23)
 
2010 UXEYE 혁신적인 UI를 위해 하지말아야할 7가지
2010 UXEYE 혁신적인 UI를 위해 하지말아야할 7가지2010 UXEYE 혁신적인 UI를 위해 하지말아야할 7가지
2010 UXEYE 혁신적인 UI를 위해 하지말아야할 7가지
 
사용자경험유지하기(@UX Storming/2012)
사용자경험유지하기(@UX Storming/2012)사용자경험유지하기(@UX Storming/2012)
사용자경험유지하기(@UX Storming/2012)
 
Sales 101: How to Write an Email that Everyone Responds To
Sales 101: How to Write an Email that Everyone Responds To Sales 101: How to Write an Email that Everyone Responds To
Sales 101: How to Write an Email that Everyone Responds To
 
Framer js a/s talk
Framer js a/s talkFramer js a/s talk
Framer js a/s talk
 
[H3 2012] Instant Prototyping with ROR
[H3 2012] Instant Prototyping with ROR[H3 2012] Instant Prototyping with ROR
[H3 2012] Instant Prototyping with ROR
 
프로토타이핑 테스트
프로토타이핑 테스트프로토타이핑 테스트
프로토타이핑 테스트
 
인터랙 데일리캡쳐_최고은, 한혜리, 조재현
인터랙 데일리캡쳐_최고은, 한혜리, 조재현인터랙 데일리캡쳐_최고은, 한혜리, 조재현
인터랙 데일리캡쳐_최고은, 한혜리, 조재현
 
Social Dating : Cupit (Win 8 App Prototype)
Social Dating : Cupit (Win 8 App Prototype)Social Dating : Cupit (Win 8 App Prototype)
Social Dating : Cupit (Win 8 App Prototype)
 
실리콘밸리의 한국인 2015 - 정진호 발표
실리콘밸리의 한국인 2015 - 정진호 발표실리콘밸리의 한국인 2015 - 정진호 발표
실리콘밸리의 한국인 2015 - 정진호 발표
 
모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)
모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)
모바일콘텐츠관점에서본UX디자인 인사이트 (@WebWorldConference, 2014)
 
[Hci korea 2014] designing scalable web service
[Hci korea 2014] designing scalable web service[Hci korea 2014] designing scalable web service
[Hci korea 2014] designing scalable web service
 
Balsamiq 프로토타이핑 세미나 발표자료
Balsamiq 프로토타이핑 세미나 발표자료Balsamiq 프로토타이핑 세미나 발표자료
Balsamiq 프로토타이핑 세미나 발표자료
 
Prototyping
PrototypingPrototyping
Prototyping
 
[Nux]02 introduction pdf
[Nux]02 introduction pdf[Nux]02 introduction pdf
[Nux]02 introduction pdf
 

Ähnlich wie Prototyping for Lean UX - NEXT

P ilot plant_2014
P ilot plant_2014P ilot plant_2014
P ilot plant_2014성관 윤
 
2020년 5월 9일 개발 이야기 정리
2020년 5월 9일 개발 이야기 정리2020년 5월 9일 개발 이야기 정리
2020년 5월 9일 개발 이야기 정리Jay Park
 
GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법
GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법
GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법Sunjung Park
 
최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기Hyeonjin Cho
 
ORD-2nd-08-witstudio
ORD-2nd-08-witstudioORD-2nd-08-witstudio
ORD-2nd-08-witstudioVentureSquare
 
2018 Google I/O extended Busan flutter session
2018 Google I/O extended Busan flutter session2018 Google I/O extended Busan flutter session
2018 Google I/O extended Busan flutter session성윤 (Hunt) 조
 
[NEMO-UX] HCIK 2016 다중 사용자용 운영체제 FINE 플랫폼 소개와 SKT 협력 사례 발표
[NEMO-UX] HCIK 2016 다중 사용자용 운영체제 FINE 플랫폼 소개와 SKT 협력 사례 발표 [NEMO-UX] HCIK 2016 다중 사용자용 운영체제 FINE 플랫폼 소개와 SKT 협력 사례 발표
[NEMO-UX] HCIK 2016 다중 사용자용 운영체제 FINE 플랫폼 소개와 SKT 협력 사례 발표 nemoux
 
헤비 이큅먼트
헤비 이큅먼트헤비 이큅먼트
헤비 이큅먼트성원 박
 
Kgc2014 삼한제국기 포스트모템 김찬웅
Kgc2014 삼한제국기 포스트모템 김찬웅Kgc2014 삼한제국기 포스트모템 김찬웅
Kgc2014 삼한제국기 포스트모템 김찬웅Chanwoong Kim
 
Mobile Prototype Essential
Mobile Prototype EssentialMobile Prototype Essential
Mobile Prototype EssentialJunsang Dong
 
객체지향프로그래밍 특강
객체지향프로그래밍 특강객체지향프로그래밍 특강
객체지향프로그래밍 특강uEngine Solutions
 
Modern Android App Development
Modern Android App DevelopmentModern Android App Development
Modern Android App DevelopmentChi Hwan Choi
 
Card battle game proposal
Card battle game proposal Card battle game proposal
Card battle game proposal Kiwon Seo
 
사용자중심
사용자중심사용자중심
사용자중심지현 이
 
일리오(VRief) 기업소개 및 서비스 소개(한글)_프라이머
일리오(VRief) 기업소개 및 서비스 소개(한글)_프라이머일리오(VRief) 기업소개 및 서비스 소개(한글)_프라이머
일리오(VRief) 기업소개 및 서비스 소개(한글)_프라이머ohtaekeun
 
서비스디자인
서비스디자인 서비스디자인
서비스디자인 Jessica Lee
 
모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)
모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)
모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)keesung kim
 

Ähnlich wie Prototyping for Lean UX - NEXT (20)

P ilot plant_2014
P ilot plant_2014P ilot plant_2014
P ilot plant_2014
 
2020년 5월 9일 개발 이야기 정리
2020년 5월 9일 개발 이야기 정리2020년 5월 9일 개발 이야기 정리
2020년 5월 9일 개발 이야기 정리
 
GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법
GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법
GitLab Korea 밋업 - UX가 올 리모트 팀에서 일하는 법
 
최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기
 
ORD-2nd-08-witstudio
ORD-2nd-08-witstudioORD-2nd-08-witstudio
ORD-2nd-08-witstudio
 
[NAVER D2SF][TMS2019] 스튜디오씨드
[NAVER D2SF][TMS2019] 스튜디오씨드[NAVER D2SF][TMS2019] 스튜디오씨드
[NAVER D2SF][TMS2019] 스튜디오씨드
 
2018 Google I/O extended Busan flutter session
2018 Google I/O extended Busan flutter session2018 Google I/O extended Busan flutter session
2018 Google I/O extended Busan flutter session
 
[NEMO-UX] HCIK 2016 다중 사용자용 운영체제 FINE 플랫폼 소개와 SKT 협력 사례 발표
[NEMO-UX] HCIK 2016 다중 사용자용 운영체제 FINE 플랫폼 소개와 SKT 협력 사례 발표 [NEMO-UX] HCIK 2016 다중 사용자용 운영체제 FINE 플랫폼 소개와 SKT 협력 사례 발표
[NEMO-UX] HCIK 2016 다중 사용자용 운영체제 FINE 플랫폼 소개와 SKT 협력 사례 발표
 
헤비 이큅먼트
헤비 이큅먼트헤비 이큅먼트
헤비 이큅먼트
 
Make movement
Make movementMake movement
Make movement
 
Kgc2014 삼한제국기 포스트모템 김찬웅
Kgc2014 삼한제국기 포스트모템 김찬웅Kgc2014 삼한제국기 포스트모템 김찬웅
Kgc2014 삼한제국기 포스트모템 김찬웅
 
Mobile Prototype Essential
Mobile Prototype EssentialMobile Prototype Essential
Mobile Prototype Essential
 
객체지향프로그래밍 특강
객체지향프로그래밍 특강객체지향프로그래밍 특강
객체지향프로그래밍 특강
 
Modern Android App Development
Modern Android App DevelopmentModern Android App Development
Modern Android App Development
 
Card battle game proposal
Card battle game proposal Card battle game proposal
Card battle game proposal
 
Google creative lab
Google creative labGoogle creative lab
Google creative lab
 
사용자중심
사용자중심사용자중심
사용자중심
 
일리오(VRief) 기업소개 및 서비스 소개(한글)_프라이머
일리오(VRief) 기업소개 및 서비스 소개(한글)_프라이머일리오(VRief) 기업소개 및 서비스 소개(한글)_프라이머
일리오(VRief) 기업소개 및 서비스 소개(한글)_프라이머
 
서비스디자인
서비스디자인 서비스디자인
서비스디자인
 
모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)
모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)
모바일시대의프로토타이핑 (@웹월드컨퍼런스, 2014.11.19)
 

Prototyping for Lean UX - NEXT

  • 1. Studio XID Exceptionally Intelligent Design Lean Prototyping: 
 디자인 프로세스에서 
 프로토타입을 어떻게 사용할까? Mar 26th, Tony Kim
  • 2. studioXID all right reserved 2015copyright C Tony Kim, 김수 2 • Studio XID 
 CEO, Captain Design • Google 
 Interaction Designer • Naver China
 UX Manager • KAIST
 Industrial Design
  • 3. studioXID all right reserved 2015copyright C 뭘 했나요? 3 2006 2007 2008 2009 2010 2011 2012 2013 2014 연구원 디자이너 대장
  • 4. studioXID all right reserved 2015copyright C4 Original source: http://disney.wikia.com/wiki/Captain_America/Gallery Captain Design
  • 5. 프로토타입을 왜 만들어야할까? 
 어떻게 만들어야할까?
  • 6. studioXID all right reserved 2015copyright C 프로토타입의 종류 • 시각적 완성도: Lo-Fi vs. Mid-Fi vs. Hi-Fi • 작동 여부: Static vs. Working (Interactive) • 사용기간: Throwaway vs. Evolutionary • 구현 대상: Behavioral (Skin) vs. Structural (Bone) 6
  • 7. studioXID all right reserved 2015copyright C 다른 디자인 산출물과의 비교 7 Source: http://grahamtodman.co.uk/blog/category/sketches/ 스케치 (Sketch)
  • 8. studioXID all right reserved 2015copyright C8 Source: http://www.strangesystems.net/archives/2005/03/using_wireframe.php 화면설계 (Wireframe) 다른 디자인 산출물과의 비교
  • 9. studioXID all right reserved 2015copyright C9 Source: http://www.ac4d.com/2013/09/28/heartline-a-lifeline-to-your-loved-ones-storyboard/ 스토리보드 (Storyboard) 다른 디자인 산출물과의 비교
  • 10. studioXID all right reserved 2015copyright C10 Source: http://www.seekoften.com/portfolio/web/modern-website-mockup-in-photoshop.php 목업 (Mockup, Design) 다른 디자인 산출물과의 비교
  • 12. studioXID all right reserved 2015copyright C 디자인 프로세스에서 
 협의의 프로토타입 • 시각적 완성도: Lo-Fi vs. Mid-Fi vs. Hi-Fi • 작동 여부: Static vs. Working (Interactive) • 사용기간: Throwaway vs. Evolutionary • 구현 대상: Behavioral (Skin) vs. Structural (Bone) 12
  • 13. 큰 회사들은 서비스를 
 어떻게 디자인하고 있을까?
  • 14. studioXID all right reserved 2015copyright C Waterfall UX 프로세스 14 Source: http://upload.wikimedia.org/wikipedia/commons/b/bf/Waterfall_model_revised.svg
  • 15. studioXID all right reserved 2015copyright C Lean UX 프로세스 15 Source: http://welovelean.wordpress.com/2013/05/01/10-things-ive-learnt-about-lean-startup/
  • 16. studioXID all right reserved 2015copyright C Lean UX 프로세스 16 Source: http://www.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/
  • 17. studioXID all right reserved 2015copyright C Lean vs. Waterfall 17 Source: http://irfanebrahim.com/2014/11/02/waterfall-vs-agile-vs-lean-explained-in-1-picture/
  • 18. studioXID all right reserved 2015copyright C 우리는 모두 Lean으로 간다! 18 Lean Waterfall Source: Result from 1:1 interviews on June, July in 2014
  • 19. studioXID all right reserved 2015copyright C Lean UX에서 산출물 19 Source: Result from 1:1 interviews on June, July in 2014 “우리는 화면설계를 하지 않아요”
  • 20. studioXID all right reserved 2015copyright C 디자인 산출물에 대한 오너쉽 20 제품컨셉정의 기능정의 사용자 시나리오 화면설계 화면디자인 프로토타입 PM Designer 기획자, UX 연구원 UI 디자이너
  • 21. studioXID all right reserved 2015copyright C 구글의 디자인 산출물 21 Sketch (Lo-Fi) Mockup (Hi-Fi) Prototype (Hi-Fi)
  • 23. studioXID all right reserved 2015copyright C 구글의 디자인 산출물 23
  • 24. studioXID all right reserved 2015copyright C 한입크기의 프로젝트 규모 24 Source: http://wallpaperszoo.com/wp-content/uploads/2014/04/turtle-eating-strawberry.jpg
  • 25. studioXID all right reserved 2015copyright C 구글의 프로토타입 • 한입크기 기능만 만든다 • 협업을 지원할 수 있어야 한다 • 커뮤니케이션을 위한 수단 • 다른 직군과의 대화, 내부 보고 • 사용자로부터의 피드백 25
  • 27. studioXID all right reserved 2015copyright C 디자인 패러다임의 변화 27 Page base Interaction Object base Interaction Sensor aid Interaction • By Apple • Page transition • Page level hierarchy • By Google • Layer concept • Z-index • By Facebook • Contextual input • Sensor signal
  • 31. studioXID all right reserved 2015copyright C 2차원 공간의 한계 31 Source: Wireframe for Naver Japanese dictionary handwriting feature
  • 32. studioXID all right reserved 2015copyright C 해결방안은? 프로토타입! • “86%의 디자이너들은 정적인 UI설계보다 
 동적인 인터랙션을 설계하는데 어려움을 느낀다.”* • 쓸만한 툴이 없을까? 32 * How designers design and program behaviours, HCII, CMU, Brad A. Myers, 2008
  • 33. studioXID all right reserved 2015copyright C 쓸만한 프로토타이핑툴 33 제한적인 인터랙션 정교한 인터랙션 센서기반 인터랙션 화면설계툴 프로토타이핑툴 협업툴
  • 34. studioXID all right reserved 2015copyright C 오리가미 Origami 34 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/
  • 35. studioXID all right reserved 2015copyright C 프레이머 Framer 35 Source: http://framerjs.com/static/images/home/ss-framer.jpg
  • 36. studioXID all right reserved 2015copyright C 픽세이트 Pixate 36 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/
  • 37. 스냅 SNAP Close Beta: 2015년 4월
  • 39. studioXID all right reserved 2015copyright C 인터랙션의 분해 39 Source: http://microinteractions.com/what-is-a-microinteraction/
  • 40. studioXID all right reserved 2015copyright C40 Source: http://billwscott.com/share/DragAndDropModules-InterestingMoments.pdf
  • 41. studioXID all right reserved 2015copyright C 부드러운 움직임: 가속도 41 Source: http://cubic-bezier.com/
  • 43. studioXID all right reserved 2015copyright C 프로토타이핑을 잘하려면… • 한입 크기로 만들자. • 문서작업은 잊어라. 그려보고 만들어보자. • 내 디자인은 내 손으로 프로토타이핑해보자. • 대충 시작해서 완벽해질때까지 계속 수정하자. • Mid-Fi와 Hi-Fi를 동시에 지원하는 툴을 하나만 고르자.
 (혹은, 그래픽툴 하나 + 프로토타이핑툴 하나) • 인터랙션을 분해하는 연습 43
  • 44. Tony Kim | CEO, Caption Design of Studio XID | tony@studioxid.com 감사합니다. Q & A