프로토타입(Prototype) 디자인하기 in 스타트업
Product 프로토타입은 어떤 툴로 어떤 방식으로 개발해야 할까?
디자인, 프로토타입에 대해 궁금증을 가지고 있다면
이미 프로젝트나 스타트업에서 어느 정도 제품 개발에 대한 방향성을 고민하고 있거나
뭔가를 해보고 싶어서 가시화를 시켜보고 싶다는 의지가 있는 상황이라고 생각된다.
그전에 독자분들은 이런 질문을 자문해 볼 필요가 있다.
프로토타입에 대해 얼마큼 알고 있는가??
프로토타입이 얼마나 중요하다고 생각하는가??
필자도 아이디어를 내고 피칭 자료를 만드는 데 있어서 프로토타입의 중요성에 대해 잘 몰랐다.
하지만 이제는 프로토타입 없이 피칭 자료를 만드는 건 말이 안 된다고 생각할 정도로 역할의 중요성을 깨닫고 있다.
프로토타입은 서비스를 출시할 때 있어서 필수적 요소이다.
디자인 프로세스 과정에서 가장 중요한 단계라고 할 수 있을 만큼 핵심 요소이다.
건물을 지을 때도 설계도를 바탕으로 건물을 짓고,
제품을 만들 때도 도안을 바탕으로 제작에 들어가는 것처럼
서비스를 개발하는 과정에서 앱이나 웹을 개발하려면 반드시 그 설계도가 필요하다.
프로토타입이 그 설계도에 해당된다.
프로토타입(Prototype) = 설계도, 청사진
그리고 설계도가 확실하게 구축되어 있지 않는 상태에서
맨땅에 헤딩하듯이 부딪히게 되면 시행착오를 많이 겪을 수밖에 없다.
따라서 오늘 그 프로토타입에 대해서 제 경험에 비추어 설명을 해볼까 한다.
프로토타입이란??
프로토타입은
론칭 전에 테스트하기 위해 사용되는 최종 제품의 시뮬레이션 또는 샘플 버전이다.
이를 만드는 목적은 최종 제품에 많은 돈과 시간을 쏟아붓기 전에 제품 또는 아이디어를 테스트하는 것이다.
프로토타이핑은 사용성 이슈를 해결하는데 매우 필수적이다. 그리고 개선이 필요한 부분을 밝혀 주기도 한다. 독자분들의 제품 아이디어의 초안이 실제 유저의 손안에 들어가는 순간, 그들이 그 제품을 사용하길 원하는지 마침내 알 수 있게 된다. 그 후에 다시 돌아가서 처음에 추측했던 것을 조정하면 쉽게 작업을 진행할 수 있다.
프로토타이핑의 역할
- 처음에 프로토타이핑을 하면 효과적으로 아이디어를 시연하고 공유하며 도움을 줄 수 있기 때문에
생각을 하고 기획만 하는 것은 머릿속에만 또는 자료에만 머물러 있을 수밖에 없다.
그 자료를 웹이나 앱으로 구현해내기 위해서는 반드시 프로토타입이 필요하다.
그 과정에서 아이디어를 시연해내고, 소비자에게 어떻게 전달되는지, 어떤 기능이 필요한지에 대해 끊임없이 고민하게 되고, 큰 도움이 된다.
'백문이 불여일견'인 것처럼 백날 얘기하는 것보다 직접 서비스를 보여주는 게 효과적이기 때문에 필자가 작업했던 프로토타입을 보면 다음과 같다.
이건 필자가 2번째로 만들어 본 프로토타입의 첫 페이지이다.
여행정보를 공유하는 플랫폼을 만들겠다고 단순히 얘기하는 것보다는 이렇게 보여주는 것이 아이디어를 구체화시킬 때 도움이 되고 제삼자에게 공유할 때도 효과적인 것이 프로토타입이다.
- 빠른 테스트와 의사결정을 위해
서비스를 출시하는 과정에서 시행착오를 겪는 것은 당연한 일이다.
이때 프로토타이핑을 통해 아이디어를 구현하고 베타 버전을 구현해내야 한다.
그리고 그 베타 버전을 이용해 시장조사를 하면서 테스트를 하게 된다.
이를 통해 소비자의 의견을 취합하여 새로운 도출점을 찾을 수 있고, 이를 바탕으로 다시 피봇팅 하는 과정을 무수히 반복해야 한다.
실제로 소비자가 이용하게끔 테스트 버전을 만들어놓고 데이터를 구축하면서
향후 더 나은 방향으로 가기 위한 단계로써 중요한 역할을 해주는 게 또 프로토타입이 아닐까 생각된다.
- 디자인 과정의 도구로서 아이디어를 발전시키는데 도움이 된다
프로토타이핑을 하게 되면 단순히 생각했던 아이디어를 머릿속에서 끄집어내어 세상 밖으로 탄생시키는 과정이다 보니 어디서부터 어떻게 해야 할지를 모르는 게 다반사이다.
또한, 서비스를 실제로 유저들이 사용한다고 생각하면 소비자로 하여금 가장 편한 UI를 고려하게 되고 유저가 진짜 이 기능을 필요로 할까??라는 자문을 하게 되는 등 많은 고민을 하게 될 것이다.
그 과정에서 아이디어 발전에 정말 큰 도움이 된다고 생각한다.
필자도 실제로 그 과정을 겪으면서 많이 느꼈는데 이 부분이야 말로 생각보다는 행동으로 부딪히는 게 정답이라고 확신한다.
따라서 독자 여러분도 꼭 행동으로 옮겨보기를 권장한다.
하다 보면 자연스럽게 느껴지지 않을까 그리고 그 실력이 일취월장해지지 않을까 생각한다.
나와 맞는 프로토타이핑 툴을 정하려면??
프로토타이핑 툴은 정말 다양하다.
필자가 아는 툴만 해도 5개는 넘는다.
그 툴 중에서 어떤 것을 어떻게 효율적으로 사용해야 효과적으로 프로토타입을 만들 수 있을까??
이렇게 디자인 툴은 정말 많고, 현재도 계속 개발되어 프로그램이 나오는 중이다.
이 중에서 정말 간단한 기능만 구현할 수 있는 툴이 있고,
자유도가 높고, 변수까지 적용 가능한 툴이 있다.
디자인 스튜디오 쿠퍼(Cooper)의 분석 툴그런데 이 자료만으로 저 수많은 툴들 중 내 프로젝트에 맞는 툴을 선택하기는 쉽지 않다. 디자이너 Taylor Palmer는 ‘Traversing the UX Prototyping Landscape’라는 포스팅에서 수많은 프로토타이핑 툴들을 ‘얼마나 개발 친화적인가?’라는 축으로 분류했는데 이를 정리하면 다음과 같다.
Taylor Palmer의 프로토타이핑 툴 분류이렇게 목적에 따라, 구현하고자 하는 수준에 따라 어느 툴을 사용할 것인지 선택하게 된다.
하나의 툴을 선택하여 프로토타이핑을 하기도 하지만
필자의 친구 중 디자인을 잘하는 친구의 방법을 빌리자면
그 친구는 총 3개의 툴을 사용하여 프로토타이핑을 제작한다고 한다.
-> 간단한 틀 잡는 용도
-> 심화되고, 자연스럽게 구현을 하기 위해
-> 변수 지정 등 다양한 기능을 추가하기 위해
그래서 필자와 친구들이 사용하는 툴을 간략히 설명해보려 한다.
Paper Prototyping
이것은 디자인 툴을 다룰 줄 모르지만 빠르게 만들기에 좋은 방법이라고 생각된다.
빠르게 표현하기에는 좋은 방법이지만 툴을 배워서 직접 만드는 것은 추천한다.
어쨌든 빠르게 대강이라도 틀을 잡고 싶다면 이 방법을 선택해보는 것도 하나의 방법이다.
하지 않는 것에 비하면 확실히 차이를 많이 느낄 수 있다.
필자도 가장 처음 프로토타입을 만든 방법이 이 방법이었다.
어떻게 할지 몰라 그냥 따라 그렸던 기억밖에 없는 것 같고, 수준이 떨어진다고 생각했지만 분명 그 경계에는 차이가 있었다.
AdobeXD
필자의 친구는 총 3가지 툴을 이용해 작업을 하고 있다.
( AdobeXD ) -> 간단한 틀 잡는 용도
( Invision ) -> 심화되고, 자연스럽게 구현을 하기 위해
( Protopie ) -> 변수 지정 등 다양한 기능을 추가하기 위해
가장 바탕이 되는 작업이 어도비라고 할 수 있다.
저 또한 툴을 이용해 가장 먼저 프로토타입을 만든 게 어도비다.
장벽이 굉장히 낮아서 유튜브에 AdobeXD라고 검색을 해서 영상으로 독학을 해도 될 정도로 간단하다.
기본 프레임을 제공하고 버튼을 클릭했을 때 넘어가는 등 간단한 구현에 매우 용이하다.
실무에서는 이 툴이 구현할 수 있는 부분이 약하다 보니 사용을 안 한다고 들었는데
그래도 입문 또는 간단한 기능 구현을 위해서 사용하는 데에는 좋은 방법이라고 생각된다.
Protopie
프로토파이는 변수를 지정할 수 있다는 게 가장 큰 장점이다.
그리고 어도비에 이미 입문했다면 적응하기에 굉장히 수월한 툴이라고 생각된다.
아무리 다른 툴이라고 하지만 기본적인 디자인 툴은 AdobeXD에 기반이 되어있기 때문에
그 툴을 확실하게 다룰 줄 안다면 프로토파이뿐만 다른 툴들에 대한 적응력이 좋을 것이다.
Figma
공동작업이 가능하다는 장점이 크다. 디자인 툴의 트렌드가 계속 바뀌고 있는데, 최근 가장 트렌디한 툴로 주목받고 있다.
내가 만든 프로토파입
최대한 유저가 친숙한 느낌, 기존에 사용했던 앱의 디자인으로 가야 위화감없이 사용할 수 있기 때문에 아이폰의 형태를 많이 벤치마킹하여 만들었다.
실제로도 디자인 초보뿐만 아니라 서비스를 제작하는 디자이너, 개발자들도
기존의 서비스를 벤치마킹하여 만들고 있다.
입문하는 독자분들에게는 벤치마킹으로 디자인을 시작하는 것을 추천한다.
위 프로토타입은 블록체인의 장점을 활용한 회계시스템을 기획하여 앱이다.
단순히 학교 창업학 수업에서 제작한 프로토타입이라 퀄리티가 좋지는 않다.
하지만 기존의 앱 형태를 벤치마킹한 친숙한 ui•ux라고 할 수 있다.
그리고 이후 여행정보공유라는 주제를 가지고 개인 프로젝트를 진행한 적이 있다.
이 개인 프로젝트를 할 때, 필자는 디자인 툴을 가지고 구체적인 프로토타입 제작하는 것을 직접 경험해보기 시작했다.
이때, 카드에 어느 정보가 간략하게 담겨야 하고, 개수는 얼마나 할 것이며 그리드 설정을 어떻게 할 것인지를 상세하게 모두 고려해야 한다는 점을 깨닫기 시작했다.
생각보다 신경 쓸 부분이 정말 많고, 하나하나 결정해야 하는 영역이라 쉽지 않았다.
따라서, 실제로 해보는 것이 아이디어 개발에 큰 도움이 된다.
다시 말해서 생각으로만 가지고 있던 아이디어를 가시화시키고, 실현시킨다는 점에서 프로토타입의 역할이 향후에 큰 역할을 한다고 할 수 있다.
혹시 그래도 어떻게 해야 할지 모르겠다, 시작을 못하겠다고 생각된다면
이미 언급한 것처럼
아래와 같이 하나의 홈페이지를 그대로 따라서 그리는 벤치마킹이 좋은 방법이라고 할 수 있다.
왼쪽은 필자가 만든 프로토타입이고, 왼쪽은 실제로 서비스가 구현되고 있는 사이트의 화면을 그대로 가져온 것이다.
어도비의 단점은 아래와 같이
카테고리가 생기게 만들려면 새로운 슬라이드를 만들어야 한다.
결국 모든 경우에 대한 슬라이드가 필요하기 때문에
많은 시간을 통해 일일이 수작업을 하는 수밖에 없다.
현재 진행 중인 스타트업 "위빙" 프로토타입 수정과정
<1차 - AdobeXD>
단순히 사업계획서를 만들 때 서류상에 추가하기 위해 간이적으로 만들어보았다.
서비스가 앱•웹 기반인데 앱이 간단하게 만들기에는 고려요소가 비교적 많지 않아 우선적으로 디자인하였다.
모든 경우를 고려하여 슬라이드를 만들지는 않았고,
핵심적인 화면만 아주 간단히 제작하였다.
아이폰 화면에 핵심기능만 간단히 설명<2차 - AdobeXD>
서비스를 웹으로 우선 제작하고, 배포하기 위해 간이적으로 만든 앱 프로토타입을 갈아엎고, 웹 디자인을 하기 시작하였다.
아이디어 기획과는 다르게 개발기획회의를 겸해서 하다 보니 고려해야 할 사항이 굉장히 많았다.
필자는 Django라는 프레임워크를 가지고 개발을 하려고 하는데, 그러다 보니 한계점이 있어서
디자인 요소에서 그 부분을 고려하여 디자인을 하였다.
예를 들어 지도와 현 위치를 가져오기 위해
Kakao API를 가져오려고 하고, 웹 상에서 계좌를 개설해 포인트가 계좌로 입금되는 형식을 만든다거나 하는 방식을 구현하려고 하다 보니 많은 부분을 생각하면서 동시 진행하게 되었다.
지도와 음식점 리스트를 한 화면에 표시
<3차 - AdobeXD>
메인 페이지를 크게 수정을 하였다.
서비스를 소비자에게 좀 더 명확히 노출시켜 주고자 서비스의 소개 페이지를 만들었다.
그리고 음식점 주문 리스트를 다시 수정하였고,
지도를 빼고, 요기요 페이지를 벤치마킹하여 리스트를 만들었다.
그 외 결제 과정에서 좀 더 소비자로 하여금 간편하게 만들기 위해 제작하였다.
결국 소비자가 이용하기 편한 UI를 찾아서 디자인을 해야 하기 때문에
소비자가 이용하는데 얼마나 편할지 익숙할지에 대해 많은 고민 단계를 거쳤다.
<4차 - Protopie>
프로토타입을 프로토파이라는 툴로 변경하여 만들기 시작했다.
그 이유는 이전의 툴에 비해 변수 지정의 추가 기능을 통해 모든 상황마다 페이지를 따로 제작할 필요 없이
실제 서비스와 가깝게 프로토타입을 구현하기 위해서이다.
이전에는 서비스의 테마 색깔을 지정하지 못했는데 이제 색감 요소까지 추가하고,
최대한 세련되게 디자인을 하기 위해 노력하였다.
그리고 블로그에서는 사진이라 보여지지 못하지만 변수 설정을 통해 첫 화면의 사진이 슬라이드 형식으로 넘어가는 부분도 구현하였다.
사실 제작을 하고 있지만서도 랜딩페이지의 유무에 대한 고민이 깊다.
이 서비스 랜딩페이지는 간단히 말해서 서비스 소개 페이지의 역할을 하고 있고, 디자인은 나름대로 굉장히 깔끔하게 만들었지만 ui적으로는 소비자가 서비스를 이용하기 전에 페이지 하나를 거쳐가야 하는 불편함이 있는 데다가 소비자는 깊은 관심이 있지 않기 때문에 문구를 상세하게 보지 않을 것이기 때문이다.
하지만 페이지가 필요하다고 생각했던 이유는 필자가 추구하는 서비스의 방향성과 비전을 함께 공유해 보자라는 의미에서 위 페이지를 가미하였다.
메인 페이지에서는 매장별로 우선 분류가 되고 이후에 매장에 대한 상세 메뉴 및 기타 내용들이 노출되어 있다. 이 부분도 ui적으로 좋지 않다는 피드백을 받기도 하였다. 왜냐하면 소비자가 직관적으로 봤을 때, 어떤 서비스인지에 대한 이해도가 높아야 하는 것이 첫 번째고, 두 번째는 결국 소비자는 이 서비스를 이용하기 위해서(음식을 사 먹기 위해서) 이 홈페이지를 방문하는 것이다. 하지만 그 의도에 반해 직접적으로 보이는 것은 매장이지 음식이 아니기 때문이다.
하지만 개발 입장에서 보았을 때, 위치기반으로 매장을 분류를 하려다 보니 극단적인 상황을 고려했을 때 한 매장에 등록된 메뉴가 10가지가 된다고 하면 상단의 메뉴에 한 매장의 메뉴만 노출될 것이고, 이는 필자가 의도한 방향이 아니라고 판단해 매장별로 우선 분류를 해놓았다.
작업한 디자인을 클라우드로 공유해 드릴 테니
한 번 구경해 보시기 바라며.
(상단의 파란색 버튼을 누르면 전체 페이지를 한목에 쉽게 볼 수 있으니 참고 바란다.)
