brunch

매거진 프로토타이핑 이야기

라이킷 153 댓글 18

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김지홍 Nov 29. 2015

#04. Prototyping tools (2)

자신에게 가장 유용한 도구를 찾기 위한 기준.

01. 자신에게 가장 유용한 도구를 찾기 위한 기준

02. 스케치 (+제플린 및 몇몇 유용한 플러그인)

03. 인비전 / 슬랙

04. 인터랙션 프로토타이핑 툴 오버뷰 (2016.7)

Finding your tool.

지난 <#03. Prototytping tools (1) / Introduction: 함께 일하는 사람들과의 소통을 위하여> 에 이어서

오늘은 '자신에게 가장 유용한 도구를 찾기 위한 기준'이라는 주제로 이야기를 해보려 합니다.

지난 글에서 언급드린 바와 같이 최근에는 정말 다양한 도구들이 쏟아져 나오고 있습니다. 특히 인터랙션 프로토타이핑 도구들이 여러가지 나오고 있지요. 그 도구들을 하나하나 다 해보면서 자신에 입맛에 맞는 도구를 찾아낸다면 더할나위 없겠지만, 아쉽게도 우리 기획자, 개발자, 디자이너 분들에게 그렇게 넉넉한 시간이 주어졌을리가 만무합니다. 그렇기에 도움이 될 수 있는 몇 가지 기준들을 말씀드려보려고 합니다.

이제부터 말씀드릴 내용들은 여러 기사와 Medium의 글들에서 습득한 지식과, 디자이너 입장에서 제가 근 2년동안 사용했던 경험들을 토대로 작성이 된 것입니다. 그렇기에 다른 기획자/디자이너/개발자 분들이 생각하시기에 다소 상이한 부분들이 있을 수도 있습니다. 다른 의견이 있으신 분들께선 코멘트 등으로 의견을 말씀주시면 이 글을 읽으시는 분들께 더욱 도움이 될 것 같습니다.

Step by step: Wireframe - Visual Design

기본적인 디자인 프로세스

먼저 위와 같이 디자인 프로세스를 진행한다고 생각해보겠습니다. (물론 Flow Check는 별도 단계로 구성되는 것이 아닌 Wireframe을 짤 때와 Visual Design을 할때 자연스럽게 수반되겠으나, 도구 선택을 위해서 임의의 단계로 나누어보았습니다.)

와이어프레임은 스케치. 비주얼디자인도 스케치 ( + 포토샵 / 일러스트레이터)

앞선 글들에서 PPT, 포토샵과 비교하여 스케치의 장점을 여러번 말씀드렸기에, 와이어프레임 부분과 비주얼 디자인 부분은 스케치로 진행하는 것으로 가정합니다. 스케치는 툴 자체의 특성으로 인하여 (멀티플 아트보드 지원, 여러 개의 컴포넌트를 한꺼번에 바꾸는 심볼 기능 등. 스케치의 기능들에 대해선 다음편에 다룰 예정입니다. ) 와이어프레임을 짤 때 큰 강점을 발휘합니다. 비주얼 디자인 단계에서도 하고자하는 디자인의 스타일에 따라서 스케치만으로도 진행이 가능합니다. (다만 보다 복잡한 아트웍 메이킹이 필요하거나, 여러가지 시각적인 실험 등이 수반될 경우는 어도비 포토샵 / 일러스트레이터 등을 함께 사용합니다. 스케치와 어도비의 툴들은 경쟁자인 듯 하지만 함께 사용했을 때 오히려 훨씬 큰 시너지를 발휘합니다.)

