국립중앙박물관 파노라마 투어를 제작했습니다.

사진/360 파노라마 2012.12.25 15:13 Posted by 푸른하늘 푸른하늘이

그냥 몇줄 수정한 정도가 아니라, 완전히 Professional 하게 제작한 본격 VR 파노라마 투어입니다. 먼저 아래는 주요화면을 스크린샷으로 뜬 겁니다. 구경한번 하시고~~~


직접 보실 수 있는 주소는 아래와 같습니다. 이 글에 직접 삽입할까 했는데, 디자인이 맞지 않네요... ㅠ


http://360vr.kr/panoramas/NMus/tour.html



물론 이 파노라마도 krpano tools 를 이용하여 제작했습니다. 이전 글에서는 krpano의 droplet으로 만들어진 투어를 간단하게 몇줄만 수정하면 왠만큼 쓸만한 투어를 제작할 수 있다는 내용이었는데, 이번 작품은 아얘 거의 손이 안간 부분이 없을 정도로 뜯어 고쳤습니다.


먼저 왼쪽 위에 있는 지도부분에 대해서...



VR 투어는 여러장의 360*180 파노라마를 묶어서 보여주게 되므로, 이런 지도가 필요합니다. 이 투어처럼 파노라마 장수가 많아질 수록 반드시 필요하다고 할 수 있죠. 


이 지도 부분은 많은 신경을 썼습니다. 현재 보고 있는 파노라마의 위치 및 방향을 보여주는 것은 물론 클릭을 하면 원하는 파노라마로 직접 이동이 되며, 확대/축소/좌우이동 등도 가능하도록 만들어져 있습니다. 물론 지도 자체를 크게/작게 만들 수도 있구요. 


그 다음은 화살표와 사람 아이콘...



대개의 경우, VR 파노라마는 방향을 가르키는 화살표 등으로 핫스팟(hotspot)을 만듭니다. 그런데 이번 프로젝트의 경우 전체적인 씬이 널찍하고 시원해서 그런 화살표를 배치하는 게 마음에 안들었습니다. 


그래서 맨처음 고려했던 것이 화살표 아이콘. 이것은 구글 스트리트뷰나 다음 로드뷰처럼 공중에 떠다니는 기분이 드는 화살표로서, 여러가지 소스를 참고로 해서 겨우 겨우 만들어 냈습니다. 두번째 사람 아이콘은 구현한 것은 그렇게 까다로운 것은 아니지만, 거리를 기준으로 아이콘의 크기를 변경시키도록 해서 마치 사람이 그곳에 서 있는 듯한 모습을 구현해 이쁘다는 평을 많이 받았습니다.


다음은 그림과 연계된 사진 보여주기 기능...



이것도 사실 현재의 파노라마와 사진이 연동될 수 있도록 만들기 위해 아주 골머리를 많이 썩혔던 부분이었습니다. 즉, 다른 파노라마가 선택되면, 빨간색 화살표를 클릭했을 때 뜨는 사진이 달라지고, 사진을 이리저리 돌려보다가 그 사진에 해당되는 파노라마로 직접 들어갈 수 있습니다. 그런데, 파노라마와 사진이 1:1로 매칭되는 게 아니라서 골머리를 많이 알아야 했던 것이죠. 만져보면 별거 아닌데, 실제 구현할 때는 많이 고생했었습니다.


다음으로 오른쪽에 있는 안내부분...



이 부분은 기술적으로는 그다지 까다로울 게 없는 부분입니다. 클릭을 하면 자연스럽게 미끄러져 나오고 글씨를 클릭하면 해당되는 이미지가 뜨고... 등등 아주 간단한 액션들로 구성되어 있습니다. 


다음으로 자동투어...



아래쪽에 있는 콘트롤 바 위쪽에 Auto Tour라고 되어 있는 부분을 누르면 자동 투어를 볼 수 있습니다. 하나의 씬을 불러들인 후, 일정 동작을 하고 다시 다음 씬을 불러오는 방식으로 구성되어 있습니다. 다만, 이 투어의 경우 모든 지점에서 전체의 모습이 보이기 때문에 특별한 동작은 거의 없이 순서대로 하나씩만 불러들이도록 구성이 되어 있습니다.


물론 위에서 설명한 것 외에도 인트로 구성방법이라든지... 여러가지로 신경을 쓴 부분이 많습니다만, 생략... 


