액션 기능으로 콘텐츠에 링크를 넣어보세요.

간혹 페이지에 링크를 삽입하는 기능에 대해서 질문하시는 회원님이 계셔서 오늘은 액션탭을 활용하여 페이지 간에 이동, 외부링크 버튼 만들기에 대해서 알아보려고 합니다.

이번에 XELF서비스로 월드IT쇼에 참여하면서 제작한 웹브로슈어입니다.
간단하면서 명료하게 4페이지로 이루어진 브로슈어인데요. 각 페이지 하단에는 페이지 이동이 가능하도록 작은 화살표가 있고 마지막 페이지에는 XELF 홈페이지로 이동할 수 있는 링크버튼이 삽입되어 있습니다. 이 웹브로슈어를 사례로 어떻게 링크를 넣었는지 알아보도록 하겠습니다.

 

■ 액션패널 살펴보기

저작도구에서 우측 패널 상단을 보시면 두 개의 탭이 있습니다. Property가 텍스트나 이미지, 도형 등의 오브젝트의 속성을 변경하는 탭이라고 하면 Action 탭은 각 오브젝트에 애니메이션을 주거나 인터랙션을 지정할 수 있습니다. 이제 Action 탭을 눌러 버튼에 링크를 넣어보겠습니다.

 

■ 페이지 이동 링크 삽입하기

앞서 하신대로 액션탭을 클릭하시고 캔버스에서 작은 화살표를 클릭합니다.
그리고 액션탭에서 Add Interaction 버튼을 클릭해주세요.
( 작은 화살표 이미지를 꼭 클릭하시고 Add Interaction 을 클릭하셔야 합니다. 오브젝트를 선택하지 않으면 링크를 넣을 대상을 찾을 수 없습니다. )

  1. Add Interaction 버튼을 클릭한뒤 패널의 옵션이 표시됩니다.
    Action 의 종류를 선택합니다. [go to page]를 선택합니다.
  2. Page 옵션에서 [page 2] 를 선택합니다.
    Page 탭에서는 이 프로젝트에서 만들어진 모든 페이지의 이름이 표시됩니다. 그러므로 페이지 이동 링크를 만들기전에 페이지를 먼저 만들어 두시는 것을 추천드립니다.
  3. Trigger 에서 [cleck]을 선택합니다.
    조건에 따라서 클릭뿐만 아니라 더블클릭 마우스인 등의 옵션을 선택할 수도 있습니다.
  4. 하단의 Apply 버튼을 클릭하여 인터랙션 지정을 완료합니다.

캔버스에서 이미지 오브젝트를 클릭하면 우측 탭을 통해 어떤 인터랙션이 걸려있는지 간략하게 확인할 수 있고 인터랙션을 수정하거나 삭제, 복제등을 수행하실 수도 있습니다.

 

■ 외부링크 삽입하기

이번에는 버튼 이미지에 외부링크를 삽입해보도록 하겠습니다. 마찬가지로 이미지 오브젝트를 선택하시고 add Interaction 버튼을 눌러주세요.

페이지 이동시에는 [go to page] 였다면 이번에는 [go to url] 액션을 선택합니다.

URL 옵션에 이동하고자 하는 링크를 타이핑합니다.
예를 들면 XELF 홈페이지로 이동하시려면 http://xelf.io 를 입력하시면 됩니다.
링크를 새 탭에서 열고자한다면 아래의 체크박스를 체크해 주시면 됩니다.

오늘은 간단하게 액션 탭을 활용하여 오브젝트에 링크를 넣는 방법을 알아보았습니다.

카드뉴스를 커머스에서 활용하시거나 프리젠테이션에서 참고자료를 사용하실 때에 활용하시면 좋을 것 같습니다. 예를 들면 새로 나온 서적에 대한 카드뉴스라면 마지막 페이지에 책 구매하러가기 버튼을 넣어보시면 매출에 더 도움이 되지 않을까 생각해봅니다.