2016. 9. 8. 07:40ㆍUI 가벼운 이야기
이번에는 큰 고민 없이 이야기할 수 있는, 프로토타이핑에 대해 이야기하려고 합니다. 옛날부터 pxd 내에서도 프로토타이핑에 대한 관심이 많았었죠. 제가 참여했던 프로젝트만 해도 두 번의 프로젝트에서 웹사이트 인터랙션 구조의 프로토타이핑을 했었고, IoT 프로젝트에서도 디지털 스크린과 관련한 프로토타이핑을 사용했었습니다. 요즘도 점차 많은 프로젝트에서 프로토타이핑을 활용하고 있다는 이야기도 들었어요.
저도 트루밸런스 일을 하며 이런저런 상황에서 다양한 프로토타입 툴을 사용하여 프로토타이핑을 하고 있습니다.
1. 왜 프로토타이핑을 하나?
트루밸런스는 작년부터 쉼없이 새로운 기능들을 추가하고, 기존 기능을 개선해나가고 있습니다. 정말로 전쟁터 같죠. 시간이 많지 않기 때문에 꼭 필요한 경우에만 프로토타이핑을 하는데요, 지금까지 만들었던 것들을 되돌아보면 아래와 같은 케이스로 정리됩니다.
- 새로운 인터랙션과 Flow를 내부에서 테스트하는 경우
- 새로운 인터랙션과 Flow를 개발팀에 전달하는 경우
- 개선 시안을 일반인들에게 테스트하는 경우
1-1 . 새로운 인터랙션과 Flow를 내부에서 테스트하는 경우
디자인 팀에서 새로운 인터랙션을 추가하거나 변경하고자 할 때, 내부 공유용으로 만드는 경우가 있습니다. 먼저 디자이너가 프로토타입을 만들고, 디자인 팀 내부에서 이런저런 의견을 주고 받은 뒤에 최종안을 만듭니다. 그런 뒤 사내에 공유를 하죠. Slack을 통해 공유하기도 하고, 전체 회의 때나 개발팀과의 리뷰회의 때 공유하기도 합니다. 이렇게 해서 해당 인터랙션에 대한 필요성에 대한 공감대가 만들어지면, 다음 업데이트때 작업할 수 있도록 힘이 실리기도 합니다. 아주 중요하거나 새로운 기능이 아니라면, 이런 전쟁터같은 상황에서는 쉽게 받아들여지기 어렵거든요. 아래는 작년 봄에 만들었던 메인 네비게이션 시안과, 최근 저희트루밸런스 디자이너가 만든 프로토타입입니다. 흰색 카드나 동그라미 부분을 Pull-down 하기 전과 하는 중, 귀여운 원숭이가 표시되는 인터랙션이죠!
[http://share.framerjs.com/lpyew2gjb0kq/]
1-2. 새로운 인터랙션과 Flow를 개발팀에 전달하는 경우
최근 나오는 프로토타입 툴들이 대부분 이런 용도를 전면에 내세우고 있는데요, 디자이너가 생각하는 인터랙션, 애니메이션들을 개발팀에 구체적으로 전달하기에 프로토타이핑이 정말 효과적입니다. 코드 기반의 프로토타이핑 툴들은 개발팀에게 더 좋은 것 같고요. 그대로 사용할 수는 없겠지만, 디자이너의 생각이 특정한 식으로, 특정한 값으로 나오기 때문에 훨씬 더 전달이 잘 되었습니다. 아래는 1-1 사례와 비슷한데, 윗쪽에 있는 흰 색 박스를 풀다운 하면 동물이 나오는 애니메이션, 동전이 살짝 내려갔다 올라가는 애니메이션 등을 전달하고자 만들었습니다.
[http://share.framerjs.com/orp1ejuyfg22/]
1-1과도 겹치는 별개의 이야기지만, 이런 애니메이션을 만들기 전이나 후에 개발팀과 논의하는 과정도 중요합니다. 예를 들어 저가폰이 주류인 인도에서 너무 복잡한 애니메이션을 사용하면 안된다거나, 이미지 자체가 변경되는 애니메이션이 있다면 앱 용량이 늘어난다던가 하는 이야기들이 오가죠.
1-3. 개선 시안을 일반인들에게 테스트하는 경우
예전부터 UX 디자인에서는 사용성 평가를 위해 프로토타이핑을 했었죠. 하지만 스타트업에서는 출시 전 사용성 평가를 하기는 쉽지 않습니다. 언제나 시간과 인력 부족에 시달리죠. 그리고 최근 디지털 서비스를 하는 회사들은 이런 사전 평가보다는 사후 평가를 통해 지속적인 개선하는 것을 지향하고 있습니다. 여건만 된다면, 정량적인 평가 시스템으로 여러번 테스트 해볼 수 있기 때문이죠. (하지만 정성적인 평가도 항상 중요하게 생각하고 있습니다)
트루밸런스 앱에는 설치 후 진입 시 한가지 특수한 설정 과정이 있는데요, 이 부분이 일반 사용자들에게는 쉽지 않은 과정이기 때문에, 항상 이 부분에서의 초기 이탈을 우려하고 있습니다. 따라서 쉽게 개선안을 만들고 사후 평가를 시도 해보기가 힘들죠. 그래서 이것만큼은 프로토타입을 만들어 인도 시내로 나가서 정성적으로 사전평가를 하고 있습니다. 이미 몇 번에 걸친 테스트, 개선작업을 걸쳤고 현재는 어느 정도 안정적이라고 생각하기 때문에 약간의 변화를 지속적으로 해보고 있습니다. 아래의 프로토타입인데, 자세한 설명은 생략하겠습니다 ^^;
(인도에서 실제 기록까지 진행할 용도로 만든거라 따로 주소를 공개하지 않았습니다)
어떤 툴을 사용하나?
툴은 여러가지를 시도해봤었습니다. 디자이너인 Young은 이것저것 정말 많이 써봤고, 최근에는 ProtoPie를 시도해보고 있습니다. ProtoPie는 별다른 학습 없이 쉽게 쓸 수 있고 기능도 좋다고 하더군요! 저도 invision이나 Pixate나 기타등등 툴도 써봤는데, 결론적으로 필요에 따라 Framer, Proto.io 두 개만 사용하기로 했습니다 (아..아직 ProtoPie를 안써봐서 그건 잘 모르겠네요)Framer
Framer는 보편적인 인터랙션이 아닌, 특화된 인터랙션을 구현하기에 좋습니다. 위의 풀다운 사례가 적당한데요, 만들기 어렵더라도 그냥 텍스트로 한 판에 나열된 조건과 값들이 있는 것이 인터랙션의 구조를 보기 좋고 변경하기도 쉽습니다. 그리고 프로토타이핑은 계속 만들며 중간중간 수정하는 과정을 반복하기 때문에 이런 과정에서는 좋습니다. GUI기반의 툴에서 복잡한 인터랙션을 하려고 할 경우 시간도 오래 걸리고 꼬일 확률이 높거든요. 또 미세한 인터랙션까지 완벽히 만들거나, 조건을 더 다양하게 할 경우 코딩을 통해서가 아니면 해결하기 힘든 부분들이 있기 때문에 이런 경우 Framer가 좋습니다.
물론 진입장벽이 높은건 사실입니다만, 그래픽툴인 Sketch를 함께 사용한다면 그 장벽이 반쯤 낮아질겁니다. Framer로 무언가를 ‘만드는 것’이 아니라, 만들어진 소스를 놓고 ‘어떻게 움직이게 하고 흐름을 연결시킬까’만 고민하면 된다고 보시면 됩니다.
이런 것에 재미를 붙이다 보면, 취미생활로 프로토타이핑을 해보기도 합니다. 아래 링크는, 날씨 좋은 주말에 할게 없어서 만들어본 프로토타이핑입니다.
Framer로 공룡게임(T-Rex)만들기
Proto.io
Proto.io는 보편적인 인터랙션에 대한 흐름을 빠르게 만들어 보기에 좋습니다. 물론 Proto.io도 대단히 세부적인 기능들이 있기 때문에 각 단계의 상세 인터랙션에 대해 다양한 구현이 가능하지만, GUI를 통해 인터랙션과 연관된 각 오브젝트나 화면들을 오가며 작업하기에는 시간이 걸립니다. 하지만 아주 기본적인 기능, 보통의 기능과 트랜지션을 가진 각 화면들의 흐름을 만들어 보기에는 정말 좋습니다.개인적으로, invision이나 Proto.io같은 GUI기반의 프로토타입 툴로 생각하는 트랜지션을 사용하여 각 화면들간 Flow만 만들 수 있어도 프로토타입 툴의 80%는 익혔다고 할 수 있지 않을까 합니다. 그 뒤에는 그때 그때 구현하고 싶은게 생기면 조금씩만 학습하면 되는거니까요.
One more thing, 프로토타입 테스트
며칠 전, ‘개선 시안을 일반인들에게 테스트하는 경우’ 에서 새로운 시도를 하기로 했습니다. 현재 대부분의 트루밸런스 팀은 한국에 있고, 운영팀과 인도 직원들만 인도에 있는 상황인데요, 프로토타입 테스트를 원격으로 진행하려고 준비를 했습니다. 운영팀과 인도 직원들이 실제로 일반인들을 만나 정성적인 테스트를 하고, 디자인팀은 그 결과를 직원들에게서도 받겠지만, 사용자의 인터랙션이 담긴 화면을 레코딩하여 보기로 했습니다. 그런 툴이 있을까 하여 잠깐 찾아봤는데 역시나 있어서, 시도는 할 수 있게 되었습니다. 지난 주말부터 막 테스트를 시작했을 거라, 후기는 나중에 알려드리겠습니다. 대신 이런 기능을 제공하는 툴을 공유합니다. 저희는 이번에 Proto.io + Lookback을 이용합니다.Lookback
invision, Proto.io등의 기존 프로토타이핑 툴에 연동하여 사용함. 화면이 비디오 파일로 레코딩되며, 사용자의 터치 인터랙션이 같이 기록됨. Proto.io와 연동하면 머문 화면 별로 타임라인이 나뉘어져서 더 상세하게 파악할 수 있음.
CanvasFlip
자체적으로 프로토타입을 제작할 수 있는 툴을 이용해 제작하고, 측정할 수 있음. 비디오 파일이 아닌 자체적인 분석 툴이 있어서 더 강력한 기능을 제공함. 사용자 시점으로 스크린과 타임라인을 볼 수도 있고, 분석자 시점으로 페이지 Flow를 볼 수도 있음. Funnel, Heatmap 분석도 지원함.
마치며
이렇게 스타트업에서 프로토타이핑을 하고 있는 이야기를 마칩니다. 2014년 초에 'User interface의 애니메이션 & 트랜지션' 글을 썼을 땐, 누가 이런 인터랙션에 대해 중심 역할을 해야 할까? 에 대한 의문이 있었는데, 스타트업에 속해 있는 지금은 조금 확실해졌습니다. 중심은 그래픽 디자이너, 그리고 하고싶은 사람 모두. 트루밸런스에서는 UX 디자이너가 먼저 만들어보기도 하고, 그래픽디자이너가 만들어보기도 하고, 개발자가 만들어보기도 합니다. 하지만 결국 최종 역할은 그래픽 디자이너에게 맡기는 것이 올바른 것 같습니다. 그리고 이것은 작은 조직에서 가능한 일이고, 향후에 조직이 커진다면 그때는 또 고민이 될 것 같습니다.
스타트업에서 1년 반동안 일하며 정말 여러가지 일을 했던 것 같은데, 재밌게 이야기할만한 것이 별로 없는 것 같습니다. 제가 아직 미숙하다고 생각하여 쉽게 꺼내지 못하는 이야기들도 있고, 정리를 하기 힘든 것들도 있고요. 그리고 협업을 통해, 배움을 통해 습득한 것들도 많아서 제가 글을 써도 되나 하는 것들도 있고요. 물론 가장 큰 것은 게으름.
혹시라도 스타트업에서, UX디자이너의 일에 대해 궁금하신 것이 있다면, 말씀해주세요. 채찍을 휘두르시면 글을 쓰도록 하겠습니다. 당근은… 워크샵이나 회식에 참여시켜주기 -_-;
[참고##프로토타이핑##]