ݺߣ

ݺߣShare a Scribd company logo

성공적인 UX디자인을 위한 프로토타입 방법론

•
•
Unbong Kang
Unbong Kang

플루토미디어 주최 "UX 월드 2017" 강연자료. 1. 프로토타이핑을 하는 이유 - 인터랙션 디자인 - Lean UX 로세스 - 프로토타이핑 로세스와 기대효과 2. 프로토타입 툴의 트랜드 - 프로토타입 툴의 종류 - 프로토타입 툴의 선택 기준 - 프로토타입 제작 원칙 3. 카카오 UX팀의 프로토타입 제작 사례 - Piccoma : 카카오재팬. 신규 서비스 프로토타입. - ZERO+ : 인터랙션 라이브러리(인하우스용). - IX Watch : 아이디어 발산을 위한 컨셉 스마트워치.

1 of 73
Downloaded 299 times
성공적인 UX디자인을 위한 프로토타입 방법론 카카오 UX팀 강운봉
인터랙션 디자이너, 강운봉 최고의 UX를 위해 인터랙션을 구현하고 있습니다. 카카오 UX팀 인터랙션디자인파트 카카오톡, Daum, 푸딩얼굴인식, 아임인 외 다수 모바일앱 프로토타입 제작 / 카카오톡 인터랙션 가이드 제작 / Smart Watch, Gesture, Voice, Chatbot 연구
Prototyping
프로토타이핑은 개발접근법의 하나로서 개발초기에 시스템의 모형을 간단히 만들어 사용자가 직접 사용해 보게 함으로써 기능의 추가, 변경 및 삭제 등을 즉각 반영하여 재구축하는 과정을 반복해 나가면서 시스템을 개선시켜 나가는 방식. https://ko.wikipedia.org/wiki/프로토타입
사용자가 직접 사용한다. 전혀 새롭지 않은 이 개발접근법이 중요하게 된 이유는 무엇일까?
Interaction & Process 인터랙션은 다양해지고, 로세스는 진화하고 있다.
new interaction innovation
pc
PC INTERACTION ELEMENTS ∙ keyboard ∙ mouse
Smart phone
Smart watch
Smart Device INTERACTION ELEMENTS ∙ gesture ∙ movement ∙ camera ∙ sensor
VR
Virtual Reality INTERACTION ELEMENTS ∙ digital environment ∙ motion capture
AI Product
A.I + Iot + Bot INTERACTION ELEMENTS ∙ automatic speech recognition ∙ robotics ∙ network
U X W O R L D 2 0 1 7 3D Touch Accessibility Audio Authentication Data Entry Feedback File Handling First Launch Experience Gestures Loading Modality Navigation Requesting Permission Settings Terminology Undo and Redo 사용자가 경험할 수 있는 인터랙션 요소 . . . iOS Human Interface Guidelines https://developer.apple.com/ios/human-interface-guidelines/interaction/3d-touch/ 사용자가 경험할 수 있는 인터랙션 요소 3D Touch Accessibility Audio Authentication Data Entry Feedback File Handling First Launch Experience Gestures Loading Modality Navigation Requesting Permission Settings Terminology Undo and Redo … NEXT iOS Human Interface Guidelines https://developer.apple.com/ios/human-interface-guidelines/interaction/3d-touch/
Interaction guide
INTERACTION 인터랙션으로 사용자 경험을 극대화시키다.
다양한 트랜지션 효과들 29cm / Pinterest / 현대카드 웨더
인터랙션을 마주하는 그들의 자세
이게 정말 유저가 원하는 경험일까..? 제가 디자인한 것과 다르게 적용되었어요..! 말이 안되는 걸 구현해 달라고 해요…
Waterfall 기획→디자인→개발→검증→출시 Agile UX 디자이너와 개발자가 따로 작업하지만 주기적인 반복과 긴밀한 협업 Lean UX 디자이너와 개발자가 초기 디자인부터 프로토타입이 나오기까지 지속해서 협업
Measuring User Centered Design market fit validate collaboration MVP Delivery Less document XP Practices Problem statement lean canvas Daily Scrum Creating a Hypothesis
빠른 검증이 필요한 로세스
Lean UX in Agile environment.
BETTER TOGETHER / DESIGN THINK / LEAN UX / AGILE
build design & development measure test & feedback learn idea & user stories
CASE1 / CASE2 / CASE3
MVP / Minimum Viable Product
How do you Communication?
BETTER TOGETHER / Think, Make / UX Design / Research Dev, Test, PM, PO / CORE TEAM WORKS END-TO-END
목표지향적이며 빠르게. 기획, 디자인, 개발 등 모든 구성원이 서로의 관점을 이해하고, 어떤 경험을 만들 것인가에 대해 공동의 목표를 갖는 것이 중요하다
프로토타입의 역할 ∙ 컨셉 및 사용성에 대한 문제점 및 리스크 조기 도출 ∙ UX 관점의 스토리 라인, 페이지 레이아웃 가시화 ∙ 유관부서 간 커뮤니케이션 증진 및 요구사항 합의 가능 ∙ 제품 개발에 참여하는 사람들이 같은 것을 바라보기
UX 아이디어를 검증해 볼 수 있어 자신감이 생겼어요. 놓치는 부분 없이 디테일하게 챙길 수 있었어요. 스펙이 명확해 구현에 전념할 수 있었고 수정사항이 적었어요.
Prototyping Tools
U X W O R L D 2 0 1 7 442017년 3월 21일 기준 http://www.prototypingtools.co/ 44 http://www.prototypingtools.co/ 2017년 3월 21일 기준
low-fidelity 스케치 mid-fidelity 와이어 프레임 high-fidelity 그래픽
page object, sensor
page 프로젝트 초반, 동선 확인 위주, 제한된 인터랙션, 학습 난이도 낮음 object 프로젝트 중반 / 후반, 마이크로 인터랙션 구현, 정교한 인터랙션, 학습 난이도 높음
page Marvel, proto.io, invision, Flinto, Principle, oven / object Framer, origami, Xcode, Form, Protopie, Kite
https://kiteapp.co/ https://youtu.be/tzwjR-g47Ns
프로토타이핑 툴 삽질기
flash, after effect, Xcode, framer
툴은 툴일뿐…
프로토타이핑 툴의 선택 기준 : 학습난이도 / 인터랙션 구현능력 / 디바이스 테스트 유무 / 툴의 업데이트 / 공유 편의성
Principles to consider when building prototypes
프로토타이핑의 원칙 ∙ 누구에게 어떻게 공유할지 미리 정한다. ∙ 서비스 플랫폼을 이해하고 만든다. ∙ 높은 퀄리티보다는 다양한 케이스로 제작한다. ∙ 필요한 부분만 제작한다. ∙ 피드백은 충분히 논의 후 반영한다.
좋은 평가 받는 프로토타입 제작법
DEVELOPMENT DESIGN UX
DEVELOPMENT DESIGN UX
DEVELOPMENT DESIGN UX
DEVELOPMENT DESIGN UX
WHAT HOW WHY 스스로에게 묻고 대답하자. 이 콘텐츠(인터랙션)는 왜 이렇게 보여지는 거에요?
인터랙션 디자인 6가지 원칙 / Visibility 가시성 Feedback 피드백 Constraints 제한요소 Mapping 맵핑 Consistency 일관성 Affordance 행동유도성 Interaction Design: Beyond Human-Computer Interaction
특허 좋은 아이디어나 기술이 있다면 주저하지말고 출원하자.
카카오 UX팀의 프로토타입 제작 사례 by 인터랙션디자인파트
http://ixd.kr/?page_id=2847
U X W O R L D 2 0 1 7U X W O R L D 2 0 1 7 http://ixd.kr ixd keep calm & just show http://ixd.kr
ピッコマ OVERVIEW “ピッコマ(Piccoma)“는 카카오 재팬에서 2016년 4월 오픈한 서비스이자, 온라인 만화 콘텐츠 서비스입니다. 카카오 본사 / 카카오 재팬 / 포도트리 3사가 함께 협업하여 진행한 의미있는 프로젝트였습니다. 최종 개발 전 프로토타입을 제작하여 UX 개선은 물론 일본 현지인을 상대로한 디테일한 UT를 진행하였습니다.
인터랙션 구현의 실무자간의 의사소통 / 의사결정을 위한 예제 / 애니메이션 / 사용성 검증
프로토타입의 성과 1. 원활한 커뮤니케이션 기획 / UX / 디자인 / 개발 언어 혹은 직군이 달라도 한곳을 바라볼 수 있는 유일한 수단 2. 수 많은 의사결정을 검증 화면 플로우 / UI 디자인 / 레이아웃 마이크로 인터랙션 3. 서비스 개발 시간 단축 코딩기반 툴 사용으로 일부 코딩 소스의 재활용. 프로토타입을 현지인 UT / 비지니스로 활용.
ZERO+ Interaction Library OVERVIEW 모바일 인터랙션 작업의 편의를 위해 시작된 인터랙션 라이브러리 프로젝트. 인터랙션디자인 랩에서 제작한 산출물을 아카이빙하고, 사내 GitHub를 통해 구현된 소스를 개발자들과 공유.
U X W O R L D 2 0 1 7 1. Simple Install, Easy Viewing 프로토타입들을 간편하게 설치하고, 확인. 2. Mobile Interaction Develop Transition, Gesture, Animation, Motion 등 모바일에서 사용할 수 있는 인터랙션을 연구 개발. 3. Proposal for User Experience 카카오의 서비스를 다양한 생각과 시각으로 설계하고, 뛰어난 UX를 제안. 4. Communication with Developers 사내 Github를 통해 개발자들과 소스를 공유하고, 긴밀한 커뮤니케이션을 유도.
screenshot
U X W O R L D 2 0 1 7 IX Watch IX Watch는 IxD LAB의 스마트워치 UX Redesign을 바탕으로 제작된 컨셉 워치 디바이스입니다. 새로운 하드웨어에 대한 제안을 더욱 실체화 하였고, UI와의 연계 부분도 더 발전시켜 보았습니다. 하드웨어 및 OS 구분 없이 기존 스마트워치들의 아쉬운 사용성을 개선하는 것에 중점을 두었습니다. OVERVIEW ixd.kr/?p=612 IX Watch OVERVIEW IX Watch는 IxD LAB의 스마트워치 UX Redesign을 바탕으로 제작된 컨셉 워치 디바이스입니다. 새로운 하드웨어에 대한 제안을 더욱 실체화 하였고, UI와의 연계 부분도 더 발전시켜 보았습니다. 하드웨어 및 OS 구분 없이 기존 스마트워치들의 아쉬운 사용성을 개선하는 것에 중점을 두었습니다. ixd.kr/?p=612
screenshot
screenshot
screenshot
열정, 고민, 이야기
프로젝트 중 프로토타입은 쉽게 버려집니다. 하지만, 더욱 빛나게 다시 태어날 것이고, 같은 꿈을 꾸게 해준 열정적인 과정으로 남아 있을 것입니다.
don’t tell, just show
thank you ! 이메일 : hello@lain.kr / 홈페이지 : http://lain.kr / 페이스북 : @unbong_kang

