유틸리티

플리커에 업로드한 360도 이미지를 티스토리에서 보기

혼새미로 2016. 7. 26. 03:37
반응형

test



기어 360과 같이 360도 파노라마 사진을 찍을 수 있는 사진기를 통해 얻은 이미지 파일을 블로그에서 보는 방법은 두 가지가 있는데, 첫째는 아래와 같이 생 날것의 360도 사진을 그냥 보는 방법이 있고,

둘째로, 페이스북, 구글 지도, 플리커에서 지원하는 360도 뷰어를 통해 마우스나 키보드로 움직이면서 마치 사람이 보듯이 보는 방법이 있습니다.

이 글에서는 기어 360 카메라를 사용하여 찍은 360도 이미지를 플리커에 업로드 한후, 해당 이미지를 플리커에서 지원하는 360도 이미지 뷰어를 티스토리 블로그에서 보는 방법에 대해 알아보겠습니다. 원래 네이버 블로그에서 사용하려고 하였으나, 네이버 블로그는 해당 스크립트를 지원하지 않아 볼 수 없습니다.(티스토리는 지원)


먼저, http://blog.naver.com/remocon33/220727791457 이 글에서와 같이 저는 기어 360 카메라에 찍은 사진을 ActionDirector라는 프로그램을 통해 파노라마 사진으로 추출한 후, 해당 사진을 사용하였습니다. (자세한 방법은 링크 참조)


이번에 제가 사용한 이미지는 다음과 같습니다.



제가 첨부파일로 올려둔 exiftool.zip을 다운받은 후, 압축 해제를 해줍니다. (아니면 http://www.sno.phy.queensu.ca/~phil/exiftool/ 에서 다운로드 가능)

exiftool.zip


그리고 exiftool.exe 파일이 있는 폴더에 플리커에 업로드할 360도 이미지 파일을 옮겨줍니다.


그리고 윈도우의 시작에서 명령 프롬프트를 실행합니다. (윈도우키+x 를 누르면 명령 프롬프트를 찾을 수 있음) 그 후에 위의 exiftool 폴더가 있는 경로로 이동합니다.

이동 명령어 : cd "경로"

 

그리고, 다음과 같은 명령어를 실행해줍니다.

저는 이미지 파일명이 test.jpg 이므로 위의 사진과 같이 명령어를 입력하였고, 다음 줄에 정상적으로 이미지의 정보를 파노라마 형식으로 변경이 완료되었음을 보여주는 문장이 나타납니다.


이제 이 사진을 플리커에 업로드를 하도록 합니다.

https://www.flickr.com/ 

위의 링크로 들어가서 로그인을 해줍니다. (계정이 없을 경우, 회원가입을 먼저 해줍니다.)

 

로그인을 마쳤으면, 왼쪽 상단에 있는 "나" 버튼을 클릭합니다.

 

오른쪽 상단에 보이는 구름 모양의 업로드 버튼을 클릭합니다.

 

중앙에 있는 사진, 동영상 선택을 누른 후, 방금 변환한 이미지를 선택합니다.

사진 업로드를 마치기 위해, 오른쪽에 있는 "사진 1장 업로드" 버튼을 클릭합니다.

 

 

그럼 다음과 같이 정상적으로 업로드가 완료된 것을 확인할 수 있습니다.

해당 이미지를 클릭하면 마우스 드래그를 통해 이미지를 회전하면서 360도 이미지를 감상할 수 있습니다.

이제, 이 플리커에 업로드된 이미지를 티스토리에 공유하는 방법을 설명하겠습니다.

 

업로드된 이미지를 클릭하면 위의 사진과 같이 마우스로 드래그하면서 360도 이미지를 감상할 수 있습니다. 여기서 오른쪽 하단에 보면 오른쪽 화살표 아이콘이 있는데, 해당 공유 버튼을 클릭을 합니다.

 

그러면 위와 같은 공유 설정 창이 뜨는데, 위의 탭에서 포함을 누르고, 그 다음 아래에 크기를 조정할 수 있는데, 중간 640x320을 선택합니다. (필요에 따라 크게 하거나 작게 해도 됨)

그리고 중간에 있는 HTML 소스를 복사하고 티스토리 블로그로 갑니다. 그리고 티스토리 블로그의 글쓰기 창에서 HTML에 체크를 하고 위에서 복사한 링크를 복사합니다.

 

그리고 글쓰기 창 아래에 있는 발행 버튼을 누르면 블로그 글에 플리커 360도 이미지 뷰어가 정상적으로 작동하는 것을 볼 수 있습니다.

 


이상으로 기어360 카메라로 찍은 360도 이미지를 플리커에서 지원하는 360도 이미지 뷰어를 사용하여 티스토리에서 공유하여 보는 방법에 대해 알아보았습니다.

해당 예시 글은 http://remocon33.tistory.com/536 이곳에서 확인할 수 있습니다.

반응형