Fit한 프로토타이핑 툴 찾기

서비스 초기부터 UX/UI 디자이너로 글램 서비스의 기획과 visual 디자인을 해 나가며 디자이너 - 개발자 간의커뮤니케이션 장벽을 낮춰 생산성를 높이기 위한 방안을 찾고 하나의 프로세스로 정착시킨 과정을 전하고자 한다.

2017년 말 글램은 생존을 위해 열심히 달리고 있었고, 디테일한 애니메이션 보다 오늘 접속한 유저 수, 기능 이용률, D+1 잔존율이 더 중요했다. 이에 맞춰 빠르게 기능을 기획, 디자인해 개발자에게 전달해 배포하는 것이 먼저였다. 꼭 필요한 기능만 담아 빠르게 유저에게 제품을 제공해야 하면서도, 사용성이 불편하거나 버그 등으로 기능 이용 자체를 불편하게 만들어서는 안 되기에 배포 전 의도한 디자인이 제대로 구현됐는지 꼼꼼히 리뷰하는 과정은 필수였다.

처음 디자인 문서를 전달할 때는 속도가 빠르다고 느꼈다. 하지만 개발 시작 후 디자인 단에서 수치상으로는 동일하지만 생각했던 것과 다른 모습, 의도대로 구현되지 않은 애니메이션, 예상하지 못했던 부가적인 상황들로 디자인을 수정하고, 다시 개발하는 수정의 루프가 무한 반복되었다. 이는 실제 프로덕트를 경험하며 디자인하지 않는 디자이너의 머릿속 상상에는 한계가 존재하고, 이 상황에서 최대한 문서로 구체화해 개발자에게 전달하는 과정에서 의도가 완벽히 전달되기 어려우며, 또 이를 구현하는 개발자 마다의 해석이 다르기 때문이다.

즉, 디자이너는 자신이 상상하는 기능을 직접 경험해보지 않고 그 기능의 경험을 완벽하게 디자인하기 어렵고 이를 다른 팀원에게 전달하거나 설득하는 것 역시 한계가 있다.

결국, 전체적인 속도는 느려졌다.

전달 속도를 빠르게 하기 위한 선택이 오히려 전체 생산성 저하를 불러온 것이다. 이는 제품의 프로토타입을 만들어 여러 번의 테스트를 통해 충분히 줄일 수 있는 이슈이다.

불과 몇 년 전까지만 해도(포토샵으로 디자인하던 시절) After Effect와 같은 모션 그래픽 툴로 트랜지션이나 애니메이션의 프로토타입을 제작하곤 했다. 이 방식은 툴에 대한 높은 숙련도가 필요하고, 시간도 오래 걸린다. 또한 UI용 프로토타이핑 툴이 아니어서 수치화해 전달하기 어렵다. 그리고 이렇게 힘들게 만든 결과물 역시 디테일한 부분을 정확히 잡을 수 없는 등 고통받는 환경이었다.(After Effect의 굴레를 경험한 1인) 근래 들어 좋은 프로토타입 툴이 많아졌다는 말을 하기 무색할 정도로 너무나 다양한 프로토타이핑 툴이 생겨났다. 조작 방식도 간편해 생각보다 빠르게 의도한 바를 구현할 수 있다. 다만 툴 마다 특징이 다르기 때문에 요새 어떤 툴이 잘 나가는지보다 나(Designer)와 우리 팀에 맞을지 잘 보고 판단하는 것이 좋다.

나는 글램의 프로덕트 규모, 팀 인원, 제작 프로세스를 파악하고, 툴에게 요구되는 필수 속성 몇 가지를 정해 적합한 툴을 선정하는 과정을 거쳤다.

 0.1 Growth time을 이용해 수 개월간 3개의 툴을 중점적으로 사용해 보았다.  *0.1 Growth time : 성장을 위해 주간 업무 시간의 10%를 독서, 강연 보기, 사이드 프로젝트 등에 할애할 수 있는 사내 정책

현 글램의 주요 페이지를 테스트로 만들며 요구하는 속성을 모두 충족하는지 중점으로 보았다. 실제 프로덕트의 디자인을 예시로 작업하니 툴의 강점과 약점을 파악하기 쉬웠다. 또한, 제작 시간 대비 아웃풋도 체크했는데,  시간이 많이 소요되어 프로토타이핑을 위한 프로토타이핑이 되는 것에 주의하기 위함이었다.  새로운 툴을 도입하면 실제 프로세스에 적용하기 위해 소통 방식과 기준을 변경해야 하고, 이에 적응하는 모든 이해 관계자의 리소스가 소모되기 때문이다. 따라서 ‘이거 괜찮은데?’라고 쉽게 판단해 적용할 수 없었다.

처음으로 사용한 툴은 Flinto였다

Flinto는 조작 방식은 적응하기 어려웠으나 (그 당시) 찾아본 툴 중 인터페이스가 가장 디자이너 친화적이라 생각했다. 또한 다양한 트랜지션을 디테일하게 커스터마이징 할 수 있는 등 자유도가 높았다. 확장성이 우수했고 완성된 화면을 동영상으로 추출할 수 있어 전달이 편리했다. 실제 글램 디자인에도 요긴하게 사용했다. 하지만 문제는 지속성이 낮다는 점이었다. 어느 순간부터 개발사의 업데이트가 뜸해지더니(1년간 단 한번의 업데이트) 버그만 넘쳐나고 기능 업데이트는 아예 되지 않는 상황에 도달했다(버그가 너무 잦은 나머지 버그 발생 패턴을 파악해 요리조리 피해 제작했다는 슬픈 후일담). 그뿐만 아니라 날이 갈수록 더 좋은 툴들도 우후죽순으로 생겨났기에 다른 새로운 툴을 찾아 나섰다  *Spec Check 범용성 ●●●○○  확장성 ●●○○○ 지속성 ●○○○○

