JS 로 GPS 찍어보기

김우진·2023년 5월 9일

한 면접을 갔을때의 이야기다. 한창 면접 진행을 하던중 질문이 들어왔다. "그래서 계속 리액트 얘기를 하시는데 자바스크립트는 어느정도 할 줄 아세요?"

질문을 받고 좀 당황했는데 자바스크립트를 어느정도 하냐는 질문에 어떻게 답을 해야 할지 난감했다. 자바스크립트 레벨이 수치화 되거나 기준이 있었다면 뭐 "저는 레벨 4 정도를 풀줄 압니다!" 와 같은 대답을 할 수 있었겠지만 과연 뭐라고 답을 해야 할까...

고민하다가 질문했다. "혹시 어느정도 한다는것에 기준이 있을까요?"

대답이 돌아왔다 "자바스크립트로 GPS 찍을 줄 알아요?"

전혀 생각해보지 않았던 영역이었다. 적잖이 당황도 했고 이런걸 할수도 있는거구나 싶은 생각이 들었고 대답은 뭐...

추가적으로 내 아이큐랑 대학순위도 물어봤는데 왜였을까? 내 대답들이 너무 별로라서 아이큐가 낮을거 같아서 물어본거 였을까? 그거랑 관련해서 내가 나온 대학교도 순위가 낮다고 생각해서 물어봤을까? 아무튼 좀 무례하지 않나 생각이 들긴 했는데 어짜피 처음부터 갈 생각은 없긴 했지만 더더욱 그런 생각이 들게 되었던거 같다.

그럼에도 불구하고 집으로 돌아오면서 한 생각이 머릿속에 계속 맴돌았다. 자바스크립트로 GPS를 찍을 수 있다고? 어떻게 하는거지?

집에 도착해서 찾아보기 시작했는데 JS내 내장되어있는 Geolocation API를 사용해서 현재 위치를 찍어 볼 수 있었는데 나에겐 꽤나 신선했던 경험이어서 어떻게 하는건지 기록을 한번 남겨보려고 한다.

우선 Geolcation API 이게 뭔지 부터 알아보자

MDN web docs 공식 문서를 참조했다
링크는 여기!

Geolocation API

사용자의 동의 하에 웹 애플리케이션에서 위치 정보에 접근 할 수 있는 API 이다. WebExtension 에 권한을 추가해야 하는등의 제약이 있지만 일단 JS에 내장되어 있는 기능인거 같으니 이용해서 GPS 를 찍어보고자 했다.

사용방법

사용 방법

Geolocation.getCurrentPosition(); 
// 현재 위치 가져오기

Geolocation.watchPosition();
// 위치가 바뀌면 자동으로 새로운 위치를 사용해 호출할 처리기 함수 등록

navigator.geolocation.getCurrentPosition((position) => {
  doSomething(position.coords.latitude, position.coords.longitude);
});
// 사용자 위치가 확인되면 doSomething() 함수를 실행

const watchID = navigator.geolocation.watchPosition((position) => {
  doSomething(position.coords.latitude, position.coords.longitude);
});
// watchPosition() 메서드는 위치 추적 요청을 식별할 수 있는 고유 숫자를 반환한다. 

navigator.geolocation.clearWatch(watchID);
// 이 숫자를 clearWatch() 메서드에 전달하면 해당 위치 추적을 종료할 수 있다.

getCurrentPosition()의 기본 설정은 정밀도가 낮지만 응답이 빠르다 그러므로 정확도보다 속도가 중요한 상황에서 유용하다. 예시로 IP 위치와 Wi-Fi 등 정확하지 않은 출처에 기반한 위치 정보를 반환할 수 있는 대신 속도가 빠르다.

장치의 이동이나 위치 정밀도 향상으로 인해 위치 정보가 바뀔 때 호출할 콜백 함수를 watchPosition() 메서드로 설정할 수 있다. 이 콜백은 여러 번 호출될 수 있으므로 브라우저가 사용자의 움직임에 따라 위치를 업데이트하거나, 고정밀 위치 기술을 적용해 보다 정밀한 위치를 표시할 수 있다.

응답 미세 조정

getCurrentPosition()과 watchPosition() 둘 다 성공 콜백, 실패 콜백, 그리고 옵션 객체를 받을 수 있다.

이 옵션 객체로는 고정밀도 활성화 여부, 위치 정보의 최대 수명(수명이 끝나기 전에는 이전에 반환했던 위치 정보를 저장했다가, 같은 요청을 또 받으면 그대로 반환), 그리고 위치 정보 요청의 응답을 기다릴 최대 대기시간을 지정할 수 있다.

옵션 객체를 사용한 watchPosition() 의 호출 예시

function success(position) {
  doSomething(position.coords.latitude, position.coords.longitude);
}
// 성공 콜백. 성공시 위도와 경도로 설정된 함수를 실행함

function error() {
  alert("죄송합니다. 위치 정보를 사용할 수 없습니다.");
}
// 실패 콜백. 실패시 해당 alert을 띄움

const options = {
  enableHighAccuracy: true, // 정확한 위치요구
  maximumAge: 30000, // 캐시 유효기간(밀리초)
  timeout: 27000 // 최대 대기기간(밀리초)
};
// 옵션 객체. 

const watchID = navigator.geolocation.watchPosition(success, error, options);