�ݺ�ߣ

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

뭘 했나요?
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

프로토타입을 왜 만들어야할까?  
어떻게 만들어야할까?

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

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

• 사용기간: Throwaway vs. Evolutionary

• 구현 대상: Behavioral (Skin) vs. Structural (Bone)
6

다른 디자인 산출물과의 비교
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

디자인 프로세스에서  
협의의 프로토타입
• 시각적 완성도: Lo-Fi vs. Mid-Fi vs. Hi-Fi

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

• 사용기간: Throwaway vs. Evolutionary

• 구현 대상: Behavioral (Skin) vs. Structural (Bone)
12

큰 회사들은 서비스를  
어떻게 디자인하고 있을까?

Waterfall UX 프로세스
14 Source: http://upload.wikimedia.org/wikipedia/commons/b/bf/Waterfall_model_revised.svg

Lean UX 프로세스
15 Source: http://welovelean.wordpress.com/2013/05/01/10-things-ive-learnt-about-lean-startup/

Lean UX 프로세스
16 Source: http://www.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/

Lean vs. Waterfall
17 Source: http://irfanebrahim.com/2014/11/02/waterfall-vs-agile-vs-lean-explained-in-1-picture/

우리는 모두 Lean으로 간다!
18
Lean Waterfall
Source: Result from 1:1 interviews on June, July in 2014

Lean UX에서 산출물
19 Source: Result from 1:1 interviews on June, July in 2014
“우리는 화면설계를
하지 않아요”

디자인 산출물에 대한 오너쉽
20
제품컨셉정의

기능정의

사용자 시나리오

화면설계

화면디자인

프로토타입
PM
Designer
기획자,

UX 연구원
UI 디자이너

구글의 디자인 산출물
21
Sketch

(Lo-Fi)
Mockup

(Hi-Fi)
Prototype

(Hi-Fi)

구글의 디자인 산출물
23

한입크기의 프로젝트 규모
24 Source: http://wallpaperszoo.com/wp-content/uploads/2014/04/turtle-eating-strawberry.jpg

구글의 프로토타입
• 한입크기 기능만 만든다

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

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

• 사용자로부터의 피드백
25

프로토타이핑 꼭 해야할까요?

디자인 패러다임의 변화
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

2차원 공간의 한계
31 Source: Wireframe for Naver Japanese dictionary handwriting feature

해결방안은? 프로토타입!
• “86%의 디자이너들은 정적인 UI설계보다  
동적인 인터랙션을 설계하는데 어려움을 느낀다.”*
• 쓸만한 툴이 없을까?
32 * How designers design and program behaviours, HCII, CMU, Brad A. Myers, 2008

쓸만한 프로토타이핑툴
33
제한적인 인터랙션 정교한 인터랙션 센서기반 인터랙션
화면설계툴 프로토타이핑툴
협업툴

오리가미 Origami
34 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/

프레이머 Framer
35 Source: http://framerjs.com/static/images/home/ss-framer.jpg

픽세이트 Pixate
36 Source: http://www.grapefruit.ro/ideas/designing-killer-mobile-apps-prototype-story/

스냅 SNAP
Close Beta: 2015년 4월

프로토타이핑을 잘하려면?

인터랙션의 분해
39 Source: http://microinteractions.com/what-is-a-microinteraction/

부드러운 움직임: 가속도
41 Source: http://cubic-bezier.com/

프로토타이핑을 잘하려면…
• 한입 크기로 만들자.

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

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

• Mid-Fi와 Hi-Fi를 동시에 지원하는 툴을 하나만 고르자. 
(혹은, 그래픽툴 하나 + 프로토타이핑툴 하나)

• 인터랙션을 분해하는 연습
43

Tony Kim | CEO, Caption Design of Studio XID | tony@studioxid.com
감사합니다.

Q & A

�ݺ�ߣ

Prototyping for Lean UX - NEXT

More Related Content

Prototyping for Lean UX - NEXT