구글 스트리트 뷰 360 VR 이미지를 티스토리에 삽입하는 방법

 

안녕하세요. 이번에는 구글 스트리트 뷰에 업로드한 사진을 블로그에 html 태그를 사용하여 가져오기 / 공유하는 방법에 대해서 알아보겠습니다.

 

 

네이버 블로그는 기본적으로 iframe 으로 제작되었기에(라고 들었습니다) iframe 을 사용할 경우 블로그에서 정상적으로 적용이 되지 않습니다. 그래서 링크를 통해서만 관람, 삽입할 수 있다는 단점이 있는데요.

티스토리와 blogger.com, 그리고 워드프레스를 기반으로 하는 다양한 시스템에서는 iframe 을 지원하기에 구글 VR 이미지, 스트리트 뷰 이미지를 공유 / 가져올 수 있습니다.

 

또한 구글에서는 이미지 공유를 위한 html 태그로 자동 변환해 주니 간단하고 쉽게 공유를 할 수가 있죠.

 

 

1. 개인이 촬영한 360 VR 이미지를 구글 스트리트 뷰에 업로드 하거나, 구글 스트리트 뷰에서 적당한 이미지를 찾아봅니다.

   보통 유명한 관광명소는 대부분의 VR 이미지가 하나씩 있습니다. 또한 구글의 로드 뷰(스트리트 뷰) 를 활용해도 됩니다.

 

아래에 사용된 이미지는 제가 구독하고 있는 외국 VR 전문가 Martijn Baudoin 의 이미지를 인용하였습니다.

 

 

 

1. 상단에 보이는 ⋮ 버튼을 클릭 후 이미지 공유 또는 삽입 을 클릭합니다.

 

 

기본적으로 하단과 같은 링크를 받을 수 있습니다. 링크 공유는 다른 사람에게 해당 링크를 공유 시 바로 구글 맵 (브라우저) 혹은 구글 지도(스마트폰)로 확인이 가능합니다.

네이버 블로그에서 공유한다면 URL 링크로도 공유가 충분히 가능합니다.

 

참 고맙게도 약식 URL 변환도 지원합니다.

 

물론 해당 링크 만을 가지고 이미지 공유를 할 수는 없죠. 원하는 공유는 이런 간단한 URL 링크 공유가 아닙니다.

 

1. 링크 공유 옆에 위치한 이미지 삽입을 클릭하면 <iframe src="~ > 와 같은 html 태그 주소를 얻을 수 있습니다.

 

위의 콜로세움 태그는 아래와 같은데요

<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sko!2s!4v1471698201645!6m8!1m7!1sF%3A-eV0aWA6BbfA%2FViEiA9jQkRI%2FAAAAAAACCiA%2FXHekhC65LgYdHaq_ETqORnJeeGcAwMUBA!2m2!1d41.8907469!2d12.4909286!3f113.62!4f14.680000000000007!5f0.7820865974627469" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

 

뭔가 복잡합니다만, 크게 신경쓰지 않기로 합니다. 어차피 필요한 건 복사 – 붙여넣기 일 뿐입니다.

 

 

1. 티스토리에서 글쓰기 – html 을 체크해 줍니다.

 

Html 을 체크 한 뒤, 위에서 얻은 <iframe src="~ > 태그를 복사 – 붙여넣기 해줍니다.

 

 

 

1. 크기 조절을 하기 위해서 수정을 합니다.

 

상위의 태그를 살펴보면 <~ width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 에서 width="600" 부분이 있습니다. 바로 태그에서 유일하게 수정해 줄 필요가 있는 부분인데요.

 

원래의 html 태그를 그림으로 비교를 하면 가로 600, 세로 450 픽셀의 이미지 입니다. 이 부분을 수정하여 width="600" 을 width="100%" 로 수정해 줍니다. 100%로 수정을 해주면 블로그의 가로 폭 최대 사이즈에 맞추어 자동으로 가로 사이즈가 변경됩니다.

 

 

Height 사이즈는 풀HD 사이즈의 모니터에서 볼 때 400~450 픽셀 단위가 적당한 사이즈 이기 때문에 별도로 건들지는 않겠습니다.

100% 로 변환해 주는 이유는 가로 600 픽셀의 이미지를 블로그의 글 작성 페이지 최대 가로 크기에 맞춰 줌으로서 보다 넓은 뷰를 관람이 가능하도록 하는 기능으로 그냥 개인 만족입니다. (ㅈㅅ…..)

 

  

블로그에 VR 이미지를 태그 하자면 아래와 같은 결과물을 볼 수 있습니다.

 

 

 

 

구글의 스트리트 뷰 VR 이미지를 공유하기 위해선 html, 그것도 iframe 만을 지원하는 사이트와 홈페이지, 블로그에서만 사용할 수 있다는 단점이 있는데요, 조만간 네이버 에서도 VR 이미지를 정상적으로 활용할 수 있기를 기대해봅니다.