사실 제일 중요한 건 전체적인 구성이겠죠. 여러가지 기능을 보여주면서도 전체적으로 깔끔한 디자인이 되어야 한다는 것. 저는 그런 점에서 미술이나 음악, 글쓰기 등 창조적인 일을 하는 분들을 존경합니다. 이렇게 깔끔한 디자인을 만들어주신 김태은씨에게 그래서 특별히 감사를 드립니다.


아무튼 이 투어를 만들면서 여러가지로 골치도 많이 썩혔지만, 이것저것 만지면서 새로운 것들을 완성해 나갈 수 있어 보람을 느꼈습니다. 그런 점에서 멋진 파노라마를 제공해 주시고, 제작할 수 있는 기회를 만들어주신 픽스뷰 관계자분께 감사를 드립니다.


민, 푸른하늘


참고: 이 파노라마 투어는 cafe24 서버에 올라가 있는데, 제가 실험용으로 사용하는지라 하루 사용 가능한 트래픽용량이 800MB 에 불과합니다. 몇분만 자동투어를 돌리면 용량초과될 수 있으니 양해해 주시길 부탁드립니다.


댓글을 달아 주세요

  1. 이경춘  수정/삭제  댓글쓰기

    정말 하고싶은 기능들이 잘 되어 있네요..
    작성해 주시는 글들이 궁금함을 더하게 합니다. ㅎㅎㅎ 아 제 갈길이 힘드네요..ㅠ,.ㅠ

    2012.12.28 16:58 신고
  2. VRMania  수정/삭제  댓글쓰기

    깔끔한 디자인, 구현하고자 하는 뷰어.
    보면서 감탄했습니다.

    누군가의 도움을 받으셨다니 의외네요.. 잘보고 갑니다.

    2013.01.04 00:27 신고
  3. 김하나  수정/삭제  댓글쓰기

    안녕하세요 vr에 들어가는 핫스팟? 화살표를 젲가하는 방법에 대해 알아보다가 들어오게 되었는데요.. 질문드릴게 있어서 이렇게 글을 남깁니다. 제가 화살표를 커스터마이징해서 적용을 하고싶은데 (움직이는 화살표) 아실 것같아서 여쭤봅니다..gif로 만들었다가 적용이 되지를 않아서 혼란스러운 상태입니다..도움 부탁드려요

    2018.07.27 15:46 신고
    • Favicon of http://www.internetmap.kr BlogIcon 푸른하늘 푸른하늘이  수정/삭제

      요즘 제가 krpano를 만지지 않아서 잘 모르겠습니다만, gif 를 지원해주지 않으면 당연히 불가능합니다. 플래시로 만드는 방법이 있겠지만, 별로 추천드리진 않고요. 꼭 움직이는 화살표를 사용하겠다고하면 mp4 비디오를 사용하는 방법이 있을 듯 싶은데, 동영상은 제한이 많아서 어떨지 모르겠습니다.

      2018.08.06 12:27 신고

BLOG main image
공간정보와 인터넷지도
제 관심사는 계속 바뀝니다. 이 블로그를 유지하는 동안에도 벌써 여러번 주제가 빠뀐 것 같습니다. 돌고 돌아 이제 고향으로 돌아왔습니다. 공간정보입니다. 세계를 측정하고, 그 기준을 세우고, 데이터를 효율적으로 공유하는 것이 공간정보에서 다루는 내용입니다. 4차산업혁명이 데이터 기반이라고들 합니다. 데이터는 그냥 모아둔다고 정보가 되지 않습니다. 표준에 따른 공통 스키마를 기반으로 만들어져야 합니다. 누구나 언제든지, 쉽고 투명하게 데이터를 가져다 쓸
by 푸른하늘이
Profile for bluesky61

달력

«   2018/12   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

카테고리

전체보기 (1588)
공간정보 (238)
구글어스 (829)
사진 (103)
드론/쿼드콥터 (239)
지오캐싱 (47)
기타 (131)
  • 4,548,074
  • 8338
TNM Media textcube get rss

공간정보와 인터넷지도

푸른하늘이's Blog is powered by Tistory. / Supported by TNM Media.
Copyright by 푸른하늘이 [ http://www.ringblog.com ]. All rights reserved.

Textcube TNM Media
푸른하늘이's Blog is powered by Tistory. Designed by Qwer999. Supported by TNM Media.