소프트웨어 공학에 나오는 소프트웨어 개발 방법론에서 중요시하는 것 중에 하나가 사용자 요구사항을 구체적으로 도출하고 명확하게 이해하는 것이다. 이를 위한 방법으로 설계단계에서 다양한 설계 명세서들이 작성되고 있지만, 사용자와의 가시화된 실질적이고 구체적인 대화에 이용되는 것은 프로토타입이나 스토리보드를 이용하는 것이 가장 확실한 방법이라 할 수 있다. 유저스토리를 이용해 구체적인 기능이나 화면을 상호 공유함으로써 요구사항을 점진적으로 이해하고 세세한 기능까지 확장해 생각하면 구현의 한계나 필요 자원 등을 판단할 수 있고 소프트웨어 구축의 완성도 평가에도 명확한 근거로 사용될 수 있다.

다양한 스토리보드 저작도구 중에 Axure 스토리보드 저작툴을 이용하면 사용자의 요구사항의 구체화뿐 아니라 개발자와 디자이너의 커뮤니케이션에도 함께 사용될 수 있어 더욱 구체적인 결과물을 설계단계에서 확정할 수 있다는 큰 장점이 있다.

여기선 Axure 저작도구에 대한 간단한 사용법과 스토리보드 공유를 위한 배포방법에 대해 알아보도록 하겠다.

Axure 저작도구는 http://www.axure.com 에서 설치파일을 다운로드 받아 간단하게 설치할 수 있다. Windows와 MAC 에서만 설치가 가능하며, 안타깝게도 사용 라이센스를 구매해야 제대로 이용할 수 있다.

1. 위젯버튼 추가 및 버튼 액션 추가 #

1. 좌측 Widgets 패널에서 버튼을 선택한 후 편집하려는 페이지에 마우스로 드래그해 이동시킨다.
2. 버튼이 추가되면 해당 버튼을 선택한 후 내용을 변경한다.
3. 기타 버튼에 대한 속성들은 화면 우측의 "Widget Properties and Style" 에서 정렬방식, 배경색, 폰트 속성 등을 변경하면 바로 변경된 내용을 페이지에서 확인할 수 있다.
4. 페이지에서 버튼을 선택한 후 오른쪽 "Widget interactions and Notes" 패널에 현재 선택된 위젯에 대한 액션목록을 확인할 수 있다. "Create Link.." 클릭하면 이동할 페이지 선택 창이 뜨고 목록에서 "Page1" 을 선택하면 OnClick 액션에 새로운 페이지 이동이 추가된 것을 확인할 수 있다.
5. 상단 툴바에서 미리보기를 클릭하면 현재 설계한 내용을 웹 브라우저를 통해 ACTION 버튼을 클릭하면 Page 1 으로 화면이 이동하는 것을 확인할 수 있다.

2. Sitemap 패널 페이지 재정렬 #

1. 페이지 이동 : "Page 3"을 마우스로 선택한 후 드래그해 "Page 1" 아래로 이동시킨다.
2. 페이지 삭제 : "Page 2"를 선택한 후 마우스 오른쪽 버튼을 클릭해 팝업메뉴의 "Delete" 메뉴를 선택한다.
3. 페이지 추가 : "Page 3" 을 선택한 후 마우스 오른쪽 버튼을 클릭해 팝업메뉴의 "Add > Child Page"를 선택하면 선택된 페이지 아래에 하위 페이지가 추가된다.
4. 페이지 이름변경 : 새로 생성된 페이지를 선택한 후 마우스 오른쪽 버튼을 클릭해 "Rename"을 선택한 후 페이지 이름을 변경한다.

3. 가이드라인 설정 #

