웹에서 개발을 하다보면 위치 정보를 활용하여 현재 위치를 표시하거나 지도 혹은 DB에 저장을 하는 경우가 있습니다. 웹에서는 위치 정보를 취득하기 위해 다양한 API를 사용할 수 있는데요. 그래서 오늘은 웹에서 위치정보를 취득하는 API인 GeoLocation API에 대해서 알아보도록 하겠습니다.
Geolocation API이란?
Geolocation API는 웹에서 유저의 위치 정보를 다루기 위해 사용하는 API를 말합니다. Geolocation 이전에도 위치 정보를 취득하는 다양한 API가 있었지만, 각각 독자 규격으로 이루어졌기 때문에 개발이 힘들었다고 합니다.
그래서 W3C에서는 웹 표준을 통일하기 위해 규격을 정하고, JavaScript에서 위치정보를 취득할 수 있도록 표준화를 진행하고 있습니다. 왠만한 PC 브라우저에서 문제가 없고, 또한 스마트폰에서도 GPS를 활용하여 위치정보를 취득할 수 있습니다.
Geolocation API 보안은?
앞서 설명한 것 처럼 Geolocation은 위치 정보를 취득할 수 있는 API입니다. 그런데 이런 API가 유저의 허락도 없이 위치정보를 취득하게 된다면 엄청나게 위험할 것입니다. 그래서 Geoloaction API를 사용하기 위해서는 유저의 위치정보를 취득해도 될까요? 라는 허락을 맡아야 합니다. 우리가 자주보게 되는 아래의 화면이 예시입니다.
Geolocation API 대응 브라우저는?
Geolocation API는 다양한 PC, 모바일 브라우저에서 대응하고 있습니다. 하지만, 확실하게 대응하고 있는지 아닌지 확인할 필요는 있습니다. 아래의 코드를 활용하여 Geolocation API를 사용할 수 있는지 없는지 확인할 수 있습니다.
if (navigator.geolocation) {
// Geolocation API 사용 가능
}
else {
// Geolocation API 사용 불가능
}Geolocation API - Web API | MDN
Geolocation API는 사용자의 동의 하에 웹 애플리케이션에서 위치 정보에 접근할 수 있는 API입니다. 개인정보 보호를 위해, 브라우저는 위치 정보를 제공하기 전에 사용자에게 위치 정보 권한에 대
developer.mozilla.org
Geolocation 사용법은?
if ("geolocation" in navigator) {
navigator.permissions.query({ name: 'geolocation' }) .then(
permissionStatus => {
if (permissionStatus.state === 'granted') {
} else if (permissionStatus.state === 'prompt') {
} else if (permissionStatus.state === 'denied') {}
})
.catch(error => console.error(”Error”);
}
else {
console.log('Geolocation is not supported by this browser.');
}위의 코드는 Geolocation에 관해 권한을 취득하는 코드입니다. navigator.permissions.query({ name: 'geolocation' })를 통해 유저에게 위치정보를 취득해도 될까요? 라는 알림을 보내게 됩니다.
여기서는 두 가지가 있는데요. 바로 승인과 거절입니다. 승인 시에는 permissionStatus가 granted로 받으면서 Geolocation API를 사용할 수 있고, 거절했을 때는 denied가 리턴되면서 위치정보를 사용할 수 없습니다. granted는 이미 승인된 경우를 말합니다.
getCurrentPosition(success, error)현재 위치를 취득하는 방법은 getCurrentPoision(success, error)를 통해 취득할 수 있습니다. getCurrentPoision를 사용하면 다음과 같은 정보를 취득할 수 있습니다.
・ Geolocation 위치 정보
| 위도 | position.coords.latitude |
| 경도 | position.coords.longitude |
| 고도 | position.coords.altitude |
| 위치 정확도 | position.coords.accuracy |
| 고도 정확도 | position.coords.altitudeAccuracy |
| 속도 | position.coords.speed |
・ Geolocation.watchPosition()
위의 메소드는 디바이스의 위치가 바뀔 때마다 자동으로 호출됩니다. 또한 getCurrentPosition과 같이 콜백 함수와 에러 함수를 지정할 수 있습니다.