브라우저 위치 정보 받아오기 / HTML5 Geolocation API

스마트폰이 보급되면서 브라우저에서도 위치 기반 서비스들이 다수 생겨났다. 이러한 서비스를 필자도 만들 필요가 있었는데, 이를 위해서 필요한 API가 바로 이 Geolocation API다.

해당 디바이스의 GPS, IP address 정보, Wi-Fi, GSM, CDMA망의 ID를 통해 위치를 대략적으로 예측하여 브라우저가 반환해주는 API로 어떤 디바이스건 관계없이 사용할 수 있다. 그러나 이렇다보니 정확한 위치정보 라는 것을 보장하지 않고, 또 어떤 방식으로 해당 위치가 얻어졌는지도 알 수 없다. 그러나 일반 사용자용 웹앱을 만들기 위해서는 이 정도면 충분하다.

Geolocation API

Geoloaction API는 window.navigator에 정의되어 있다. IE 9이후, 파이어폭스, 크롬등에서도 지원하고 있다. 사생활 침해의 가능성으로 인해 위치정보를 제공받기 위해서는 사용자가 허가를 해야 한다.

1. 빠르게 현재 위치정보 가져오기

이때 중요한게 우리가 사용할 Geolocation 객체가 존재하는지를 체킹하는 것인데 아래와 같은 방식으로 할 수 있다.

if("geolocation" in navigator) { 
    // Geolocation API가 있는 브라우저라면,
} else { 
    // 없는 브라우저라면,
}

일반적인 위치정보를 가져오기 위해서는 window.navigator객체의 getCurrentPosition()함수를 사용하면 된다. 이때 사용하는 getCurrentPosition()함수는 정확도보다는 빠른 응답에 초점을 둔다. GPS정보는 받아오는데 시간이 소요되기에 보통 이 함수는 IP address 또는 WI-FI에 기대어 위치를 추정한다.

먼저 이 함수 호출시 사용자의 위치 탐지를 시작하라는 명령을 비동기적으로 하드웨어에 요청한다. 위치가 확인이되면 콜백 함수가 실행이 되는 형태로 작동한다. 따라서 우리는 성공시 할 작업을 정의한 함수를 파라매터 콜백 함수(아래 예시 코드의 do_something)로 넣어준다.

navigator.geolocation.getCurrentPosition(function(position) {
    do_something(position.coords.latitude, position.coords.longitude);
});

Position객체가 콜백 함수의 파라매터로 넘어오면, 여기서 위치 정보를 꺼낼 수 있다.

2. 현재 위치 보정/갱신

더 정확한 위치 정보가 추가적으로 도착해서 그 정보를 반영해 보정한다거나, 디바이스의 움직임에 따라 갱신된 위치 정보를 반영해 주고 싶다면 watchPostion()함수를 활용하면 된다. 이것은 getCurrentPosition()과 동일한 사용방법을 가지고 있다. 디바이스가 움직여서 위치 정보가 변화된다거나, 혹은 더욱 정확도가 높은 위치정보를 계산해냈을 경우 갱신되어 여러번 콜백함수가 호출된다.

watchPostion()는 getCurrentPosition()호출과 관계없이 사용할 수 있다.

navigator.geolocation.watchPosition(function(position) {
    do_something(position.coords.latitude, position.coords.longitude);
});

그런데 이때 문제가 생긴다. 더 이상 디바이스 정보를 받아오는 것을 그만 두고 싶은 경우가 생기는 상황이 바로 그것인데, 이를 해결하기 위해 watchPosition() 함수는 watcher ID를 반환한다.

var watcherID = navigator.geolocation.watchPosition(function(position) {
    do_something(position.coords.latitude, position.coords.longitude);
});

navigator.geolocation.clearWatch(watchID); // 위치 갱신 그만 두기

이 watcherID를 통해 우리는 사용자 위치 갱신을 그만 둘 수 있다. 아래 코드가 그 방법이다.

3. 위치 정보의 세부 옵션

getCurrentPosition()과 watchPosition()은 둘다 성공시의 콜백, 실패시의 콜백(이 실패시의 콜백의 경우, watchPosition()에서 실패시 여러번 호출되지 않고 한번만 호출된다.), 그리고 PositionOptions 객체를 파라매터로 받는다.

function geo_success(position) {
    do_something(position.coords.latitude, position.coords.longitude);
}

function geo_error() {
    alert("위치 정보를 사용할 수 없습니다.");
}

var geo_options = {
    enableHighAccuracy: true, // 불리언
    maximumAge        : 30000, // 천분의 1초 단위
    timeout           : 27000 // 천분의 1초 단위
};

var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);

위 코드는 예시다. geo_options라는 변수명으로 표현된 PositionOptions 객체에 대해 세부적 프로퍼티의 의미를 알아보자.

enableHighAccuracy : 정확도를 높게 받을지에 관한 값이다. true로 설정시 응답이 느려지거나 전력 소비가 증가되는 등의 부작용이 발생할 수 있다. false라면 디바이스 스스로 자원을 분배해 사용한다.

timeout : 위치를 받아올 때까지의 대기 시간을 의미한다. 기본값은 Infinity다.

maximumAge : 캐시된 위치 값의 유효시간을 의미한다. 0을 지정하면 캐시된 위치를 사용치 말라는 것이고, Infinity를 지정하면 캐시된 위치가 언제 수집된 건지 개의치 않고 반환한다.

4. Position 객체와 PositionError 객체.

Position는 coords 객체와 timestamp(수집된 시간)를 프로퍼티로 가진다.

그리고 coords 객체는 아래와 같은 프로퍼티들을 가진다.

latitude : 경도
longitude : 위도
altitude : 고도
accuracy : 미터로 표현한 위,경도의 정확도
altitudeAccuracy : 미터로 표현한 고도의 정확도
heading : 장치가 움직이는 방향을 나타내는 숫자. 이 값은 정북에서 시계방향으로 벗어난 각의 크기를 나타낸다. (정북향 0도, 동쪽 90도, 서쪽 270도)
speed : 장치의 속도

PositionError 객체는 에러 콜백 함수에 첫번째 파라매터로 전달 되는 객체다.

function errorCallback(error) {
    alert('ERROR(' + error.code + '): ' + error.message);
};

code(1 : permission denied, 2 : unavailable, 3 : timeout)와 message(문자열로 표현된 에러 메세지)를 프로퍼티로 가진다.