프로토타이핑

프로토타이핑이란?

일반적으로 프로덕트를 설계하면 본격적으로 디자인, 개발순서로 진행이되면 도중에 중단하거나 취소하는 것이 쉽지 않습니다. 이를 검증 또는 시뮬레이션 하여 위험 부담을 최소화 해야 겠지요.

 

리차드의 소프트웨어개발 가이드 https://www.sandraandwoo.com/2012/11/19/0430-software-engineering-now-with-cats/

기존에는 웹/앱/서비스 등을 제작할 때, 폭포수(Waterfall) 방법론이라 하여, 기획 – 개발 – 디자인 등을 “단계”로 구분했습니다.

 

각 단계가 끝나기 전에는 다음 단계로 넘어갈 수 없었죠. 서비스 개발을 위해 인력이 대규모로 투입되고, 대량의 사용자가 서비스를 이용하던 시절 이야기입니다. 하지만 이 방법에서는 개발이 모두 완료된 후에야 문제를 발견할 수 있었습니다.

 

앱 하나, 작게는 기능 하나를 만들 때도 수많은 고민과 회의, 수정, 보완을 거쳤죠. 그리고 개발 이후에 문제가 발견되면, 이 모든 과정을 다시 진행했습니다. 엄청난 자원 낭비인 셈이죠.

 

 

결국 빈틈이 자주 생기고, 치명적인 문제로 이어지곤 했습니다. 그리고 회의가 끝날 때쯤 “그럼 ~하게 구현 하자는 거죠?”라는 식으로, 서로 다른 생각을 하고 있었다는 사실을 깨닫기도 합니다.

변수와 if를 모르는 디자이너 vs 점선면을 모르는 개발자라는 말이 있더군요. 맞습니다.

 

하지만 애자일(Agile) 방법론과 테스트 주도 개발(TDD, Test Driven Development) 등장 이후, 모든 것이 변하기 시작합니다. 여기서는 “작게 개발, 테스트, 반복.”이 핵심이죠. 그리고 테스트의 주 재료는, 프로토타입(Prototype)입니다.

개발, 디자인 이전에 프로토타입을 사용해보게 하고 피드백을 받아 제품 개선 시 반영하기도 하는데 이를 프로토 타이핑(prototyping)이라고 합니다.

 

이는 실제로 화면설계만 디자이너와 개발자에게 전달시 기획자에게 요청되는 여러가지 질문들이 상당이 해결이 됩니다 .

아직 MVP도 안되어 있지만, 이러한 기능을 하기에 저는 “시뮬레이션”, “UX(사용자경험)”이라고 생각합니다.

 

화면설계서에서 디자이너는 개발 기능에 관련된 설명까지 보게되면

프로토타이핑의 대표적인 툴인 프로토파이의 경우, LINE, NC소프트, PXD, 국민은행, Toss… 그 외 많은 기업이 채용공고에 ‘Protopie 사용가능자’를 명시하고 있습니다. 스터디/강의 수요 또한 꾸준히 증가하고 있으며, UX 관련 커뮤니티에서도 사용 툴을 물어보면 대부분 “프로토파이 쓰세요”라는 답변이 달리곤 합니다

 

프로토타이핑은 상세화면설계 또는 디자인 단계에서 제작이 가능합니다. 제 경우는 와이어프레임상태에서 프로토타이핑을 합니다.

 

 

 

자 그러면 한번 프로토타이핑의 역할을 볼까요?

• 프로젝트 방향 확인 즉, IT지식이 없는 클라인트, 예상 유저에게 설계서만으로는 비즈니스 목적에 부합하는지, 원하는 서비스로 설계가 되었는지 알수가 없지만, 올바른 방향으로 아이디어가 서비스 시스템화 되었는지 확인이 가능합니다.
• 디자인 개발자의 빠른 소통 도구 설계서를 프로토타이핑 처리하여 개발단에 전달하면 복잡한 유저의 흐름, 필요한 데이터의 보여줘야 할 형태, 디자인적으로 강조, 부각 해야 하는 요소들이 바로 발견됩니다. 이는 변수와 if를 모르는 디자이너 vs 점선면을 모르는 개발자 에게 나침반역할을 해 주면서 시작전 준비단계에 필요한 개발플랜에 대한 준비를 원할하게 해 줄 수 있습니다.
• 설계상 흐름의 오류를 확인 복잡한 사이트 또는 사이트맵에 표현되지 않으나 흐름속에 필요한 페이지 또는 기능이 프로토타이핑 속에서 발견됩니다. 이를 보완하면서 개발자분들에게 물음표가 생기지 않는 자연스러운 화면설계서의 작성을 도와 줍니다.
• 빠른 가설 검증 및 점진적 상세화이것들은 제품 관리자, 디자이너, 개발자, 마케터, 비즈니스 담당자 등 여러 이해관계자들이 세부 내용들을 알 수 있도록 돕는 문서이기 때문에 사용자 입장에서 불필요한 내용들이 존재합니다.
• 프로토타이핑을 활용하여 실제 설계한 제품들을 이용해보며 사용자에게 어떤 경험을 제공하는지 미리 체험해보고 정의한 문제가 정말 문제였는지 문제가 맞았다면 이 방법을 통해 해결할 수 있다고 생각하는지 등 더욱 완성도 있는 제품을 만들 수 있습니다.
• 제품 및 서비스를 만들 때 제품 사양 문서(Product Spec)와 요구사항 정의서(PRD)를 작성하곤 합니다.

프로토타이핑 툴

요즘 Framer, Protopie, Figma, 다음 오븐 등의 프로토타이핑 툴이 날이 갈수록 진화되고 있습니다.기획자인 저에게 가장 쉽고 편하게 사용하는 툴은 역시 피그마 입니다. 피그마로 화면설계를 하고 바로 프로토타이핑 작업이 쉽게 가능해서 입니다.

기획자는 프로토타이핑 중에서 인터랙션, 타임라인기반 모션, 센서등의 기능까지 사용할 필요는 없습니다. 그건 디자이분과 함께 해야 할 일중 하나라고 생각합니다.