78
김기성 웹월드컨퍼런스 2016 기획, 디자인, 개발, 그리고 프로토타입

Wwc2016 기획디자인개발그리고프로토

Embed Size (px)

Citation preview

Page 1: Wwc2016 기획디자인개발그리고프로토

김기성

웹월드컨퍼런스�2016�

기획,�디자인,�개발,�

그리고��

프로토타입

Page 2: Wwc2016 기획디자인개발그리고프로토

1. 프로토타입�

2. Low,�High-Fi�프로토타입�

3. 프로토타이핑�@디자인�프로세스�

4. 프로토타이핑�@서비스�규모/시점�

5. 도구로써의�프로토타이핑

목차

Page 3: Wwc2016 기획디자인개발그리고프로토

프로토타입

Page 4: Wwc2016 기획디자인개발그리고프로토
Page 5: Wwc2016 기획디자인개발그리고프로토
Page 6: Wwc2016 기획디자인개발그리고프로토
Page 7: Wwc2016 기획디자인개발그리고프로토
Page 8: Wwc2016 기획디자인개발그리고프로토
Page 9: Wwc2016 기획디자인개발그리고프로토

프로토타입:�PROTOTYPE�

'정보시스템의�미완성�버전�또는�중요한�기능들이�포함되어�있는�시스템의�초기모델’�

사용자의�모든�요구사항이�정확하게�반영할�때까지�계속해서�개선/보완�

실제로�많은�애플리케이션들이�지속적인�프로토타입의�확장과�보강을�통해�최종�설계가�승인

http://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85

Page 10: Wwc2016 기획디자인개발그리고프로토

테스트�+�개선�=�성공확률의�증가�Solve�Design�Problems�실질적인�개발�프로세스에�앞서�이슈가�될�만한�디자인�문제를�해결하는데�효율적인�방법�상위의�개념적�이슈에서부터�세부적인�인터랙션에�이르는�모든�사항을�다루는데�유용함�

Evaluate�Design�Idea�컨셉-동선-인터랙션�등�여러�아이디어를�평가할�때�사용�

평가자는�기획,�디자인,�최종�사용자�등이�포함될�수�있음�

Communicate�Design�Idea�컨셉이나�아이디어를�효과적으로�전달하는�방법으로�사용�회사�내부�보고나�투자자�공유�또는�사용자�의견을�수렴하기�위해�활용

Page 11: Wwc2016 기획디자인개발그리고프로토

PC Mobile

프로토타입의�활용,�역할

Page 12: Wwc2016 기획디자인개발그리고프로토

CASE STUDY

Page 13: Wwc2016 기획디자인개발그리고프로토
Page 14: Wwc2016 기획디자인개발그리고프로토
Page 15: Wwc2016 기획디자인개발그리고프로토

프로토타이핑�툴�소개�

http://story.pxd.co.kr/1069

Page 16: Wwc2016 기획디자인개발그리고프로토

한번쯤�들어봤던�화면설계�&�프로토타이핑�툴�총정리�

http://yslab.kr/94

Page 17: Wwc2016 기획디자인개발그리고프로토

PROTOTYPING TOOLS https://brunch.co.kr/@jihere1001/12

Page 18: Wwc2016 기획디자인개발그리고프로토

Low-Fi High-Fi

Page 19: Wwc2016 기획디자인개발그리고프로토
Page 20: Wwc2016 기획디자인개발그리고프로토

http://principletemplates.com/

Page 21: Wwc2016 기획디자인개발그리고프로토

Hi-Fi PROTOTYPE

Page 22: Wwc2016 기획디자인개발그리고프로토

(디자인)�툴에�대한�러닝커브가�높은�프로토타입을�배울�필요가�있을까?�

(기획)�굳이�개발버전에�가까운�프로토타입을�만들�필요가�있을까?�

(디자인)�프로토타입을�제작하더라도�다시�개발해야�하는�이중작업이�과연�필요한가�

(개발)�설계된�문서를�보고�구현/개발하기도�바쁜데�프로토타입을�꼭�참고해야�할까?�

(PM)�결국은�전체�프로젝트의�기간만�늘리는�역할만�하지�않을까?

Page 23: Wwc2016 기획디자인개발그리고프로토

프로토타입�@프로세스

Page 24: Wwc2016 기획디자인개발그리고프로토

prototyping is fundamentally change the way to design product at Facebook.

- Matej Hrescak, Product Designer at Facebook

Page 25: Wwc2016 기획디자인개발그리고프로토

�전통적인

�사용자�중심�디자인

프로세스�

Page 26: Wwc2016 기획디자인개발그리고프로토

