brunch

You can make anything
by writing

C.S.Lewis

by Junha Kang Apr 23. 2017

프로토타이핑의 역할

                                                     

프로토타이핑하기 좋은 때입니다.

각 상황에 맞는 수많은 프로토타이핑 툴들이 나오고 있고, 꾸준한 업데이트를 통해 그 활용도와 사용성이 발전하고 있습니다.

또 사용자들이 모여 커뮤니티를 만들고 사용 노하우를 공유하고 있어 툴에 대해 전혀 모르는 사람도 점점 더 쉽게 시작할 수 있는 환경이 조성되고 있습니다.


프로토타이핑은 디자인 프로세스에 중요한 역할을 하는데요,

가장 큰 순기능이라고 할 수 있는 것 중 하나가, 테스팅의 역할입니다. 개발이 모두 완료된 후에야 문제를 발견하는 상황을 방지할 수 있다는 것이죠.


말이 쉬워 개발이 모두 완료된 후이지 앱 하나 또는 기능 하나만 개발하더라도 수많은 고민과 회의들, 수정/보완을 거쳐서 제작이 되는데, 이러한 과정을 수포로 만들어 버리는 상황은 엄청난 에너지 낭비와 자원 낭비라고 할 수 있을 겁니다. 

화면상의 이미지만을 가지고 디자인을 발전시키고 회의를 하게 되면 이런 일이 자주 발생합니다. 

정적인 상태의 그림을 보면서 서비스의 전체 구조 또는 화면의 움직임 등을 상상하다 보면 빈틈이 생기게 되고, 치명적인 문제점으로 이어질 수 있는 것이죠.


스마트폰의 성능이 발전하고, 움직임이 있는 인터렉션이 많이 쓰이게 되면서부터 이러한 프로세스는 점점 더 한계에 다다릅니다.


프로젝트 구성원 간에 "이 화면은 이 쪽으로  움직이면서 사라지고..." "이 버튼은 스르륵 하고 나타나면..."과 같은 의성어가 난무합니다.


한참 회의를 하고 마무리되어야 할 무렵에서야 "그런데 (이러이러)하게 구현되는 걸 얘기하신 거 맞지요?" 하고 서로 엉뚱하게 다른 생각을 하고 있었다는 걸 깨달은 적이 있는 사람이라면 공감할 것입니다. 


그래서 한 동안 플래시_Flash 그리고 (지금도 여전히 많이 쓰이는) 애프터 이펙트_After Effect  통한 샘플 모션 제작도 많이 있었습니다.


하지만 애프터 이펙트는 제작된 결과물은 실제 사용 할 수 있는 인터페이스가 아닌 동영상이라는 한계가 있습니다. 프로토타입의 효과를 맛본 사람이라면 알겠지만, 직접 사용해보는 것과 눈으로 보는 것 사이에는 아주 큰 갭이 있죠.


그리고 플래시와 액션 스크립트_Action Script  초기 아이폰에서 너무 무겁다는 이유로 지원을 하지 않게 된 이후로 구시대의 유물이 되어가고 있죠.

이러한 배경을 가지고 프로토타이핑 툴들이 등장하기 시작합니다.







프로토타이핑 툴의 종류

프로토타이핑 툴은 크게 두 가지 종류로 나눌 수 있는데요,

Flow 형과 Interaction 형입니다.



Flow 형은 말 그대로 전체 화면의 Flow를 파악하기에 용이한 타입입니다.

페이지 수가 많은 웹 또는 앱을 제작한다고 했을 때 IA 를 파악하기에 적합한 기능을 가지고 있습니다.


EX) POP , Adobe XD , Proto.io , Flinto


< Framer.js >



Interaction 형은 한정된 화면에서의 인터렉션의 디테일에 집중합니다.

Framer.js 와 같은 프로토타이핑 툴을 예로 들 수 있을 텐데요, Framer에서는 아주 디테일한 부분의 인터렉션을 조정하여 정확하게 내가 원하는 느낌의 움직임을 구현해 낼 수 있습니다.

Flow 형 보다 대체적으로 사용법을 익히기가 어렵다는 특징이 있습니다.


EX) Framer.js , Origami , Form 






프로토타이핑의 역할 

프로토타이핑은 개발에 들어가기 전 테스팅을 하는 단계로 빠른 속도가 생명입니다.


그래서 프로토타이핑 툴들은 Flow, Interaction 구현뿐만 아니라 얼마나 수정 보완이 용이한 지, 모바일 또는 다른 디바이스 화면에서의 확인을 얼마나 쉽게 할 수 있는지, 프로젝트 구성원과의 공유는 얼마나 간편한 지도 확인을 해봐야 하죠.


다양한 프로토타이핑 툴들의 홍수 속에서 우리가 잊지 말아야 할 점은 프로토타이핑은 프로세스라는 점입니다. 


따라서 프로토타입의 완성도에 목을 매어서는 안되고 다음의 역할을 잘 수행하는 지를 우선 체크해봐야합니다.


서비스의 플로우 또는 구조를 점검하는 역할

개발에 들어가기 전에 발생할 수 있는 문제점들을 점검하는 역할

구성원들이 프로젝트에 대한 이해도를 높일 수 있는 커뮤니케이션 도구 역할


우리가 디자인해야할 서비스들이 점점 더 섬세함을 요구하고, VR 과 같이 우리가 경험해보지 못한 새로운 인터페이스 환경이 생겨나면서 프로토타이핑의 중요성은 더욱 커질 것입니다.


앞으로의 프로토타이핑의 발전을 더욱 기대해봅니다.

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari