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