언제부터인가 프로토타이핑은 UI 디자이너의 필수 역량처럼 되어가고 있다. 실제로 링크드인(LinkedIn)이나 엔젤리스트(AngelList)의 채용공고에서 디자인 포지션 지원자의 필수 역량에 프로토타이핑을 기재한 회사들이 늘어나고 있는 추세이다. 이는 많은 회사들이 애자일 디자인 프로세스(Agile Design Process)로 자신들의 제품을 개발하면서 일어나게 된 변화 중 하나이다. 자연스럽게 디자이너들은 효율적인 프로토타이핑을 위해 어떤 프로토타이핑 툴을 선택해야할지 고민하게 되었는데, 현재 시장에 나와 있는 20여 개나 되는 프로토타이핑 툴을 모두 써보지 않은 이상 본인에게 적절한 툴을 선택을 하는 것은 매우 어려운 일이다. 이번 포스팅을 통해 이 어려운 선택에 조금이나마 도움이 되길 바란다.
먼저, 왜 프로토타이핑이 필요한지에 대해 생각하자!
디자이너가 디자인 프로젝트를 통해 해결해야할 문제는 매번 달라진다. 이는 프로젝트 성격에 맞춰 사용해야 할 프로토타이핑 툴도 매번 달라질 수 있다는 것을 의미한다. 그 프로젝트 성격에 맞춰 본인이 다룰 수 있는 2~3가지 프로토타이핑 툴 중에서 적절히 선택해서 사용해야 한다. 프로토타이핑 툴 선택에 있어 한 가지 툴만 배워서 사용할 생각을 하지 말라는 것이다. 내가 볼 때 적어도 2가지 이상 다뤄야 한다. 다음 질문에 스스로 대답해 보자.
- 프로토타입을 통해 얻고자 하는 것이 무엇인가?
- 의사결정권자, 개발자, 사용자 등 누구를 대상으로 하는가?
- 프로토타이핑에 얼마나 많은 시간을 할애할 수 있는가?
- 프로토타입을 어떻게 내 업무 프로세스에 녹여낼 것인가?
- 프로젝트 작업물 제작 과정에 협업이 필요한가?
그리고 충분한 고민이 되었다면 이제 다음 단계로 넘어가 보자
프로토타이핑 툴의 현황 살펴보기
프로토타이핑에 관심 있는 디자이너들은 디자인 스튜디오인 쿠퍼(Cooper)의 분석 자료를 본 경험이 있을 것이다.
그런데 이 자료만으로 저 수 많은 툴들 중 내 프로젝트에 맞는 툴을 선택하기는 쉽지 않다. 디자이너 Taylor Palmer는 ‘Traversing the UX Prototyping Landscape’라는 포스팅에서 수 많은 프로토타이핑 툴들을 ‘얼마나 개발 친화적인가?’라는 축으로 분류했는데 이를 정리하면 다음과 같다.
코드 기반에 가까운 툴일수록 더 많은 시간을 쏟아부어야하지만 그 만큼 실제 결과물과 가까워진다.
참고로 이번 포스팅의 내용이 몇 달 전 초안을 잡아놓은 상태였는데 그 짧은 기간 동안 구글에 인수되었던 픽세이트(Pixate)는 서비스를 종료 했으며 국내 스타트업에서 만든 프로토파이(ProtoPie) 같은 신규 프로토타이핑 툴이 등장하기도 했다. 프로토타이핑 툴 시장의 춘추전국시대라 할만 하다.
프로토타이핑 툴 선택하기
Taylor Palmer는 좀 더 쉬운 툴 선택을 위해 멘탈모델을 만들었는데 보기 쉽게 정리해 보았다.
맨 왼쪽에서 시작해서 ‘Yes’와 ‘No’를 선택하다 보면 20여 개 이상되는 프로토타이핑 툴 중에서 내 디자인 프로젝트에 맞는 툴을 2~3가지로 좁힐 수 있다. 사실 이 상태로도 어느 정도 툴 선택에 대한 큰 기준은 정할 수 있지만 여기에 다음의 자료를 더해보면 조금 더 도움이 될 것이다.
위 분류는 디자이너 Joe Salowitz가 ‘16 Prototyping Tools & How Each Can Be Used’라는 포스팅에서 프로토타이핑 툴을 구현 속도와 피델리티, 그리고 미디어에 따라 분류한 것을 다시 정리한 것이다.
종합하자면 먼저 구현하고자 하는 인터랙션의 수준을 Taylor Palmer의 멘탈모델에서 정한 다음 Joe Salowitz의 분류를 보고 모바일이냐 데스크탑이냐에 따라 선택하면 좀 더 쉬운 선택이 가능하다는 것이다.
다양한 프로토타이핑 케이스 미리보기
앞 서 언급한 몇 가지 기준을 기억한 뒤 아래 몇 가지 케이스를 살펴보면 툴 선택에 있어 좀 더 도움이 될 것이다.
케이스 #1
- 모바일 프로젝트인데…
- 피델리티는 낮아도 되지만 빠르게 화면 플로우를 테스트해야해!
케이스 #2
- 데스크탑 웹 프로젝트인데…
- 피델리티는 낮아도 되지만 빠르게 화면 플로우를 테스트해야해!
케이스 # 3
- 모바일과 테스크탑을 위한 반응형 웹 프로젝트인데…
- 피델리티는 적당한 수준에서 브레이크다운(Break down, 반응형 웹에서 레이아웃이 바뀌는 것)을 테스트해야해!
케이스 # 4
- 모바일 프로젝트인데…
- 화면 플로우 보다는 마이크로 인터랙션을 테스트해야해!
케이스 #5
- 모바일 또는 데스크탑 프로젝트인데…
- 마이크로 인터랙션도 보여주면서 화면 플로우도 테스트해야해!
- 여기에 쏟아부을 충분한 작업 시간이 있다고!
프로토타이핑 툴에 대한 집착 버리기
앞서도 이야기했지만 프로토타이핑은 어떤 툴을 선택하느냐보다는 왜 필요한가를 먼저 생각하는 것이 중요하다. 프로토타이핑은 결국 이를 매개로 효율적인 커뮤니케이션을 하기 위함이기 때문인데 현시점에서의 프로토타이핑 툴들은 이 커뮤니케이션에 있어서 큰 변곡점으로 가는 길목에 있다고 볼 수 있기 때문이다.
잠시 생각해보자. 디자이너가 작업한 결과물이 바로 코드화 된다면 어떻게 될까? 아마도 프로젝트와 관련된 이해당사자들 간의 커뮤니케이션에 필요한 리소스가 드라마틱하게 줄어들게 될 것이다. 너무 먼 미래의 이야기 같은가?
아직 베타 버전이긴 하지만 MACAW 같은 툴들이 속속등장하고 있다.
물론 십수년 전 드림위버가 나왔을 때의 안 좋은 추억을 가진 디자이너들도 있겠지만 개인적으로는 나름 기대할 만한 변화가 다가오고 있다고 생각한다. 프로토타이핑 툴 중 가장 높은 시장 점유율을 가진 인비전이 인수했다는 점만으로도 가능성이 기대된다는 것이다.
오늘은 여기까지…
프로토타이핑 툴을 선택하는 것은 프로 골퍼가 라운딩 중 상황을 분석하고 이에 맞는 클럽을 골프백에서 뽑아 쓴다고 생각하면 좀 더 이해가 쉬울 것이다. 디자이너의 경우에도 평소 2~3가지 프로토타이핑 툴의 특성을 이해하고 연습을 통해 기본 기능 정도는 사용할 수 있는 준비가 필요하다. 그리고 이를 언제든지 실무에서 활용할 수 있다면 내년 연봉 인상은 장담 못하지만 오늘 집에는 조금 일찍 퇴근할 수 있을 것이다.