스케치로 디자인한 예 (출처: http://www.sketchappsources.com/all-free-sources.html)

이렇게 디자인한 내용들은 스케치의 대표 플러그인 중 하나인 제플린(Zeplin, https://zeplin.io/)을 통해서 자동으로 가이드화가 가능합니다.

제플린의 실행 화면. 제작한 스케치 파일을 그대로 임포트하여 가이드를 자동으로 만들어줍니다.

Step by step: Flow check - Interaction - User Test

저 빈 공간에는 어떠한 도구들이 들어갈 수 있을까요.

이렇게 비주얼 단계를 마친 이 후, 디자이너는 여러가지 태스크를 마주하게 됩니다. 이미 완성된 정적인 이미지들을 토대로 여러 장의, 여러 단계의 페이지들을 짜맞추며 플로우도 체크하여야 하고 특정 부분에서의 애니메이션, 트래지션 등을 어떻게 만들어 낼지도 고민해야 합니다. 그리고 완성된 비주얼 디자인 / 인터랙션 디자인에 대한 유저 테스트 등도 진행해야 하지요.

짜잔. 선택의 순간에 오신 걸 환영합니다.

그리고 이 단계가 디자이너 앞에 수많은 도구들의 선택지가 펼쳐지는 순간이며 제가 조금이나마 도움을 드리고 싶은 부분입니다. 어떤 기준으로 자신에게 맞는 도구들을 선택할 수 있을까요?

도구를 사용하고자 하는 '목적'에 따라

첫번째는 자신이 도구를 사용하고자 하는 목적에 따라서 입니다. 인비전(InVision)과 마벨(Marvel)은 수많은 디자인 시안들을 늘어놓고 UI 플로우를 이리저리 배치해보는데 적합합니다. 그리고 오른쪽으로 갈수록 UI 플로우를 다양하게 나열하고 한 눈에 살펴보기보다는 특정 씬에서의 인터랙션 디자인을 실험해보는데 유용합니다.

도구에서 쓰고자 하는 '기능'에 따라

두번째는 자신이 도구를 사용할 때 쓰고자 하는 기능에 따라서 입니다. UI 플로우 체크할 때 매우 유용한 인비전과 마벨은 기능적으로는 사용이 상당히 단순합니다. 스케치 혹은 포토샵에서 작업한 디자인 시안들을 드래그 & 드랍하여 임포트하고 그것들을 나열하는데 신경을 쓰는 것이 가장 큰 흐름입니다. (다만 인비전은 날이 가면 갈수록 다양한 기능들을 지원하려 노력하고 있습니다. 향후 '인비전/슬랙'을 다룰 때 자세히 언급드리도록 하겠습니다.) 하지만 오른쪽으로 갈수록 좀 더 복잡한 기능들을 지원합니다. 픽세이트(Pixate)에서는 인터랙션 프로토타이핑을 만들때 조건문(if-else)을 간단히 사용, 디자이너가 특정 상황들을 보다 정교하게 설정하여 인터랙션이 발화하게 합니다. 폼(Form)에서는 모바일 환경에서 자이로(Gyro) 센서와 카메라 센서, 음성 센서 등을 복합적으로 사용하여 모바일 프로토타이핑을 만들 수 있습니다.

도구를 통한 프로토타이핑 구현의 '정확도'에 따라서

세번째는 도구를 사용하면서 구현할 수 있는 프로토타이핑에 정확도에 따라서 입니다. 인비전 같은 경우는 특정 영역을 클릭했을 때 자신이 지정한 페이지로 넘어간다 정도의 낮은 레벨의 프로토타이핑(low level prototyping)을 만들 수 있습니다. 픽세이트, 프린시플(principle), 플린토포맥(Flintoformac)과 아토믹(Atomic) 등은 특정 화면에서 특정화면으로 넘어갈 때 각각의 화면 요소들은 어떻게 변화시킬지 컨트롤할 수 있는 중간 레벨의 프로토타이핑(mid level prototyping)을 만들 수 있습니다. 그 조정의 단계에서 Position, Size, Opacity 값을 변하게 하는 것은 물론 Ease in/out, delay등의 Tension 조절이나 Timing 조절 등이 가능합니다. 그리고 오리가미(Origami), 프레이머 (Framer), 폼은 높은 레벨의 프로토타이핑(high level prototyping) 도구들로 분류되며 실제 양산되는 서비스/제품과 비슷한 수준까지 프로토타이핑의 레벨을 끌어올릴 수 있습니다.

도구의 '난이도'에 따라서

마지막은 도구 자체의 난이도입니다. 가장 높은 수준의 정확도로 제작할 수 있는 오리가미, 프레이머, 폼 등을 자유자재로 다룰 수 있다면 물론 좋겠으나 해당 툴들은 배우기에 상당한 난이도를 자랑합니다. 단순히 기능을 드래그&드롭해서 효과를 적용하거나 몇 번의 마우스 클릭 등으로 이루어지는 것이 아닌, 여러 개의 라인 패치 등을 복합적으로 서로 이어주거나 직접 코드를 작성하여 사용하는 식입니다.

폼(Form)의 예시 화면

프레이머(Framer)의 예시 화면

또한 높은 레벨의 프로토타이핑 툴들은 프로토타이핑을 만드는데 있어서 상당한 시간을 요하기 때문에 가끔은 주객이 전도되는 상황에 봉착하곤 합니다. 프로토타이핑을 만드는 목적은 '빠른'시간 내에 '다양한 시안'들을 테스트해보는 것에 있기 때문이지요.(물론 해당 툴들을 매우매우 능숙하게 쓰시는 분들은 뚝딱뚝딱 만들어내곤 하시지만 이를 위해서 오랜 시간 배움과 경험의 시간을 가지셨겠지요.)

위의 도구들과 비교하여 픽세이트, 프린시플, 플린토포맥과 아토믹은 별도의 코드 작성이나 라인 패치에 대한 이해가 필요없고 비교적 디자이너들에게 익숙한 인터페이스로 되어있습니다. 이로 인해 디자이너들이 상대적으로 접근하기 쉬운 편입니다. 그러나 위에서 언급한대로 정확도 면에서 일부 아쉬움이 있습니다.

인비전과 마벨은 하루이틀 정도면 사용에 무리가 없을 정도로 쉽고 깔끔한 구조를 가지고 있습니다. 다만 UI 플로우를 확인하는 것 외에 무언가 다양한 인터랙션 프로토타이핑 실험을 하기엔 기능적으로 부적합합니다. (현재 상태에선)

Summary

지금까지 목적, 기능, 정확도, 난이도로 구분하여 간단하게나마 제가 생각하는 기준을 설명드렸습니다.

이를 토대로 현재 자신이 가지고 있는 프로토타이핑에 대한 이해도, 프로젝트에서 요하는 프로토타이핑의 성격, 사용할 수 있는 시간의 절대치, 자신이 테스트해보고자 하는 기능 등을 가늠하여 도구를 선택해보시면 좋을 듯 합니다.

이외에도 자신이 사용하고 있는 머신이 맥(Mac)인지 윈도우즈(Windows) 인지에 따라서

혹은 자신이 몸담고 있는 곳의 보안 수준에 따라서,

자신이 만들고자 하는 서비스의 플랫폼 종류에 따라서 등 많은 기준들이 있을 수 있습니다.

다만 이 글에서는 디자인 프로세스와 도구의 특성 등에 초점을 맞추어서 이야기를 풀어내보았습니다.

시간이 조금 경과된 자료지만 일목요연한게 프로토타이핑 툴을 비교하실 수 있는 사이트도 있습니다.

http://www.cooper.com/prototyping-tools

위 사이트에서는 자신이 만들고자 하는 서비스의 플랫폼에 따라, 혹은 프로토타이핑을 하고자 하는 목적에 따라서 툴들을 비교할 수 있도록 정리를 해놓았습니다.

너무 많은 도구들 중 무엇을 해야할 지 몰라서 아직 그 첫 발을 내딛지 못한 분이 계시다면, 이 글이 조금이나마 도움이 되었다면 좋겠습니다. 명필은 붓을 가리지 않는다고 하지만, 저는 아직 다듬어지지 않은 디자이너인지라 좋은 도구의 선택이 큰 발전을 가져오더군요. 처음 집어드시는 도구가 무엇이든 한 발자국 발전하는데 있어서 긍정적인 영향을 끼칠 것이라고 생각합니다.

*Pixate는 2016년 10월부로 서비스를 종료했습니다.

keyword