기획자가 제작한 프로토타입
인비전, 프로토파이를 사용하면서 느낀점
* 사내 블로그에 기재된 http://story.pxd.co.kr/1225와 내용이 비슷할 수 있음을 미리 밝혀둔다.
프로토타이핑 툴 광풍이 불면서 이름 들어본 프로토타이핑 툴은 설치해본 것 같다. 프로토타이핑에 호기심에 생겨 회사 스터디로 배우다가, 다들 바쁘고 모이기 어려워 1~2회 하다 중단되었다. 1년 뒤, 외부 스터디를 통해 다시 프로토타이핑 툴을 공부했다. 하지만 에이전시에 다니다 보니, 주로 디자인 단계에서 프로토타입을 공유하기 때문에 기획자가 프로토타이핑 툴을 사용할 일이 없었다. 배움이 업무와 연결고리가 약하다 보니 동기부여가 잘 안돼 항상 '이런 툴이 새로 나왔구나~’ 정도만 배우고 프로토타이핑 공부는 흐지부지 되기 일쑤였다.
프로토타입이 사용되는 단계 항상 일회성 배움으로 끝나다가, 올해 좀 여유가 생겨 프로젝트에서 프로토타이핑 툴을 써 볼 기회가 생겼다.
스터디에서 form, 오리가미, 프레이머 등 여러 가지를 배웠지만 결국 업무에서 사용한 툴은 인비전, 프로토파이였다. 요새 프로토타입과 관련된 글은 차고 넘치기 때문에 인비전, 프로토파이에 대해서는 다른 전문가 분들이 더 잘 설명해 주실 거라 생각한다. 이 포스팅에서는 기획 업무에서 두 가지 툴을 사용해서 프로토타입을 만들면서 툴에 대한 아쉬운 점, 좋았던 점 등의 회고 위주로 이야기해보려 한다.
1. 인비전 (InVision)
프로젝트에서 시안 결정을 위한 사용자 UT 준비를 하기 위해 간단한 프로토타입을 만들기로 했다. 사내 개발자 분께 맡겨도 되었지만 간단한 인터랙션만 구현하면 되고 시간이 여유가 있어 UX 기획자 멤버끼리 직접 프로토타이핑 툴을 사용해 제작해보기로 했다. 클라이언트에게 공유하기 위해 URL로 프로토타입을 공유할 수 있어야 하고, 웹사이트 시안이어서 모바일 화면 외에 웹사이트 화면을 지원하는 툴이 필요했다. 지금까지 배웠던 툴들은 약간의 코딩 능력을 요구해 어느 정도 습득할 시간이 필요했다. 툴을 습득할 시간까지 여유가 있는 건 아니라 빠르게 학습할 수 툴이 필요했다. 사용하기 쉬운 툴 하면 인비전이 많이 언급되어 인비전을 사용해보기로 했다. 사람들의 후기처럼, 인비전으로 프로토타입을 만드는 건 정말 쉬웠다.
https://youtu.be/1H7Ql9hmbuM?list=PLeWHfyz6lrQXHKy01OlALt3xZRZCPi89V
BUT, 쉬운 만큼만 구현된다.
쉬워서 다른 사람들과 협업하기 좋은 큰 장점이 있기는 한데, 딱 쉬운만큼만 구현이 가능했다. 클릭, 롤오버, 스크롤. 웹사이트 화면이라 더 제약사항이 있는 것 같지만 구현할 수 있는 범위가 다른 툴에 비해 좁았다. 빠르게 플로우를 설명할 때는 훌륭한 툴일 것 같다. 하지만 내가 프로토타입에서 원했던 결과물은 슬라이드 쇼처럼 화면이 넘겨지는 느낌이 아니라 실제 서비스가 넘겨지는 느낌처럼 그럴듯한 퍼포먼스가 필요했다.
디졸브, 좌, 우 넘김 설정 등 간단한 인터랙션을 지원하기 때문에 화면 전환 정도의 간단한 인터랙션이면 인비전을 통해 충분히 좋은 효과를 낼 수 있다.
화면 전환을 설명하기에 좋다. 
이비전에서는 가로 스크롤과 같은 인터랙션 구현이 어렵다. 인비전을 사용하면서 제한적인 인터랙션만큼 아쉬운 것은 화면과 화면을 연결해줘야 하기 때문에 프로토타입에 필요한 화면별로 있어야 한다. 그러다 보니 기능은 별거 없어도 화면이 많기 때문에 프로토타입이 무거워진다. 정말 간단하게 메뉴를 열었다 닫았다 하는 부분인데도 A에서 접근했는지, B에서 접근했는지에 따라 메뉴가 열린 화면을 일일이 그려야 하는 것이다.
모든 화면에 메뉴가 열린 상황을 화면 별로 만들어야 한다. 인비전은 정말 급할 때, 화면 이동을 모바일 폰에서 확인하고 싶을 때는 유용하다. 하지만 시안에 대한 설득력을 얻기 위해서는 인터랙션이 너무 제한적이다. 좀 더 인터랙션이 많지만 쉬운 툴을 찾는 와중에 사내에 프로토파이 열풍이 불었다.
2. 프로토파이(ProtoPie)
같은 프로젝트의 디자인 팀의 프로토타입 제작 기간이 짧아 프로토타입 제작을 UX팀에서 조금 도와주면서 프로토파이를 제대로 사용해보게 되었다. 혼자 프로토파이를 쓰려고 했을 때는 기능을 익히기가 어려워서 포기했었는데, 팀원들과 같이 배우니 혼자 할 때보다 기능이 쉽게 익혀졌다. 프로토파이는 영상 제작하듯 프로토타입을 만든다고 생각하면 된다. 인터랙션이 필요한 요소에 트리거를 추가한다. 트리거가 있을 때의 반응을 지정하고 반응 소요 시간, 딜레이 시간을 설정된다. 설정한 인터랙션이 타임라인처럼 그려져 A 인터랙션 다음에 B 인터랙션이 실행되는 것을 눈으로 쉽게 확인할 수 있다.
https://www.youtube.com/watch?v=4BmSKkLb-5c
우측 상단에 보면 Trigger를 설정하고 그에 대한 Response를 설정하면 타임라인 처럼 표시된다. 구현할 수 있는 인터랙션 범위가 넓다. Tap 같은 기본 인터랙션부터 틸트, 사운드 같이 센서로 작동하는 인터랙션까지 구현할 수 있다.
우측이 Trigger 추가, 좌측이 Reponse 추가. 제공되는 기능이 정말 많다. 영상 제작 툴을 떠올리게 하는 기능들..
코딩이 익숙하지 않은 디자이너, 기획자에게는 프레이머 같이 코딩이 필요한 툴만큼 꽤 정교한 부분까지 구현할 수 있고, 코딩을 요구하는 툴보다 쉽게 익힐 수 있는 장점이 있다. 애프터 이펙트를 사용해봤다면 프로토파이를 조금만 써보면 기능들을 쉽게 피악 할 수 있다. 꽤 쉽게 기능을 익힐 수 있고 여러 가지 인터랙션을 구현할 수 있지만 영상을 만들 때도 인내가 필요한 것처럼 프로토파이를 쓸 때도 약간의 인내가 필요하다. 예를 들어, 버튼을 눌렀을 때 다른 요소들이 움직이게 하고 싶으면 요소들의 y값을 move 트리거를 통해 조정해야 하는데, 만약 계산을 잘 못해서 되돌리고 싶으면 반응을 설정한 항목들의 값을 일일이 조정해야 한다. 나중에 익숙해지고 난 다음에는 요소들의 크기를 미리 적고, 그에 따라 y값이 얼마나 움직여야 하는지 계산하고 인터랙션을 적용했다. 값을 계산하니 실수도 적어지고 꽤 정교하게 구현할 수 있었다.
아쉬운 점은 인터랙션을 타임라인으로 설정하기 때문에 프로토타입도 스텝 바이 스텝으로 구현된다. 사용자가 A를 눌러야 하는데 B를 눌렀을 때의 변수에 대응하기 어렵다. 그래서 클라이언트나 중요한 자리에서 프로토타입을 공유하는 경우 사용자에게 눌러야 하는 순서를 알려주거나 시나리오를 미리 설명해야 한다.
프로토파이는 코딩에 대한 이해 없이 바로 프로토타입을 꽤 완성도 높게 만들 수 있는 툴이다. 최근에 URL 공유가 되면서 정말 많이 편해지고 좋아졌다. 하지만 요소들을 움직이는 과정이 공수가 많이 드는 부분, 스텝 바이 스텝으로만 구현할 수 있는 부분이 이것보다 더 좋은 툴이 있을 것 같단 생각을 들게 한다.
아직 프로토파이를 대체할만한 툴은 찾지 못했다. 프레이머가 업데이트가 되면서 많이 좋아졌단 이야기를 들어 뉴 버전이 어떨지 궁금하긴 하다. 결국 프로토타입이 정교해지려면 코딩을 통해 하는 수밖에 없는 건가 싶기도 하다.
운 좋게 UT 단계에서 프로토타입을 만드는 기회가 있었지만 에이전시에 근무하면서 기획자가 프로토타입을 만들 일은 생기지 않는다. 보통 전문적으로 프로토타이핑을 만드는 분이 계시거나 개발자 분이 개발 목업을 만든다. 예전에 어떤 글에서 데이터 분석이 기획자에게, 프로토타이핑은 그래픽 디자이너에게 필요한 소양이란 이야기를 읽은 적이 있다. 프로젝트 수행 단계를 봐도 기획자가 프로토타이핑을 할 줄 아는 게 중요하진 않은 것 같다.
기획자가 만든 프로토타입이 완성도가 높거나 프로토타입이 필수 능력이라고 생각하지 않는다. 기획자의 프로토타입은 Framework과 시나리오가 통과되는 과정에서 말과 글로 설득하기 어려운 상황일 때 설득력을 높이는 보조 도구로써 역할이다. UX 기획자는 프로토타입을 만드는 사람이 아니라 화면을 기획하고 사람들을 설득하는 사람이기 때문이다.
이런 기획자에게 프로토타입 제작을 추천한다.
파워포인트로 UI flow를 설명하는 게 지친 기획자
100마디 말보다 1번의 실행이 낫다고 프레젠테이션 제작 툴인 파워포인트, 키노트로 UI flow를 설명하는데 한계가 있다. 최근에도 키노트로 제작한 문서의 화면들을 클라이언트에게 설득하지 못해 프로토타입을 보여준 적이 있다. 흑백으로 구성된 키스크린으로 제작하고 엉성했던 프로토타입이지만 화면에 대한 반응이 긍정적으로 바뀌어 기분이 좋았던 적이 있다. 주요 화면, 강하게 밀고 나가야 하는 시나리오 위주로 미리 제작해두면 위기의 순간에 비장의 무기가 될 것이다.
기획한 디자인을 팀원들이 왜 공감을 못 하는지 이해하기 어려운 기획자 (feat. 주니어 기획자)
내가 볼 때는 훌륭하고 이만한 게 없는데 왜 사람들은 좋아하지 않을까? 이럴 때 프로토타입을 만들어 보면 어느 부분이 문제인지를 스스로 납득하게 된다. 직접 기획한 디자인에 대한 확신이 없을 때 프로토타입을 만들면 시안의 요소들이 실제 구현되었을 때 문제가 되는 부분이 없는지 파악하기 쉽다. 디테일이 추가되고 화면에 대한 완성도가 높아진다.
만약 프로토타입이 머릿속에 상상한 모습과 일치하면 그대로 팀원들에게 보여주면 된다. 실제 구현되었을 때의 문제가 없다면 팀원들도 기획한 시안에 대해 납득할 것이다.
