한 달 반 동안 Protopie를 써보았다
툴이 바뀌면 생각이 바뀌고 생각이 바뀌면 산출물이 바뀐다
얼마 전, Protopie 런칭행사에 갔다가 그 철학에 감탄하고 바로 Protopie를 실무에 적용, 그 시간이 3주가 지났다. 이 툴의 특장점은 만두님께서 잘 정리해주신 글로 대신하고, Invisionapp대신 Protopie를 사용하면서 느꼈던 점을 정리하는 시간을 가져보려고 한다.
라고 했던 게 벌써 한 달 반이 지났다. 이제 진짜 써서 발행해야지.
미장센과 몽타주
영화와 관련된 용어 중에 미장센과 몽타주가 있다 간략하게 이야기하면 미장센(mise-en-scéne)이라는 것은 제한된 화면 안에 표현된 상징들로 연출자의 의미를 관객에게 전달하는 것이고 몽타주(montage)는 컷과 컷의 결합을 통해 연출자의 의미를 관객에게 전달하는 기법이다.
예를 들어 영화 곡성 중 아쿠마 아저씨(이름을 모르겠습니다;;) 집의 소품들에 대한 해석은 감독의 미장센을 이해하는 것과 같고 곡성에서 살을 날리는 장면과 아쿠마 아저씨가 괴로워하는 것을 교차 편집하여 관객들로 하여금 살을 맞는 자가 아쿠마 아저씨라고 인식하게 한 것은 몽타주 기법이라고 할 수 있다.
이렇게 장면들과 각 소품들이 연출자의 '의도'를 상징한다. 어쩌면 UI 설계와 비슷한 구석이 많은 듯하다
한 달 동안 프로토파이 써본 소감 쓴다면서 갑자기 영화 기법이 먼저 튀어나온 이유는 프로토타입 툴을 인비전에서 프로토파이로 변경한 후 나의 작업 방식에서 많은 것이 변했기 때문이다. 바야흐로 몽타주의 시대가 왔다! (두둥)
그동안 Hi-Fi 프로토타이핑 툴을 외면해왔던 이유
나는 인터랙션 디자이너도 아니고 B2B UX를 하는 사람으로서, Hi-Fi 프로토타이핑 툴에 대한 욕구가 그리 크지 않았다. (B2B 시스템에서 인터랙션의 풍부함이란 보통 사치에 가깝다.) 그리고 개발자와 항상 붙어서 한 팀으로 일하는 우리 팀 특성상, 툴 배워서 사용할 시간에 개발자들이 만들어주는 게 훨씬 효율적이었다.
또한 Invisionapp을 대체하기 위해 여러 가지 툴을 시도해봤었지만 그럼에도 쉽사리 다른 툴로 변경하기 쉽지 않았던 이유는 인터랙션의 화려함(?)만 포기하면 Invisionapp만큼 빠르게 배울 수 있고 만들 수 있는 툴이 없었기 때문이었다.
Object > Trigger > Reponse의 심플함
그러나 Protopie는 정말 빠르게 배울 수 있다. 약 한 시간 정도 사용하다 보면 동작하는 원리를 이해할 수 있다. IFTTT 같은 인터랙션 생성 규칙은 코드를 전혀 모르는 사람도 쉽게 프로토타입을 만들 수 있게 해준다. 컨셉은 상단 글 링크에 아주 자세히, 또 재미있게 써져있으니 반드시 읽어보길 권한다. 또한 Sender와 Receiver로 구분하여 인터랙티브한 프로토타입을 만들 수 있는 것은 이전까지는 시도해볼 수 없던 좋은 기능이다. 다양한 스마트폰의 센서를 이용할 수 있는 것은 덤. Protopie의 장단점은 이미 많은 분들께서 정리해주셨으니 이 정도로 각설하고.
내 업무방식이 어떻게 바뀌었나
실제로 만들어질 제품을 미리 확인한다
Invisionapp은 극단적으로 빠른 속도와 심플한 사용성으로 화면을 찍어내는 데에는 최적화되어있지만 개발자가 실제 구현을 마치기 전까지 이 UI가 동작할 때의 느낌은 디자이너의 상상에 의존할 수밖에 없다. 또 디자이너도 본인이 만든 Flow에 확신 없이 개발자에게 넘기게 된다. 결국 90% 이상의 확률로 디자이너의 상상과는 다른 인터랙션이 만들어지고 재작업 소요가 발생한다. 그렇기에 디자이너가 만들어질 제품을 미리 확인할 수 있다는 것은 팀의 낭비를 제거하고 속도를 유지하는데 아주 중요한 요소라고 할 수 있다.
개발자들과의 커뮤니케이션이 효율화된다
그래서 지금 만들고 있는 제품은 Zeplin으로 뽑아주기 전에 먼저 Protopie로 '이렇게 만들어질 거야'라고 개발자들에게 보여주었다. 더 이상 개발자들에게 '여기서는 슝 날아가고요, 이거는 팔랑거리면서 펼쳐져요'라는 의태어를 쓰지 않아도 되었다. '이 오브젝트는 0.3초 동안 ease-out으로 x: 270, y:340으로 이동합니다.'라고 정확하게 표현할 수 있었기 때문에 개발자-디자이너 간의 반복적인 커뮤니케이션이 줄어듬으로써, Invision 대비 작업 속도가 느린 것이 상쇄되고도 남는 느낌이었다. (이것은 어느 정도 스프린트가 진행되면 측정된 Dev velocity로 비교할 수 있을 것 같다.)
더욱 실제와 같은 User Test를 수행할 수 있다.
이전에는 Invisionapp으로 만든 프로토타입으로 User Test를 수행하였었는데 가끔 표현할 수 없는 인터랙션을 구구절절하게 '여기서는 이렇게 될 거고요 아직 완전한 제품이 아니기 때문에..;;'라고 설명하는 게 참 모양 빠진 다고 생각했었다. 또한 엄밀하게 User Test보다는 Design review에 가까운 형태였다. 하지만 Protopie로 프로토타이핑 툴을 변경한 후로 그 걱정은 조금 줄어들었다. 사진 찍기, 텍스트 입력 같은 기능이 필요 없다면 거의 실제 제품과 다름없는 프로토타입을 만들 수 있기에 더욱 정밀한 User Test가 가능하다.
결론
윗글에도 잘 나와있듯이 움직임은 우리에게 많은 시각적 단서를 준다. 그 움직임을 통해 다음 행동을 예측할 수 있고 굳이 구구절절하게 쓰지 않아도 어떤 상태인지 가늠할 수 있게 해준다.
또한 움직임과 움직임의 만남은 우리에게 어떤 감성을 불러일으키게 한다. 다시 말해, 이전까지의 디자이너는 제한된 화면 내에 오브젝트들을 배치하는 '미장센'에 많은 노력을 기울였다면 이제는 각종 프로토타입 툴의 발달로 그 많은 오브젝트들이 만들어 내는 감성, '몽타주'도 디자이너들이 직접 테스트해보고 가다듬을 수 있게 된 것이다.
가능한 것이 더 많아졌기에 할 일과 더불어 책임까지 무거워진 느낌이다. 하지만 이전 디자인 작업 과정에서 느꼈던 갑갑함과 지루한 반복 작업을 어느 정도 줄여줄 수 있는 툴이 나왔다는 것이 개인적으로는 참 반갑다.
생각이 바뀌면 행동이 바뀌고
행동이 바뀌면 습관이 바뀌고
습관이 바뀌면 운명이 바뀐다
디자이너의 생각을 바꾸는데 가장 좋은 방법은 쓰는 도구를 바꿔보는 것이라고 생각한다. 아직까지 Low fidelity 프로토타입 툴만 쓰고 있는 UI 디자이너라면 반드시 Protopie가 아니더라도 이번 기회에 Hi-Fi 프로토타이핑 툴로 바꿔보는 것을 강력하게 추천한다.
다만 Protopie는 정말 쉽게 배울 수 있고, 빠르게 만들 수 있는 툴이며, 아직까지 무료다.
