다들 ‘프로토타입(Prototype)’이라는 말은 많이 들어보셨을 거라고 생각합니다. 프로토타입이란 양산에 앞서서 미리 간단하게 제작해보는 원형을 가리키는 말입니다. 보통은 본격적인 상품화에 앞서서 성능을 검증하거나 개선하기 위해 기본 기능만을 넣어 만들게 되죠.

이와 비슷하게 소프트웨어 쪽에서 주로 사용하는 말인 ‘프로토타이핑’이란 개발자들과 사용자들의 의사소통효과를 높이기 위하여 취하는 시스템개발 기법으로, 쉽게는 ‘미리 간단히 프로토타입을 만들어 본다’라는 의미라고 생각하시면 될 거 같습니다.

프로토타이핑은 왜 필요한 것일까요? 모바일 소프트웨어를 예로 들어 설명해 보겠습니다.

첫째, 디자인을 스마트폰에서 미리 확인해볼 수 있다는 장점이 있습니다.

최근 스마트폰의 디스플레이 크기는 4.0인치에서 6.0인치까지 다양해져서 같은 디자인도 화면에 따라 다른 느낌을 줄 수 있습니다. 이는 마치 인터넷 쇼핑과 비슷하다고 볼 수 있는데요. 인터넷 쇼핑몰에서 보는 옷들을 화면에서 볼 때는 예쁘고 마음에 쏙 드는 경우가 많습니다. 하지만 배달된 옷을 직접 입어보았을 때는 느낌이 또 다를 수 있지요. 결국 이미지를 따로 놓고 봤을 때와 실제 내 단말기에 들어갔을 때의 느낌과 편리함의 정도는 다를 수 있다는 겁니다. 또한 6.0인치 기기에서 문제가 되지 않았던 디자인이 4.0인치 기기에서는 디스플레이가 작아지며 버튼 크기 등에서 문제가 생길 수 있습니다.

둘째, 디자인 협업을 할 때 시간을 절약해주고 효율적으로 협력할 수 있도록 도와줍니다.

모바일 앱을 제작하는데 있어 개발자와 디자이너가 항상 일정을 맞추기는 어렵습니다. 저희 회사에서도 앱 디자인이 끝난 다음 개발에 들어가는 경우가 최근에 있었는데요. 제품을 완성하고 보니 사용성 문제도 생기고 불가피하게 디자인 변경요청을 해야 할 필요도 생겼습니다. 디자이너는 이미 다른 프로젝트를 시작했기 때문에 서로에게 불편한 상황이 되어버렸죠.

프로토타이핑을 통해서 빠르고 간단하게 미리 만들어 봄으로써 기능상의 문제점을 보완하고 이후에 생길 수 있는 개발자의 불필요한 시간투자나, 비효율적인 디자인 수정작업을 방지할 수 있습니다.

이렇게 효과적인 프로토타이핑을 해볼 수 있도록 다양한 툴들이 나와있는데요. 이 중에서 모바일 개발을 위해 소개해드릴 툴은 Proto.io입니다. 툴을 고를 때 가장 중요하게 생각했던 점은 구현 및 완성도입니다. 구현도가 높은 툴 중 쉽게 배울 수 있는 툴을 생각하다 보니 Proto.io가 적당 하였으며, 주변에서 직접 사용해 본 지인의 추천도 있어 선택하게 되었습니다.

[그림1  :  다양한 프로토타이핑 툴 비교]

• 툴 명칭  : 좌측에서부터 Flinto, Invision, Oven.io, Proto.io, Origami, Framer
  Lean  : 학습, Speed : 제작시간, Interaction Fidelity : 구현정도(완성도)
  출처 : http://story.pxd.co.kr/

이제 모바일 앱을 위한 프로토타입 제작 과정을 보여드리도록 하겠습니다.

STEP 1  :  회원가입

Proto.io 웹사이트(https://proto.io/) 에 접속합니다. 초기 화면에서 TRY IT FOR FREE 버튼을 클릭한 후 이름과 이메일 주소를 입력하면 등록한 이메일 주소로 메일이 도착하게 되고 그 안에 포함된 링크를 클릭하면 가입이 완료됩니다.

[그림2  :  Proto.io 시작]

STEP 2  :  프로젝트 만들기

로그인 후 나오는 화면에서 PROJECTS > NEW BLANK PROJECT를 클릭하면 프로젝트 구성 화면이 나오게 됩니다.

[그림3  :  프로젝트 메뉴]

위 화면에서 PROJECT NAME 을 작성하고 기준이 되는 TYPE을 선택한 후 디바이스 기기를 선택하면 해당 프로젝트를 생성할 수 있습니다.

[그림4  :  프로젝트 만들기]

STEP 3  :  제작하기

이제 화면을 구성해보겠습니다. 숫자로 표시된 화면영역에 대한 설명은 각각 다음과 같습니다.

[그림5  :  화면 구성창]

1. 해당 영역은 스크린 영역으로 화면 개수의 단위 입니다. 3개의 화면이 있다고 한다면 스크린 또한 3개가 될 것 입니다.
2. 해당 스크린에 따른 LAYER들의 영역입니다. 라벨, INPUT BOX 등 화면에 드래그한 모든 레이어가 표시됩니다.
3. LIBRARIES 영역입니다. 툴에서 제공하거나 사용자가 정의한 속성을 드래그하여 사용할 수 있습니다.

[그림6  :  속성창]

위 그림은 LAYER를 클릭하였을 때 나타나는 속성창입니다. 이 화면에서 글씨 크기, 색상 등의 속성을 편집할 수 있으며 INTERACTIONS 탭에서는 이벤트를 정의하고 다음 이벤트에 대한 정의도 할 수 있습니다.

STEP 4  :  화면 실행

[그림7  :  화면 실행]

위 그림에서 왼쪽은 proto.io 로 제작한 것이며 오른쪽은 현재 상용중인 서비스 입니다.

작업중인 앱을 실행해보고 싶을 때는 우측 상단의 Preview 버튼을 클릭하여 테스트를 해볼 수 있습니다. 물론 아이폰이나 안드로이드에서도 이용할 수 있는데, 이용하는 방법은 툴에서 제공하는 어플을 다운받아서 부여 받은 계정으로 로그인하면 됩니다.

화면을 만드는데 많은 시간이 소요될 것이라는 예상과는 달리 빠른 시간 안에 만들 수 있어서 더 좋았던 것 같네요. 자세하게 설명 드리지 못해서 아쉽긴 하지만, 메뉴를 클릭해보면서 몇 번만 연습해보면 쉽게 만들 수 있을 정도로 구성이 잘 되어 있습니다. 관심 있으신 분들은 한번 적용해 보시기 바랍니다.