프로토타입(Prototype) 디자인하기 in 스타트업
Product 프로토타입은 어떤 툴로 어떤 방식으로 개발해야 할까?
디자인, 프로토타입에 대해 궁금증을 가지고 있다면
이미 프로젝트나 스타트업에서 어느 정도 제품 개발에 대한 방향성을 고민하고 있거나
뭔가를 해보고 싶어서 가시화를 시켜보고 싶다는 의지가 있는 상황이라고 생각된다.
그전에 독자분들은 이런 질문을 자문해 볼 필요가 있다.
프로토타입에 대해 얼마큼 알고 있는가??
프로토타입이 얼마나 중요하다고 생각하는가??
필자도 아이디어를 내고 피칭 자료를 만드는 데 있어서 프로토타입의 중요성에 대해 잘 몰랐다.
하지만 이제는 프로토타입 없이 피칭 자료를 만드는 건 말이 안 된다고 생각할 정도로 역할의 중요성을 깨닫고 있다.
프로토타입은 서비스를 출시할 때 있어서 필수적 요소이다.
디자인 프로세스 과정에서 가장 중요한 단계라고 할 수 있을 만큼 핵심 요소이다.
건물을 지을 때도 설계도를 바탕으로 건물을 짓고,
제품을 만들 때도 도안을 바탕으로 제작에 들어가는 것처럼
서비스를 개발하는 과정에서 앱이나 웹을 개발하려면 반드시 그 설계도가 필요하다.
프로토타입이 그 설계도에 해당된다.
프로토타입(Prototype) = 설계도, 청사진
그리고 설계도가 확실하게 구축되어 있지 않는 상태에서
맨땅에 헤딩하듯이 부딪히게 되면 시행착오를 많이 겪을 수밖에 없다.
따라서 오늘 그 프로토타입에 대해서 제 경험에 비추어 설명을 해볼까 한다.
프로토타입이란??
프로토타입은
론칭 전에 테스트하기 위해 사용되는 최종 제품의 시뮬레이션 또는 샘플 버전이다.
이를 만드는 목적은 최종 제품에 많은 돈과 시간을 쏟아붓기 전에 제품 또는 아이디어를 테스트하는 것이다.
프로토타이핑은 사용성 이슈를 해결하는데 매우 필수적이다. 그리고 개선이 필요한 부분을 밝혀 주기도 한다. 독자분들의 제품 아이디어의 초안이 실제 유저의 손안에 들어가는 순간, 그들이 그 제품을 사용하길 원하는지 마침내 알 수 있게 된다. 그 후에 다시 돌아가서 처음에 추측했던 것을 조정하면 쉽게 작업을 진행할 수 있다.
프로토타이핑의 역할
- Visualizing을 하면 훨씬 설득력있고, 아이디어가 구체화 될 수 있다.
단순하게 아이디어가 떠오른다고 해서 내가 가진 비전이나 풀어야할 미션을 당장 풀 수 있는 것은 아니다. 이를 웹이나 앱, 또는 다양한 형태로 프로덕트화하여 소비자와 접촉할 수 있는 채널을 만들어야 하기 때문에 프로토타입은 반드시 필요하다. 이를 만드는 과정에서 아이디어를 visualizing하고, 어떤 방식으로 아이디어가 전달되는지를 고민하게 된다. 그러면서 자연스럽게 아이디어, 핵심 기능이 구현되는 방법이 실물로써 구체화되기 때문에 훨씬 설득력있게 소비자에게 전달될 수 있는 것이다. 무엇보다 visualizing을 하면서 단순히 생각에만 그쳤던 아이디어를 사람들과 유저에게 실물로서 설득하기에 좋은 수단이다.
어떤 방법이 당신에게 훨씬 설득적으로 느껴지는가: 글로 가득한 핫도그 레시피 or 맛있는 핫도그 사진.
- 빠른 MVP test와 의사결정을 통해 PMF를 찾는데 가장 빠르고 좋은 수단이 프로토타입이다.
서비스를 출시하는 과정에서 시행착오를 겪는 것은 당연한 일이고, 이는 중요한 배움의 자산이 된다. 그런데 서비스를 출시하게 되면 우리가 생각했던 예상이나 가설이 들어맞지 않는 것이 대부분이다. 그리고 우리는 무수히 많은 테스트와 에러를 반복하면서 PMF를 찾아내야 비즈니스를 만들어낼 수 있다. 프로토타이핑을 통해 아이디어를 feature에 녹여내고, 베타 버전 프로덕트를 가지고 수많은 MVP test을 하게 된다. 이 test 과정에서 프로덕트를 스쳐지나간 수많은 잠재적 소비자부터, 일반 유저, 충성고객들로부터 많은 reaction과 feedback을 취합하여 미약한 점, 새로운 도출점을 찾아낼 수 있다. 그리고 이를 바탕으로 수정하고, 피봇팅하는 과정을 무수히 반복하면서 PMF를 찾아내고, 기능을 개선하면서 좀 더 시장과 고객에게 필요한 프로덕트를 만들어낼 수 있다. 그래서 프로토타입은 그 여정의 기초기반이 되는 중요한 역할을 차지하고 있다. 디자인이 조금 덜 완성되고, 다른 부수적인 기능들이 부족한 테스트 버전일지라 하더라도 core feature를 우선적으로 확실하게 빌드업한 상태에서 시장 테스트를 통해 데이터를 꾸준히 구축해야 한다. 그렇다면 프로토타입일지라도 충분히 설득력있는 프로덕트가 되며, 이를 통해 PMF를 찾아낼 수 있다.
- 아이디어를 구체화하면서 프로덕트를 만들기 때문에 유저 입장에서 생각하게 되고, 자연스럽게 아이디어 발전에 도움이 된다.
생각과 액션은 작은 것 같지만 엄청난 차이가 존재한다. 실제로 내가 가진 아이디어를 프로덕트로 발전시키다보면 생각지도 못한 obstacle를 만나게 되고, 이를 어떻게 좀 더 쉽고, 간편하게 소비자에게 전달할지 고민하다보면 자연스럽게 다양한 아이데이션을 할 수 있다. 좀 더 직관적이게 아이데이션할 뿐만 아니라 더 deep하게 발전시킬 수 있다. 필자도 실제로 이 과정을 겪으면서 단순히 아이디어를 생각에만 그치는 게 아니라 행동으로 실제로 해봄으로써 얻을 수 있는 경험과 impression이 정답이라고 생각한다.
따라서, 독자도 꼭 행동으로 옮겨보기를 권장한다. 처음에는 서툴지 몰라도 자연스럽게 action에 익숙해진 나를 발견할 수 있고, 나도 모르게 실력이 성장하는 것을 느낄 수 있을 것이다.
나와 맞는 프로토타이핑 툴을 정하려면??
프로토타이핑 툴은 정말 다양하다.
필자가 아는 툴만 해도 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가지가 된다고 하면 상단의 메뉴에 한 매장의 메뉴만 노출될 것이고, 이는 필자가 의도한 방향이 아니라고 판단해 매장별로 우선 분류를 해놓았다.
작업한 디자인을 클라우드로 공유해 드릴 테니
한 번 구경해 보시기 바라며.
(상단의 파란색 버튼을 누르면 전체 페이지를 한목에 쉽게 볼 수 있으니 참고 바란다.)
Conclusion
프로토타입은 유저의 니즈를 충족시켜주고, 유저와 소통할 수 있는 수단인 프로덕트를 만드는 기반이기 때문에 언제든지 수정될 수 있다. 아니, 계속해서 변화해야하고, 새로운 기능과 함께 진화해야 한다. 그렇기 때문에 길라잡이의 역할을 하는 중추의 역할로써 프로토타입을 만든다는 것은 결코 쉬운 일이 아니다. 그리고 이를 이용해 나의 비전을 유저에게 설득하며 가치를 만들어내는 과정은 더더욱 어렵다.
'Webeing'이라는 서비스를 운영하고 유저 인터뷰를 집중적으로 수행하는과 동시에 프로토타입을 개발하였다. trials and errors 를 통해 알게 된 우리가 간과한 점들을 최대한 반영하면서 user-focused 서비스를 만들려다보니 디자인과 소프트웨어 개발과정에서 많은 회의를 진행하였다. 수없이 많은 경우의 수앞에서 정말로 유저가 필요를 느낄 수 있는 선택들에 집중했다.
예를 들어, 한국 레스토랑은 음식물쓰레기가 정말 많이 발생하고, 특히 소규모식당일수록 그 정도가 심해진다. 그래서 그들의 2차수익을 위해 호주나 유럽처럼 영업종료임박시간에 재고식품을 할인해서 판매하는 방법 등을 고안했지만 장기적인 관점에서 레스토랑에게는 재고식품을 판매한다는 의미가 고객들에게 셀링이 되지 않는다는 것을 방증하는 의미라 그들의 장기적인 브랜드 평판에 타격을 우려해 우리의 제안에 대부분 큰 동조가 없었다. 그래서 딸기를 잼으로 가공하는 것처럼 재고식품을 2차가공해서 판매하는 방법이나 농장과 직접 컨택, 동네별 공동구매 후 같은 장소에서 픽업을 하는 등 그에 맞는 솔루션을 제시하였다. 이처럼 인터뷰를 통해 얻어낸 전혀 다르지만 그들이 정말로 원하는 방향에 집중하기 위해 프로덕트를 만들 때 다양한 요소들을 고려했다.
단순히 디자인만 고려하는 것이 아닌, 프로덕트 개발이 이루어질 때 어떤 식으로 구현해야 최적의 방법으로 user experience를 전달시킬 수 있을까, 그들의 니즈를 해결하는데 방해되는 요소는 무엇일까, 내가 선택한 문제해결방식이 최선의 방법인가, 다양한 형태와 문제점을 가진 소상공인의 니즈를 일반화한 솔루션으로 전달할 수 있는 umbrella solution은 없을까 등등 수도없는 선택과 수정을 거쳐서 그렇게 내가 만든 프로덕트가 탄생할 수 있었다.
어떤 사회적 문제의 솔루션을 제시하고 나의 비전을 사람들에게 설득하는 일은 단순히 ideation stage에서 생각했던 value-creation과 problem-solving 이상으로 어렵고, 복잡한 단계였다. Deep dive할수록 구체화할수록 내가 상상했던 상황과 가설은 맞는 것이 거의 없다. 그렇기 때문에 프로토타입은 계속해서 수정되고 유저의 반응과 시장의 발전에 따라 기능과 형태가 지속적으로 변화해야한다. 때로는 전체가 뒤엎어질수도 있다. 그렇기 때문에 방향을 설정해줄 프로토타입이 정말 중요하다.
절대 쉬운 것은 아니지만 결국 해봐야하는 것이다. 해봐야 아는 것이고, 뭐라도 해낼 수 있다. 해보기 전까지는 아이디어는 그저 아이디어에 머무르는 것이다. 프로토타입을 이용해 유저와 커뮤니케이션을 하고 trial and error를 통해 작더라도 한 스텝을 만들어 나가야 하는 것이다.
나이키 슬로건처럼.
Just Do It!
프로토타입을 개발하는 것은 시작에 불과하다. 이제 본격적으로 이 프로토타입을 이용해 유저와 끊임없이 소통을 해야하고, 그들의 니즈를 찾아 확실한 PMF를 찾아야 한다. 작던 크건 상관없이, 이 세상안에 있는 다양한 문제에 대한 해답과 비전을 전달하기 위해 끊임없는 싸우는 우리를 향해 박수를 보낸다.
