넘쳐나는 프로토타입 툴

2016년부터 우리는 프로토타입  시장의 춘추전국시대를 맞이했다.

웹 디자이너라면 코딩을 해야 된다는 인식에서 점점 프로토타입 툴은 해야 된다는 인식으로 변화된 것 같다. 코딩의 진입장벽이 프로토타입 툴보다는 높았던 탓에 나름의 타협인 것 같다. 개인적으로는 웹 코딩에 관심이 더 많았지만, 저 흐름에 나도 프로토타입  공부를 했었다.

 당시에 공부하고 사용했던 프로토타입 툴은 2가지였다.

  1. Lo-Fi(충실도가 낮은) 프로토 타입 툴 Invision
  2. Hi-Fi 프로토타입 툴 Framer

https://framer.com/

사용률을 따져 보자면 앱 UI 디자인을 진행하고 실제 앱 서비스를 만드는 과정에서 95% 이상은 Invision을 사용했다. 사실 그때는 마이크로 인터렉션보다는 페이지 간의 플로우를 더 중요시했기 때문에 페이지 링크 기반인 Invision을 사용했던 것은 당연했던 것 같다.

개인적인 생각이지만, Framer 같은 경우는 비효율적이었다. 그 당시에 나름 웹 코딩에 대한 지식이 있는 상태라서 Coffee script를 사용하는 데 문제는 없었지만, UI 인터렉션 만들기에 자유도가 높은 만큼 노력?이 많이 들어갔다. 스크립트에 숙련되지 않은 디자이너에게는 마치 앱을 하나 만드는 수준의 노력이라는 생각이 들었다. 그만큼의 효능도 없다. 앱 개발에 사용되는 언어와 Framer에 쓰인 커피스크립트와는 호환도 되지 않는 단점도 있었다.

프레이머를 더는 쓰지 않은 이유,

할 시간이 부족하거나 할 능력이 부족하거나

그렇게 2~3년이 지난 지금, 트렌드도 바뀌었고 내 생각도 바뀌게 되었다. UI에서 점점 마이크로 인터렉션이 중요해졌고, 페이지 트랜지션에도 예전처럼 딱딱하지 않는 것을 보고 관련 프로토타입을 쉽게 만들 수 있는 툴이 있는지 알아봤다. 그러다 Principle(프린시플)이라는 프로토타입 툴을 접했다. 그 전까지는 개발자와의 소통을 위해 에프터이펙트로 만들었는데 애초에 UI 인터렉션하기 위해 만들어진 툴이 아니기 때문에 제약이 많고 복잡했다.

앱 GUI를 포토샵에서 하다가 스케치로 옮긴 것처럼, 점차적으로 인터렉션 구현을 에프터이펙트에서 프린시플로 옮겨갈 예정이다.

principle_2

적당한 난이도와 높은 자유도, Principle

프린시플은 Lo-Fi와 Hi-Fi의 중간 단계의 프로토타입 툴로써 프로토타입 제작에 아주 유용하다. 스케치의 가벼운 UI와 에프터이펙트의 키프레임을 섞어 놓은 느낌이다. 아래 영상을 보면 어떤 툴인지 이해가 바로 된다.

프린시플 소개 영상

프린시플의 장점

  1. Lo-Fi에 비하면 구현 가능한 자유도가 매우 높음
  2. 상대적으로 가볍고 러닝커브가 낮음
  3. 스케치와의 호환성 높음
  4. Tap, Long Press, Scroll, Drag, Touch, Hover 등 많은 이벤트로 구현이 가능하고 실제 앱처럼 사용 가능함
  5. 프린시플을 사용하는 유명한 회사가 많음

애플, 카툰네트워크, 페이스북, 구글, 아마존, 나이키, 어도비, 넷플릭스, 마이크로소프트, 스타벅스 등… 많은 회사가 프린시플을 사용한다. 이게 중요한 이유는 우리는 IT 업계 종사자이기 때문이다. IT 쪽은 협업을 피할 수 없다. 고객사, 기획자, 디자이너, 개발자와의 소통에서 프로토타입은 아주 중요한 징검다리 역할을 한다. 만약 아무도 사용하지 않는 툴이라면 무인도에서 혼자 사업하며 블루오션이라고 하는 것과 같다.

실무를 하며 개발자와의 소통을 위해 에프터이펙트로 작업하던 방식은 이제 그만둬도 될 것 같다. 프린시플로는 표현하기 어려워 에펙을 사용해야 되는 경우들도 있어 아쉬운 점들은 있지만, 프로토타입 툴임을 다시 생각해보면 이 정도만으로도 이미 충분하다.

프린시플 이용해서 직접 제작한 예제

01. Toggle Button

02. Tabs

03. Menu

04. Carousel

05. Modal Popup

06. Page Transition

07. Control

08. Micro Interaction

09. Slider

10. UI Interaction 

기본적인 스크롤부터 마이크로 인터렉션, 영상 재생까지 웬만한 인터렉션은 다 가능하다. 스케치에서 제공하는 Background Blur 효과는 아직 제공하고 있지 않아 아쉽지만 이런 부분들만 버전업되면서 더 좋아질 것 같다.

완성도 높은 프로토타입으로 개발자와의 소통이 더 좋아질 것 같아 앞으로 기대되는 툴이다.

참조

프로토타입 툴

인비전 https://www.invisionapp.com/

프레이머 https://framer.com/

Principle

http://principleformac.com/

http://principletemplates.com/

https://shortcuts.design

#Design#Gui#Interaction#Principle#Prototype#UI

신연석

UI DesignerSeoul, South Korea

가치 중심적인 디자인을 추구하는 디자이너입니다. 현재 Cheil Pengtai에 재직 중이며, 웹·앱 디자인, 일러스트, 모션 그래픽 작업을 주로 하고 있습니다.