공간정보와 인터넷지도

한 몇달쯤 시간날 때마다 조금씩 만들어온 사이트가 완성되었습니다. 한마디로 요약하자면 우리나라 지도(구글/다음/네이버지도)를 기반으로 한 지오캐싱 지도입니다.

http://360vr.kr/gpx2/kmap_geocaching.html

지오캐싱이란 GPS를 사용한 첨단 보물찾기 게임입니다. geocaching.com 에 가입을 한 뒤, 등록된 지오캐시를 다운로드 받아 찾아가고, 찾은 후에는 방명록에 사인을 하고 geocaching.com 에 찾았다는 기록을 올리는 방식입니다.

저는 꽤 오래전부터 운동삼아!!! 지오캐싱을 해왔는데요, 지오캐싱 지도가 구글맵에만 표시된다는 불편이 있었습니다. 특히 산간지역으로 들어가면 구글맵에는 아무것도 나타나지 않아, 높이가 얼마쯤 되는지도 알 수 없고, 등산로에서 얼마나 떨어져 있는지도 알 수 없거든요. 그래서 우리나라 지오캐셔분들은 다음지도나 네이버지도에 지오캐시를 표시할 수 있었으면 좋겠다 하는 바램이 있었습니다. 저도 마찬가지구요. 

사실 제 전공이 이쪽이라서 어떻게 만들면 만들 수 있는지는 개략 알고 있었지만, 하도 오래전에 프로그램 짜른 걸 손을 놓은지라 그냥 누군가 만들어주면 좋겠다고 생각만 하고 있었습니다. 그러다가 작년에, 뭔가 재미있는 일이 없을까... 고민하다가, 그리고 360도 파노라마 뷰어를 만들다가 느낀 한계를 극복하기 위해서는 웹 프로그램에 대해 좀 알아야겠다는 생각이 문득 들었고, 그래서 Javascript와 HTML5, CSS 등에 대해 공부하기 시작했습니다. 그러다가 실습삼아 개발하기 시작한 게 바로 이 사이트였습니다.

제가 개발한 내용에 대해 간략하게 정리해보겠습니다.

geocaching.com의 지오캐시를 다음지도/네이버지도에 표시. 

서두에 말씀드린 것처럼 이게 가장 중요한 목적입니다. 이를 위해 먼저 구글맵/다음지도/네이버지도에 대한 API를 공부해서 지도를 그리는 것부터 시작했습니다. 

대략 지도를 생성하고, 지오캐싱 파일을 읽어들이고, 이것을 마커(Marker)로 생성한 후 좌표를 계산해서 모두가 보이도록 화면을 조정해서 표시했습니다. 클릭하면 Geocaching.com에서 표시되는 것과 비슷한 형태로 infowindow가 뜨도록 했고요.

아래는 다음지도위에 지오캐시를 표시한 겁니다. 스마일 표시는 제가 찾은 지오캐시, 별표는 제가 숨긴 것, 그리고 나머지 상자모양이 아직 찾지 못한, 앞으로 찾아야 할 지오캐시들입니다.

처음에는 세가지 지도를 따로따로 보여주도록 처리하려다가, 이왕이면 한꺼번에 보여주는 게 좋겠다고 생각해서 각각의 지도 영역을 서로 겹치게 화면 전체를 사용하도록 하되, 선택한 지도만 보이고 다른 지도는 보이지 않도록 처리하는 방법을 사용하기로 했습니다. 이러다보니 화면에는 한개의 지도만 보이지만, 실제로는 지도를 3번씩 그리게 되어서 약간 성능이 떨어지는 기계에서 보면 버벅거리는 현상이 나타납니다. 

또 한가지 문제점이 있습니다. 원래대로라면, geocaching.com 의 아이디와 패스워드만 입력하면, geocaching.com에 있는 데이터베이스를 끌고와서 표시해야 합니다. 이를 위해서는 geocaching.com에서 제공하는 API를 사용하면 되는데, geocaching.com에서는 더이상 API를 제공하지 않고 있습니다. 아마 API를 제공해서 재미를 못본 모양이겠죠. 

아무튼 그래서 프리미엄 유저만 사용할 수 있는 기능이긴 한데, 지오캐시를 GPX 파일로 다운로드 받아서 이를 올릴 수 있도록 했습니다. 결국 제가 만든 프로그램은 GPX 파일 뷰어가 되어버린 셈입니다. 

