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

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

이번 포스팅에서는 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 준비
• 구글지도 링크 복사
• Inline frame에 구글지도 링크 적용
• 네이버지도 링크 복사
• Inline frame에 네이버지도 링크 적용
• 카카오지도 링크 복사
• Inline frame에 카카오지도 링크 적용

 

 

1. Inline frame 준비

LIBRARIES에서 Inline Frame Widget을 선택하여 화면에 드래그합니다. Inline Frame의 Preview 설정을 Map으로 선택합니다.

 

<Inline Frame 설정 - Map>

 

2. 구글지도 링크 복사

연결하려는 구글지도 링크에 접속하고 "공유" 버튼을 클릭하고 지도 퍼가기에서 링크을 복사합니다. 복사하는 링크는 iframe 안의 src 뒤 "링크주소" <= 이 부분만 있으면 됩니다.

<구글지도 링크 복사>

 

3. Inline frame에 구글지도 링크 적용

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

<Inline Frame에 구글지도 링크 적용>

 

<Inline Frame에 구글지도 링크 적용>

 

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

<미리보기 - Inline Frame 적용>

 

 

4. 네이버지도 링크 복사

네이버지도에서 링크를 복사해보겠습니다. 실제 적용을 해보니 네이버 지도는 URL복사를 통해서 얻은 링크만으로도 지도연ㄷ결이 잘 되도록 되어 있습니다. 참 쉽죠? ㅎㅎ

<네이버지도 링크 복사>

 

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

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

 

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

 

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

<미리보기 - Inline Frame 적용>

 

6. 카카오지도 링크 복사

카카오지도에서 링크를 복사해보겠습니다. 내보내기 클릭 후 HTML 태그 복사를 선택합니다. 복잡한 링크가 좀 많이 나오는데요. 첫 번째 <a href 안의 "링크주소" <= 이 부분만 적용해보았습니다. 사실 카카오맵은 잘 적용이 안되는 느낌이 있어요. 이 부분은 제가 잘 모르는 부분일 수도 있는데요. 카카오맵 연결은 약간 어색함이 있네요. (검색 결과까지 연결해주는 것은 아니예요.)

<카카오지도 링크 복사>

<카카오지도 링크 복사>

 

7. Inline frame에 카카오지도 링크 적용

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

 

<Inline Frame에 카카오지도 링크 적용>

 

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

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

 

 

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

 

<예제 파일과 링크>

Embedding Media_02.rp

0.05MB

 

예제 링크 - https://2jkd5z.axshare.com

Untitled Document