액슈어(Axure) 따라하기 - Embedding Media (1)

액슈어(Axure) 따라하기 - Embedding Media (1)

이번 포스팅에서는 Youtube나 Google Map 같은 Media을 연결하는 페이지를 연결해주는 기능인 Embedding Media를 소개하겠습니다. 너무 간단한 기능이지만 feasiability가 매우 높다고 할 수 있습니다. Axure tutorial에는 youtube와 google map 만 있지만 카카오TV, 네이버TV, 카카오맵, 네이버맵을 활용할 수도 있습니다.

 

(참고) - https://docs.axure.com/axure-rp/tutorials/embedding-media/

Embedding Media Tutorial · Axure Docs

 

Embedding Media

• Inline frame 준비
• Youtube 링크 복사
• Inline frame에 youtube 링크 적용
• 네이버TV 링크 복사
• Inline frame에 네이버TV 링크 적용
• 카카오TV 링크 복사
• Inline frame에 카카오TV 링크 적용

 

 

1. Inline frame 준비

LIBRARIES에서 Inline Frame Widget을 선택하여 화면에 드래그합니다.

<Inline Frame 설정>

<Inline Frame 설정>

 

Inline Frame의 Preview 설정을 Video로 선택합니다.

 

<Inline Frame - Video 설정>

<Inline Frame - Video 설정>

 

 

2. Youtube 링크 복사

연결하려는 Youtube 링크에 접속하고 "공유" 버튼을 클릭하고 Embedded URL을 복사합니다. 복사하는 링크는 iframe 안의 src 뒤 "링크주소" <= 이 부분만 있으면 됩니다.

<Youtube 링크 복사>

<Youtube 링크 복사>

<Youtube 링크 복사>

 

 

3. Inline frame에 youtube 링크 적용

복사한 링크를 Axure Inline Frame에 적용합니다.

 

<Inline Frame에 Youtube 링크 적용>

 

그리고 미리보기를 실행해봅니다.

<미리보기 - Inline Frame 적용>

 

 

4. 네이버TV 링크 복사

네이버TV에서 링크를 복사해보겠습니다. 연결하려는 콘텐츠에서 "공유" 버튼을 클릭하고 복사하는 링크는 iframe 안의 src 뒤 "링크주소" <= 이 부분만 있으면 됩니다.

<네이버TV 링크 복사>

 

 

5. Inline frame에 네이버TV 링크 적용

Inline Frame에 위에서 복사한 링크를 적용합니다.

 

<Inline Frame에 네이버TV 링크 적용>

 

그리고 미리보기를 실행합니다.

<미리보기 - Inline Frame에 네이버TV 링크 적용>

 

 

6. 카카오TV 링크 복사

카카오TV에서 링크를 복사해보겠습니다. 연결하려는 콘텐츠에서 "공유" 아이콘을 클릭하고 복사하는 링크는 소스퍼가기 안의 src 뒤 "링크주소" <= 이 부분만 있으면 됩니다.

 

<네이버TV 링크 복사>

 

7. Inline frame에 카카오TV 링크 적용

Inline Frame에 위에서 복사한 링크를 적용합니다.

 

<Inline Frame에 카카오TV 링크 적용>

 

그리고 미리보기를 실행합니다.

<미리보기 - Inline Frame에 카카오TV 링크 적용>

 

지금까지 액슈어(Auxre)에서 Embedding Media에서 Video를 적용하는 방법을 알아보았습니다. 다음에는 Embedding Media에서 Map을 적용하는 방법에 대해서 알아보겠습니다.

 

<예제 파일과 링크>

Embedding Media_01.rp

0.04MB

 

예제 링크 - https://ki8lqm.axshare.com

Untitled Document