구글지도/다음지도/네이버지도를 연동

이 세가지 지도를 모두 띄우는 것은 그다지 어렵지 않았습니다. 각 사이트 별로 예제들이 있으니까, 그걸 보면서 적당히 수정해 주면 되니까요. 

그런데, 세가지 지도가 따로 놀아서는 효용이 거의 없구요, 그래서 이 세지도를 연동시키는 방법을 고민했습니다. 이 세가지 지도 모두 지도가 표시되는 범위가 변화하면 발생하는 이벤트(event)가 있는데, 이를 이용해서 처리를 했습니다. 

그 결과가 위에 있는 GIF 파일과 같습니다. 어느 지도이든 관계없이 원하는 위치로 확대/축소/이동하면 백그라운드로 다른 지도들도 동일한 위치로 이동되므로, 버튼만 누르면 언제든지 동일한 위치를 볼 수 있게 되었습니다. 이렇게 만들고 나니, 세개의 지도를 손쉽게 비교할 수 있게 되었는데, 적어도 등산지도로 사용할 경우에는 네이버지도가 훨씬 나은 것 같습니다.

스마트폰 지원

원래 이 사이트는 당연히 PC에서 보는 게 정상입니다만, 현장에 나가서도 불편하나마 지도를 확인할 수 있도록 하고 싶었습니다. 스마트 폰으로 그냥 띄워보면 해상도가 맞지않아서 글씨들이 아주 작게 표시되는데 이것만 해결하니 그다지 큰 문제 없이 볼 수 있어 다행이었습니다. 

그리고... "현재위치로"라는 버튼을 하나 두어서 이걸 누르면 현재위치가 화면 중심이 되도록 해 뒀습니다. 이것도 그다지 어렵지 않게 해결.

====

지오캐싱을 하시는 분중에서 이 사이트를 이용하시고 싶은 분은 (일반 멤버도 가능하긴 하지만, 일반 멤버는 포켓쿼리를 만들 수 없으니, 실질적으로는 프리미엄 회원만 사용할 수 있습니다.) 제게 이메일로 지오캐싱 id와 사용하실 비밀번호를 알려주셔야 합니다. 아직 회원가입 기능이 없거든요. 패스워드는 뭘로하셔도 관계없으나, 아이디는 반드시 지오캐싱 ID와 동일해야 합니다. 그래야만 찾은 캐시/숨긴 캐시 등이 올바르게 표현됩니다.

가입이 완료된 분은 지오캐싱 ID와 패스워드를 입력하고 접속하기를 누르면 됩니다. 현재 올려져 있는 GPX 파일의 내용이 뜨게 됩니다. 다른 파일로 바꾸시려면 [파일 선택]을 사용해 원하는 파일을 선택한 뒤 [올리기!]를 누르시면 되고요. 

GPX 파일을 올리면 기존에 올렸던 파일을 덮어쓰게 됩니다. 제 사이트가 공간도 많지 않을 뿐 더러, 여러개의 파일을 올린 뒤 선택하는 기능을 구현할 수 없었기 때문입니다. (기능이 있는지도 아직 모릅니다.)

아... 그리고 테스트 해보고 싶으신 분은 아이디/패스워드에 "test" "test" 혹은 "guest", "1234"를 입력하시면 됩니다. 현재 test 계정에는 지리산쪽 파일이, guest 계정에선 서울쪽 파일이 올려져 있습니다. 

====

사실... 정말 너무너무 허덥합니다. 공개하기도 민망한 수준입니다. 고쳐야 할 것도 엄청나게 많고... 추가해야 할 기능도 엄청 많습니다. 머... 제 실력이 이 정도인지라... 현재로선 여기까지 하고 그만 둬야 할 것 같습니다. 나중에 좀 더 공부해서 더나은 뭔가가 나온다면 다시 고칠지는 모르겠지만요.

민, 푸른하늘

제가 촬영한 360*180 파노라마 사진은 지금까지 대부분 360cities.net 에 올리고 있습니다. 360*180 파노라마는 용량이 크고 형식도 독특해서 일반적인 방법으로 공유하기는 힘드는데, 360cities를 이용하면 비교적 간단하게 올릴 수 있고, 내가 원하는 곳에 삽입(embed)하는 등의 공유 작업이 간편하기 때문입니다. 물론 용량이 무제한이고 사용료가 무료라는 점도 매력적이고요.

