# 프로토타이핑의 역할 프로토타입이란 개발이 이루어지기 전이나 서비스 내에서 새로운 기능을 제작하기 전에 테스트를 목적으로 만드는 산출물입니다. 일단 위키피디아 설명을 그대로 한 번 가져오겠습니다: > 프로토타입(prototype)은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다. 시제품이 나오기 전의 제품의 원형으로 개발검증과 양산 검증을 거쳐야 시제품이 될 수 있다. 프로토타입은 ‘정보시스템의 미완성 버전 또는 중요한 기능들이 포함되어 있는 시스템의 초기모델’이다. 길게 가져오긴 했으나, **한 마디로 하자면 “스케치”라는 뜻입니다.** 서비스 구상 단계에서는 최종 산출물이 어떤 “느낌”으로 만들어지는지 알 수 없으니, 미리 한 번 그려보자는 뜻이죠. 이 단계가 축소되거나 생략되면… ![[5956e09b1a009ff43f97a637627720f5_1551768473_239.png]] **이렇게 됩니다** | [Richard의 소프트웨어 개발 가이드](http://www.sandraandwoo.com/2012/11/19/0430-software-engineering-now-with-cats/) 기존에는 웹/앱/서비스 등을 제작할 때, 폭포수(Waterfall) 방법론이라 하여, 기획 – 개발 – 디자인 등을 “단계”로 구분했습니다. 각 단계가 끝나기 전에는 다음 단계로 넘어갈 수 없었죠. 서비스 개발을 위해 인력이 대규모로 투입되고, 대량의 사용자가 서비스를 이용하던 시절 이야기입니다. 하지만 이 방법에서는 **개발이 모두 완료된 후에야 문제를 발견할 수 있었습니다.**앱 하나, 작게는 기능 하나를 만들 때도 수많은 고민과 회의, 수정, 보완을 거쳤죠. 그리고 개발 이후에 문제가 발견되면, 이 모든 과정을 다시 진행했습니다. **엄청난 자원 낭비인 셈이죠.** ![[5956e09b1a009ff43f97a637627720f5_1551767889_8061.png]] **콘택트 (Contact, 1997)** 기존에는 화면 이미지를 활용해서 회의를 진행했습니다.그림만을 가지고 서비스 전체 구조와 화면 움직임을 “상상”할 수밖에 없었죠. 결국 빈틈이 자주 생기고, 치명적인 문제로 이어지곤 했습니다. 이토록, 디자이너와 개발자는 서로를 멀게만 느꼈습니다. ![[5956e09b1a009ff43f97a637627720f5_1551767889_8533.jpg]] **변수와 if를 모르는 디자이너 vs 점선면을 모르는 개발자** | [visual.ly](https://visual.ly/community/Infographics/computers/web-designers-vs-web-developers) 스마트폰의 성능이 점차 발전하고, 모션 인터랙션의 사용이 늘어나면서, 기존 개발 방법론은 점점 더 한계를 보입니다. 회의시간, 프로젝트 구성원 간에도 “저 쪽으로 휙..”, “버튼이 스르륵 나타나면…” 같은 의성어가 난무합니다.회의가 끝날 때쯤 “그럼 ~하게 구현하자는 거죠?”라는 식으로, 서로 다른 생각을 하고 있었다는 사실을 깨닫기도 합니다. 하지만 애자일(Agile) 방법론과 테스트 주도 개발(TDD, Test Driven Development) 등장 이후, 모든 것이 변하기 시작합니다.여기서는 “작게 개발, 테스트, 반복.”이 핵심이죠. 그리고 테스트의 주 재료는, 프로토타입(Prototype)입니다. ![[d53cd26063ae38c068b76406e1a010fd_1492391644_1662.png]] ### **여기까지 읽으셨다면, 조금 이상한 점을 느끼셨을지도 모르겠습니다.** “나는 디자이너인데, 이런 개발자 용어를 다 알아야하나?” “프로토타입도 원래 프로그래밍 용어잖아?” 당연하고, 또 정당한 의문입니다.하지만 이전에는 성능이나 버그 테스트를 위해 프로토타입을 제작했다면, 이제 사용자를 위해 제작하죠. ### 이 모두가 UX(사용자 경험) 때문입니다. 디자이너가 제작하는 프로토타입은, 개발자의 프로토타입과 다릅니다. 디자이너는 실제 서비스와 동일(혹은 유사)한 화면과 모션, 인터랙션을 미리 만들어 프로젝트 구성원에게 배포하죠. 그리고 회의 전이나 도중에 직접 사용해보면서 디자인이나 사용성 문제를 발견합니다. 초기에 디자이너가 제작하는 프로토타입은 단순한 샘플 모션 수준이었습니다.그래서 한동안 플래시(Adobe Flash)나 애프터 이펙트(Adobe After Effect)등을 통해 프로토타입을 제작하곤 했습니다. 하지만 플래시는 모바일 기기에 대한 최적화가 부족했고, 액션 스크립트의 불친절함 때문에 현재는 구시대의 유물이 되었습니다. 그리고 애프터 이펙트 영상은 실제 사용할 수 있는 결과물이 아니었습니다. 직접 사용할 때와 눈으로 볼 때는 큰 차이가 있죠. **간단한 “샘플” 제작을 위해 너무 많은 노력이 필요했습니다.** # **이러한 배경 위에 프로토타이핑 툴이 등장합니다** **“프로토타입 또한 산출물이라면, 프로토타입 제작에 최적화된 도구가 필요하지 않을까?”** 라는 질문에서 시작합니다. 프로토타이핑 툴은, 기존 디자인 툴(플래시, 에펙 등)의 UX를 가져오면서, 프로토타입 제작만을 위해 존재하는 툴이죠. 최근에는 프로젝트 각 상황에 최적화된 프로토타이핑 툴이 등장하고 있으며, 꾸준한 업데이트를 통해 활용도와 사용성이 나날이 발전하고 있습니다. 프로토타이핑 툴 사용자가 모여 커뮤니티를 만들고, 사용 노하우를 공유하기도 합니다.툴을 전혀 접하지 못했더라도 상관이 없습니다. 얼마든지 쉽게 시작해서 사용할 수 있는 환경이 조성되고 있죠. 그렇다면 프로토타이핑 툴에 무엇이 있는지 간단히 알아봅시다. ### 전체 화면 흐름 파악이 용이한 Flow형 프로토타입 페이지 수가 많은 웹/앱을 제작할 때, IA(Information Architecture)를 파악하기에 적합하죠. POP, Adobe XD, Proto.io, Flinto 등이 여기에 해당합니다. ### 상세한 상호작용에 집중하는 Interaction형 프로토타입 Framer.js와 같은 프로토타이핑 툴이 유명한데요, Framer에서는 아주 디테일한 인터랙션을 조정할 수 있습니다. 또한, 디자이너가 원하는 모션을 정확하게 전달할 수 있습니다. 다만 대체로 Flow형 프로토타이핑 툴보다 학습이 난해한 편이며, 디자이너가 직접 코딩을 배워야 하는 경우도 많습니다. Framer.js, Origami, Form 등이 여기에 해당합니다. ![[d53cd26063ae38c068b76406e1a010fd_1492391659_0503.png]] **Framer.js** 이렇게 다양한 프로토타이핑 툴이 있지만, 무언가 아쉬움이 있었습니다.여전히 실제 서비스와 거리가 먼 프로토타입을 제작해야 하거나, 복잡한 코딩을 거친 뒤에야 디자인 의도를 온전히 전달할 수 있었죠 **그래서 저희는 Flow & Interaction 모두 탁월한** ## **프로토파이(Protopie)를 선택했습니다** 프로토파이는 2017년 1월에 정식 출시된 프로토타이핑 툴입니다. 프로토파이는, 코드 한 줄 없이 프로토타입을 만들어, 나의 디자인을 개발자에게 전달할 수 있습니다. “파이처럼 쉽고 간단하게 프로토타입을 만들자!” 라는 의미에서, Protopie인 셈이죠. 프로토파이는 코드 한 줄 사용하지 않고 실제 화면과 Flow, Interaction을 모두 볼 수 있었습니다.초기 버전에서도 타임라인(시간 기반 모션), 디바이스 센서 사용, **훌륭한 시험판 등**, 다양한 장점이 있었습니다.그리고 꾸준한 개선을 거쳐, 현재는 프로토타이핑 툴의 대세가 되었습니다. LINE, NC소프트, PXD, 국민은행, Toss… 그 외 많은 기업이 채용공고에 ‘Protopie 사용가능자’를 명시하고 있습니다.스터디/강의 수요 또한 꾸준히 증가하고 있으며, UX 관련 커뮤니티에서도 사용 툴을 물어보면 대부분 “프로토파이 쓰세요”라는 답변이 달리곤 합니다. --- [파이처럼 쉽게, 프로토파이 - Mets HIT Inc](http://mets.co.kr/m-lab/ux/easy-like-pie-protopie/6797/) 이후의 내용은 검수만 담당했으므로 링크로 대체합니다.