UI프로토타입: Axure RP로 만드는 스토리보드

Axure RP를 이용한 스토리보드 화면 설계

2013년 뜨거운 여름에 시작한 뜨거운 프로젝트 A를 통해 요구사항 수집부터 개발 단계까지 전체적으로 참여하며 프로젝트라는 것이 어떻게 진행이 되어 나가는지 큰 그림을 알게 되는 좋은 계기가 되었습니다. 그 중 요구사항을 수집, 분석하여 화면 스토리보드를 작성할 때 대부분 사용되는 파워포인트가 아닌 Axure RP 라는 Wireframe Software & Mockup Tool을 사용하게 되었습니다. 이번 프로젝트 종료 보고 기술서 에서는 느낀 Axure RP를 사용하며 느낀 장 단점과 사용법에 대해 소개합니다.

스토리보드란?

스토리보드는 보는 사람이 스토리의 내용을 쉽게 이해할 수 있도록 화면을 그림으로 정리한 계획표를 말합니다. 스토리보드는 화면설계 시나리오를 시각화 하여 표현하기 위한 도구인 동시에 고객, 개발자, 디자이너 간의 의사소통을 돕기 위한 중요한 수단이라 할 수 있습니다.

1. Axure RP 사용시 장점

Axure RP를 이용하면 파워포인트를 이용할 때보다 큰 장점이 있습니다. 파워포인트는 웹 스토리보드의 한 페이지 안에 있는 각종 링크 및 버튼 등의 네비게이션과 각 기능들에 대한 상세설명을 한 페이지에 모두 표현하기에는 쉽지 않은(웹의 한 화면이 설명할 내용이 많아 파워포인트에서 여러 페이지로 늘어 나거나, 한 화면에 글이 너무 많고 복잡해져서 이해하기 힘듦 )점이 있습니다.

그러나 Axure RP는 실제 웹 브라우저에서 실행 할 수 있는 Prototype HTML을 만들어 주기 때문에 동작하는 부분(마우스 동작 영역, 이벤트에 대한 링크)을 직접 체험을 할 수 있어 스토리보드의 본질적인 목적(시나리오를 시각화 하여 표현하여 의사소통에 도움을 주는 수단)에 더 가깝다는 장점이 있습니다.

이는 스토리보드를 보는 사람이 고객 또는 사용자라면(고객 또는 사용자는 실제 구현이 어떻게 보여지고 이용하는지를 중요하게 생각합니다) Prototype을 체험해 보면서 좀더 명확하게 이해 할 수 있습니다. 이해가 빠르고 명확하게 되면 고객 또는 사용자의 피드백에 걸리는 시간을 효과적으로 단축 시킬 수 있다는 장점이 있습니다.

또한 개발자와 디자이너들도 글(문서)이 아닌 동작(웹)을 통해 설계된 화면에 대한 이해가 빠르게 되고 Prototype소스를 적절하게 사용한다면(소스 중 일부를 이용하고, 소스를 보며 개발할 웹 화면의 스크립트를 작성 한다면) 빠르고 정확한 구현에 도움이 될 것 입니다.

2. Axure RP 사용시 단점

Axure RP 사용하면 파워포인트를 사용 할 때보다 단점이 있을 수 있습니다.

화면설계 스토리보드를 출력할 수 있는 산출물을 요구하는 고객이라면 각 페이지 별로 메뉴, 기능에 대한 설명 영역을 추가 하거나 하단의 페이지 메뉴에서 설정을 해 주어야 합니다.
(워드파일로 자체적으로 변환을 해주지만 상황에 따라서 추가로 수정해야 한다는 점이 있습니다.)

프로그램 가격이 라이센스 하나당 대략 50만원 정도로 추가 비용이 듭니다.
(30일 제약조건 없이 사용 할 수 있는 trial버전을 사용 할 수 있습니다.)

프로그램 사용을 위한 습득시간이 필요합니다.
(단, 기존의 Mock-Up Tool 등을 사용 한 경험이 있으면 습득시간이 빠릅니다.)

3. Axure RP 사용 설명

번호	설명
1. Wireframe	실제로 보여지는 화면 영역입니다.
2. Sitemap	Tree구조로 된 목차를 나타내는 영역입니다.
3. Widgets	Wireframe, flow Widget을 선택 하는 영역입니다.
4. Masters	공통으로 사용되는 Master를 설정하는 영역 입니다.
5. Widget Properties	Annotations, Interactions, Formatting 3가지 메뉴로 나뉩니다. Widget에 대한 설정을 하는 영역 입니다.
6. Dynamic Panel Manage	Dynamic Panel에 대한 설정을 하는 영역입니다.
7. Page	PageNotes, PageInteractions, PageFormatting 등 페이지관련 설명 및 설정을 하는 부분 입니다.

중요 메뉴 부가 설명

3-1. Sitemap

Tree 구조로 표현이 되어서 웹사이트의 메뉴나 서비스, 컨텐츠 별로 분류해서 사용하면 특정 페이지를 찾기가 쉽습니다. 실제 디자이너나 퍼블리셔가 만드는 HTML 파일의 수와 비슷해서 웹사이트에 필요한 HTML파일이 대략 몇 개인지 짐작을 할 수가 있습니다.

3-2. Widgets

Wireframe과, Flow가 있습니다. 기본적으로 웹에서 사용되는 Form요소, Button, Table 등 대부분이 Widget으로 구성 되어있습니다. 사용법은 Drag & Drop으로 중앙 Wireframe 화면에 배치시키고 설정 하면 됩니다.

3-3. Masters

파워포인트의 마스터와 비슷합니다. 공통으로 쓰이는 메뉴, Header, 레이블을 가진 버튼 등을 만들어서 사용할 수 있습니다. 마스터에서 수정을 하면 마스터를 Drag & Drop으로 배치한 부분의 내용도 같이 바뀝니다.

3-4-1. Interactions

화면에서 스크립트를 이용해 구현하는 기능(페이지 링크, Mouse Gesture, Layer등)을 부여하는 곳입니다.

3-4-2. Annotations

특정 요소에 부연 설명을 하는 기능을 설정하는 곳입니다.

3-5. Dynamic Panel Manage

Ajax 와 같은 동적인 화면을 설계할 때 사용되는 곳입니다. 레이어 방식으로 표현되고 있습니다. Dynamic Panel 을 이용해 좀더 복잡한 스크립트를 구현 할 수 있습니다.

3-6. Generate

Axure RP는 Wireframe화면 내의 내용을 2가지 형태로 변환 할 수 있습니다.

HTML Prototype으로 동적인 웹으로 변환이 가능하고, Word Spec으로 여러 추가한 기능에 대한 상세 Spec과 Screenshot을 포함한 문서로 변환을 할 수 있습니다.

단축키	명칭	변환종류	변환내용
F5	Generate Prototype	HTML로 변환	Prototype으로 실행하게 해줍니다.
F6	Generate Specification	Word파일로 변환	상세 spec을 문서로 나타내줍니다.