웹 설계 툴 Axure 링크 기능 알아보기
안녕하세요. 소이정입니다.
지난번에 이어 오늘은 Axrue 강의 두 번째를 들고 왔습니다.
강의라고 할 것도 없이
간단한 기능 하나를 설명해 드리려고 합니다!
먼저 웹페이지를 들어가면 상단에 있는 메뉴들이 있는데요.
찾고자 하는 정보를 얻기 위해 상단의 메뉴를 클릭하면 해당 서브 페이지로 이동하고 정보를 확인하고 갑니다.
액슈어도 웹페이지 기초를 설계하다 보니 일반 홈페이지와 비슷한 기능들을 많이 구현할 수 있답니다.
그래서 오늘은 메뉴를 클릭하면 다른 페이지로 바로 이동을 할 수 있는
링크 걸기를 설명해 드리겠습니다~!
본격적으로 시작하기 전에!
지난번에 마스터를 만드는 법을 알려드렸죠. 모르시는 분은 여기서 먼저 확인해 주세요.
▼ 액슈어 기본 화면 설정 ▼
1. 마스터 생성하기
지난번 포스팅에서 소개 드렸던 파일을 예시로 그대로 가져왔어요. 제일 먼저 마스터로 설정해둔 GNB는 메뉴를 누르면 해당 페이지로 이동하는 링크 기능이 필요한데요. 메뉴를 눌렀는데 페이지가 움직이지 않고 그대로라면 안되겠죠?
GNB를 설계한 페이지를 열어봅시다. 첫 번째는 MASTERS 패널에서 더블클릭하거나, 상단에 탭에서 선택할 수 있습니다. 편한 방법으로 창을 열어주세요~!
* GNB란? Global Navigation Bar, 웹페이지와 웹페이지를 서로 연결하는 하이퍼링크를 모아두는 자리로, 웹사이트를 방문한 사용자의 이동경로에 관여하며, 정보에 대한 접근을 쉽게 해주는 요소
2. 링크 연결할 텍스트 또는 모형 클릭하기
그 후 링크를 연결할 텍스트나 모형을 클릭해 주세요. 저는 ABOUT이라는 메뉴에 링크를 연결해 볼게요!
3. INTERACTIONS - New Interactions 클릭
파란 버튼인 New Interactions를 클릭하면 ①번 셀렉 박스와 함께 어떤 행동을 선택할지 리스트가 나오는데요! 그중 제일 위에 있는 ② Click or Tap을 선택합니다. 그리고 어떤 기능을 실행할지 선택합니다. 링크를 열어볼 거니 ③ Open Link를 클릭합니다. 이후 각각 메뉴별로 해당되는 페이지를 선택해 주면 됩니다. 해당되는 페이지 클릭은 ④의 목록에서 진행해 주시면 됩니다.
링크를 선택하고 나면! 번개 모양의 아이콘이 생성되는데요. 이는 링크가 기능이 무언가 연결되어 있음을 의미합니다. 링크 설정을 했으니 아래와 같이 아이콘이 생성된 것이랍니다~
4. 기능 연결 마무리
위의 이미지대로 선택을 완료했다면, OK를 클릭해 줍니다.
5. 확인하기
완료되면 이렇게 초록색 텍스트로 연결된 페이지가 무엇인지 표기되는데요. 만약 초록색으로 보이지 않는다면 링크 연결이 안 됐을 수도 있으니 다시 한번 살펴보시기 바랍니다!
* 추가 꿀팁!
링크를 연결할 때 하나하나 단계를 진행하며 선택을 할 수 있는 경우도 있지만 행동과 기능을 한 번에 진행할 수 있는 버튼도 생성되어 있는데요. 제 버전 기준일 수도 있으니 이건 참고만 해주세요! 빨간 사각형 안에 버튼을 클릭하면 바로~링크 연결이 가능하답니다!
링크 연결 끝!
모든 링크를 이렇게 연결해 보았습니다. 번개 모양 아이콘이 다 붙어있죠? 링크가 잘 연결됐는지 확인하고 싶다면 F5를 눌러보면 됩니다. 웹으로 연결되어 확인할 수 있기 때문이죠!
여기까지 Axure에서 링크 연결하는 방법을 알아보았습니다.
차근차근 하나씩 진행해 본 전혀 어렵지 않죠 ?!
다음엔 또 다른 꿀팁으로 찾아오겠습니다.
감사합니다~~!!
©SOIJEONG