모바일 시대의 프로토타입
티몬의 프로토타입 디자인 프로세스
프로토타입은 본래 제조업 생산에서 되돌리기 힘든 설계의 Risk를 줄이기 위해 고안된 디자인 방법론 입니다.
가장 대표적인 예가 ‘자동차’ 인데요, 모두가 ‘민첩함’을 부르짖는 이 시대에 구시대적인 프로토타입 디자인 방법론은 어떠한 역할을 할까요?
티몬에서 활용하는 프로토타이핑에 관한 이야기를 실제 사례를 통해 들려드립니다.
도구
티몬의 크리에이티브센터에서는 invision과 framer를 사용하고 있습니다.
일반적으로 알려져 있는 용도와 같이
프로젝트 초기에 전반적인 서비스 흐름을 파악하기 위해, -> invision
실제 앱(native)과 근접한 인터랙션을 구현한 시제품(mockup)으로써 활용하기 위해 -> framer
를 각각 사용하고 있습니다.
이번 글에서는 '티몬 앱 v4.1.0 디자인 제작 후기'라는 이전 글에서도 언급되었던 framer를 사용한 프로토타입에 대해서 이야기 합니다.
왜? framer
framer를 선택한 가장 큰 이유는 '원하는 걸 원하는 대로 해볼 수 있는' 툴이라는 판단에서 입니다.
코드(code : coffeescript)를 다뤄야 하므로 진입 장벽이 있는 것은 사실이지만, 일단 그 벽을 넘어 툴이 손에 익고 나면 웹에서 할 수 있는 대부분을 활용할 수 있습니다.
코드 기반 프로토타이핑 - framer이 '할 수 있는 대부분'에는 데이터에 기반한 디자인(Data Driven Design : '오빠가 알려줄게 데이터와 데이트, 연결고리'라는 글에서 언급) 연구를 프로토타입에 적용해 보는 부분도 포함하는데요. framer로 만든 프로토타입이 웹에 기반하다 보니 데이터(JSON, API, Firebase 등)를 활용한 뷰의 구성이나, 분석 툴(Google Analytics, Hotjar 등)을 활용한 트래킹이 일정 수준 가능합니다.
맘에 드는 도구를 손에 넣고 나니, 만들고 싶어 졌습니다!!
달리는 컨셉카
티몬 앱 v4.1.0 프로젝트에서 프로토타입 제작을 논의할 때 나왔던 말입니다.
'컨셉카를 달리게 한다?'
컨셉카에 처음으로 올라 타 운전을 한다는 상상, 실제 한다면 놀라운 경험이겠죠.
마찬가지로 그래픽 디자인의 결과물이 디바이스에서 나의 손가락 끝의 움직임을 따라 반응하는 것은 나름 신나는 경험입니다.
그리고, 이는 단순히 신나는 경험을 넘어, UI 디자인 내면에 자리한 구조 설계에 대한 이해를 높인 상태로 협업을 가능하게 사용자 경험(UX)에 대한 '첫 사용자'로서의 검증을 하게 합니다.
이것은 최종 결과물을 만나는 시기를 앞당기게 된다는 점에서 무엇보다 중요한 의미를 가집니다.
시공간을 왜곡하여 미래의 출시 시점을 끌어다 놓는 것 같아요.
이 건 마 치 I N T E R S T E L L A R 같 은 거 죠
관여 디자인
최종 결과물을 만나는 시기를 앞당겨 좀 더 빨리 만나게 되면 두가지 일이 일어납니다.
인터스텔라의 책장 씬 촬영 장면첫째, 의사 결정이 빨라 집니다.
"엘레강스하게 우아한 쉐입에 어둠의 다크니스와 같은 컬러는 어떨까요?" 와 같은 디렉션과 작업과 피드백... 이 모든것을 명쾌하게 만들어 줍니다. 결과적으로는 '좋은것'을 만들고자 하는 의사결정속도를 프로토타입 적용 이전보다 훨씬 빠르게 만들어 주어서, 이해관계자, 핵심의사결정권자, 디자이너, 개발자 모두 자신이 판단하고자 하는것을 가장 빠르게 판단할 수 있게 됩니다.
둘째, 대화가 엄청나게 많아 집니다.
본질에 집중해서 토론하게 됩니다. 우리는 개발이나 디자인 행위를 하며, 회의의 형식, 이메일의 문법, 직급, 직무 이런것들의 화학작용 때문에 본질에 집중하지 못하는 회의를 하거나, 참석자 모두 침묵으로 일관하며 높으신분 혼자 떠들석하게 떠드는 회의자리를 자주 경험하게 됩니다. 하지만 고품질의 프로토타이핑을 통해 확실하게 판단이 가능한, 99%서비스에 가까운것을 눈으로 확인하며 만지면서 그 서비스에 대한 적극적인 이야기를 나눌 수 있게 되기 때문에 굉장히 건강한 토론이 시작됩니다.
본디 '예측'은 힘들죠. 전문가라고 한들 다르지 않을 겁니다.
그래서 조용히 있다가 개발이 거의 끝나갈 무렵에서야 피드백이 많아지는 것은 어찌 보면 당연한 일입니다.
프로토타입은 손안에 결과물을 빨리 쥐게 하고, 이를 통해 프로젝트에 관련된 이해관계자(stakeholder)가 좀 더 빠르게 피드백을 하게 하여 프로젝트가 좀 더 기민(agile)하도록 합니다.
또, '우려'와 '걱정'으로 좋은 아이디어가 조용히 사라지기도 하죠. 아무것도 해보지 못한채로 말이죠.
새로운 시도를 하려면 기존의 틀을 뒤틀게 되는 경우가 많은데, 이럴 때 우려섞인 피드백이 많아지는 것도 또한 당연한 일일 것입니다. 보이지 않는 존재는 늘 두려움을 자아내는 법이니까요.
프로토타입은 눈에 보이고 실행 가능하게 하여, 좀 더 만만한 존재로 해볼만 하다는 자신감을 갖도록 합니다.
이런 프로토타입의 효과에 대해 '관여 디자인'이라는 말로 설명을 할 수 있을 것 같습니다.
관여 디자인(Intervention Design)이란, 목표로 하는 결과물의 디자인뿐만 아니라 그 결과물을 만들어가는 과정 자체도 하나의 디자인의 대상으로 바라보는 개념으로, 디자인씽킹(Design Thinking)을 말했던 두 분이 하버드 비즈니스 리뷰(HBR) 15년 9월호의 'Design for action'이라는 이슈에서 제시했습니다.
이렇게, 티몬에서의 프로토타입은 '관여'를 디자인하는 또 하나의 방법으로 자리하고 있습니다.
티몬의 크리에이티브센터는 결과를 만들어가는 이러한 일련의 과정까지도 디자인의 영역으로 보고 있고,
프로토타입 역시 그러한 관점에서 어울리도록 사용하려고 하고 있습니다.
하지만, 프로토타입은 어디까지나 하나의 방법론일 뿐이죠.
그 모든 근원은 '문제 해결'이라는 아주 단순한 것입니다.
글의 마감을 지으려는 줄에 다다르니, 처음 프로토타입에 대한 의논을 할 때 나누었던 센터장님의 요청이 생각납니다.
실제 앱처럼 사용해볼 수 있는 걸
빠르게!! 만들어 주세요.
라는...^^;;
