Geolocation API 를 이용한 디바이스 위치 정보 가져오기

HTML5 에서는 Geolocation라는 API를 지원한다. Geolocation API 를 사용하면 사용자의 디바이스가 위치하는 좌표를 간단하게 알아낼 수 있다. GPS가 내장 되어 있는 디바이스에서 가장 높은 정확성을 보인다. 개인의 실시간 위치 정보는 굉장히 민감한 개인정보 이기에 사용자의 동의를 받은 상태에서만 위치 정보를 가져올 수 있다.

브라우저 지원 현황

해당 API 를 사용할 수 있는 브라우저 종류 및 버전 정보는 Can i use 에서 확인할 수 있다.

사용 가능 브라우저 체크

위에서 확인했듯이 이전 버전 브라우저에서 작동을 하지 않을 수 있으므로, 자바스크립트 코드로 확인을 해야할 필요가 있다.

if (navigator.geolocation) {
  alert('Geolocation API 사용이 가능합니다.');
} else {
  alert('해당 브라우저에서 Geolocation API를 지원하지 않습니다.');
}

단순하게 navigator.geolocation 의 존재 여부를 체크해주면 된다.

위치 받아오기

Geolocation API는 비동기(Asynchronous)로 작동한다. 따라서 반환값이 존재하지 않고, 일반적으로 성공했을때의 콜백함수와 에러가 발생했을때의 콜백함수를 인자로 넣어준다. 첫번째 인자가 성공했을때의 콜백함수, 두번째 인자가 에러발생시의 콜백함수이다.

navigator.geolocation.getCurrentPosition(success, error);

여기서 성공했을때의 콜백 함수에는 position 객체가 들어오게 된다. 따라서 다음과 같이 사용할 수 있다.

navigator.geolocation.getCurrentPosition(function(position) {
  console.log(position.coords.latitude + ", " + position.coords.longitude);
});

약간의 딜레이가 발생한 다음 개발자도구의 Console 부분을 확인하면, 자신의 위도(Latitude)경도(Longitude) 위치가 출력 될 것이다. 이 position 객체에는 위치, 경도를 포함한 여러가지 프로퍼티를 가지고 있다.

  • timestamp : 위치를 수집한 시간에 대한 타임스탬프
  • coords : 현재 위치를 정의하는 객체
    • coords.latitude : 위도
    • coords.longitude : 경도
    • coords.altitude : 고도 (해수면을 기준으로 미터 단위), 기기에 따라 null일 수 있음.
    • coords.accuracy : 위도, 경도의 오차범위 (m)
    • coords.altitudeAccuracy : 고도의 오차범위 (m), 기기에 따라 null일 수 있음.
    • coords.heading : 기기의 진행 방향의 각도, 0도는 북쪽, 90도는 동쪽, 270도는 서쪽, 180도는 남쪽을 의미함. 아래의 speed 값이 0이라면  NaN이 되며, 기기에 따라 null일 수 있음.
    • coords.speed : 기기의 이동 속도를 초당 미터값으로 나타냄.

에러 핸들링

Geolocation 메소드의 두번째 인자, 즉 에러발생시의 콜백함수로는 Error 객체가 들어오게 된다. 이 Error 객체를 통해 에러코드를 확인하여, 문제가 발생한 원인에 대해 분석할 수 있다.

에러 코드는 PERMISSION_DENIED, POSITION_UNAVAILABLE, TIMEOUT, UNKNOWN_ERROR 이 4가지가 존재한다.

navigator.geolocation.getCurrentPosition(success, function(error) {
  switch(error.code) {
        case error.PERMISSION_DENIED:
            // 사용자가 위치정보 사용을 허용하지 않았을 때
            break;
        case error.POSITION_UNAVAILABLE:
            // 위치 정보 사용이 불가능할 때
            break;
        case error.TIMEOUT:
            // 위치 정보를 가져오려 시도했지만, 시간이 초과되었을 때
            break;
        case error.UNKNOWN_ERROR:
            // 기타 알 수 없는 오류가 발생하였을 때
            break;
    }
});

옵션

Geolocation 메소드의 세번째인자에는 옵션객체를 넣어 줄 수 있는데, 옵션에는 다음 세가지의 옵션이 존재한다.

  • enableHighAccuracy : 최대한 높은 정확도의 위치 정보를 받아올 건지에 대한 Boolean 값. True 를 넣어주면, 기기가 최대한 높은 정확도의 위치 정보를 받아온다. 이 때 시간이 많이 소요 될 수 있으며, 전력소비가 늘어날 수 있다.
  • timeout : 기기가 위치 정보를 받아 올 때 기다릴 최대 시간.
  • maximumAge : 캐시된 위치 데이터가 존재할 때, 허용할 캐시의 오래된 정도를 초단위로 제한할 수 있음. 0을 넣어 준다면 캐시된 데이터를 사요하지 않으며, Infinity를 넣어주면, 언제 캐시되었는지 개의치 않고 아무리 오래된 데이터라고 해도 해당 데이터를 사용한다.
navigator.geolocation.getCurrentPosition(success, error, {
  enableHighAccuracy: true,
  maximumAge: 0,
  timeout: 10000
});

위와 같이 사용할 수 있다.

마무리

위치정보는 굉장히 민감한 정보임과 동시에 활용도가 매우 높은 정보이다. Geolocation API 를 잘 활용한다면, 사용자에게 알맞는 정보를 적절하게 제공하기에 유용할 것이다.