프로토타이핑 툴 소개

하나의 프로젝트가 완성되기까지 우리는 선택이라는 과정을 반복해서 겪게 됩니다. 그때의 상황에 맞는 논리와 경험을 토대로 무언가를 결정을 하게 되죠. 그러나 때로는 개척하지 못한 황무지 같은 길을 걸어야 할 때도, 이미 닦아져 있는 길을 의심해야 할 때도 있습니다. 이런 경우라면 어떤 논리나 경험을 통하더라도 결과가 원하는 방향으로 나오지 않을 때가 많습니다. 그리고 그 선택이 큰 리스크를 안겨줄 수도 있고요. 이런 일들을 미리 방지하기 위해 가설을 세우고 최소한의 경험만으로 리스크도 줄이면서 값진 정보를 얻어 낼 수있는 방법이 있습니다. 이것을 우리는 프로토타이핑이라고 합니다.

프로젝트를 진행하다보면 프로토타이핑의 필요성을 느낄 때가 많이 있습니다. 어떤 선택을 해야하는 상황에서 기준이 될 수 있는 테스트를 하고 싶은데, 시간과 비용이라는 문제에 부딪혀 정작 진행하기는 쉽지 않습니다. 상대적으로 대부분의 디자이너들에게는 더 어려운 일이기도 하죠. 그러다보니 이런 문제를 개선하기 위해 많은 프로토타이핑 툴이 만들어지고 공개되어 왔습니다. 누구나 쉽고 빠르게 프로토타이핑을 할 수 있도록 말이죠. 그런데 여기서 문제가 하나 발생합니다. “뭘 써야하지?” 많은 툴이 나와있지만 나에게 맞는 툴이 뭔지, 현 상황에서 어떤 툴을 써야할지 알기가 쉽지 않다는건데요. 대부분의 프로토타이핑 툴들은 친절하게 데모영상 뿐만 아니라 트라이얼 버전을 제공하기 때문에 시간을 조금만 투자하면 툴에 대한 성격을 어렵지 않게 파악할 수 있습니다. 그러나 많은 이들이 “특정 상황”이 주어지지 않은 이상 대부분은 관심만으로 끝나는 경우가 많습니다. 저 또한 그랬구요. :) 저는 우연찮게 그런 상황이 주어졌고 다양항 툴들을 경험하게 됐습니다. 그리고 그 내용들을 간략하게 공유하고자 합니다.

Flinto

모바일전용 프로로타이핑 툴로 화면간의 이동을 확인함으로써 시나리오 검증에 최적화되어 있습니다. 대부분의 기능을 10분이면 학습이 가능하고 10분이면 하나의 프로토타입을 완성시킬 수 있습니다. 화면에 터치 영역을 지정하고 이동할 화면을 선으로 연결한 뒤 트렌지션 효과만 정해주면 간단한 화면간 이동 효과가 만들어집니다. 다만 제공하는 기능이 단순하다는 것이 아쉬운 부분인데, 공식블로그에는 추가적인 디자인 도구를 넣지 않는 이유에 대해 설명하며, 자신들의 아이덴티티를 명확히 하고 있습니다. 복잡한 인증절차를 거치지 않고바로 회원가입이 가능하며, 이후 30일간 무료로 사용하 실 수 있습니다.

학습 : 쉬움.
프로토타이핑 속도 : 빠름.
인터렉션 구현정도 : 제한적임.
홈페이지 : https://www.flinto.com/

Invision

Flinto와 마찬가지로 시나리오 검증에 최적화되어 있는 툴이며, 나와있는 툴 가운데 Flinto와 함께 가장 빠른 프로토타이핑을 할 수 있습니다. 제공하는 기능 또한 다양한데, 모바일 환경에서 발생하는 대부분의 터치 인터렉션과 트렌지션을 제공하며, sms로 url을 전달 할 수 있어서 간편하게 완성된 프로토타입을 디바이스에서 확인해 볼 수 있습니다. 모바일 뿐만 아니라 웹과 와이어프레임 제작도 지원하며, 회원 가입 후 30일 동안 무료로 사용하실 수 있습니다.

학습 : 쉬움
프로토타이핑 속도 : 빠름
인터렉션 구현정도 : 보통
홈페이지 : http://www.invisionapp.com/

Oven.io

다음 카카오에서 제공하는 프로토타이핑 툴로서 발사믹을 대체할 수 있는 유용한 툴입니다. 내부에서 제공하는 컴포넌트가 다양하기 때문에 준비된 리소스가 없어도 프로토타이핑이 가능하다는 장점이 있습니다. 복잡한 기능을 제공하지 않기 때문에 학습에 어려움이 없으며, 현재 베타버전으로 공개중이라 제한없이 무료로 사용 하 실 수 있습니다. 다만 트렌지션 효과에 대해서는 지원하지 않기 때문에, 결과물에 밋밋한 느낌이 없지 않아 있습니다.

학습 : 쉬움
프로토타이핑 속도 : 보통
인터렉션 구현정도 : 매우 제한적임
홈페이지 : https://ovenapp.io/

Proto.io