�전통적인

�사용자�중심�디자인

�프로세스�

Page 27: Wwc2016 기획디자인개발그리고프로토

프로토타입

커뮤니케이션

테스트

�전통적인

�사용자�중심�디자인

�프로세스�

Page 28: Wwc2016 기획디자인개발그리고프로토

커뮤니케이션

테스트

프로토타입

프로토타입

프로토타입

�전통적인

�사용자�중심�디자인

�프로세스�

Page 29: Wwc2016 기획디자인개발그리고프로토

린�프로세스

애자일�프로세스

Page 30: Wwc2016 기획디자인개발그리고프로토

린�프로세스

애자일�프로세스

Page 31: Wwc2016 기획디자인개발그리고프로토

프로토타입�

프로토타입�

프로토타입�

프로토타입�

커뮤니케이션

테스트

프로토타입�

프로토타입�

MVP

린�프로세스

애자일�프로세스

Page 32: Wwc2016 기획디자인개발그리고프로토

린�프로세스

애자일�프로세스

Page 33: Wwc2016 기획디자인개발그리고프로토

프로토타입�

프로토타입� MVP

린�프로세스

애자일�프로세스

커뮤니케이션

테스트

Page 34: Wwc2016 기획디자인개발그리고프로토

2 Week Sprint

IPMSTEP 1 STEP 2,3

IDEAS

BUILDLEARN

MEASURE

DATA PRODUCT

=

2 Week Sprint

린�프로세스

애자일�프로세스

커뮤니케이션

테스트

Page 35: Wwc2016 기획디자인개발그리고프로토

2 Week Sprint

IPMSTEP 1 STEP 2,3

IDEAS

BUILDLEARN

MEASURE

DATA PRODUCT

=

2 Week Sprint

프로토타입�

프로토타입�

프로토타입�

프로토타입�

MVP

MVP

린�프로세스

애자일�프로세스

커뮤니케이션

테스트

Page 36: Wwc2016 기획디자인개발그리고프로토

반복(Iteration)�

을�통한�스케일�키우기

린�프로세스

애자일�프로세스

Page 37: Wwc2016 기획디자인개발그리고프로토

프로토타입�

프로토타입�

MVP

프로토타입�

프로토타입�

프로토타입�

프로토타입�

프로토타입�

프로토타입�

프로토타입�

프로토타입�

린�프로세스

애자일�프로세스

Page 38: Wwc2016 기획디자인개발그리고프로토

Prototyping is the fastest way between you and your customers. Lean UX is where prototyping shines.

- Jeff Gothelf, author of ‘Lean UX’ book

린�프로세스

애자일�프로세스

Page 39: Wwc2016 기획디자인개발그리고프로토

프로토타입�@규모/시점

Page 40: Wwc2016 기획디자인개발그리고프로토

서비스�오픈

서비스�리디자인

Page 41: Wwc2016 기획디자인개발그리고프로토

CASE STUDY

Page 42: Wwc2016 기획디자인개발그리고프로토

서비스�오픈

서비스�리디자인

Page 43: Wwc2016 기획디자인개발그리고프로토

서비스�오픈

서비스�리디자인

Page 44: Wwc2016 기획디자인개발그리고프로토

CHECK POINT

해당�프로토타입이�결국�설

계문서�작업을�대체하거나�

줄여주지는�못했음

Wireframe, Scenario UI Design, IxD Engineering

프로토타입에서는�가능했

던�디자인/인터랙션이�실제�

개발에서�구현되지�못하는�

경우�또한�존재

프로토타입에서�구현된�인

터랙션은�참조할�수�있었지

만�관련�코드�활용은�어려

웠다는�피드백

Page 45: Wwc2016 기획디자인개발그리고프로토

서비스�개선

인터랙션�개선

Page 46: Wwc2016 기획디자인개발그리고프로토

CASE STUDY

Page 47: Wwc2016 기획디자인개발그리고프로토

PROBLEM

HYPOTHESIS

SOLUTION

모바일에서�콘텐츠를�접하는�채널은�점차�많아지고�포털로의�유입은�줄어듦

포털�내에서의�공유�수를�늘리면�재유입에�대한�비중이�더�늘어날�것이다.

기사뷰�내�공유기능의�강화�모색

Page 48: Wwc2016 기획디자인개발그리고프로토

by ojay

Page 49: Wwc2016 기획디자인개발그리고프로토

by ojay

Page 50: Wwc2016 기획디자인개발그리고프로토

스케치 문서작업 커뮤니케이션 설득/적용

서비스 개선

인터랙션 개선

Page 51: Wwc2016 기획디자인개발그리고프로토

