UXer들은 다양한 툴들을 개발해왔습니다. 자신의 업무를 위해서 툴을 만들었다가 아예 비즈니스를 전환하는 경우도 있을 정도입니다. 어떤 좋은 툴이 있고 어떻게 쓸 수 있는지를 알게 되면 UX 프로젝트에서 큰 도움을 받을 수 있습니다.

2009년 Todd Zaki Warfel이 Rosenfeld media를 통해서 ‘프로토타이핑’이라는 책을 출간한 뒤, 한동안 프로토타이핑 툴에 대한 관심이 급속도로 번졌던 적이 있습니다.
발사믹 목업과 Axure RP Pro는 그 중에서도 가장 선도적인 입지에 있었죠.
하지만 실제 Axure를 써보신 분들은아시겠지만 UX가 상당히 떨어집니다. 어렵고 복잡하고 까다롭기 때문에 개발 툴에 익숙한 사람이라면 모를까 일반 UXer들이 쓰기에는 부적합했습니다. 반면 발사믹은 또 지나치게 단순하다는 것이 단점이었습니다.

Fluid UI

Fluid UI는 최근 물밀듯 쏟아져 나오고 있는 UI 프로토타이핑 툴 중의 하나입니다.
매우 직관적인 작업환경과 뛰어난 인터렉션 디자인이 돋보이는데 툴 자체에 대한 관심도 관심이거니와 이 툴의 인터렉션 디자인을 세밀하게 파악해 보는 것도 좋은 공부가 될 수 있을 것입니다.

http://www.youtube.com/watch?feature=player_embedded&v=uodln1GmrFM

Proto.io

Proto.io 는 직관적인 드로잉 환경 뿐만 아니라 다양한 디바이스에서의 다양한 인터렉션을 지원하는 뛰어난 Hi-fi 프로토타이핑 툴입니다.
그동안 명성을 떨쳤던 Axure RP Pro에 비해서 UX 면에서 훨씬 우수합니다. 기능도 더 풍부합니다. 다른 막강한 경쟁자들이 있기는 하지만 근소한 차이로 앞서지 않을까 하는 생각이 듭니다.

아마도 새로운 Hi-fi 프로토타이핑 툴의 No.1이 될 것으로 기대됩니다.

• 파워풀한 프로토타이핑 작업 환경을 지원한다. UI 설계시 필요한 다양한 기능들을 제공한다.
• 각 디바이스 및 OS 환경에 맞는 다양한 UI 라이브러리를 제공한다.
• 제스처, 터치 이벤트, 스크린 Transition, 애니메이션 등 인터렉션디자인을 풍부하게 지원한다.
• 완성된 프로토타입을 HTML5로 퍼블리싱하거나 실제 앱으로 연결시킬 수 있다.
• 애니메이션을 넣을 수 있다. State에 따른 UI 요소의 변화 뿐만 아니라 Timeline 설정까지 가능하다.
• 터치스크린에서의 드래그(밀어서 끌기) 인터렉션이나 기기의 가로-세로 Rotation에 따른 UI 변화까지 지원한다.
• 사용자가 입력한 내용을 변수로 해서 연산을 통해 결과를 보여주는 것이 가능하다. 자바스크립트를 통해서 간단한 계산을 자동으로 처리할 수 있다.

Powerstory

Powerstory는 Proto.io와 더불어 Axure의 아성을 무너뜨릴만한 장점이 가지고 있습니다. 바로 파워포인트에 플러그인되는 UI 라이브러리라는 점입니다. 인터렉션을 집어넣는 것은 제한적이지만 파워포인트의 원래 기능에 더해져서 기능을 제공하기 때문에 접근성이나 호환성이 뛰어납니다.
드러그 앤 드롭으로 원하는 UI 요소를 문서 상에 추가시키면 되며, 자신이 손수 만든 UI 요소를 라이브러리에 등록시켜 놓을 수도 있습니다. Keynotopia와 마찬가지로 텍스트는 파워포인트 상에서 수정이 가능하기 때문에 편집이 용이합니다.

또한 Powerstory가 프로토타입용 템플릿을 판매하는 키노트피아와 차별화되는 점은 UI를 디자인하는PowerWireframe과는 별개로 각 사용 케이스별로 UI를 구성할 수 있는 PowerStory보드를 제공한다는 점입니다.

• PowerWireframe이 작업창 우측의 UI Library를 이용하는 데 비해 PowerStoryboard는 좌측의 Steps Editor 창을 이용한다.
• Steps Editor에서는 단계별로 Use case들을 등록하고 각 Use case에 해당하는 Wireframe을 연결한다.
• 이렇게 PowerStoryboard를 만들어놓으면 Use case별로 보고를 하거나 테스트를 진행할 수 있다는 장점이 있다.
• 작업물을 Microsoft Team Foundation Server (TFS)로 내보내면(Export), Use case들이 Test case들로 치환된다.
• Test case들은 Excel이나 Word 문서로 변환이 가능하다.

PowerStoryboard의 기능 중 ‘Generate Test Cases’를 클릭하면 Steps Editor에 등록된 Use case들이 Microsoft TFS로 변환됩니다.

 Mockingbird

모킹버드(Mockingbird)는 웹브라우저에서 바로 프로토타이핑이 가능한 웹어플리케이션 툴입니다.
별도의 프로그램 다운로드나 설치없이 웹브라우저에서 접근해 언제든지 이용할 수 있죠.
여러 명이 동시에 협업하는 것도 가능합니다. 다시 말해 똑같은 페이지를 여러 명이 한번에 공동으로 작업할 수 있습니다.
사용 환경은 발사믹 목업과 비슷해서 드래그 앤 드롭으로 아주 쉽게 UI 컴포넌트를 불러오고, 텍스트 크기를 변경하는 등 쉽게 프로토타이핑 작업을 할 수 있습니다.
그 외에 여러 개의 페이지를 만들고 서로 간에 링크를 만드는 것도 가능하기 때문에 (제한적이긴 하지만) 프로토타입에 인터랙션을 넣는 것도 가능합니다. 그러나 크롬이나 사파리에서만 지원되고 익스플로러는 지원하지 않는 단점이 있습니다.

Indigo Studio

인디고 스튜디오(Indigo Studio)는 Proto.io와 맞먹는 막강한 프로토타이핑 기능을 제공합니다.
Proto.io보다 프로토타이핑 본래의 기능은 다소 부족하지만, 인디고 스튜디오는 자신만의 색다른 기능을 갖추고 있습니다.

• 다양한 장소, 상황에서의 custom cartoon 이미지들을 제공하여 작업자가 특정 상황에서 벌어지는 스토리보드를 드로잉에 대한 부담없이 자유롭게 그릴 수 있다.
• 직관적인 UI 디자인 작업 환경을 제공한다.
• 모바일 터치스크린에서의 다양한 인터렉션들을 지원한다.
• 애니메이션을 넣을 수 있다.
• 화면들간의 상호 연결관계를 파악할 수 있도록 인터렉션 익스플로러를 제공한다.

– UX1 컨설팅그룹

* 메인이미지 출처. https://popapp.in/