HTML5 Geolocation API란?
HTML5 Geolocation API를 사용하면 즐겨 찾는 웹 사이트와 자신의 현재 위치를 손쉽게 공유할 수 있습니다. JavaScript가 위도(latitude)와 경도(longitude) 값을 캡처하면, 이 데이터를 백엔드 웹 서버로 전송하여 주변 상점 검색, 지도에 내 위치 표시하기 등 다양한 위치 기반(location-aware) 기능을 구현할 수 있습니다.
Safari 5는 이러한 Geolocation API를 기본적으로 지원합니다. 위치 정보는 민감한 개인 데이터이기 때문에, 웹 사이트가 위치 정보를 요청하면 브라우저가 항상 사용자에게 허용 여부를 먼저 묻습니다. 따라서 개발자는 사용자가 권한을 거부하거나 위치 조회에 실패하는 경우를 대비한 오류 처리 로직을 함께 작성하는 것이 좋습니다.
예제: 현재 위치 가져오기
다음 예제는 버튼 클릭 한 번으로 현재 위치의 위도와 경도를 가져와 화면에 표시하는 방법을 보여줍니다.
<!DOCTYPE HTML>
<html>
<head>
<script>
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("위도 : " + latitude + " 경도 : " + longitude);
}
function errorHandler(err) {
if(err.code == 1) {
alert("오류 : 접근이 거부되었습니다!");
}
else if( err.code == 2) {
alert("오류 : 위치 정보를 사용할 수 없습니다!");
}
}
function getLocation(){
if(navigator.geolocation){
// 60000밀리초(60초) 후 타임아웃
var options = {timeout:60000};
navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
} else{
alert("죄송합니다. 이 브라우저는 위치 정보를 지원하지 않습니다!");
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="getLocation();" value="위치 가져오기"/>
</form>
</body>
</html>코드 설명
- showLocation(position) : 위치 조회에 성공했을 때 호출되는 콜백 함수입니다. position 객체의 coords 속성에서 위도와 경도를 읽어 알림창에 표시합니다.
- errorHandler(err) : 오류 발생 시 호출됩니다. err.code가 1이면 사용자가 권한을 거부한 경우(접근 거부), 2이면 위치 정보를 확인할 수 없는 경우를 의미합니다.
- getLocation() : 브라우저가 navigator.geolocation을 지원하는지 먼저 확인한 뒤, 타임아웃 60초 옵션과 함께 getCurrentPosition()을 호출합니다. 위치 정보를 지원하지 않는 브라우저에서는 경고 메시지를 표시합니다.
이처럼 Geolocation API는 단 몇 줄의 코드만으로 위치 기반 서비스를 구현할 수 있는 강력한 도구입니다. 참고로 최신 브라우저에서는 보안상의 이유로 HTTPS(보안 컨텍스트) 환경에서만 이 API가 동작하므로, 실제 서비스 적용 시에는 반드시 안전한 연결 환경과 사용자 동의 절차를 갖추어야 합니다.