1. Sitemap 패널에서 "Last Page"를 더블 클릭해 편집창을 띄운다.
2. "Last Page" 편집창에서 마우스 오른쪽 버튼을 클릭해 팝업메뉴의 "Show Grid"를 선택하면 편집 창에 가이드라인이 점선으로 표시가 된다.
3. 팝업메뉴에서 "Create Guides.." 를 선택하면 "Create Guides" 창을 띄운다.
4. "Create Guides" 창의 Presets 에서 가이드의 간격을 선택하면 정렬을 위한 가이드 컬럼의 세부 설정내용이 표시되고 임의로 변경할 수 있다.
5. "OK" 버튼을 클릭하면 설정내용이 편집페이지에 반영이 되고 가이드에 의해 쉽게 Widget 배치하고 정렬할 수 있게 된다.

4. 마우스 이벤트 위젯 스타일 변경 #

1. Widgets 패널에서 버튼 위젯을 페이지에 추가시킨다.
2. 버튼 위젯을 선택하면 "Widget Properties and Style" 패널에 버튼의 속성정보가 표시되고, MouseOver 를 선택하면 마우스가 올려졌을 때 버튼 위젯의 스타일을 변경할 수 있는 창이 뜬다.
3. 버튼 위젯의 폰트를 두껍게 설정한다.
4. 버튼 배경색을 변경한다.

속성 변경 후 미리보기를 실행하면 마우스 커서를 버튼위로 올려 놓으면 변경내용을 확인할 수 있다.

5. Master 생성하기 #

마스터는 빈번하게 사용되는 동일한 위젯 인터페이스들을 하나의 위젯처럼 사용할 수 있도록 한 것으로 소프트웨어 전체 레이아웃이나 Header/Footer 와 같이 변경이 적은 정적인 부분을 표현할 때 사용이 된다.

1. 스타일이 선택된 버튼위젯을 복사해 붙여넣기 하면 동일한 스타일이 적용된 버튼위젯들이 생성이 된다.
2. 각 버튼위젯을 선택해 버튼의 이름을 변경한다.
3. 4개의 버튼위젯을 선택한 후 상단 툴바의 정렬도구를 이용하면 선택된 위젯들의 상하좌우 정렬 및 간격을 동일하게 변경시킬 수 있다.
4. 4개의 버튼위젯을 선택한 후 마우스 오른쪽 버튼을 클릭해 팝업메뉴에서 "Convert to Master"를 선택한다.
5. Convert To Master 창에서 생성할 마스터의 이름을 입력한다.
6. 라디오 버튼에서 "Lock to Master Location" 을 선택해 마스터의 위치를 임의로 변경할 수 없게 설정한다.

설정이 완료된 후 "Continue" 버튼을 누르면 오른쪽 Masters 패널에 마스터가 추가된 것을 확인할 수 있다.

6. 각 페이지에 Master 추가하기 #

1. 마스터를 추가할 Home, Page 1, Page 3 페이지를 더블클릭해 편집창에 추가시킨다.
2. Masters 패널에서 button_header 마스터를 마우스 외쪽 버튼으로 선택한 후 드래그해서 추가할 페이지로 이동시키면 추가가 된다.

7. 위젯 라이브러리 추가하기 #

설계단계에서보다 더 완성도 높은 화면설계를 지원하기 위해 Axure에선 위젯 라이브러리 제공하고 있다. 구축 시스템의 개발 프레임워크 종류에 맞는 라이브러리 UI를 사용한다면 최종 산출물의 질적 향상을 기대할 수 있다.

라이브러리 추가 방법은 아주 간단한다.

• 위젯 패널의 메뉴 아이콘에서 라이브러리 다운로드를 선택하면 Axure 위젯 라이브러리 페이지로 이동한다.

• 라이브러리 목록 화면에서 원하는 UI를 선택해 라이브러리 압축 파일을 다운받는다.

• 다운로드 받은 압축파일 압축을 풀면 Axure 라이브러리 파일(.rplib)을 확인할 수 있다. 위젯 패널의 메뉴 아이콘에서 라이브러리 로드를 선택해 다운로드 받은 라이브러리 압축파일을 선택해 위제 라이브러리 추가를 선택해 해당 rplib 파일을 추가한다.