스케치 문서작업 커뮤니케이션 설득/적용

서비스 개선

인터랙션 개선

Page 52: Wwc2016 기획디자인개발그리고프로토

PROBLEM

HYPOTHESIS

SOLUTION

‘좋아요’를�10번만�누를�수�있다는�것을�UI상으로�보여주기�어려움.

명확한�피드백은�사용자들에게�혼란을�주지�않을�것이다.

‘좋아요’를�10회�이상�눌렀을�때�특정�메시지를�보여줌으로써�명확한�인지를�할�수�있도록�함.�(Abusing�방지)

by lain

Page 53: Wwc2016 기획디자인개발그리고프로토

PROBLEM

HYPOTHESIS

SOLUTION

새로운�친구를�만날�수�있는�접점(touch�point)과�친구�추가�기능이�숨겨져�있는�문제

친구�추가와�추가�방식을�쉽게�함으로써�유의미한�친구를�발견할�수�있도록�하면�사용자들의�만족도를�높일�수�있을�것이다.

정보의�깊이(Depth)를�줄여�의미있는�기능들을�밖으로�노출시킬�수�있는�방안

by lain

Page 54: Wwc2016 기획디자인개발그리고프로토

CHECK POINT

다양한 프로토타이핑 툴들을 사용해보았지만, 각각 한계점들이 존재, 인터랙션의 제안의 경우 코딩기반의 프로토타입의 툴이 가장 자유도가 높고 원하는 그림을 그려낼 수 있었음

Wireframe, Scenario UI Design, IxD Engineering

프로토타입으로 구현이 가능하더라도 실제 해당 서비스에서 개발이 가능한가의 여부는 별개의 문제

no pain, no gain,

Page 55: Wwc2016 기획디자인개발그리고프로토

도구로써의�프로토타입

Page 56: Wwc2016 기획디자인개발그리고프로토

평가의�도구

커뮤니케이션�도구

Page 57: Wwc2016 기획디자인개발그리고프로토

커뮤니케이션�도구

concept execution

Page 58: Wwc2016 기획디자인개발그리고프로토

concept execution

design stop

implementation begin

LANGUAGENEW

커뮤니케이션�도구

Page 59: Wwc2016 기획디자인개발그리고프로토

VISION

DESIGNER PRODUCT MANAGER ENGINEER

PROTOTYPE

1

커뮤니케이션�도구

Page 60: Wwc2016 기획디자인개발그리고프로토

IDEAS

BUILDLEARN

MEASURE

DATA PRODUCT

컨셉 공유

동선 공유

인터랙션 공유

커뮤니케이션�도구

Page 61: Wwc2016 기획디자인개발그리고프로토

IDEAS

BUILDLEARN

MEASURE

DATA PRODUCT

컨셉�공유

by hazel

커뮤니케이션�도구

Page 62: Wwc2016 기획디자인개발그리고프로토

by isla

커뮤니케이션�도구

IDEAS

BUILDLEARN

MEASURE

DATA PRODUCT

동선�공유

Page 63: Wwc2016 기획디자인개발그리고프로토

by lain

커뮤니케이션�도구

IDEAS

BUILDLEARN

MEASURE

DATA PRODUCT

인터랙션�공유

Page 64: Wwc2016 기획디자인개발그리고프로토

외부�커뮤니케이션

커뮤니케이션�도구

IDEAS

BUILDLEARN

MEASURE

DATA PRODUCT

Page 65: Wwc2016 기획디자인개발그리고프로토

평가의�도구

Page 66: Wwc2016 기획디자인개발그리고프로토

평가의�도구

DESIGNER USER

IDEAS

FEEDBACK

IDEAS

FEEDBACK

Page 67: Wwc2016 기획디자인개발그리고프로토

탐색 정의 디자인

프로토�타입

테스트

평가의�도구

Page 68: Wwc2016 기획디자인개발그리고프로토

탐색 정의 디자인

프로토�타입

테스트

평가의 도구

Page 69: Wwc2016 기획디자인개발그리고프로토

탐색 정의 디자인

프로토�타입

테스트

평가의 도구

Page 70: Wwc2016 기획디자인개발그리고프로토

탐색

정의

디자인

프로토�타입

테스트

관련�부서와�함께�초기�부터�현재�상황을�함께�인지하고�논의할�수�있도록�함�

협의할�서비스�부서와의�커뮤니케이션,�프로젝트에�대한�이해도�높이기,

해결하고자�하는�문제에�대한�제대로된�정의,�그리고�이를�풀어내기�위한�가설의�정의�

