업무 활용도가 높은 프로토타이핑 툴 – POP, pixate

업무 활용도가 높은 프로토타이핑 툴 – POP, pixate

업무 활용도가 높은 프로토타이핑 툴 – POP, pixate
Category
Share Story

최근 발표되는 모바일 앱들은 단순한 터치의 개념을 넘어 조작 시 사용자에게 재미적인 요소와 함께 새로운 인터랙션을 제공하기에 이르렀습니다. 어쩌면 스큐어모피즘을 벗어 던진 플랫한 디자인에서 오는 불명확한 피드백을 다양한 제스처과 트랜지션(Transition), 애니메이션 등을 활용하여 명확히 구획을 나누려고 했는지도 모릅니다.

하지만 뚜렷해져 가는 것은 최근 플랫한 디자인이 주를 이루면서
사용자가 ‘터치 시 튕기는 아이콘’ 이라든지
‘스와이프 시 좌우로 부드럽게 움직이는 화면’ 등의
다양한 애니메이션과 트랜지션을 적용한다는 사실이지요.

하지만 이러한 변화에 발맞춰가기에는
디자이너가 사용하는 프로그램(포토샵,일러스트)이나 화면 전개도(파워포인트)
파일만으로는 화려한 모션들을 설명하기가 어려워지고 있는 상황입니다.
그렇다고 인터랙션을 설명하자고 일일이 동영상을 제작하거나
gif 이미지를 만들기엔 시간과 노력이 또 너무 많이 들죠.

그래서 최근 이러한 문제점을 보강하기 위하여 등장한 도구들이
소위 말하는 프로토타이핑 툴이라는 것인데요.
올 초 페이스북이 ‘페이버(Paper)앱’을 만들면서 사용한 오리가미(Origami)가
대중에게 오픈 소스로 제공되면서 프로토타이핑 툴에 대한 관심도가
점점 높아지고 있는 것 같습니다.

 

1.프로토타이핑 툴의 필요성
프로토타이핑 툴은 왜 필요한 걸까요?
또 프로토타이핑 단계를 한 번 더 거쳐야 하는 이유는 무엇일까요?

우리가 앱을 만들 때 실제 구동되는 인터랙션을 보기 위해서는
기획-디자인-개발 순의 과정을 거쳐야만
비로소 확인이 가능한 테스트 버전을 얻을 수 있게 됩니다.
그런데 이 과정에서 작업 중 정적인 이미지 만을 사용한다면
상호간 소통과 이해에 문제가 생길 수 있습니다.

단적인 예로,
디자이너는 화면을 스와이프 시
‘Z축으로 물러나면서 블러 처리가 되어 새로운 화면을 +X축으로 이동’ 되는 것을
예상하고 데이터를 넘겼지만
개발자는 단순히 ‘+X축으로 슬라이드 되면서 블러 처리 되는 구나’라고
해석할 수 있습니다.
즉, 움직이지 않는 이미지로는 서로 정확한 의미를 전달하기에는
역부족이라는 것입니다.

그래서 프로토타이핑 단계를 거치면
작업자(기획자, 디자이너, 개발자) 간의 원활한 소통이 가능해지며
개발을 번복할 확률도 줄일 수 있기에 그 활용 가치는 매우 높습니다.

 

2. 프로토타이핑 툴의 종류
현재 프로토타이핑 툴은 오리가미(Origami) 외에도
Axure, BalsamiqFileSquare, Flinto, Framer, Indigo Studio,
Invision, Marvelapp, Mockups, Proto.io,Pencil,Pixate, pop 등
다양하게 출시된 상태이며
이들 중에는 UI 목업 작업에 특화된 툴,
스케치 후 인터렉션 연동이 가능한 툴,
트렌지션 기능이 포함 된 툴 등 다양한 형태를 띠고 있습니다.

[ 아래 관련 포스트 참조 ] 궁극의 프로토타이핑 툴, Axure
다양한 Hi-fi 프로토타이핑 툴 가이드 – Fluid UI, Proto.io, Powerstory

그 어떤 기능이 좋다고 말하기엔
서로가 너무 다른 기능들로 툴들을 제공하고 있기 때문에
우위를 가리기는 어려울 것 같습니다.
다만 테스트 기간 동안 활용을 한 후 개인이 필요한 목적에 맞춰
툴을 선택하는 것이 좋을 것 같습니다.

 