• 위젯 라이브러리 추가가 완료되면 Axure RP의 위젯 패널에 추가된 결과를 다음과 같이 확인할 수 있다.

• 추가된 위젯을 이용하면 설계 화면 구성이 더욱 간단해 지면 몇 번의 클릭만으로도 완성도 높은 화면설계가 가능하다. 다음은 추가된 위젯 라이브러리를 이용해 간단하게 구성한 예제이다.

8. 작성 스토리보드 출판 #

화면설계가 어느 정도 완료되면 프로젝트 멤버들 간에 설계자료를 공유할 수 있도록 Axure는 HTML 기반으로 스토리보드를 출판할 수 있는 기능을 제공하고 있다. 상단 메뉴의 Publish(출판) 메뉴를 선택하면 하위 메뉴로 제공하고 있어 상황에 따라 적당한 출판 기능을 사용할 수 있으며, 주로 사용되는 메뉴는 "Preview", "Publish to Axure Share...", "Generate HTML Files..." 3 가지로 각 메뉴의 기능은 다음과 같다.

• Preview : 현재 작성 중인 화면을 HTML로 출판하고 확인할 수 있다. 화면 작성 중에 화면 구성과 액션 동작 확인을 할 때 사용할 수 있다.
• Generate HTML Files : 작성된 스토리보드를 HTML 파일 형태로 지정된 폴더에 모두 생성한다. 프로젝트 멤버들에게 전체 스트로보드를 공유하거나 제출용 프로젝트 산출물로 사용할 때 사용할 수 있다.
• Publish to Axure Share : Generate HTML Files 메뉴와 전체를 출판하는 기능은 동일하지만 로컬 폴더에 생성하는 것이 아니라 Axure 사이트에 계정이 있는 경우 온라인 프로젝트 폴더에 출판해 온라인상에서 확인할 수 있도록 지원하고 있다.

9. Axure 클라우드 호스팅과 의견 공유 #

Axure 클라우드에서 호스팅 되는 프로토타입은 프로토타입 플레이어의 주석(comment) 창을 사용해 팀원 및 이해관계자와 해당 프로토타입에 대한 의견을 공유할 수 있다.

Axure 클라우드에 호스팅하는 방법은 Axure RP 의 상단 툴 박스에 있는 Share 아이콘이나 메인 메뉴의 “Publish > Publish to Axure share… (F6)” 에서 진행할 수 있으며, 클라우드 호스팅 서비스는 Axure 사이트에 가입한 사용자만 사용 가능하다.

Axure 클라우드 호스팅 방법은 프로토타입 이름과 공유 사용자 접근을 위한 비밀번호 정도만 입력하면 생성된 URL을 통해 웹브라우저에서 프로토타입을 공유할 수 있다. 비밀번호를 입력하지 않은 경우는 모든 사용자가 접근이 가능하다.

프로토타입 공유와 확인은 웹 브라우저에서 확인이 가능하며, 웹 브라우저를 통해 접근한 프로토타입 플레이어 우측의 DISCUSS 메뉴를 선택하면 참여자들 간의 의견을 확인할 수 있는 화면이 활성화된다.

의견 추가는 화면 자체에 대한 의견은 “COMMENT ON SCREEN” 메뉴를 선택해 프로토타입 화면에서 마우스로 클릭해 코멘트를 입력하고 코멘트 위치를 변경할 수 있다. 코멘트가 추가되면 DISCUSS 화면에서 코멘트 목록으로 확인할 수 있다.

등록된 코멘트는 참여자들이 댓글(Reply)을 추가할 수도 있고, 내용 수정(Edit Comment), 코멘트 삭제(Delete Comment), 화면 마크 색상 변경(Mark Resolved) 등 간단한 기능을 제공하고 있다.

Incoming Links #

Related Articles (Article 0) #

• 편집위원회/페이지이름