그냥 몇줄 수정한 정도가 아니라, 완전히 Professional 하게 제작한 본격 VR 파노라마 투어입니다. 먼저 아래는 주요화면을 스크린샷으로 뜬 겁니다. 구경한번 하시고~~~
직접 보실 수 있는 주소는 아래와 같습니다. 이 글에 직접 삽입할까 했는데, 디자인이 맞지 않네요... ㅠ
http://360vr.kr/panoramas/NMus/tour.html
물론 이 파노라마도 krpano tools 를 이용하여 제작했습니다. 이전 글에서는 krpano의 droplet으로 만들어진 투어를 간단하게 몇줄만 수정하면 왠만큼 쓸만한 투어를 제작할 수 있다는 내용이었는데, 이번 작품은 아얘 거의 손이 안간 부분이 없을 정도로 뜯어 고쳤습니다.
먼저 왼쪽 위에 있는 지도부분에 대해서...
VR 투어는 여러장의 360*180 파노라마를 묶어서 보여주게 되므로, 이런 지도가 필요합니다. 이 투어처럼 파노라마 장수가 많아질 수록 반드시 필요하다고 할 수 있죠.
이 지도 부분은 많은 신경을 썼습니다. 현재 보고 있는 파노라마의 위치 및 방향을 보여주는 것은 물론 클릭을 하면 원하는 파노라마로 직접 이동이 되며, 확대/축소/좌우이동 등도 가능하도록 만들어져 있습니다. 물론 지도 자체를 크게/작게 만들 수도 있구요.
그 다음은 화살표와 사람 아이콘...
대개의 경우, VR 파노라마는 방향을 가르키는 화살표 등으로 핫스팟(hotspot)을 만듭니다. 그런데 이번 프로젝트의 경우 전체적인 씬이 널찍하고 시원해서 그런 화살표를 배치하는 게 마음에 안들었습니다.
그래서 맨처음 고려했던 것이 화살표 아이콘. 이것은 구글 스트리트뷰나 다음 로드뷰처럼 공중에 떠다니는 기분이 드는 화살표로서, 여러가지 소스를 참고로 해서 겨우 겨우 만들어 냈습니다. 두번째 사람 아이콘은 구현한 것은 그렇게 까다로운 것은 아니지만, 거리를 기준으로 아이콘의 크기를 변경시키도록 해서 마치 사람이 그곳에 서 있는 듯한 모습을 구현해 이쁘다는 평을 많이 받았습니다.
다음은 그림과 연계된 사진 보여주기 기능...
이것도 사실 현재의 파노라마와 사진이 연동될 수 있도록 만들기 위해 아주 골머리를 많이 썩혔던 부분이었습니다. 즉, 다른 파노라마가 선택되면, 빨간색 화살표를 클릭했을 때 뜨는 사진이 달라지고, 사진을 이리저리 돌려보다가 그 사진에 해당되는 파노라마로 직접 들어갈 수 있습니다. 그런데, 파노라마와 사진이 1:1로 매칭되는 게 아니라서 골머리를 많이 알아야 했던 것이죠. 만져보면 별거 아닌데, 실제 구현할 때는 많이 고생했었습니다.
다음으로 오른쪽에 있는 안내부분...
이 부분은 기술적으로는 그다지 까다로울 게 없는 부분입니다. 클릭을 하면 자연스럽게 미끄러져 나오고 글씨를 클릭하면 해당되는 이미지가 뜨고... 등등 아주 간단한 액션들로 구성되어 있습니다.
다음으로 자동투어...
아래쪽에 있는 콘트롤 바 위쪽에 Auto Tour라고 되어 있는 부분을 누르면 자동 투어를 볼 수 있습니다. 하나의 씬을 불러들인 후, 일정 동작을 하고 다시 다음 씬을 불러오는 방식으로 구성되어 있습니다. 다만, 이 투어의 경우 모든 지점에서 전체의 모습이 보이기 때문에 특별한 동작은 거의 없이 순서대로 하나씩만 불러들이도록 구성이 되어 있습니다.
물론 위에서 설명한 것 외에도 인트로 구성방법이라든지... 여러가지로 신경을 쓴 부분이 많습니다만, 생략...
사실 제일 중요한 건 전체적인 구성이겠죠. 여러가지 기능을 보여주면서도 전체적으로 깔끔한 디자인이 되어야 한다는 것. 저는 그런 점에서 미술이나 음악, 글쓰기 등 창조적인 일을 하는 분들을 존경합니다. 이렇게 깔끔한 디자인을 만들어주신 김태은씨에게 그래서 특별히 감사를 드립니다.
아무튼 이 투어를 만들면서 여러가지로 골치도 많이 썩혔지만, 이것저것 만지면서 새로운 것들을 완성해 나갈 수 있어 보람을 느꼈습니다. 그런 점에서 멋진 파노라마를 제공해 주시고, 제작할 수 있는 기회를 만들어주신 픽스뷰 관계자분께 감사를 드립니다.
민, 푸른하늘
참고: 이 파노라마 투어는 cafe24 서버에 올라가 있는데, 제가 실험용으로 사용하는지라 하루 사용 가능한 트래픽용량이 800MB 에 불과합니다. 몇분만 자동투어를 돌리면 용량초과될 수 있으니 양해해 주시길 부탁드립니다.