HTML5 Geolocation API를 사용하면 사용자가 즐겨 찾는 웹사이트와 자신의 위치 정보를 공유할 수 있습니다. JavaScript로 위도(latitude)와 경도(longitude)를 캡처한 뒤 백엔드 웹 서버로 전송하면, 주변 상점 검색이나 지도 위에 현재 위치 표시하기 같은 다양한 위치 기반 기능을 구현할 수 있습니다.
다만 지오로케이션은 권한 문제, 신호 상태, 네트워크 환경 등 여러 변수에 영향을 받기 때문에 복잡한 편입니다. 따라서 발생 가능한 모든 오류를 감지하고 사용자에게 친절하게 안내하는 우아한 오류 처리(graceful error handling)가 반드시 필요합니다.
PositionError 객체란?
Geolocation의 getCurrentPosition()과 watchPosition() 메서드는 두 번째 인자로 오류 핸들러 콜백 함수를 받습니다. 위치 정보 조회에 실패하면 이 콜백으로 PositionError 객체가 전달되며, 해당 객체는 다음 두 가지 속성을 가집니다.
| 속성 | 타입 | 설명 |
| code | Number | 발생한 오류의 종류를 나타내는 숫자 코드입니다. |
| message | String | 개발자나 사용자가 이해할 수 있는 형태의 오류 설명 문자열입니다. |
PositionError 오류 코드 종류
PositionError 객체의 code 속성에는 아래 표와 같은 값들이 반환될 수 있습니다.
| 코드 | 상수 | 설명 |
| 0 | UNKNOWN_ERROR | 알 수 없는 이유로 인해 장치의 위치를 가져오는 데 실패했습니다. |
| 1 | PERMISSION_DENIED | 애플리케이션이 위치 서비스(Location Service) 사용 권한을 갖고 있지 않아 위치를 가져올 수 없습니다. |
| 2 | POSITION_UNAVAILABLE | 장치의 현재 위치를 확인할 수 없습니다. |
| 3 | TIMEOUT | 지정된 최대 제한 시간(timeout) 내에 위치 정보를 가져오지 못했습니다. |
오류 처리 실전 예제
다음은 PositionError 객체를 활용해 오류 코드별로 다른 메시지를 보여주는 전형적인 패턴입니다. errorHandler는 오류 발생 시 호출되는 콜백 함수입니다.
function errorHandler(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("위치 정보 접근 권한이 거부되었습니다.");
break;
case error.POSITION_UNAVAILABLE:
alert("현재 위치 정보를 사용할 수 없습니다.");
break;
case error.TIMEOUT:
alert("위치 정보 요청 시간이 초과되었습니다.");
break;
default:
alert("알 수 없는 오류가 발생했습니다.");
}
}
navigator.geolocation.getCurrentPosition(showPosition, errorHandler);이처럼 오류 코드를 분기 처리하면, 권한 거부·신호 불량·시간 초과 등 상황에 맞는 명확한 안내를 사용자에게 제공할 수 있습니다.
추가 팁
- 대부분의 최신 브라우저는 보안상의 이유로 HTTPS(또는 localhost) 환경에서만 Geolocation API를 허용합니다.
getCurrentPosition()의 세 번째 인자로{ timeout: 10000 }같은 옵션을 지정하면 무한 대기를 방지할 수 있습니다.- 권한이 거부된 경우, 설정 변경 방법을 안내하는 UI를 함께 제공하면 사용자 경험이 크게 향상됩니다.