또한, 360cities.net 에 올리기만 하면 구글어스에도 자동적으로 올라갑니다. 한마디로 신경쓸 필요가 별로 없는 거죠. 아래는 구글어스(Google Earth)에 올라가 있는 제 360도 구면 파노라마를 확인해 본 것입니다. 좌측 아래에 있는 화살표처럼 설정하면 됩니다.

그런데 작년 10월 구글에서 안드로이드 Jellybean 4.2를 발표하면서 사진기 어플에 Photo-sphere 라는 재미있는 기능을 추가했습니다. 포토스피어를 이용하면 누구라도 쉽게 360도 파노라마를 제작할 수 있게 되었습니다. 아래는 포토스피어 기능을 소개하는 유투브입니다. 여기에 들어가보시면 포토스피어가 무엇인지 대략적인지 알 수 있습니다.

아이폰이든 안드로이드든 파노라마를 촬영할 수 있는 앱은 많이 있습니다만, 포토스피어는 머리위나 바닥까지 포함한 360도*180도 전체를 촬영할 수 있기 때문에 훨씬도 몰입도가 높은 현장감있는 사진을 촬영할 수 있는 것입니다.

====

오른쪽은 안드로이드 포토스피어 아이콘입니다. 아쉽게도 제가 가진 갤럭시 S3 3G 전용은 아직도 4.1 버전이라서 포토스피어 기능을 직접 만져볼 수 없습니다. 하지만 제가 예전에 촬영해둔 360도 파노라마 사진은 포토스피어용 파노라마 사진으로 변환하여 공유할 수 있습니다. 

일단 여기 들어가 보시면 제가 올려둔 포토스피어 파노라마를 보실 수 있습니다. 아래처럼 파노라마 사진 한가운데 아이콘이 있는 게 포토스피어용 360도 파노라마라는 표시입니다. 

제 구글플러스 앨범에서 이런 표시가 있는 사진을 눌러보면 자동으로 회전되는 파노라마 사진을 보실 수 있습니다.

=====

저처럼 360도 파노라마를 가지고 있는 분들은, 이 파노라마들을 비교적 간단하게 포토스피어용으로 변환할 수 있습니다. 자세한 내용은 여기에서 읽어보시면 됩니다.

1. http://photo-sphere.appspot.com/ 에 들어가서 파일선택 단추를 누르고, 원하는 360*180 파노라마를 선택합니다.

단!!! 사이즈가 큰 파노라마(8000x4000) 등은 올라가긴 하는데, 제대로 보여지지 않습니다. 저는 4000x2000으로 테스트를 했는데, 어쨌든 사이즈를 좀 줄여야 원할하게 이용할 수 있습니다.

2. 사진이 다 올라가면 아래와 같은 화면이 뜨는데, 사진을 촬영한 위치와 방향을 입력합니다. 윗쪽 화살표는 촬영방향으로 설정하지 않아도 큰문제가 없지만, 아래쪽 위치는 가급적 정확하게 입력하시는 게 좋습니다. 먼저 빨간화살표가 있는 입력란에서 대략적인 주소를 입력해서 검색한 후, 지도를 확대축소하면서 사진을 촬영한 지점에 아이콘을 가져다 놓으면 됩니다.

3. 그 다음 아래와 같은 화면이 나타나는데, "Download" 버튼을 눌러서 별도로 저장합니다.

여기까지가 일반 360*180 구면 파노라마를 포토스피어(photo sphere)용 파노라마로 변환하는 과정입니다. 포토스피어용 파노라마라고 하여 특별한 형식이 있는 게 아니라, 사진의 메타데이터에 방금 입력한 정보 및 기타 여러가지 정보를 XMP 형식으로 넣어주는 작업입니다. 외관상으로는 전혀 변한게 없습니다.

=====

그 다음에는 자신의 구글계정에 사진을 업로드 시켜줍니다. 물론 이를 위해서는 미리 구글 계정을 만들어두어야 합니다. 구글 계정을 만드는 방법은 여기를 보시면 됩니다. 