개인적으로는 다른 툴과 비교했을때 가장 폭 넓게 활용이 가능한 툴이 아닐까 합니다. 플린토나 인비전처럼 준비된 화면이 있으면 빠르게 인터렉션만 추가해서 프로토타이핑을 할 수 있으며, 오븐처럼 기본적으로 제공되는 컴포넌트가 있기 때문에 이를 활용한 프로토타이핑도 가능합니다. 또 위의 툴들과는 다르게 화면 단위 프로토타이핑 아니라 개별 오브젝트마다 인터렉션을 줄 수 있어 다양한 인터렉션 디자인이 가능하고요. 다만 복잡한 인터페이스와 기능때문에 학습에 적지 않은 시간을 들여야 한다는 단점이 있습니다. 위의 툴들은 혼자 학습하는데 어려움이 없으나, Proto.io는 제공하는 튜토리얼을 한번은 거쳐야 사용할 수 있습니다. 그래도 학습을 위한 페이지가 잘 갖춰져 있는편이라 이 단계만 넘어가면 현재 나와 있는 툴들 가운데 가장 접근이 용이한 툴이 아닐까 생각합니다. Proto.IO는 가입 후 15일간 무료로 사용하실 수 있습니다.

학습 : 보통
프로토타이핑 속도 : 보통
인터렉션 구현정도 : 좋음
홈페이지 : https://proto.io/

Origami

페이스북에서 애플의 비주얼 개발 툴인 쿼츠컴포저에 플러그인을 설치하여, 프로토타이핑에 적합한 기능을 제공하는 무료 툴입니다. 페이스북 서비스인 페이퍼를 이 툴을 써서 프로토타이핑 했다고 해서 유명해졌습니다. 패치라고 하는 각각의 기능을 가진 박스들을 선으로 연결하여 하나의 프로그램을 완성시키는 형태이며, 인터렉션 프로토타이핑을 하는데 최적화되어 있습니다. High-Fidelity툴 중에서는 비교적 접근하기 쉬운 툴이긴 하나 적지 않은 시간을 들여야하고, 쿼츠컴포저가 Mac OS에서 제공되는 플랫폼이기 때문에 사용환경이 제한적입니다. 게다가 비쥬얼개발 툴에 기반을 두고 있어 PC 하드웨어 사양이 낮으면 사용하기 어렵습니다. 2.0으로 업데이트되며 프로토타이핑한 내용의 코드를 Export시켜 확인 할 수 있으나, 실제 개발코드로 적용하기에는 어려움이 있습니다.

학습 : 어려움
프로토타이핑 속도 : 느림
인터렉션 구현정도 : 좋음
홈페이지 : https://facebook.github.io/origami/

Framer

코드베이스에 프로토타이핑 툴입니다. Coffee Script 라고 하는 개발언어를 사용하며, 내부 라이브러리가 잘 구축되어 있어 기본 문법만 이해하면 예제는 금방 따라 가실 수 있습니다. 코드 베이스이기 때문에 높은 퀄리티의 프로토타입을 제작 할 수 있으며, 자유도 또한 높은 편입니다. 예를 들면 다른 툴의 경우는 제공되는 기능 외에는 구현이 불가능하거나 복잡한 방법으로 우회적으로 접근을 해야하지만, Framer는 내부에서 기능을 제공하지 않더라도 직접 개발이 가능하죠. 하지만 이 부분이 제가 생각하는 가장 큰 단점인데요. 난이도 있는 프로토타이핑을 하기에 디자이너에게는 어렵고, 개발자에게는 자신에게 익숙한 언어로 개발을 하는게 낫기 때문입니다. 그럼에도 불구하고 많은 것을 할 수 있기 때문에 인기있는 프로토타이핑 툴입니다. 아직 Mac OS X 버전만 출시되었고, 윈도우 버전은 준비중에 있으며, 30일간 무료로 사용할 수 있습니다.

학습 : 어려움
프로토타이핑 속도 : 느림
인터렉션 구현정도 : 좋음
홈페이지 : http://framerjs.com/

마무리하며

최근 몇 년 사이 프로토타이핑에 대한 관심이 급격히 늘었음을 느낍니다. 물론 이전부터 프로토타이핑의 필요성은 꾸준히 제기되어 왔지만, 플랫한 그래픽 디자인이 주를 이루기 시작한 시점에서 인터렉션이 중요해지고, waterfall 에서 Agile 이나 Lean UX Process로 조금씩 변화해가는 과정 중에 프로토타이핑이 더욱 중요해졌죠. (전 개인적으로 LeanUX의 MVP를 Minimum Viable Prototype로 정의해야 한다고 생각합니다.)

Apple, Ideo, You Tube등 몇몇 회사의 디자이너들을 75%가 프로토타이핑 툴을 사용한다는 통계도 있습니다.

이미지 참조 : http://www.slideshare.net/cmccann77/design-research-prototyping

프로토타이핑에 있어 가장 중요한 포인트는 목적을 분명히 하는 것입니다. 그 목적은 툴을 선택하는 가이드가 됩니다. 제 생각에 프로토타이핑의 가장 큰 목적은 두가지인데, 시나리오에 대한 검증과 인터렉션에 대한 느낌 확인이죠. 물론 뒤에 대상이 추가됨에 따라 목적이 추가 되기도 합니다. 중요한 것은 필요에 따라 적합한 툴을 선택하는 것인데,  시나리오 검증을 하는데는 쉬우면서 빠른 low-fidelity 툴이 적합하고, 인터렉션에 대한 부분을 확인하고자 했을 때는 느리고 어렵지만 기능이 강력한 mid, high-fidelity 툴이 적합합니다. 어느 정도 퀄리티를 높이면서 빠르게 프로토타이핑을 하고 싶다면 툴보다는 개발자를 고용하는게 좋을 것 같고요.
몇 가지 툴들을 간략하게나마 소개 해드렸는데, 툴은 선택함에 있어 고민을 덜어드리는데 도움이 되길 바랍니다.