3. 프로토타이핑 툴의 추천
모든 프로토타이핑 툴은 클라우드, 모바일 앱, 웹 3가지의 서비스가 지원되며
웹에서 작업한 파일을 실시간으로 모바일 앱으로 확인할 수 있습니다.
제가 개인적으로 사용해 본 툴들은 Pop , Flinto , Pixate, Invision이 있으며,
이 중 제 목적에 맞고 업무의 활용도가 높을 것 같은 툴 2가지와
기타 의견을 정리해 보았습니다.

첫번째, 아이데이션 단계에서 활용도가 높은 “POP
디자이너와 UI설계자가 함께 스케치(아이데이션)한 화면으로 인터렉션에 대하여
의논할 때 간편하게 사용할 수 있는 툴입니다.
간단히 스케치한 화면을 촬영(폰으로) 한 후 원하는 영역을 지정한 다음
제스쳐, 트랜지션을 설정할 수 있습니다.
또한 다음 화면에 대한 연동도 가능합니다.
조금 아쉬운 점은 화려한 트랜지션 효과와 애니메이션은
지원하지 않는다는 점입니다.

정말 단순한 기능만으로 짧은 시간 내 앱 작동방법을 보여 줄 수 있는 툴입니다.

어쩌면, 급하게 화면 전개에 대한 설명이 필요한 자리라면,
유용하게 사용될 수 있지 않을까 생각됩니다.

* 참고
모바일 앱에서는 아이폰4S에 최적화되지 않아
팝업버튼이 화면을 넘어가기도 합니다.
한국 앱스토어에서 앱다운로드 시에는 실행이 되지 않고,
미국 앱스토어에서 다운로드 한 앱은 정상적으로 작동됩니다.

두번째, 디자인 제안 단계에서 활용도가 높은 “pixate”
이 툴은 개발되지 않은 앱의 인터렉션을 선경험을 할 수 있는 좋은 툴이라고
생각됩니다.

7가지의 애니메이션을 중복하여 활용할 수 있으며 각 항목별 다양한 옵션을 두어 동작 시 자연스러운 애니메이션을 구동할 수 있습니다.
어떻게 보면 제가 사용해 본 4가지 툴 중 가장 높은 수준의 애니메이션 효과를
낼 수 있는 툴인 것 같습니다.

다만 조금 불편한 점이 있다면
동작과 애니메이션을 입힐 대상은 하나하나씩 나누어
모바일 앱 제작과 동일한 형태로(컷팅된 PNG) 제공하여야 한다는 점입니다.
또한 하나의 이미지에 다양한 애니메이션을 입힐 경우에도
레이어(포토샾의 레이어 기능처럼)의 연관 관계를 잘 이해해야 합니다.

http://player.vimeo.com/video/102373064

이 툴은 능숙해지는데 시간이 조금 걸린다는 것과
높은 수준의 인터렉션을 제작하기 위해서는
시간과 노력을 투자하여야 한다는 점을 유념하시고 시작하여야 할 것 같습니다.

 

4. 마치며..

아직까지는 프로토타이핑 툴로
자유로운 애니메이션이나 트랜지션을 구현하기에는
조금 역부족이라는 생각이 듭니다.

이를 테면 아래와 같은 기능들을 적용하고 싶어도
이 툴(Pop , Flinto , Pixate, Invision)만으로는 제공이 불가능했기 때문입니다.
– 이동, 크기, 회전, 화면전환과 같은 기능들은 X,Y축 수치 입력만 가능
(Z축에 대한 대응 불가능)
– 센서기에 따른 인터렉션 지정 불가능
– 개발과 연동 불가능

아마도 위 기능들까지 탑재가 된다면,
툴에 대한 엄청난 공부가 필요하게 될지도 모르지요.
그래도 프로토타이핑 툴로 개발까지 연동이 가능하다면
학습의 가치가 있지 않을까 생각됩니다.
하지만, 아직까지는 아쉽게도 프로토타이핑 툴이 개발영역까지 범위를 넓히기엔
방대한 UI 프레임워크를 맞추긴 힘들 것이라 추측됩니다.

향후 프로토타이핑 툴의 행보가 어떻게 변화될진 모르지만
개발의 영역까지 범위를 넓힌다면 가벼운 샘플 제작만으론 끝나진 않을 것이라고
생각됩니다.

 

 

– 가치디자인그룹 김강미

 

[catlist name=”UX & Prototyping” numberposts=5 excerpt=”yes” pagination=”yes” excerpt_size=”0″ title_only=”yes“]