두 번째는 Framer였다

Framer는 React Library를 사용하는 코드 기반 프로토타이핑 툴로, UI 컴포넌트와 애니메이션까지 모두 시스템화해 관리할 수 있는 장점이 있었다. 다만 React를 다룰 줄 알아야 한다는 (매우) 크나큰 조건이 있었다. 하지만 이 장벽을 넘고 나면 글램의 디자인 - 개발 모두 통일된 시스템 안에서 관리할 수 있어 그 효율성이 어마어마할 것이라 기대했다. html, css를 조금 다룰 줄 아는 게 전부였기에 강의를 통해 빠르게 익히기로 했다. 국내에는 마땅한 강의가 없어해외 Design + Code사의 React for Designer와 Framer X Course를 주 3~4시간 씩 4주간 학습했다.

툴은 가능성이 무궁무진했다. 다만 러닝 커브가 (높아도) 너무 높았다. 다른 툴을 활용하면 10분 정도 소요되는 기본 트랜지션을 제작하는데 Framer로 3시간 이상이 걸렸다(물론 나의 숙련도가 낮은 이유도 있다). 뿐만 아니라 글램에서는 리액트 라이브러리를 실제 개발에서 사용하지 않기에 전달 시 의사소통에 효율적인 부분은 분명 있지만, 디자이너가 코드 작성에 들이는 리소스 대비 활용도는 없다고 판단했다. React Library를 적극적으로 사용하는 기업이라면 활용도가 높을 것으로 예상된다.(전사적으로 활발히 사용하고 있는 Airbnb를 예로 들 수 있다) *Spec Check 범용성 ●●●○○  확장성 ●●●●● 지속성 ●●●●○

세번째이자 나의 종착지가 된 툴은 바로 Protopie다.

Protopie는 디자이너 커뮤니티에서 사용하기 좋은 툴이라 입소문이 나기도 했고, 매우 다양한 기능(실제 지도 삽입, 진동 작동, 두 기기 간 상호작용 조작 가능 등)을 제공해 여러 번 이슈된 바 있어 이미 인지는 하고 있던 터였다. 다만 국내 스타트업 제품이라는 점에 지속 가능성에 대한 불안감이 있었고(이전의 슬픈 기억으로) 애니메이션 보다 디바이스 기능 조작에 특화된 툴이라 생각해 큰 관심을 두지 않았었다. 우연한 지인 디자이너의 사용 후기 및 찬양을 통해 생각했던 점과 다르게 기본 기능을 잘 갖춘 툴임을 알게 되었고, 다시 한 번 마음을 다잡고 도전해보았다.

결과는 대만족이었다.

범용성, 확장성, 지속성은 초과 수준으로 충족할 뿐만 아니라 기대 이상의 기능들을 제공했으며 UX까지 좋은 툴이었다. 각 기능의 용어 선정부터 조작 방식까지 어떻게 하면 디자이너가 자유롭게 머릿속 상상을 시각화하면서도 쉽게 작업하게 할 것인지 깊이 고민했음이 느껴졌다. 디바이스에서 할 수 있는 모든 기능을 탄탄히 갖춰 놓았을 뿐만 아니라, 난이도를 조금 더 올리면변수 활용까지 할 수 있어 표현에 제약이 없었다. 또한 결과물을 디바이스나 웹으로 공유해 바로 조작해볼 수 있어 다른 팀원들에게 전달하기도, 무척 쉬웠다. 무엇 보다도 개발사의 활발한 업데이트와 날이 갈수록 높아지는 프로그램 안정성, 강력해지는 기능들 역시  여러모로 만족스러웠다.

Spec Check 범용성 ●●●●●  확장성 ●●●●● 지속성 ●●●●○

마침내 Protopie에 정착해 6개월이 지난 지금까지 팀 내에서 매우 적극적으로, 만족스럽게 사용하고 있다. 우선 정지된 화면에서 작업할 때처럼 일면적인 상황에 갇혀 생각하지 않게 되었으며, 플로우를 직접 경험하며 디자인하며 그 과정에서 더 간단하고 효율적인 표현 방식을 찾아낼 수 있었고, 예측하지 못했던 이슈를 빠르게 발견할 수 있었다. 또한, 커뮤니케이션 리소스도 확연히 줄어 팀의 전체적인 생산성이 이전 대비 20% 이상 증가했다고 체감한다.

최초는 프로토타입을 통해 애니메이션을 확인하기 위한 목적으로 시작했지만, 결과적으로 훨씬 많은 것을 얻을 수 있는 과정이었다. 사실 스타트업의 바쁜 일정에서 시간을 들여 새로운 것을 살펴보고 적용을 제안하는 것은 쉽지 않다. 실패 가능성, 이전 프로세스에 대한 관성 등에 막상 모두를 설득하기도 어려울 수 있다. 자기 성장을 위해 시간을 할애할 수 있는 문화 덕에 눈치보지 않고 새로운 것에 대해 충분히 탐구할 수 있었으며, 지속적으로 집요하게 분석한 결과로 확신을 갖고 제안할 수 있었다 생각한다. 마지막으로, 그로스 여정을 응원해주고 관심과 피드백을 준 팀원들께 감사하다.

무언가의 이유로 시작 조차 주저되는 도전이 있다면 너무 급하게 결과물을 내려 하지 말고, 조금씩, 집요하게 해 보는 것을 추천한다.