HTML5 Geolocation이란?
HTML5 Geolocation API는 사용자가 웹사이트와 자신의 위치 정보를 공유할 수 있도록 해주는 강력한 기능입니다. JavaScript로 위도(latitude)와 경도(longitude) 값을 가져온 후, 이 데이터를 백엔드 웹 서버로 전송하면 주변 상점 검색, 지도에 현재 위치 표시 등 다양한 위치 기반(location-aware) 기능을 손쉽게 구현할 수 있습니다.
Geolocation API의 동작 원리
Geolocation API는 전역 navigator 객체의 새로운 속성인 Geolocation 객체를 통해 작동합니다.
getCurrentPosition() 메서드는 기기의 현재 지리적 위치를 조회하는 핵심 메서드입니다. 위치 정보는 위도와 경도로 구성된 좌표 값에 더해 진행 방향(heading)과 이동 속도(speed) 같은 부가 정보로 표현되며, 그 결과는 Position 객체로 반환됩니다.
예제 코드
다음 코드를 실행하면 버튼 클릭 한 번으로 현재 위치를 확인할 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("Latitude : " + latitude + " Longitude: " + longitude);
}
function errorHandler(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
}
else if( err.code == 2) {
alert("Error: Position is unavailable!");
}
}
function getLocation(){
if(navigator.geolocation){
// timeout at 60000 milliseconds (60 seconds)
var options = {timeout:60000};
navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
} else {
alert("Sorry, browser does not support geolocation!");
}
}
</script>
</head>
<body>
<form>
<input type = "button" onclick = "getLocation();" value = "Get Location"/>
</form>
</body>
</html>코드 설명
- showLocation(): 위치 조회에 성공했을 때 호출되는 콜백 함수입니다. Position 객체에서 위도와 경도를 추출하여 알림창으로 표시합니다.
- errorHandler(): 오류 발생 시 호출됩니다. 오류 코드 1은 사용자가 권한을 거부한 경우(PERMISSION_DENIED), 코드 2는 위치 정보를 가져올 수 없는 경우(POSITION_UNAVAILABLE)를 의미합니다.
- getLocation(): 먼저 브라우저가 Geolocation을 지원하는지 확인한 뒤, 60초(60000ms) 타임아웃 옵션과 함께 getCurrentPosition() 메서드를 호출합니다.
주의 사항
Geolocation API는 개인정보와 직결되는 기능이므로, 최신 브라우저에서는 반드시 사용자의 명시적인 허락을 받아야만 위치 정보에 접근할 수 있습니다. 또한 보안상의 이유로 HTTPS 환경에서만 정상적으로 동작하므로, 실제 서비스 적용 시 이 점을 반드시 고려해야 합니다.