HTML5 : Geolocation API #1

  HTML5의 확장성은 모바일을 아우른다. 본 포스트에서는 그런 모바일의 중요한 기능중 하나인 Geolocation의 HTML5 적용 기술을 살펴보고 현상황의 문제점과 개선사항을 짚어보려고 한다.  기준 문서는 2010년 9월 7일 W3C Candidate Recommendation이다.( http://www.w3.org/TR/geolocation-API/ ) W3C의 많은 문서가 아직은 웹페이지를 제작하는 개발자/디자이너를 중심으로 만들어진 것이 아니라, 브라우저 제작자를 위주로 되어 있기 때문에, 본문에서는 웹페이지를 제작하는 개발자 입장에서 기술해보려고 한다.

1. 개 요

 Geolocation API는 위도와 경도 값과 같은 위치 정보를 단말에서 불러오는 API를 의미한다.  단말에는 GPS, WPS 등 다양한 위치 정보 시스템이 들어 있는데, API 자체는 단말에서 어떤 위치 정보 시스템을 이용하는지 알 필요가 없게 설계가 되어있다.  Geolocation API는 "One-shot" 위치 요청과 반복되는 위치 요청이 가능하다.  기본적으로 어떻게 사용하는지는 W3C에서 따온 예제를 보면서 설명하겠다.

   1.1 One-shot position request

    function showMap(position) {
      // Show a map centered at (position.coords.latitude, position.coords.longitude).
    }

    // One-shot position request.
    navigator.geolocation.getCurrentPosition(showMap);

 위 예제는 일반적으로 위치 값을 구하는 자바스크립트 구문이다. 맨 마지막 줄에 언급되어 있는 코드로 쉽게 개발자는 모바일 단말의 위치 값을 사용할 수 있다.  브라우저의 정보를 담는 일반적인 자바스크립트 객체인 navigator 객체에 프로퍼티 형태로 geolocation 객체가 들어있다. 이 geolocation의  메소드인 getCurrentposition 함수에 콜백 함수 명을 넣어주면 자동으로 위치값을 구하게 되면 그 값과 함께 콜백함수를 호출하는 구조가 되는 것이다. getCurrentpostion 함수는 단순히 사용자의 지금 위치 값만 반환한다.

   1.2 Repeated position updates

    function scrollMap(position) {
      // Scrolls the map so that it is centered at (position.coords.latitude, position.coords.longitude).
    }

    // Request repeated updates.
    var watchId = navigator.geolocation.watchPosition(scrollMap);

    function buttonClickHandler() {
      // Cancel the updates when the user clicks a button.
      navigator.geolocation.clearWatch(watchId);
    }

 앞과 달리 watchPostioin이라는 함수를 통해서 위치 값을 지속적으로 받을 수 있다. 만약 중간에 위치 센서 업데이트 기능을 끄고 싶다면 clearWatch를 통해 기능을 제거할 수 있다. 만약 error hanling 함수를 넣고자 한다면,  getCurrentposition함수나 watchPosition 함수 모두, 아래와 같이 두번째 인자로 error hanling 함수명을 넣어주면 된다. 

 var watchId = navigator.geolocation.watchPosition(scrollMap, handleError);

 

  1.3 Request a potentially cached position.

위치 캐시 기능이라고 보면된다. 이전에 구한 위치 값을 사용함으로써, 위치 센서를 사용하지 않고 비교적 최신 위치를 알 수 있다. 원리는 간단하다.  getCurrentPosition함수의 3번째 인자로 maximumAge 값을 아래와 같이 넣어 준다. 그렇게 되면  그 값에 해당하는 내의 정보일 경우 별도 과정 없이 저장된 캐쉬 값을 사용할 수 있다. 아래 예는 10분 내에 측정한 위치 값이면 그냥 그 값을 캐쉬 메모리에서 가져 오겠다는 것이다.(단위는 ms이다)

  navigator.geolocation.getCurrentPosition(successCallback,errorCallback,{maximumAge:600000}); 

구체적으로 적용한 사례는 다음 포스트에서 언급하도록 하겠다.