아래가 제 구글계정 프로필이자 구글플러스인데, 화살표가 있는 사진을 누르고 아까 다운로드 받은 사진을 올리기만 하면 됩니다. 사진을 올리는 방법은 너무 쉽기도 하고, 아주 여러가지 방법이 있어서 별도로 설명을 드리지 않겠습니다.

사진을 올리면 아래처럼 사진 한가운데 조그만 아이콘이 생겨서 포토스피어용 360도 파노라마임을 표시합니다.

이렇게 올린 포토스피어용 파노라마는 구글플러스 등을 통해 다른 분들과 공유할 수 있습니다. 제가 위에서 올린 파노라마는 여기에서 확인하실 수 있습니다.

=====

이렇게 추가한 포토스피어 사진은 구글지도/지도뷰(Views)를 통해서도 공유할 수 있습니다. 지도뷰(Views)에 들어가 보시면 아래와 비슷한 화면이 나타납니다. 이곳은 전세계 사용자들이 올린 포토스피어 사진들을 볼 수 있는 곳입니다.

여기에서 자신의 아이콘을 누르면 아래와 같이 현재까지 자신이 추가한 포토스피어 파노라마를 볼 수 있습니다.

카메라모양의 아이콘을 누르면 새로운 포토스피어를 추가할 수 있습니다.

추가하고 나서 잠시 기다리면... 아래와 같이 방금 올린 포토스피어가 추가됩니다.

그리고 아래는 현재 우리나라 지역에 올려진 포토스피어를 확인해 본 것입니다. 휑하네요~

=====

어떠신가요? 지금까지 작업은... 한마디로 이게 뭐지? 하는 수준. 전혀 매력적이지 않습니다. 사진을 올리는 과정도 아주 번거럽고요, 사진을 공유하는 것도 구글플러스에서는 약간 편하지만, 페이스북이나 트위터 등은 물론이고 다른 웹페이지에 삽입하는 것도 쉽지 않습니다. 

구글지도를 기반으로 해서 포토스피어 파노라마를 공유하는 건 일견 멋져보이지만, 사실 제가 처음 360cities 에서 설명드린 것처럼 왠만한 파노라마 공유사이트는 모두 가지고 있는 기능입니다.

(추가) 그리고 치명적으로... 아무리 큰 사진을 올려도 지도뷰 에서는 2508x1254로 추소된 사진만 서비스되네요. 게다가 압축도 많이 했는지 사진 연결부위(좌측끝과 우측쯕이 만나는 부분)에서 줄이 나타나고요. 전문적으로 360도 구면파노라마를 찍는 분들은 전혀 올리고 싶은 마음이 안들게 생겼습니다.

그런데, 안드로이드 4.2를 사용하는 사람이라면 완전히 상황이 다를 수 있습니다. 사진기 어플을 켜고, 포토스피어(photo sphere)를 선택하고, 화면을 보면서 빈곳이 없도록 촬영하고... 마지막으로 Share > Share to Google Maps > Submit 만 눌러주면 끝입니다. 중간에 파일을 올렸다 내렸다하거나, 좌표를 입력하는 과정이 전혀 필요없습니다. 한마디로 클라우드를 기반으로 360도 파노라마의 촬영-제작-공유를 한꺼번해 해결해주는 서비스라고 볼 수 있는 겁니다. 

다만 손으로 들고 찍을 경우 여기저기 에러가 발생하는 건 어쩔 수가 없습니다. 예를 들어... 아래 사진을 보면, 멀리있는 건 좀 괜찮은데, 가까운 것들은 완전 난리죠? 이 정도의 에러는 항상 있다고 보면 됩니다. 

이러한 한계는 피할 수 없고 현재까지는 그다지 사용자가 많지 않기 때문에 그다지 볼만한 파노라마가 많지 않습니다. 하지만, 포토스피어가 아주 많아지면 현재 길을 중심으로 서비스가 이루어지고 있는 스트리트뷰를 보완할 수 있는 괜찮은 대안이 될 수 있지 않을까 하는 생각이 드네요. 오늘 제가 불편하다고 말씀드린 방법도 나아질테고, 여타 문제점도 해결될 수 있겠죠.

결론적으로... 현재는 보잘 것 없지만, 계속 지켜봐야할 것 같다... 는 생각입니다. 

민, 푸른하늘