Skip to content

Axure #
Find similar titles

Structured data

Category
Programming

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

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

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

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

Axure homeage

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의 위젯 패널에 추가된 결과를 다음과 같이 확인할 수 있다.

위젯추가화면

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

화면구성 예제

Incoming Links #

Related Articles #

0.0.1_20140628_0