Download - Wwc2016 기획디자인개발그리고프로토
김기성
웹월드컨퍼런스�2016�
기획,�디자인,�개발,�
그리고��
프로토타입
1. 프로토타입�
2. Low,�High-Fi�프로토타입�
3. 프로토타이핑�@디자인�프로세스�
4. 프로토타이핑�@서비스�규모/시점�
5. 도구로써의�프로토타이핑
목차
프로토타입
프로토타입:�PROTOTYPE�
'정보시스템의�미완성�버전�또는�중요한�기능들이�포함되어�있는�시스템의�초기모델’�
사용자의�모든�요구사항이�정확하게�반영할�때까지�계속해서�개선/보완�
실제로�많은�애플리케이션들이�지속적인�프로토타입의�확장과�보강을�통해�최종�설계가�승인
http://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85
테스트�+�개선�=�성공확률의�증가�Solve�Design�Problems�실질적인�개발�프로세스에�앞서�이슈가�될�만한�디자인�문제를�해결하는데�효율적인�방법�상위의�개념적�이슈에서부터�세부적인�인터랙션에�이르는�모든�사항을�다루는데�유용함�
Evaluate�Design�Idea�컨셉-동선-인터랙션�등�여러�아이디어를�평가할�때�사용�
평가자는�기획,�디자인,�최종�사용자�등이�포함될�수�있음�
Communicate�Design�Idea�컨셉이나�아이디어를�효과적으로�전달하는�방법으로�사용�회사�내부�보고나�투자자�공유�또는�사용자�의견을�수렴하기�위해�활용
PC Mobile
프로토타입의�활용,�역할
CASE STUDY
PROTOTYPING TOOLS https://brunch.co.kr/@jihere1001/12
Low-Fi High-Fi
http://principletemplates.com/
Hi-Fi PROTOTYPE
(디자인)�툴에�대한�러닝커브가�높은�프로토타입을�배울�필요가�있을까?�
(기획)�굳이�개발버전에�가까운�프로토타입을�만들�필요가�있을까?�
(디자인)�프로토타입을�제작하더라도�다시�개발해야�하는�이중작업이�과연�필요한가�
(개발)�설계된�문서를�보고�구현/개발하기도�바쁜데�프로토타입을�꼭�참고해야�할까?�
(PM)�결국은�전체�프로젝트의�기간만�늘리는�역할만�하지�않을까?
프로토타입�@프로세스
prototyping is fundamentally change the way to design product at Facebook.
- Matej Hrescak, Product Designer at Facebook
�전통적인
�사용자�중심�디자인
프로세스�
�전통적인
�사용자�중심�디자인
�프로세스�
프로토타입
커뮤니케이션
테스트
�전통적인
�사용자�중심�디자인
�프로세스�
커뮤니케이션
테스트
프로토타입
프로토타입
프로토타입
�전통적인
�사용자�중심�디자인
�프로세스�
린�프로세스
애자일�프로세스
린�프로세스
애자일�프로세스
프로토타입�
프로토타입�
프로토타입�
프로토타입�
커뮤니케이션
테스트
프로토타입�
프로토타입�
MVP
린�프로세스
애자일�프로세스
린�프로세스
애자일�프로세스
프로토타입�
프로토타입� MVP
린�프로세스
애자일�프로세스
커뮤니케이션
테스트
2 Week Sprint
IPMSTEP 1 STEP 2,3
IDEAS
BUILDLEARN
MEASURE
DATA PRODUCT
=
2 Week Sprint
린�프로세스
애자일�프로세스
커뮤니케이션
테스트
2 Week Sprint
IPMSTEP 1 STEP 2,3
IDEAS
BUILDLEARN
MEASURE
DATA PRODUCT
=
2 Week Sprint
프로토타입�
프로토타입�
프로토타입�
프로토타입�
MVP
MVP
린�프로세스
애자일�프로세스
커뮤니케이션
테스트
반복(Iteration)�
을�통한�스케일�키우기
린�프로세스
애자일�프로세스
프로토타입�
프로토타입�
MVP
프로토타입�
프로토타입�
프로토타입�
프로토타입�
프로토타입�
프로토타입�
프로토타입�
프로토타입�
린�프로세스
애자일�프로세스
Prototyping is the fastest way between you and your customers. Lean UX is where prototyping shines.
- Jeff Gothelf, author of ‘Lean UX’ book
린�프로세스
애자일�프로세스
프로토타입�@규모/시점
서비스�오픈
서비스�리디자인
CASE STUDY
서비스�오픈
서비스�리디자인
서비스�오픈
서비스�리디자인
CHECK POINT
해당�프로토타입이�결국�설
계문서�작업을�대체하거나�
줄여주지는�못했음
Wireframe, Scenario UI Design, IxD Engineering
프로토타입에서는�가능했
던�디자인/인터랙션이�실제�
개발에서�구현되지�못하는�
경우�또한�존재
프로토타입에서�구현된�인
터랙션은�참조할�수�있었지
만�관련�코드�활용은�어려
웠다는�피드백
서비스�개선
인터랙션�개선
CASE STUDY
PROBLEM
HYPOTHESIS
SOLUTION
모바일에서�콘텐츠를�접하는�채널은�점차�많아지고�포털로의�유입은�줄어듦
포털�내에서의�공유�수를�늘리면�재유입에�대한�비중이�더�늘어날�것이다.
기사뷰�내�공유기능의�강화�모색
by ojay
by ojay
스케치 문서작업 커뮤니케이션 설득/적용
서비스 개선
인터랙션 개선
스케치 문서작업 커뮤니케이션 설득/적용
서비스 개선
인터랙션 개선
PROBLEM
HYPOTHESIS
SOLUTION
‘좋아요’를�10번만�누를�수�있다는�것을�UI상으로�보여주기�어려움.
명확한�피드백은�사용자들에게�혼란을�주지�않을�것이다.
‘좋아요’를�10회�이상�눌렀을�때�특정�메시지를�보여줌으로써�명확한�인지를�할�수�있도록�함.�(Abusing�방지)
by lain
PROBLEM
HYPOTHESIS
SOLUTION
새로운�친구를�만날�수�있는�접점(touch�point)과�친구�추가�기능이�숨겨져�있는�문제
친구�추가와�추가�방식을�쉽게�함으로써�유의미한�친구를�발견할�수�있도록�하면�사용자들의�만족도를�높일�수�있을�것이다.
정보의�깊이(Depth)를�줄여�의미있는�기능들을�밖으로�노출시킬�수�있는�방안
by lain
CHECK POINT
다양한 프로토타이핑 툴들을 사용해보았지만, 각각 한계점들이 존재, 인터랙션의 제안의 경우 코딩기반의 프로토타입의 툴이 가장 자유도가 높고 원하는 그림을 그려낼 수 있었음
Wireframe, Scenario UI Design, IxD Engineering
프로토타입으로 구현이 가능하더라도 실제 해당 서비스에서 개발이 가능한가의 여부는 별개의 문제
no pain, no gain,
도구로써의�프로토타입
평가의�도구
커뮤니케이션�도구
커뮤니케이션�도구
concept execution
concept execution
design stop
implementation begin
LANGUAGENEW
커뮤니케이션�도구
VISION
DESIGNER PRODUCT MANAGER ENGINEER
PROTOTYPE
1
커뮤니케이션�도구
IDEAS
BUILDLEARN
MEASURE
DATA PRODUCT
컨셉 공유
동선 공유
인터랙션 공유
커뮤니케이션�도구
IDEAS
BUILDLEARN
MEASURE
DATA PRODUCT
컨셉�공유
by hazel
커뮤니케이션�도구
by isla
커뮤니케이션�도구
IDEAS
BUILDLEARN
MEASURE
DATA PRODUCT
동선�공유
by lain
커뮤니케이션�도구
IDEAS
BUILDLEARN
MEASURE
DATA PRODUCT
인터랙션�공유
외부�커뮤니케이션
커뮤니케이션�도구
IDEAS
BUILDLEARN
MEASURE
DATA PRODUCT
평가의�도구
평가의�도구
DESIGNER USER
IDEAS
FEEDBACK
IDEAS
FEEDBACK
탐색 정의 디자인
프로토�타입
테스트
평가의�도구
탐색 정의 디자인
프로토�타입
테스트
평가의 도구
탐색 정의 디자인
프로토�타입
테스트
평가의 도구
탐색
정의
디자인
프로토�타입
테스트
관련�부서와�함께�초기�부터�현재�상황을�함께�인지하고�논의할�수�있도록�함�
협의할�서비스�부서와의�커뮤니케이션,�프로젝트에�대한�이해도�높이기,
해결하고자�하는�문제에�대한�제대로된�정의,�그리고�이를�풀어내기�위한�가설의�정의�
가장�어렵기도�하고�중요한�단계,�협업�부서와의�컨센서스�역시�필요
종이/화이트보드�위에�기본적인�아이디어들을�스케치하고,�주요�트랜지션과�애니메이션에�
대한�스토리보드를�그린�후,�내부에�아이디어�공유하도록�함�
*�스케치�전�해당�스케치에�대한�Goal,�Concept,�Feature에�대한�정의
상황/프로세스에�맞는�프로토타입�도구의�활용이�필요�
빠른�대략의�컨셉/동선의�확인�>�페이지/어플리케이션�기반�프로토타입�
디테일하고�리치한�인터랙션의�확인�>�레이어/코드�기반�프로토타입�
작은�그룹의�참여자들을�섭외한�후,�테스트�세션�진행,�내부에서의�리뷰�및�수정,�
필요한�경우�리디자인을�위한�이터레이션�진행
탐색
정의
관련�부서와�함께�초기�부터�현재�상황을�함께�인지하고�논의할�수�있도록�함�
협의할�서비스�부서와의�커뮤니케이션,�프로젝트에�대한�이해도�높이기,
해결하고자�하는�문제에�대한�제대로된�정의,�그리고�이를�풀어내기�위한�가설의�정의�
가장�어렵기도�하고�중요한�단계,�협업�부서와의�컨센서스�역시�필요
종이/화이트보드�위에�기본적인�아이디어들을�스케치하고,�주요�트랜지션과�애니메이션에�
대한�스토리보드를�그린�후,�내부에�아이디어�공유하도록�함�
*�스케치�전�해당�스케치에�대한�Goal,�Concept,�Feature에�대한�정의
상황/프로세스에�맞는�프로토타입�도구의�활용이�필요�
빠른�대략의�컨셉/동선의�확인�>�페이지/어플리케이션�기반�프로토타입�
디테일하고�리치한�인터랙션의�확인�>�레이어/코드�기반�프로토타입�
작은�그룹의�참여자들을�섭외한�후,�테스트�세션�진행,�내부에서의�리뷰�및�수정,�
필요한�경우�리디자인을�위한�이터레이션�진행
디자인
프로토�타입
테스트
탐색
정의
디자인
프로토�타입
테스트
관련�부서와�함께�초기�부터�현재�상황을�함께�인지하고�논의할�수�있도록�함�
협의할�서비스�부서와의�커뮤니케이션,�프로젝트에�대한�이해도�높이기,
해결하고자�하는�문제에�대한�제대로된�정의,�그리고�이를�풀어내기�위한�가설의�정의�
가장�어렵기도�하고�중요한�단계,�협업�부서와의�컨센서스�역시�필요
종이/화이트보드�위에�기본적인�아이디어들을�스케치하고,�주요�트랜지션과�애니메이션에�
대한�스토리보드를�그린�후,�내부에�아이디어�공유하도록�함�
*�스케치�전�해당�스케치에�대한�Goal,�Concept,�Feature에�대한�정의
상황/프로세스에�맞는�프로토타입�도구의�활용이�필요�
빠른�대략의�컨셉/동선의�확인�>�페이지/어플리케이션�기반�프로토타입�
디테일하고�리치한�인터랙션의�확인�>�레이어/코드�기반�프로토타입�
작은�그룹의�참여자들을�섭외한�후,�테스트�세션�진행,�내부에서의�리뷰�및�수정,�
필요한�경우�리디자인을�위한�이터레이션�진행
요약
기획
그리고�프로토타입
디자인 개발
프로토타이핑��@서비스�규모/시점
프로토타이핑��도구로써의,
프로토타이핑��@디자인�프로세스
린/애자일�프로세스에서프로토타이핑의�역할과 중요도는�점차�높아짐
프로세스와�프로젝트의�
규모와�시점에�따라��
신중한�도구의�선택필요
커뮤니케이션�도구와��
평가도구로써의��
프로토타입의�역할�존재
커뮤니케이션�도구
평가�도구
PROTOTYPE @DESIGN PROCESS
CONTEXT
VALUE
SWEET SPOT
감사합니다�
질문@pentaxzs