#08. Prototyping tools (5)
인터랙션 프로토타이핑 툴 오버뷰
01. 자신에게 가장 유용한 도구를 찾기 위한 기준
02. 스케치 (+제플린 및 몇몇 유용한 플러그인)
03. 인비전 / 슬랙
04. 인터랙션 프로토타이핑 툴 오버뷰 (2016.7)
- Principle for Mac, Atomic, Flinto for Mac (Page Based / Timeline 프로토타이핑 툴)
- Pixate, Form, Origami, Framer (Layer Based 프로토타이핑 툴)
- 주목하고 있는 새로운 도구들: ProtoPie, Fuse, Noodl
Overview
다양한 인터랙션 프로토타이핑 도구들.오랜 시간 동안 미뤄왔던 글을 이제야 쓰게 되었네요. 이번 글에서는 마이크로 인터랙션 프로토타이핑 도구들에 대해 말씀드리려 합니다. 봄부터 계속 글을 쓰려고 했었는데 매번 도구들이 업데이트 되거나 아예 새로운 도구들이 나오는 바람에 좋은 타이밍을 잡지 못하고 있었습니다. 지금 제가 이 글을 준비하고 있는 시점에서도 또 새로운 시도들이 선을 보이겠지요. 다만 더 이상 미룰수가 없어 그동안의 제 경험 안에서 글을 풀어내보려합니다.
2015년 겨울에 01. 자신에게 가장 유용한 도구를 찾기 위한 기준이라는 글에서 제 나름대로의 프로토타이핑 도구들에 대한 선정 기준을 말씀드렸던 적이 있습니다. 도구를 사용하고자 하는 목적 / 도구가 가진 기능 / 배우기 위한 난이도 등에 따른 분류를 이야기 했었지요. (그리고 당시 글엔 말씀드리진 않았습니다만 인터랙션을 전개하는 방식에 따라 Page Based 방식과 Layer Based 방식으로 도구들을 나눌 수 있습니다. 이는 Tes Mat의 글인 Five app prototyping tools compared 글 초반부에 자세히 설명되어 있습니다.)
이번 글에서는 자세하게 도구들을 하나하나 설명드리기 보다는 일종의 퀵 가이드처럼 제가 경험했던 인터랙션 도구들의 소개와 그와 관련된 링크들을 모아 선사해드리려 합니다. 최근까지 업데이트 된 상황을 모아놓은 글이 없었던 것 같아 그것들을 모아서 전달드리기만 하여도 어느정도 도움이 되리라 생각합니다.
도구들의 선호에 대해선 개인적인 의견을 최대한 배제하려고 노력하였습니다. 이 글에서 소개해드리는 것들은 대부분 직접 사용을 해보았습니다. 다만 사람마다 선호하는 도구들이 다르고 아직은 지배적인 도구가 없다고 생각이 됩니다. 그렇기에 자유롭게 탐험하실 수 있도록 최대한 객관적인 정보만 드리려했음을 미리 밝힙니다.
| 01. Principle for Mac
Principle for Mac 인터페이스 화면이름: Principle for Mac
요약: Page Based / Timeline Based 방식의 프로토타이핑 도구. 가볍고 빠르게 프로토타이핑을 제작할 수 있습니다. 도구 자체의 UI도 간단하고 디자이너들이라면 매우 익숙하게 진입할 수 있습니다. 다만 타 프로토타이핑 도구들에 비해서 기능들의 업데이트가 느린 것이 아쉬운 점입니다. Sketch 파일 임포트를 지원합니다.
제작사: Principle
운영체제: Mac
가격: 2주간의 Free-Trial 버전을 홈페이지에서 제공. 정식 버전은 99$ (https://gumroad.com/l/principle?_ga=1.38852064.2135955104.1455870809)
홈페이지: http://principleformac.com/
커뮤니티:
https://www.facebook.com/groups/752853024840625/ 프린시플의 페이스북 공식 커뮤니티입니다.
Principle 살펴보기 디자이너 조훈 님의 Principle 관련 튜토리얼 입니다.
공식소개영상:https://youtu.be/vFrivX021-A
| 02. Atomic
Atomic 인터페이스 화면
이름: Atomic
요약: Page Based / Timeline 방식의 프로토타이핑 도구. 소스들의 제작 / 수정이 가능합니다. (플린토Flinto for mac 및 인비전InVision 등 비슷한 난이도 툴에선 제공하지 않는 기능입니다. 해당 도구들은 모든 소스를 외부-ex.Sketch-에서 가져옵니다.물론 Atomic에서도 플러그인을 통해 Sketch파일 임포트가 가능합니다.)
제작사: Atomic
운영체제: Web (현재는 Chrome에서만 가능합니다.)
가격: 프로젝트 규모에 따른 $15/25/35 Monthly Subscribe정책을 취하고 있습니다. 30일짜리 Trial 버전을 제공합니다. (https://atomic.io/pricing/)
홈페이지: https://atomic.io/
커뮤니티:
https://www.facebook.com/groups/atomic.io/ 아토믹의 페이스북 공식 그룹입니다.
공식소개영상: https://vimeo.com/139398787
| 03. Flinto for Mac
Flinto for Mac 인터페이스 화면이름: Flinto for Mac
요약: Page Based 방식의 프로토타이핑 툴. Sketch와 연동하여 주로 사용합니다. 트랜지션이 일어나는 다수페이지 간의 인터랙션 관계를 보기에 용이합니다.(2016년 6월 1.6버전 업데이트 이후)
제작사: Flinto
운영체제: Mac
가격: 2주간의 Free-Trial 버전을 홈페이지에서 제공. 정식 버전은 99$ (https://www.flinto.com/store)
홈페이지: https://www.flinto.com/mac
커뮤니티:
http://blog.flinto.com/ 플린토의 공식 블로그입니다.
https://www.facebook.com/groups/flinto/ 플린토의 페이스북 그룹입니다.
공식소개영상: https://youtu.be/YfdKj1gISi4
| 04. Pixate*
*Pixate는 2016년 10월부로 서비스를 종료했습니다.
Pixate 인터페이스 화면이름: Pixate
요약: Layer Based 방식의 프로토타이핑 툴. 현재 Form 과 함께 구글의 공식 프로토타이핑 툴입니다. 화면 간의 전체적인 UI Flow를 확인하기보다는 순간순간의 마이크로 인터랙션을 확인하기에 적합합니다. Sketch/Photoshop과의 파일 연동은 지원하지 않습니다.
제작사: Pixate + Google
운영체제: Window, Mac
가격: 무료 (Google에 합류하면서 무료가 되었습니다.)
홈페이지: http://www.pixate.com/
커뮤니티:
http://community.pixate.com/ Pixate의 공식 커뮤니티입니다.
http://blog.pixate.com/ Pixate의 공식 블로그입니다.
https://www.facebook.com/groups/pixate/ Pixate의 페이스북 그룹입니다.
| 05. Form
Form 인터페이스 화면이름: Form
요약: Layer(Object) Based + Node Patch 방식의 프로토타이핑 툴. 현재 Pixate와 함께 구글의 공식 프로토타이핑 툴입니다. 역시 화면 간 전체 UI Flow를 확인하기보다는 순간순간의 마이크로 인터랙션을 확인하기에 적합합니다. 모바일의 다양한 센서들을 사용하여 프로토타이핑이 가능합니다. (자이로, 사운드, 진동 센서 등) Sketch/Photoshop과의 파일 연동은 지원하지 않습니다.
제작사: Relativewave + Google
운영체제: Window, Mac
가격: 무료 (Google에 합류하면서 무료가 되었습니다.)
홈페이지: http://www.relativewave.com/form/
커뮤니티:
https://productforums.google.com/forum/#!forum/relativewave-form Form의 공식 커뮤니티
https://www.facebook.com/groups/formcommunity/ Form의 페이스북 공식 커뮤니티입니다.
https://www.facebook.com/groups/formkorea/ Form의 페이스북 한국 커뮤니티입니다.
*Pixate와 Form은 구글 합류 전에는 활발하게 업데이트가 이루어지고 지속적으로 새로운 버전을 사용해 볼 수 있었으나 구글 합류 이 후에는 되려 업데이트가 매우 뜸해진 상황입니다. 어떤 식으로 진행이 되는 것인지 궁금하고 아쉬운 부분이네요.
| 06. Origami
Origami 인터페이스 화면이름: Origami
요약: Facebook의 공식 프로토타이핑 툴입니다. Facebook Pape(지금은 서비스가 종료되었지만)가 Origami로 디자인/프로토타이핑을 하여 제작되었고 그것이 디자이너들에게 프로토타이핑 문화를 알리는 큰 계기가 되었지요. Layer(Object) Based + Node Patch 방식의 프로토타이핑 툴이며 2016년 4월 F8 (Facebook developer conference)에서 UI를 개선한 새로운 버전을 선보였습니다. iOS, Android, Web에 대한 코드 Export를 지원합니다. 이전 버전과는 다르게 Sketch와의 연동이 추가되었고 Desktop Website에 대한 Prototype도 지원하게 되었습니다.
제작사: Facebook
운영체제: Mac
가격: 무료
홈페이지: https://facebook.github.io/origami/
커뮤니티:
https://www.facebook.com/groups/origami.community/ Origami의 공식 커뮤니티
| 07. Framer
Framer 인터페이스 화면이름: Framer
요약: Coffee script 기반의 프로토타이핑 툴입니다. 디자이너를 위한 기타 다른 프로토타이핑 툴과 달리 Framer는 직접 Code를 다룹니다. 그렇기에 난이도는 어렵지만 가장 자신이 원하는 결과에 가까운 프로토타이핑을 만들어 낼 수 있습니다. 기존에는 정말 순수히 Coffee script 기반의 코드를 하나하나 짜야했으나 2016년 여름 대규모 업데이트로 인해 디자이너가 좀 더 쉽게 다가갈수 있도록 UI 개선 및 다양한 컴포넌트들이 추가되었습니다. 아이러니하게도 난이도가 높기 때문인지 국내에서 프로토타이핑 도구 관련 튜토리얼 등을 찾을 때 가장 양질의 글들을 찾아볼 수 있습니다. (아래 커뮤니티 링크에 몇몇 도움이 될만한 글들을 소개해놓았습니다.)
제작사: Framer
운영체제: Mac
가격: 129$
홈페이지: http://framerjs.com/
커뮤니티:
https://www.facebook.com/groups/framerjs/ Framer의 공식 커뮤니티
https://www.facebook.com/groups/framerkorea/ Framer의 한국 커뮤니티
디자이너를 위한 코드 with Framer 디자이너 안지용 님의 Framer 소개 및 튜토리얼
Framer Basic & Advance 카카오 인터랙션 디자인 랩 / 디자이너 장준혁 님의 Framer 튜토리얼
Learning Curve of JY 디자이너 이정영 님의 Framer / Prototyping 미디엄 채널
공식소개영상: https://youtu.be/XoV1iWH1naE (가장 최근 업데이트에 대한 소개영상입니다.)
| 주목하고 있는 새로운 도구들: ProtoPie, Fuse, Noodl
아직 정식으로 서비스되고 있는 것은 아니지만 앞으로 주목할만한 프로토타이핑 도구들을 몇 개 선정해 보았습니다. 지속적으로 화제와 기대를 모은 도구도 있고 아예 처음 들어보셨을만한 도구도 있을 것입니다. 이번 기회에 눈에 담아두시고 가능하시면 함께 시작해보시는 것도 좋을 것 같습니다.
| 01: ProtoPie
ProtoPie 인터페이스 화면이름: Protopie
요약: 현재 Free-Beta버전으로 서비스하고 있는 ProtoPie라는 프로토타이핑 도구입니다. 센서를 사용한 프로토타이핑 및 Layer Based와 Multiple Scenes(기존의 Page Based)를 모두 대응할 수 있도록 개발되고 있습니다. 또한 Timeline 인터페이스 역시 차용함으로 인해 그동안의 여러가지 유형으로 나뉘어져 있던 마이크로 인터랙션 프로토타이핑 도구들의 장점들만 다수 흡수한 모습들이 보여집니다. 아직 Free-Beta 버전이기에 기능들이 계속 개선 / 추가되고 있는 상황입니다.
제작사: Studio XID
운영체제: Mac (추후 Windows 지원 예정)
가격: Free-Beta
홈페이지: https://protopie.io/
커뮤니티:
https://www.facebook.com/protopie/ Protopie의 페이스북 페이지
ProtoPie, the Journey of Discovery Protopie CEO Tony Kim님의 글
ProtoPie의 기본적인 사용에 대한 영상: https://youtu.be/4BmSKkLb-5c
| 02: Fuse
이름: Fuse
요약: 모든 프로토타이핑 도구들이 그렇지만 디자이너와 개발자의 효과적인 협업을 표방하며 현재 개발에 박차를 가하고 있는 Fuse라는 프로토타이핑 도구입니다. 존재는 작년 가을(2015년 10월)에 알게 됐는데 아직도 한창 개발 중이네요. Android와 iOS에 동시적용 가능하도록 UX Markup 언어를 개발하고 GPU를 사용하여 좀 더 고차원적인 Visual UI/Effect를 프로토타이핑 해볼 수 있도록 지원할 예정이라고 합니다. 지금(2016년 7월)은 0.23버전 정도밖에 개발이 안되었을 뿐이라 좀 더 실전적인 레벨의 업데이트가 이루어졌으면 하는 바람입니다.
제작사: Fuse
운영체제: -
가격: -
홈페이지: https://www.fusetools.com/
커뮤니티:
https://www.facebook.com/fusetools Fuse의 공식 페이스북 커뮤니티
https://www.fusetools.com/community Fuse의 공식 커뮤니티
http://weekly.fusetools.com/ Fuse의 Weekly Newsletter
공식소개영상: https://youtu.be/li7cAr3Jxuk
| 03: Noodl
이름: Noodl
요약: 기존의 프로토타이핑 도구들이 대부분 싱글 디바이스의 UI FLOW와 마이크로 인터랙션에 집중했다면 Noodl은 좀 더 Contextual한 레벨에서 여러개의 디바이스에 대응하는 프로토타이핑을 겨냥하고 있다고 생각됩니다. IoT 환경에서의 원활한 프로토타이핑을 지향하고 있습니다. 아직 도구 자체의 인터페이스는 디자이너에게 어렵게 다가오는 느낌이 있습니다.(Origami/Form같은 노드 패치 방식인데 그걸 여러개의 도구에 연결합니다.) 하지만 다른 도구들의 프로토타이핑 접근법과는 사뭇 방식이 달라 이 자리를 빌어 간단히 소개드립니다. 아직 본격적으로 도입할 수 있는 단계는 아닌 것 같습니다.
제작사: Topp
운영체제: Google Chrome Extension
가격: -
홈페이지: http://www.getnoodl.com/
Summary
처음에 Prototyping tools 라는 제목으로 글을 기획했을 때는 하나하나 도구들을 리뷰해드리고 싶은 욕심이 있었습니다. 그러나 서두에 말씀드린대로 도구들이 너무 빨리 변하고 있고 국내외 프로토타이핑 도구를 다루는 디자이너 분들이 급속도로 늘어남에 따라서 어느 정도 연결점만 드려도 충분할 것 같다는 생각이 들었습니다.
워크샵이나 간단한 밋업 정도만 진행해봐도 작년, 재작년보다 훨씬 심도 깊고 실질적인 이야기들이 오가는 것을 볼 수 있습니다. 인터랙션 프로토타이핑 관련된 자리들도 훨씬 풍성해졌구요. 회사들의 시스템 레벨에서 아직 못 따라오는 부분들이 있는 것으로 생각되지만 전반적인 디자인 씬 자체에서는 긍정적인 방향이라고 생각합니다.
여러모로 부족한 글이었지만 많은 분들에게 조금이나마 도움이 되었으면 좋겠습니다.
긴 글 읽어주셔서 감사합니다.
P.s: 2016년 9월에는 지금까지 말씀드린 다양한 프로토타이핑 도구 및 국내외의 프로토타이핑 문화에 대하여 같이 이야기 해 볼 수 있는 워크샵을 진행할 계획입니다. 스케치앱 코리아 페이스북 그룹 을 통해서 8월 초에 공지를 드릴 예정이오니 관심있으신 분들의 많은 참여를 부탁드립니다.