가장�어렵기도�하고�중요한�단계,�협업�부서와의�컨센서스�역시�필요

종이/화이트보드�위에�기본적인�아이디어들을�스케치하고,�주요�트랜지션과�애니메이션에�

대한�스토리보드를�그린�후,�내부에�아이디어�공유하도록�함�

*�스케치�전�해당�스케치에�대한�Goal,�Concept,�Feature에�대한�정의

상황/프로세스에�맞는�프로토타입�도구의�활용이�필요�

빠른�대략의�컨셉/동선의�확인�>�페이지/어플리케이션�기반�프로토타입�

디테일하고�리치한�인터랙션의�확인�>�레이어/코드�기반�프로토타입�

작은�그룹의�참여자들을�섭외한�후,�테스트�세션�진행,�내부에서의�리뷰�및�수정,�

필요한�경우�리디자인을�위한�이터레이션�진행

Page 71: Wwc2016 기획디자인개발그리고프로토

탐색

정의

관련�부서와�함께�초기�부터�현재�상황을�함께�인지하고�논의할�수�있도록�함�

협의할�서비스�부서와의�커뮤니케이션,�프로젝트에�대한�이해도�높이기,

해결하고자�하는�문제에�대한�제대로된�정의,�그리고�이를�풀어내기�위한�가설의�정의�

가장�어렵기도�하고�중요한�단계,�협업�부서와의�컨센서스�역시�필요

종이/화이트보드�위에�기본적인�아이디어들을�스케치하고,�주요�트랜지션과�애니메이션에�

대한�스토리보드를�그린�후,�내부에�아이디어�공유하도록�함�

*�스케치�전�해당�스케치에�대한�Goal,�Concept,�Feature에�대한�정의

상황/프로세스에�맞는�프로토타입�도구의�활용이�필요�

빠른�대략의�컨셉/동선의�확인�>�페이지/어플리케이션�기반�프로토타입�

디테일하고�리치한�인터랙션의�확인�>�레이어/코드�기반�프로토타입�

작은�그룹의�참여자들을�섭외한�후,�테스트�세션�진행,�내부에서의�리뷰�및�수정,�

필요한�경우�리디자인을�위한�이터레이션�진행

디자인

프로토�타입

테스트

Page 72: Wwc2016 기획디자인개발그리고프로토

탐색

정의

디자인

프로토�타입

테스트

관련�부서와�함께�초기�부터�현재�상황을�함께�인지하고�논의할�수�있도록�함�

협의할�서비스�부서와의�커뮤니케이션,�프로젝트에�대한�이해도�높이기,

해결하고자�하는�문제에�대한�제대로된�정의,�그리고�이를�풀어내기�위한�가설의�정의�

가장�어렵기도�하고�중요한�단계,�협업�부서와의�컨센서스�역시�필요

종이/화이트보드�위에�기본적인�아이디어들을�스케치하고,�주요�트랜지션과�애니메이션에�

대한�스토리보드를�그린�후,�내부에�아이디어�공유하도록�함�

*�스케치�전�해당�스케치에�대한�Goal,�Concept,�Feature에�대한�정의

상황/프로세스에�맞는�프로토타입�도구의�활용이�필요�

빠른�대략의�컨셉/동선의�확인�>�페이지/어플리케이션�기반�프로토타입�

디테일하고�리치한�인터랙션의�확인�>�레이어/코드�기반�프로토타입�

작은�그룹의�참여자들을�섭외한�후,�테스트�세션�진행,�내부에서의�리뷰�및�수정,�

필요한�경우�리디자인을�위한�이터레이션�진행

Page 73: Wwc2016 기획디자인개발그리고프로토

요약

Page 74: Wwc2016 기획디자인개발그리고프로토

기획

그리고�프로토타입

디자인 개발

Page 75: Wwc2016 기획디자인개발그리고프로토

프로토타이핑��@서비스�규모/시점

프로토타이핑��도구로써의,

프로토타이핑��@디자인�프로세스

린/애자일�프로세스에서프로토타이핑의�역할과 중요도는�점차�높아짐

프로세스와�프로젝트의�

규모와�시점에�따라��

신중한�도구의�선택필요

커뮤니케이션�도구와��

평가도구로써의��

프로토타입의�역할�존재

Page 76: Wwc2016 기획디자인개발그리고프로토

커뮤니케이션�도구

평가�도구

PROTOTYPE @DESIGN PROCESS

CONTEXT

VALUE

SWEET SPOT

Page 77: Wwc2016 기획디자인개발그리고프로토

감사합니다�

Page 78: Wwc2016 기획디자인개발그리고프로토

질문@pentaxzs

[email protected]