Axure

대학 동안에 홈페이지를 만들거나 Servlet을 공부하면서 게시판등을 만들어 봤을 때를 제외하면 웹사이트 관련 분야하고는 아주 동떨어진 분야에만 있어왔다. 프로젝트 중에 웹사이트 기획을 하게되어서 관련된 자료를 찾아가면서 일을 진행중이다.

일반적인 방법들...

이 분야에서 일을 하던 주변 사람들에게 물어보니 사이트 기획을 할 때 Excel, Power Point, Visio 또는 드림위버를 사용해서 웹사이트 기획을 한다고 한다. 실제로 프로젝트에서 작성된 몇 가지 자료들을 둘러보면서 느낀 점이 몇 가지 있다. (이 분야 비전문가이면서 다른 분야서의 경험에 비추어 볼때...)

기획 문서를 만드는것 자체가 오래 걸렸을 것 같다.
드림위버를 사용한 기획서를 본적은 없고 Excel이나 Power Point를 기준으로 작성된 문서를 보면 문서에 페이지 프로토타입을 그리는 것 자체가 상당히 시간을 잡아먹는 (time-consuming) 일이었을 것 같다. 실제 사이트에 딱 맞는 위젯들이 없을 뿐더라 한정된 페이지 크기에 적절이 배열하는 것이 쉬워 보이지가 않았다.

기획 의도의 전달이 매끄럽지 않을 것 같다.
프로토타입핑은 UI 또는 컨트롤들의 배치만이 중요한게 아니고 사용자 또는 소비자의 관점에서의 스토리를 개발자 및 디자이너에게 전달하는 것이다. 당연히 경영진에도 그게 전달이 되어야 한다. 이 목적을 달성하기 위해서는 두가지가 만족이 되어야 할 것 이다. 첫 번째는 웹사이트를 둘러보듯이 동작을 해야 한다. 물론 페이지를 하나씩 넘기는 것도 불가능한 것은 아니지만 백문이불여일견이라고 실제 링크나 버튼을 누르면서 프로토타입을 둘로볼 수 있다면 좋을 것 같다. 두번째는 해당 페이지 및 컨트롤에 대한 명확한 기획 의도 또는 스펙을 전달해야 한다. 기획자의 의도를 명확히 문장으로 표현하지 않는다면 잘못된 의사소통으로 인한 문제가 발생할 가능성이 크다.

유지보수/갱신이 어려울 것 같다.
기획 문서 자체가 작성이 어렵고 페이지 프로토타입하고 스펙과의 연결등이 매끄럽지 않기 때문에 수정 사항이 발생했을 때 기존 문서에 업데이트 하는 것이 그리 쉬워보이지가 않았다. 그리고 이런 문제로 있어서 프로토타입이 갱신이 된경우 스펙이 업데이트 안되거나 그 반대의 경우가 충분히 발생할 수 있다. (물론 어떤 경우에도 사람은 실수로 하지만 구조적으로 실수로 줄여줄 수는 있다.)

Wireframing

나름데로 이러한 문제의식을 같고 방법을 찾아보다 Wireframing에 대해서 알게 되었다. Wireframing 자체가 아주 새로운 기법이라고 생각하지는 않는다. 기획은 하시는 분들은 스토리보드를 만드신다고 하던데, 거의 비슷하지 않나 싶다. 여기서 내가 집중하는 것은 Wireframing을 위한 도구이다. 종이를 이용해서도 하지만 소프트웨어인 도구를 찾고 싶었다. 위에 언급한 점들을 보완하기 위한 소프트웨어의 요구사항은 이렇다.
첫번째 RAD Tool에 포함되어 있는 GUI designer처럼 쉽게 프로토타입을 구성할 수 있어야 한다. 물론 HTML이나 다른 웹페이지를 만드는 기술을 사용하지 않고도 사용이 가능해야 한다.
두번째는 작성된 기획서의 프로토타입이 실제로 동작해야 한다. Look and Feel이 거의 전무하지만 마치 실제 웹서비스를 이용하듯이 프로토타입 페이지들을 돌아다닐 수 있어야 한다. 텍스트와 링크등만 있다고 하더라도...
세번째는 기획의도를 기술할 수 있어야 하며 그 내용이 페이지와 각각의 컨트롤(또는 위젯)들과 연결이 되어 있어야 한다. 예를 들어서 버튼을 하나 추가하면 해당 버튼이 어떤 목적으로 사용되는지 기술할 수 있어야 하고 다른 팀원들이 그것을 쉽게 확인할 수 있어야 한다.
네번째는 유지보수가 쉬워야  하며 웹페이지 프로토타입과 기획 내용이 항상 동기화가 되어 있어야 한다. (동기화를 쉽게 할 수 있도록 해야 한다.)

Axure RP Pro

