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

앵그리비버 2020. 2. 17. 07:47

이번 포스팅에서는 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

In this tutorial, you'll learn how to embed YouTube videos, Google Maps, and other media in your prototype pages using [the inline frame widget][iframes].

docs.axure.com

Embedding Media

Inline frame 준비
구글지도 링크 복사
Inline frame에 구글지도 링크 적용
네이버지도 링크 복사
Inline frame에 네이버지도 링크 적용
카카오지도 링크 복사
Inline frame에 카카오지도 링크 적용

1. Inline frame 준비

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

2. 구글지도 링크 복사

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

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

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

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

4. 네이버지도 링크 복사

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

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

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

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

6. 카카오지도 링크 복사

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