프로토타입 3종류 및 진행 과정

우선 프로토타입의 목적은 아래와 같아요.

핵심 키워드는  'communicative' 아이디어와 'visualize' 아이디어가 되겠네요.

 

프로토타입의 목적

1. 다른 사람과 자신의 아이디어를 눈에 보이게 전달하고 보여준다.

- 개발자와 프론트앤드와 디자이너와 기획자 등등 모두가 협업 가능하다. 눈으로 보여주니까.

2. 아이디어를 실제로 이루어질 수 있도록 다른 사람을 설득시킨다.

- 프로토타입은 동시에 누군가를 설득시키는 일이다. 왜 보여주겠는가? 이 아이디어를 실제로 

구현해보고 싶기 때문이지 않겠는가.

 

프로토타입은 크게 두 종류로 나뉘어요. 

하나는 Low fidelity이고 다른 하나는 high fidelity입니다.

Low fidelity의 장점은 여러번 시도 가능하고, 변경가능하는데 가장 무리가 없다는 점이에요.

 

1. Paper Prototype 

2가지 목적으로 구성되는 종이 프로토타입이 있어요. 구글에서도 paper prototype을 하는데요. 아래 영상을 참고하세요.

google startup : 프로토타입 3종류

하나는 앱의 구조를 파악하는 wireframe이 있고요. 다른 하나는 앱의 작동 방식을 보여주는 flow chart가 있어요.

앱의 구조를 파악하는 wireframe(UI)은 그저 한번에 꼭 필요한 구성물이 적절한 위치에 있는지를 알아볼 수 있도록 하는 것이 중요해요. 툴을 굳이 쓰지 않는 이유도 앱의 기능 및 위치를 파악하기 위한 것이기 때문에 다른 방해요소(색상, 로고, 텍스트 등등)는 없는 게 좋아요. 정말 필요한 경우가 아니라면 말이지요. 

flow chart

사용자가 이 버튼을 눌렀을 땐 어떤 일이 일어날까요? 혹은 사용자가 뒤로 가고 싶을 땐 뭘 눌러야하나요? 팝업 메세지가 뜨진 않나요? 등등을 알 수 있도록 하는 것이에요. 이 flow chart는 사용자의 경험(UX)과 닿아있기 때문에 user study할 때 가장 많이 손을 보는 부분이기도 해요.

또한 flow chart는 종이로 만들었다고 해도, 종이로 보여주기엔 번거로워서 종이를 순서대로 카메라로 찍거나, 영상을 찍는 게 좋아요.(구글UX팀의 노하우 참고)

위를 모두 포함한 paper prototype 영상이 있어서 준비했어요.

 

다양한 영역에서의 페이퍼 프로토타입을 설명하는 영상

 

실제 앱/웹의 페이퍼 프로토타입의 예시

 

실제로 페이퍼 프로토타입을 만들고, user interview까지 한 영상이에요. 유저의 사용을 가상적으로 체험하게 해주고, 직접 사용자의 피드백을 듣는다.

Low-fidelity paper prototype testing: to gain insights into user needs and limitations while testing the concept.

 

핵심 정리 : 빠른 시간, 사용자 조사, 핵심 및 사용자 need 기능적 요소 중심 

 

2. High-quality Prototype (Digital prototype)

Digital prototype은 high-quality prototype과 정반대에요. 기본적으로 앱의 컨셉, 방향이 확신해지면 이를 최대한 실제와 비슷하게 표현하는 것이 바로 높은 수준의 프로토타입이죠.

이렇게 표현하기 위해서는 특정한 컴퓨터 프로그램을 쓰는데요. invision, Axure가 유명해요.

그래도 xd어도비 프로그램도 좋아요.

여기에서는 색깔, 크기, 폰트, 위치를 자유롭게 변경 가능하고 이를 최대한 조화롭고 아름답게! 구현해서 보는 사람들을 설득시킬 목적을 이루기 위해 노력해야하죠. (제 아이디어는 쓸만해요!라고요)

이땐, tool을 다룰 수 있는 스킬과 그와 관련된 디자인적 스킬(색상, 표현, 폰트)가 중요해요. (디자인 툴 따로 이용할 수도 있음.필요한 경우. 대부분 sketch에서 맥푹으로 디자인을 품. 또는 photoshop어도비)

또한 developer에게 최종적으로 갈테니 그들의 입장에서 현실적으로 가능한 것과 가능하지 않은 것을 미리 알 수 있다면 더욱 최고의 작품이 나올 거에요.

참고로 퍼블리셔는 이러한 역할을 맡고 개발자에게(html과 css코드까지 포함) 위의 랙심 프로토타입을 문서화시켜서 넘겨줍니다.

핵심정리 : tool의 숙련도, design의 표현력, developer적 지식, 문서화 시키기, 소통 능력

 

3. Data Prototype, Native prototype

이건 진짜에요! 위에 모든 프로토타입 중에서 가장 '진짜'에 가까워요. 우선 개발하는 거에요! 저런 앱, 또는 웹을 말이에요. 코드는 엉망이어도 돼요. 괜찮아요. 그냥 시험이니까요. 출시해서 사용자에게 악담을 받아도 돼요! 그게 목표니까요.

베타 버전으로 출시하는 앱/웹이 native prototype에 가깝다고 생각하시면 돼요.

사용자의 의견을 듣기 위해 출시한 초기 버전의 앱/웹을 코드로 100프로 작성합니당.

언어는 java부터 javascript까지 다양합니다. (자신이 잘 알고 있는 서버언어로 작성하라고 구글엔지니어팀에선 말하네요)

또한 사실 사용자들의 현실적인 반응을 기대하기 어려운 1과 2의 취약점을 없애고

몇명의 사용자가 다운받았는지, 그들의 평점은 무엇있인지, 얼마나 사용했는지 등등의 

실제적인 데이터가 보인다는 게 가장 큰 장점이에요.

 

핵심 정리 : 데이터 수집, 코드 기반