이런 요구 사항을 만족하는 툴들이 생각보다 많았다. (왜 주변에서는 찾을 수 없었나 모르겠다. 물론 기획보다는 개발자들이 많긴하지만...) 그 중에서 Axure RP Pro가 실제로 내가 사용해보고 있고 상당히 만족을 하고 있는 Wireframing tool이다.

드래그 & 드랍
위 그림에서 볼 수 있듯이 왼쪽에 보이는 위젯들을 마우스로 옮겨서 쉽게 배치시킬 수 있다. 일반적으로 웹페이지에 보이는 요소들은 위젯으로 모두 있어서 매우 쉽게 프로토타입을 구성할 수 있다.

사이트맵
페이지를 생성하고 관리하는 패널이 있다. 단단계 트리구조로 페이지를 배치할 수 있다.

스펙 / 노트
위 그림에서 하단에 보면 Page Notes라는 공간이 있다. 저기다가 해당 페이지에 대한 설명을 기술하는 곳이다. 특이한 점은 Page Notes도 여러가지 버전을 만들 수가 있다. 예를 들어서 작성된 기획서가 경영진/웹디자이너/개발자에게 배표된다면 각각의 페이지를 보는 관점은 공통적인 요소와 차별적인 요소들이 있을 것이다. 이 경우 공통 내용을 담은 노트와 나머지 3부류의 사람들을 위한 내용을 담은 노트를 작성해서 기획서를 만들 수 있다.

그리고 아래 그림을 보면 Submit 이라는 버튼에 대한 스펙을 적고 있다. 이 스펙은 프로토타입, 즉 이 툴로 작성한 페이지를 웹브라우저로 볼수있도록 한 버전에서 표시된다. 그리고 자동으로 생성된 스펙문서에도 자동으로 포함된다.

액션 설정하기
작성된 내용을 웹서비스처럼 이용해 보려면 링크나 버튼 등이 눌렸을 때 행동을 설정할 수 있어야 한다. 아래는 위에 있는 Submit 버튼을 눌렀을 때 Employees라는 페이지가 보이도록 설정하는 화면이다. 단순히 페이지를 여는 기능만이 아니라 몇 가지 다양한 기능들이 있다. 특히 Dynamic Panel (페이지 특정 영역을 지정함)의 상태를 변경시키는 기능을 이용하면 전체 페이지의 갱신없이 특정 영역만 경우에 따라서 업데이트하는 기능도 구현가능하다.

마스터 또는 템플릿
페이지에 공통적으로 들어가야 하는 내용들이 있다. 가장 간단한 경우가 Header나 Footer 등일 것이다. 여기서는 Masters라는 기능이 있다. 하나의 Master를 생성해서 여러 페이지에 넣으면 Master의 내용을 바꿨을 때 모든 페이지에 적용이된다.

프로토타입
위에는 Axure RP Pro에 대한 스크린 샷이지만 아래는 웹브라우저이다. 이 툴에서 작성한 내용을 웹브라우저에서 실행시켜볼 수 있는 프로토타입으로 생성해 준다. 여기서는 실제 사이트를 돌아보듯이 사용해 볼 수 있다. Axure RP Pro 프로그램 내부에서 동작을 시켜볼 수 있다면 더 할나위가 없겠지만 그 기능은 아직 구현이 되어 있지 않다. 이 프로토타입에는 위에서 작성한 스펙들이 노란색 노트아이콘으로 보이고 그 부분을 클릭하면 아래와 같이 창이떠서 그 내용을 보여준다. 그리고 페이지노트와 사이트맵도 보여진다. 이것들을 숨길 수도 있다.

스펙문서 작성
프로토타입과 별개로 스펙문서를 자동으로 작성해주는 기능이 있다. 문서는 Word 파일로 생성되면 페이지의 스크린샷 및 각 컨트롤의 스펙등 위에서 설정한 내용들이 모두 포함된다.

위에 모든 내용은 짧은 소개 동영상과 생성된 프로토타입을 보면 쉽게 이해가되리라 생각한다. 외국 사이트를 보면 몇 가지 더 요구하는 내용 중에 Database와의 연동 또는 실제 데이타를 이용할 수 있도록 하는 기능 그리고 제어변수의 지원등을 얘기하는데 있으면 유용하겠지만 너무 복잡한 기능은 소프트웨어 개발 경력이 없는 사람의 경우는 너무 복잡한 기능이 될 가능성이 있어 보인다. 개인적으로는 프로토타입을 웹브라우저에서가 아니라 이 프로그램 내부에서 바로 실행시켜볼 수 있는 기능이 추가됐으면 한다.


참고로 한달짜리 기능 제한이 없는 데모버전을 사용할 수도 있다. 가격은 라이센스 하나에 $589이다. (충분한 가치가 있는 소프트웨어라고 생각한다.)