구글 스트리트 뷰 360도 사진을 블로그에 올리는 방법

WMC에서 삼성과 엘지가 360도 카메라를 선보였습니다. 삼성 갤럭시 S7과 엘지 G5 스마트폰과 연결해서 손쉽게 360도 사진을 찍을 수 있고 VR HMD(Virtual Reality Head Mount Display)로 사진을 보면 현장에 있는 듯한 가상현실을 즐길 수 있습니다.VR HMD는 삼성 기어VR, 엘지에서 새로 내놓은 VR 360, 저렴한 가격의 구글 카드보드, 폭풍마경, 오큘러스 리프트 등 다양한 상품들이 시장에 모습을 드러내고 있습니다.


360도 카메라는 이런 VR 제품들에서 볼 수 있는 사진, 동영상 콘텐츠를 사용자가 손쉽게 만들 수 있도록 해주는 카메라입니다. 셔터 한번으로 구글 스트리트 뷰에서 보이는 현장감 넘치는 사진이나 유튜브 360, 페이스북 360도 영상을 찍을 수 있게 됐습니다.


이런 사진들은 VR 기기와 연결하지 않아도 활용을 할 수 있습니다. 여행 블로그 운영자라면 360도 여행 사진을 블로그에 올릴 수 있겠지요. 카페나 게스트하우스 주인이라면 인터넷에 360도 사진으로 영업장을 홍보할 수도 있습니다. 


여기서 '비교적' 간단한 방법으로 360도 사진을 블로그에 올리는 방법을 소개합니다.

구글 스트리트 뷰에 올린 사진을 블로그에 올리는 방법입니다. 스트리트 뷰에 사진을 올리는 방법은 아주 간단합니다. 구글 스트리트 앱을 설치해 공유를 하면 됩니다. 구글 스트리트 공유 방법은 기회가 되면 설명을 드릴게요.


◆ 구글 스트리트 360도 사진을 블로그에 올리는 방법


1. 블로그에 올릴 사진을 확인합니다.

   1.1 구글 맵에 들어가 상세 메뉴를 열면 중간에 [참여]라는 항목이 있습니다.




1.2 [참여] > [사진]을 누르면 구글맵에 본인이 공유한 사진을 볼 수 있습니다.



1.3 블로그에 올리고 싶은 사진을 한장 골라 URL을 메모장에 복사합니다.




1.4 메모장에서 찾아바꾸기를 열어 %2F/(슬래시)로 수정합니다.




2. 사진에서 [파노라마 ID]를 추출합니다.


2.1 1.4에서 추출한 360도 사진의 URL입니다.


https://www.google.co.kr/maps/contrib/105195617161672756475/photos/@37.3932278,127.2786889,3a,75y,135h,94.1t,-0.5r/data=!3m8!1e1!3m6!1s-fXaHrULDpzE/VsgNQdyuLXI/AAAAAAAAOmM/4A_IDTDs0So!2e4!3e11!6s//lh5.googleusercontent.com/-fXaHrULDpzE/VsgNQdyuLXI/AAAAAAAAOmM/4A_IDTDs0So/w203-h100-p-k-no/!7i5376!8i2688!6m1!1e1?hl=ko


2.2 URL을 잘 살펴보면 data=!3m8!1e1!3m6!1s 라는 문자열과 !2e4!3e11!6s문자열이 보입니다. 이 문자열은 항상 똑같이 나타납니다. 이 두 문자열 사이에 '-'로 시작되는 문자열이 파노라마 ID입니다.


-fXaHrULDpzE/VsgNQdyuLXI/AAAAAAAAOmM/4A_IDTDs0So


* 반드시 -(대시, 마이너스 표시)부터 시작해야 합니다. 


3. iframe으로 블로그에 코드를 삽입합니다.


3.1 2에서 찾은 파노라마 ID를 아래 URL에 추가합니다.


<iframe frameborder="0" width="640" height="360" style="border: 0" src="https://maps.google.com/maps?layer=c&panoid=F:-fXaHrULDpzE/VsgNQdyuLXI/AAAAAAAAOmM/4A_IDTDs0So&ie=UTF8&source=embed&output=svembed&cbp=0,120,,0.5,10" allowfullscreen=true></iframe>


3.2 파노라마 ID가 추가될 위치는 &panoid=F:와 &ie=UTF8사이입니다.


3.3 끝으로 사진이 보일 위치를 조절합니다. 

360도 사진입니다. 평면사진처럼 한쪽만 보이는 사진이 아니잖아요. 360도 화면 중에 처음 열었을 때 하늘을 보게 할건지, 정면을 보게 할건지 원하는 위치를 지정해야 합니다. 그리고 이 사진은 확대/축소가 됩니다. 


같은 사진이라도 어떤 위치를 보여줄지에 따라 아래처럼 결과가 크게 차이가 납니다.


보여줄 위치는 이 코드가 결정을 합니다.


cbp=0,120,,0.5,10


첫번째 숫자는 의미를 모르겠네요. 숫자를 바꿔도 변화가 없어요. 


두번째 120은 가로방향의 위치를 조절합니다. 360도 사진에는 좌표 값이 사진 데이터 안에 들어가 있는데 0~360 중 하나를 선택할 수 있습니다. 이 숫자를 조절하면서 넣다 보면 가로 방향의 원하는 위치를 찾을 수 있습니다.


두번째 0.5는 확대 배율입니다. 0 ~ 2 사이가 적당합니다. 0은 축소, 2는 확대입니다.


세번째 10은 상하 위치 조절입니다. 하늘을 보고 싶다면 이 값을 조절하면 됩니다. 0이 정면이고 숫자가 커질 수록 하늘쪽으로 올라갑니다.


* 사진 위치는 상대적입니다. 카메라를 어떻게 들고 있냐에 따라 0이 하늘이 될 수도, 땅이 될 수도 있습니다. 여기서 설명한 위치는 카메라 기준으로 카메라가 정면이라고 인식하는 방향을 촬영자의 전방에 그리고 수평선에 맞춰 카메라를 세웠다고 가정했을 때로 잡았습니다. 카메라를 옆으로 눕혀 찍는다면 0이 하늘이 될 수도 있습니다. 


3.4 이 글에 관심있는 분들이라면 이 부분은 따로 설명하지 않아도 되겠지요?


width="640" height="360"


사진 크기를 조절하면 됩니다. 편하게 width="100%"로 해도 됩니다.


3.5 위 코드를 블로그에 HTML 코드로 추가합니다. 그러면 아래처럼 사진이 보일거예요 ^^




이 둘은 같은 사진입니다. 3.3에서 설명한 cbp 값에 따라 확대 배율과 사진 위치가 달라집니다. 360도 사진이기 때문에 마우스로 보는 방향과 배율을 조절할 수 있습니다. 

설정

트랙백

댓글


티스토리 툴바