More Related Content

성공적인 UX디자인을 위한 프로토타입 방법론

  • 1. 성공적인 UX디자인을 위한 프로토타입 방법론 카카오 UX팀 강운봉
  • 2. 인터랙션 디자이너, 강운봉 최고의 UX를 위해 인터랙션을 구현하고 있습니다. 카카오 UX팀 인터랙션디자인파트 카카오톡, Daum, 푸딩얼굴인식, 아임인 외 다수 모바일앱 프로토타입 제작 / 카카오톡 인터랙션 가이드 제작 / Smart Watch, Gesture, Voice, Chatbot 연구
  • 4. 프로토타이핑은 개발접근법의 하나로서 개발초기에 시스템의 모형을 간단히 만들어 사용자가 직접 사용해 보게 함으로써 기능의 추가, 변경 및 삭제 등을 즉각 반영하여 재구축하는 과정을 반복해 나가면서 시스템을 개선시켜 나가는 방식. https://ko.wikipedia.org/wiki/프로토타입
  • 5. 사용자가 직접 사용한다. 전혀 새롭지 않은 이 개발접근법이 중요하게 된 이유는 무엇일까?
  • 6. Interaction & Process 인터랙션은 다양해지고, 로세스는 진화하고 있다.
  • 8. pc
  • 9. PC INTERACTION ELEMENTS ∙ keyboard ∙ mouse
  • 12. Smart Device INTERACTION ELEMENTS ∙ gesture ∙ movement ∙ camera ∙ sensor
  • 13. VR
  • 14. Virtual Reality INTERACTION ELEMENTS ∙ digital environment ∙ motion capture
  • 16. A.I + Iot + Bot INTERACTION ELEMENTS ∙ automatic speech recognition ∙ robotics ∙ network
  • 17. U X W O R L D 2 0 1 7 3D Touch Accessibility Audio Authentication Data Entry Feedback File Handling First Launch Experience Gestures Loading Modality Navigation Requesting Permission Settings Terminology Undo and Redo 사용자가 경험할 수 있는 인터랙션 요소 . . . iOS Human Interface Guidelines https://developer.apple.com/ios/human-interface-guidelines/interaction/3d-touch/ 사용자가 경험할 수 있는 인터랙션 요소 3D Touch Accessibility Audio Authentication Data Entry Feedback File Handling First Launch Experience Gestures Loading Modality Navigation Requesting Permission Settings Terminology Undo and Redo … NEXT iOS Human Interface Guidelines https://developer.apple.com/ios/human-interface-guidelines/interaction/3d-touch/
  • 19. INTERACTION 인터랙션으로 사용자 경험을 극대화시키다.
  • 20. 다양한 트랜지션 효과들 29cm / Pinterest / 현대카드 웨더
  • 22. 이게 정말 유저가 원하는 경험일까..? 제가 디자인한 것과 다르게 적용되었어요..! 말이 안되는 걸 구현해 달라고 해요…
  • 23. Waterfall 기획→디자인→개발→검증→출시 Agile UX 디자이너와 개발자가 따로 작업하지만 주기적인 반복과 긴밀한 협업 Lean UX 디자이너와 개발자가 초기 디자인부터 프로토타입이 나오기까지 지속해서 협업
  • 24. Measuring User Centered Design market fit validate collaboration MVP Delivery Less document XP Practices Problem statement lean canvas Daily Scrum Creating a Hypothesis
  • 26. Lean UX in Agile environment.
  • 27. BETTER TOGETHER / DESIGN THINK / LEAN UX / AGILE
  • 28. build design & development measure test & feedback learn idea & user stories
  • 29. CASE1 / CASE2 / CASE3
  • 30. MVP / Minimum Viable Product
  • 31. How do you Communication?
  • 32. BETTER TOGETHER / Think, Make / UX Design / Research Dev, Test, PM, PO / CORE TEAM WORKS END-TO-END
  • 33. 목표지향적이며 빠르게. 기획, 디자인, 개발 등 모든 구성원이 서로의 관점을 이해하고, 어떤 경험을 만들 것인가에 대해 공동의 목표를 갖는 것이 중요하다
  • 34. 프로토타입의 역할 ∙ 컨셉 및 사용성에 대한 문제점 및 리스크 조기 도출 ∙ UX 관점의 스토리 라인, 페이지 레이아웃 가시화 ∙ 유관부서 간 커뮤니케이션 증진 및 요구사항 합의 가능 ∙ 제품 개발에 참여하는 사람들이 같은 것을 바라보기
  • 35. UX 아이디어를 검증해 볼 수 있어 자신감이 생겼어요. 놓치는 부분 없이 디테일하게 챙길 수 있었어요. 스펙이 명확해 구현에 전념할 수 있었고 수정사항이 적었어요.
  • 37. U X W O R L D 2 0 1 7 442017년 3월 21일 기준 http://www.prototypingtools.co/ 44 http://www.prototypingtools.co/ 2017년 3월 21일 기준
  • 38. low-fidelity 스케치 mid-fidelity 와이어 프레임 high-fidelity 그래픽
  • 40. page 프로젝트 초반, 동선 확인 위주, 제한된 인터랙션, 학습 난이도 낮음 object 프로젝트 중반 / 후반, 마이크로 인터랙션 구현, 정교한 인터랙션, 학습 난이도 높음
  • 41. page Marvel, proto.io, invision, Flinto, Principle, oven / object Framer, origami, Xcode, Form, Protopie, Kite
  • 44. flash, after effect, Xcode, framer
  • 46. 프로토타이핑 툴의 선택 기준 : 학습난이도 / 인터랙션 구현능력 / 디바이스 테스트 유무 / 툴의 업데이트 / 공유 편의성
  • 47. Principles to consider when building prototypes
  • 48. 프로토타이핑의 원칙 ∙ 누구에게 어떻게 공유할지 미리 정한다. ∙ 서비스 플랫폼을 이해하고 만든다. ∙ 높은 퀄리티보다는 다양한 케이스로 제작한다. ∙ 필요한 부분만 제작한다. ∙ 피드백은 충분히 논의 후 반영한다.
  • 49. 좋은 평가 받는 프로토타입 제작법
  • 54. WHAT HOW WHY 스스로에게 묻고 대답하자. 이 콘텐츠(인터랙션)는 왜 이렇게 보여지는 거에요?
  • 55. 인터랙션 디자인 6가지 원칙 / Visibility 가시성 Feedback 피드백 Constraints 제한요소 Mapping 맵핑 Consistency 일관성 Affordance 행동유도성 Interaction Design: Beyond Human-Computer Interaction
  • 56. 특허 좋은 아이디어나 기술이 있다면 주저하지말고 출원하자.
  • 57. 카카오 UX팀의 프로토타입 제작 사례 by 인터랙션디자인파트
  • 59. U X W O R L D 2 0 1 7U X W O R L D 2 0 1 7 http://ixd.kr ixd keep calm & just show http://ixd.kr
  • 60. ピッコマ OVERVIEW “ピッコマ(Piccoma)“는 카카오 재팬에서 2016년 4월 오픈한 서비스이자, 온라인 만화 콘텐츠 서비스입니다. 카카오 본사 / 카카오 재팬 / 포도트리 3사가 함께 협업하여 진행한 의미있는 프로젝트였습니다. 최종 개발 전 프로토타입을 제작하여 UX 개선은 물론 일본 현지인을 상대로한 디테일한 UT를 진행하였습니다.
  • 61. 인터랙션 구현의 실무자간의 의사소통 / 의사결정을 위한 예제 / 애니메이션 / 사용성 검증
  • 62. 프로토타입의 성과 1. 원활한 커뮤니케이션 기획 / UX / 디자인 / 개발 언어 혹은 직군이 달라도 한곳을 바라볼 수 있는 유일한 수단 2. 수 많은 의사결정을 검증 화면 플로우 / UI 디자인 / 레이아웃 마이크로 인터랙션 3. 서비스 개발 시간 단축 코딩기반 툴 사용으로 일부 코딩 소스의 재활용. 프로토타입을 현지인 UT / 비지니스로 활용.
  • 63. ZERO+ Interaction Library OVERVIEW 모바일 인터랙션 작업의 편의를 위해 시작된 인터랙션 라이브러리 프로젝트. 인터랙션디자인 랩에서 제작한 산출물을 아카이빙하고, 사내 GitHub를 통해 구현된 소스를 개발자들과 공유.
  • 64. U X W O R L D 2 0 1 7 1. Simple Install, Easy Viewing 프로토타입들을 간편하게 설치하고, 확인. 2. Mobile Interaction Develop Transition, Gesture, Animation, Motion 등 모바일에서 사용할 수 있는 인터랙션을 연구 개발. 3. Proposal for User Experience 카카오의 서비스를 다양한 생각과 시각으로 설계하고, 뛰어난 UX를 제안. 4. Communication with Developers 사내 Github를 통해 개발자들과 소스를 공유하고, 긴밀한 커뮤니케이션을 유도.
  • 66. U X W O R L D 2 0 1 7 IX Watch IX Watch는 IxD LAB의 스마트워치 UX Redesign을 바탕으로 제작된 컨셉 워치 디바이스입니다. 새로운 하드웨어에 대한 제안을 더욱 실체화 하였고, UI와의 연계 부분도 더 발전시켜 보았습니다. 하드웨어 및 OS 구분 없이 기존 스마트워치들의 아쉬운 사용성을 개선하는 것에 중점을 두었습니다. OVERVIEW ixd.kr/?p=612 IX Watch OVERVIEW IX Watch는 IxD LAB의 스마트워치 UX Redesign을 바탕으로 제작된 컨셉 워치 디바이스입니다. 새로운 하드웨어에 대한 제안을 더욱 실체화 하였고, UI와의 연계 부분도 더 발전시켜 보았습니다. 하드웨어 및 OS 구분 없이 기존 스마트워치들의 아쉬운 사용성을 개선하는 것에 중점을 두었습니다. ixd.kr/?p=612
  • 71. 프로젝트 중 프로토타입은 쉽게 버려집니다. 하지만, 더욱 빛나게 다시 태어날 것이고, 같은 꿈을 꾸게 해준 열정적인 과정으로 남아 있을 것입니다.
  • 73. thank you ! 이메일 : hello@lain.kr / 홈페이지 : http://lain.kr / 페이스북 : @unbong_kang