시리즈 알려드려요, 깨알정보

초보 웹기획자를 위한 Axure 강좌

안녕하세요. 소이정입니다!

오늘은 코딩 작업 없이도
웹사이트를 간단히 설계할 수 있게 도와주는 프로그램인
액슈어의 기본 화면 구성을 소개해드리고 자 합니다.

액슈어는 아래 웹기획자들을 위한 툴 소개에서 한 번 소개한 적이 있는 프로그램이기도 한데요!

웹기획자들을 위한 툴

[BY 소이정] 안녕하세요. 디자인 소이정입니다. 오늘은 웹기획자들이 사용할 수 있는 툴들을 소개해드리...

naver.me

PPT를 이용하여 기획을 하는 곳도 있지만,
그것보다 이해하기 쉽고 소통이 조금 더 빠른
이러한 프로토 타입 설계 프로그램을 이용하기도 합니다.

그럼 본격적으로 Axure의 화면 구성과
기본적인 기능을 설명드리도록 하겠습니다.

Axure 기초 화면 구성

Axure을 실행하게 되면 여느 프로그램과 똑같이 새 문서를 만들지 기존 문서를 불러올지 선택하게 됩니다. 새 문서를 열고 기본적인 화면구성을 배워봅시다.

1,5. PAGES(사이트맵)

PAGES는 사이트맵이라고 생각하시면 편하실 거예요. 모든 메뉴의 페이지를 작성하면 결국 사이트맵이랑 같으니까요~!

예시로 적어보았는데요! 해당 작업은 홈페이지를 본격적으로 설계하기에 앞서 가장 먼저 필요한 작업입니다. 페이지를 새로 만들기도 하고 드래그 드롭으로 하위 문서로 만들기도 하고 여러 가지 변형을 하면서 사이트맵을 작성할 수 있습니다.

저는 메인 페이지 이외에 다른 메뉴들은 각각 뎁스별 폴더를 만들어 정리를 하고 있답니다!
이 부분은 액슈어를 사용하는 분들마다 다르니 편한 방법을 찾아 사용하시면 됩니다.

예시로 만든 페이지를 정리하자면 아래와 같습니다.

MAIN - About(ABOUT US, 오시는 길) - WORK(우리가 하는 일) - STORY (우리의 이야기) - PORTFOLIO(영상, 사진)

그리고 만들어진 페이지를 누르면 위와 같이 5. 페이지 명에 문서들이 늘어나는 것을 확인하실 수 있습니다. 이제 정리한 사이트맵을 통해 각각의 페이지에 걸맞은 설계를 하시면 됩니다.

2. OUTLINE

다음은 아웃라인입니다. 해당 영역은 페이지마다 넣어둔 도형이나 텍스트 등의 위치를 수정할 수 있는 공간인데요. 포토샵으로 따지면 레이어 정리를 할 때 사용하는 레이어 패널과 같습니다.

이런 식으로 도형을 그리고 텍스트를 입력하면 레이어가 생기는데요. 작성해둔 텍스트가 안 보인다거나 도형이나 버튼이나 등등 무언가가 안 보일 때 해당 영역에서 레이어가 아래에 있는지, 없는지! 확인하면 된답니다.

3. LIBRARIES

LIBRARIES입니다. 각각의 도형과 텍스트, 버튼 모양이 들어있는데요. 표도 만들고, 체크박스 등 원하는 도구를 끌어다가 설계 영역에서 사용할 수 있습니다. 실제로 웹에서 사용하는 기능들을 사용할 수도 있답니다!

이런 식으로 도형을 통해 영역을 나눌 수도 있습니다. GNB 영역과 콘텐츠 영역, 푸터 영역을 분리했습니다. 그리고 저는 1200px 기준으로 주로 작업하고 있는데요. 작업 사이즈는 자유롭게 가능하니 이것도 마찬가지로 여러분이 사용하면서 편한 작업 사이즈를 찾으시면 좋을 것 같아요.

4. MASTERS

MASTERS는 자주 사용하는 설정들을 모아놓은 것을 만들어 보관할 수 있는 영역입니다. 예를 들면 홈페이지에는 메뉴와 푸터가 계속해서 고정으로 들어가는데요.
이럴 때 MASTERS에 미리 만들어 놓고 페이지별로 작업할 때 끌어와서 사용하면 된답니다!

아까 만들어둔 GNB 영역에 메뉴를 추가해서 예시를 들어보도록 하겠습니다. 방법은 두 가지가 있는데요.
아래 방법에서 편한 방법으로 진행하시면 됩니다.

첫 번째는 만들어둔 GNB 영역을 선택한 후 오른쪽 마우스를 눌러 Create Master 눌러주기 - 이름 설정하기 - 끝

두 번째는 MASTERS에 페이지를 추가 - Create Master - 끝

마스터 영역에 GNB 마스터가 생겼죠? 다른 페이지에서 똑같은 GNB를 넣고 싶다면 마스터에 있는 GNB를 설계 영역으로 드롭해 주세요. 페이지별로 작업할 때마다 만들지 않아도 된답니다!

6. 설계 영역

설계 영역은 원하는 대로 이것저것 작업을 할 수 있는 공간인데요. 타이틀도 넣고, 콘텐츠 내용도 넣고, 원하는 도형도 넣고, 사진도 넣고! 다양한 작업을 할 수 있는 공간입니다.

위에서 조금 조금 보였던 GNB나, 콘텐츠 영역, 푸터 영역을 표시해둔 것도 모두 해당 설계 영역에서 진행했다고 보시면 됩니다.

7. STYLE

STYLE은 도형이나 텍스트 등을 수정할 수 있는 공간입니다. 도형의 색을 변경하고 싶다거나 불투명도를 조정하고 싶다거나 등 다양한 스타일 변경 관련 기능을 설정이 가능합니다.

콘텐츠 영역을 클릭한 STYLE 창의 모습입니다. 직사각형의 크기와 텍스트의 크기 등을 확인할 수 있다는 점! 변경도 바로바로 가능해서 편리하답니다~!

8. INTERACTIONS

해당 영역은 링크를 걸거나 등의 기능을 수행할 때 주로 사용하는데요. 클릭을 통해 다른 페이지로 이동하거나 GNB 영역을 통해 다른 메뉴로 이동하거나 등등의 기능을 이용할 수 있답니다!

New Interaction을 클릭하면 어떠한 동작을 할지 골라 설정하면 그 동작을 했을 때 실행하고 싶은 행동을 선택할 수 있습니다.