전통적인 UI디자인 조직에서 프레이머를 조금씩 적용해본 이야기
이 글은 2015년 8월 29일 열린 Prototyping Meetup Korea 에서 발표했던 내용을 문서로 다시 편집했습니다.
어느날 돌아보니, 회사에서 업무로 프레이머를 상당히 깊숙하게 사용하고 있었다. 이 글을 읽는 사람들이라면 기본적으로 프로토타이핑에 관심이 많을텐데, 우리 회사에서 이걸 어떻게 쓸 수 있을까? 라는 아주 현실적인 질문에 조금이나마 도움이 되고 싶었다. 어떻게 처음 쓰게 되었는지, 그 이후 어떤식으로 회사 내에서 업무가 흘러가는지 등을 실제 케이스와 함께 담아봤다.
UI디자이너는 바쁘다. 작은 아이콘 하나를 하루 종일 그리다가 어느 날에는 서비스 전체 플로우를 급하게 쳐내기도 하고, 디자인 검수를 하면서 동시에 새로운 서비스 제안을 해야 하기도 한다.
그 와중에도, 종종 트랜지션 관련한 디자인을 잡을 때는 계속 마음 한구석이 찜찜했던 적이 많았는데, 아래 이미지를 보면 금방 이해가 될 것이다.
메뉴가 슬라이딩 되어 나오는 모션을 설명하기 위해 ‘움직이는것 처럼 보이는 가짜 이미지’ 를 만들어야 하는 상황. 이해를 돕기 위해 쉬운 인터랙션을 가져오긴 했지만, 사실 디테일하게 저 인터랙션을 설명하기란 쉬운 일이 아니다.
뭔가 민망하다. 말로 전달하려니 끝이 없다. ‘빠르다’가 대체 얼마나 빠르다는 수준일지 아무런 기준이 없다. 개발자는 보통 명확한 것을 요구하기 때문에 레퍼런스를 뒤지기 시작한다. 헌데 이게 또 시간이 한없이 들어간다. 내가 원하는 바로 그 인터랙션을 찾기는 쉽지 않더라.
그래서 이렇게 레퍼런스 찾는데 시간을 허비할 바에야, 차라리 내가 만드는게 낫겠다는 마음으로 여기까지 오게 된 것 같다. 이런 저런 프로토타이핑 툴들을 비교하다가 현재는 프레이머에 정착했다. 몇번의 삽질을 거치다 보니 이제는 조금 속도가 붙어서, 간단한 것들은 포토샵만큼 수월하게 만들 수 있게 됐다.
실제로 실무에 적용했던 프로젝트를 간단하게 돌아보며 좀더 구체적으로 살펴보기로 하자.
1. LINE PROMOTION BANNER
미션은 아주 간단했다. 라인 앱에 프로모션 배너를 추가 (이미지에서 상단 녹색 배경 영역 ). 그런데 간단한 그 스펙이 수 개월째 의사결정이 안나고 있던 상황이었다. 그때 팀장님이 이런 주문을 했다.
정영, 이거 플래시로 좀 잡아줄 수 있어? 아무래도 인터랙션을 실제로 확인해봐야 의사결정이 될 것 같다
팀장님, 플래시 말고 프레이머라고 괜찮은 게 있더라구요 (반짝)
어쨌든 중요한 건 조직 내에 이미 ‘인터랙션 테스트' 에 대한 니즈가 있었고, 플래시 및 PPT의 기능들을 활용하여 이 대신 잇몸으로 해결해 왔다는 것. 때는 이때다 하는 마음으로 다양한 테스트를 진행해 봤다.
최초로 프로토타입을 보고했던 날 반응이 뜨거웠다. 벌써 개발이 다 된거냐, 뭘로 만들었냐, 디자이너도 배울 수 있냐는 질문을 많이 받았다. 솔직히 작업자도 인간인지라 칭찬해주면 더 많이 해보게 된다. 이 작업을 시작으로 여러 가지 안을 진행하다 결국 안정적인 안으로 최종 결정됐고, 오랜 시간 끌어오던 프로젝트도 아름답게 마무리 될 수 있었다.
2. LINE STICKERS
두번째 프로젝트는 이전 미디엄 글에서 잠깐 소개했던 바로 그 라인 스티커즈. 담당 메인 디자이너기도 했고, 라인 프로모션 배너에서의 경험을 바탕으로 프레이머를 본격적으로 써보기로 했다.
미션은 ‘가볍고 Fun하게’ 였는데 최종 정리된 UI디자인에서는 그런 느낌이 덜했다. 서비스 컨셉 자체도 생소한데, 이렇게 포인트가 없어서는 힘들겠다는 생각에 아이데이션을 좀 해서, 컨셉을 전달할 수 있는 뭔가를 만들어보기로 했다.
리프레시 애니메이션에 태그를 모티브로 한 모션을 제안해봤다. 반응은 좋았지만 역시나 일정이 발목을 잡던 상황. 핵심 피쳐가 아니면 다음에 하는게 어떻겠냐는 개발PM의 피드백이 있었다. 그런데 상황이 재미있게 흘러갔다.
개발자가 프로토타입을 보고 먼저 만들어 본 것. 데모를 살펴본 결과 예상보다 빠른 시간에 구현이 가능했고, 퀄리티가 나쁘지 않아 빌드에 포함되는 걸로 결정됐다. 이 시점이 약간 의미심장했던게, 과연 디자인 스틸컷을 공유했다면 이 개발자가 스스로 움직였을까?
라인스티커즈의 두번째 꼭지. 튜토리얼 애니메이션은 일정 산정시 애초에 공수를 별도로 산정했었다. 앞에서도 이야기 했지만, 스티커 + 태그 라는 생소한 컨셉을 앱 최초 실행시에 매력적이고 재미있는 방식으로 푸는 것이 필요하다는 공감대가 있었다.
당시 유행하던 페이지와 페이지 간의 연결을 유기적으로 하는 방향도 테스트해보고, 다양한 시도를 해봤다. 디자인 뿐만 아니라 개발쪽도 리소스가 상당히 들어갔는데, 이 모든건 일정에 대해 프로젝트 초반에 확실하게 하고 들어갔기 때문에 가능한 일이었다. 최종 타입이 결정된 이후에는 전담 개발자 한 분과 타이트하게 붙어서 작업했고, 프레이머 프로토타입을 계속 보면서 실제 개발에 참고하시는 걸 확인할 수 있었다.
힘들었던 점은, 프로토타입 가이드가 있어도 디테일한 수치 가이드는 또 재작업했어야만 했던 현실. 디테일 가이드를 작업하며 뭔가 작업을 두 벌 하고 있다는 기분을 지울수 없었다. 그래도 인터랙션 가이드 덕분에 많은 부분을 생략한 가이드를 전달할 수 있었다.
가장 애착이 갔던 프로젝트인데 사업적인 이슈로 서비스가 예상보다 빨리 종료되어 그만큼 아쉬움도 크게 남았다. 인터랙션 구현에만 너무 집중해서 보다 큰 그림을 놓친 건 아닌지 개인적으로 뒤돌아보게 되기도 하고. 여러모로 의미가 컸던 프로젝트.
3. Letter
마지막 소개할 프로젝트는, 라인과는 살짝 별개로 개인 작업처럼 진행했던 Letter. 실제 구현될 서비스는 아니지만 개발 빌드만큼의 프로토타이핑을 목표로 해봤다. 스티커즈를 통해서 프레이머가 손에 조금 익게 되니 어디까지 가능한지가 궁금했다.
그리하여 디자인 2일, 나머지 일주일은 모두 프로타이핑의 일정 배분을 하고 ( 개인 작업이기에 가능한 일정이라고 생각 ) 코딩에 매진해 보았다. 코드가 길어질수록 점점 스파게티가 되어가고… 머리를 쥐어뜯는 나날을 보냈다.
일주일정도 코드를 잡아보니, 왠만한 인터랙션과 플로우는 대부분 구현 가능하다는 걸 알게됐다. 시간을 많이 들인다면 앱 하나를 통째로 만드는 수준까지도 가능할것 같았다. 인풋박스, 시스템 키보드를 사용하는 타이핑도 쉽게 구현되고, 입력한 데이터를 프로토타입 안에서 변수로 전달이 가능했다. 피델리티를 얼마나 가져갈건지 디자이너가 선택할 수 있는 수준이었다.
여기에서 좀 더 나아가면 네이티브 개발 언어로 넘어가느냐 마느냐의 고민도 한다고 하는데…그건 나에게는 아직 먼 얘기라 아직 실감이 잘 나진 않는다. 어쨌든 긴 플로우의 인터랙션을 주변 동료들에게 보여주니 예전 대비 큰 관심을 보였고, 진지하게 배워보겠다는 사람들이 나타났다.
그렇게 자연스럽게 스터디가 시작됐다. 각자 본인 UI업무에 적용하는것을 목표로, 이 글을 쓰고 있는 지금까지 계속 매주 스터디가 진행되고 있다. 코딩이 완전히 처음임에도 불구하고 두려움 없이 뛰어들어 주셨고, 이제 웬만한 수준의 인터랙션은 직접 짜실 수 있는 수준이 됐다. 마침 네이버에서도 스터디모임이 있다는 것을 알게되어, 종종 교류도 하고 재미있게 지내고 있는 요즘이다. 비슷한 성향의 사람들이라 쉽게 친해졌다.
다른 프로토타이핑 툴에 비해 프레이머의 단점은, 코딩의 양이 많다는 점인데, 오히려 그 점이 바로 강점이라고 생각한다. 당신이 코딩을 배우고 싶은 디자이너라면, 프레이머가 가장 재미있고 쉽다. 코딩을 배운다고 나의 연봉이 올라가진 않겠지만, 세상을 이해하는 또 다른 관점을 가진다고 생각하면 그리 손해보는 일은 아니다.
가끔 회의시간에 개발자 옆에서 프레이머를 보여주면, 반짝거리는 눈빛으로 그건 뭐냐고 물어보며, 갑자기 엄청 친해질 수 있는건 덤.
쓰다보니 예상보다 말이 엄청 길어졌다. 발표를 글로 옮기자니 생략한 부분도 많고, 흐름이 어색한 부분도 많은것 같다.
프레이머를 만든 Koen Bok이 했던 멋있는 말로 적당히 끝맺는게 좋을 것 같다. 지금은 이 영역을 ‘인터랙션 디자인' 이라고 부르지만, 나중에는 그냥 ‘디자인' 이라고 부르게 될 거라고. 경계가 넓어지고 영역이 확장되는 걸 두려워하지 말고 적극적으로 같이 올라 타면 그게 더 즐거운 디자인 활동이 아닐까 싶다.
긴 글 읽어주셔서 감사합니다.
