Geolocation API를 사용하면 사용자의 동의가 있는 경우 사용자의 위치를 확인할 수 있습니다.
Geolocation API를 사용하면 사용자의 동의 하에 사용자의 위치를 파악할 수 있습니다. 이 기능은 목적지 안내, 사용자 제작 콘텐츠에 위치정보 태그 추가(예: 사진이 촬영된 장소 표시)에 사용할 수 있습니다.
사용자의 동의가 있는 경우 (페이지가 열려 있는 동안에만) Geolocation API를 사용하여 사용자의 위치를 확인하고 사용자의 이동을 계속 추적할 수 있습니다. 따라서 사용자가 가까이 있을 때 수거 주문을 준비하기 위해 백엔드 시스템과 통합하는 등 여러 가지 흥미로운 사용 사례가 생성됩니다.
Geolocation API를 사용할 때는 유의할 점이 많습니다. 이 가이드에서는 일반적인 사용 사례와 솔루션을 안내합니다.
요약
- 사용자에게 도움이 되는 경우 위치정보를 사용합니다.
- 사용자 동작에 대한 명확한 응답으로 권한을 요청합니다.
- 사용자의 브라우저가 위치정보를 지원하지 않는 경우 기능 감지를 사용합니다.
- 위치정보를 구현하는 방법뿐만 아니라 위치정보를 사용하는 가장 좋은 방법까지 배웁니다.
- 사이트에서 위치정보를 테스트합니다.
위치정보를 사용해야 하는 경우
- 사용자에게 가장 가까운 특정 물리적 위치를 찾아 사용자 환경을 맞춤설정합니다.
- 뉴스와 같은 정보를 사용자의 위치에 맞게 맞춤설정합니다.
- 지도에 사용자의 위치를 표시합니다.
- 애플리케이션에서 생성된 데이터에 사용자의 위치를 사용하여 태그를 지정합니다(즉, 사진에 위치정보 태그 지정).
책임감 있게 권한 요청
최근 사용자 연구에 따르면 사용자는 페이지 로드 시 위치 정보를 요청하는 메시지를 표시하는 사이트를 신뢰하지 않는 것으로 나타났습니다. 그렇다면 권장사항은 무엇일까요?
사용자가 자신의 위치를 제공하지 않을 것임을 가정합니다.
많은 사용자가 자신의 위치를 제공하고 싶어 하지 않으므로 방어적인 개발 스타일을 채택해야 합니다.
- 이러한 조건에 사이트를 조정할 수 있도록 Geolocation API에서 발생하는 모든 오류를 처리합니다.
- 위치 정보가 필요한 이유를 명확하게 설명합니다.
- 필요한 경우 대체 솔루션을 사용합니다.
위치정보가 필요한 경우 대체 기능 사용
사이트 또는 애플리케이션에서 사용자의 현재 위치에 대한 액세스 권한을 요청하지 않는 것이 좋습니다. 하지만 사이트 또는 애플리케이션에 사용자의 현재 위치가 필요한 경우 사용자의 현재 위치를 가장 정확하게 가져올 수 있는 서드 파티 솔루션이 있습니다.
이러한 솔루션은 보통 사용자의 IP 주소를 보고 이를 RIPE 데이터베이스에 등록된 실제 주소에 매핑하는 방식으로 작동합니다. 이러한 위치는 매우 정확하지 않은 경우가 많으며 일반적으로 사용자에게 가장 가까운 통신 허브나 휴대전화 기지국의 위치를 제공합니다. 대부분의 경우, 특히 사용자가 VPN이나 다른 프록시 서비스를 사용하는 경우 정확도가 떨어질 수 있습니다.
사용자 동작 시 위치에 대한 액세스를 항상 요청
사용자의 위치를 요청하는 이유와 위치 정보 제공 시 사용자가 얻게 되는 이점을 사용자가 이해하도록 해야 합니다. 사이트가 로드되자마자 홈페이지에서 사용자 ID를 요청하면 사용자 경험이 저하됩니다.
대신 작업을 수행하는 데 사용자 위치에 액세스해야 한다는 명확한 클릭 유도 문구나 표시를 사용자에게 제공하세요. 그러면 사용자는 액세스를 요청하는 시스템 메시지를 방금 시작된 작업과 더 쉽게 연결할 수 있습니다.
작업을 수행하려면 사용자의 위치를 요청해야 한다는 사실을 명확히 알립니다.
Google Ads팀의 연구에 따르면 사용자가 특정 호텔 사이트에서 예정된 회의를 위해 보스턴에 있는 호텔 객실을 예약하라는 요청을 받았을 때 홈페이지에서 '찾기 및 예약' 클릭 유도 문구를 탭하면 즉시 GPS 위치를 공유하라는 메시지가 표시되었습니다.
보스턴의 객실을 예약하려고 하는데 샌프란시스코의 호텔이 표시되는 이유를 이해하지 못해 사용자가 불만을 표시하는 경우가 있었습니다.
위치 정보를 요청하는 이유를 사용자에게 확실히 이해시키면 사용자 환경이 개선됩니다. 거리계와 같이 여러 기기에서 흔히 사용되는 잘 알려진 기표나 '나에게 가까운 위치 찾기'와 같은 명확한 클릭 유도 문구를 추가하세요.
사용자가 위치에 대한 권한을 부여하도록 부드럽게 유도합니다.
개발자는 사용자가 수행하는 작업에 액세스할 수 없습니다. 사용자가 위치에 대한 액세스를 허용하지 않은 시점을 정확히 알지만 사용자가 언제 액세스 권한을 부여했는지는 알 수 없습니다. 결과가 표시될 때만 액세스 권한을 획득했음을 알 수 있습니다.
사용자가 액션을 완료해야 하는 경우 사용자의 행동을 '유도'하는 것이 좋습니다.
권장사항:
- 짧은 시간 후에 트리거되는 타이머를 설정합니다. 5초가 적절한 값입니다.
- 오류 메시지가 표시되면 사용자에게 메시지를 표시합니다.
- 긍정적인 응답을 받으면 타이머를 사용 중지하고 결과를 처리합니다.
- 제한 시간이 지난 후에도 긍정적인 응답을 받지 못하면 사용자에게 알림을 표시합니다.
- 나중에 응답이 수신되고 알림이 여전히 표시되면 화면에서 삭제합니다.
button.onclick = function () {
var startPos;
var nudge = document.getElementById('nudge');
var showNudgeBanner = function () {
nudge.style.display = 'block';
};
var hideNudgeBanner = function () {
nudge.style.display = 'none';
};
var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);
var geoSuccess = function (position) {
hideNudgeBanner();
// We have the location, don't display banner
clearTimeout(nudgeTimeoutId);
// Do magic with location
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
switch (error.code) {
case error.TIMEOUT:
// The user didn't accept the callout
showNudgeBanner();
break;
}
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
브라우저 지원
현재 대부분의 브라우저가 Geolocation API를 지원하지만 작업을 하기 전에 항상 지원 여부를 확인하는 것이 좋습니다.
위치정보 객체의 존재 여부를 테스트하여 호환성을 쉽게 확인할 수 있습니다.
// check for Geolocation support
if (navigator.geolocation) {
console.log('Geolocation is supported!');
} else {
console.log('Geolocation is not supported for this Browser/OS.');
}
사용자의 현재 위치 확인
Geolocation API에서는 사용자 위치를 확인하는 간단한 '원샷' 메서드(getCurrentPosition())를 제공합니다. 이 메서드를 호출하면 사용자의 현재 위치를
비동기적으로 보고합니다.
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
navigator.geolocation.getCurrentPosition(geoSuccess);
};
이 도메인의 애플리케이션이 처음으로 권한을 요청한 경우 브라우저는 일반적으로 사용자 동의를 확인합니다. 브라우저에 따라 권한 조회를 항상 허용하거나 허용하지 않는 환경설정이 있을 수도 있으며, 이 경우 확인 프로세스가 우회됩니다.
브라우저에서 사용하는 위치 기기에 따라 위치 객체에는 실제로 위도와 경도 이상의 많은 정보가 포함될 수 있습니다. 예를 들어 고도나 방향이 포함될 수 있습니다. 위치 시스템이 실제로 데이터를 반환할 때까지는 위치 시스템에서 어떤 추가 정보를 사용하는지 알 수 없습니다.
사용자 위치 확인하기
Geolocation API를 사용하면 사용자 동의 하에 getCurrentPosition()를 한 번 호출하여 사용자의 위치를 가져올 수 있습니다.
사용자 위치를 지속적으로 모니터링하려면 Geolocation API 메서드 watchPosition()를 사용합니다. 이 메서드는 getCurrentPosition()와 유사한 방식으로 작동하지만 위치 지정 소프트웨어가 다음을 실행할 때 여러 번 실행됩니다.
- 사용자 잠금이 더 정확해집니다.
- 사용자의 위치가 변하는지 확인합니다.
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
위치정보를 사용하여 사용자 위치를 확인해야 하는 경우
- 사용자 위치에 대한 더욱 정밀한 추적을 원하는 경우
- 애플리케이션에서 새 위치 정보를 기반으로 사용자 인터페이스를 업데이트해야 합니다.
- 사용자가 특정 정의된 영역으로 들어갈 때 애플리케이션에서 비즈니스 로직을 업데이트해야 합니다.
위치정보 사용 시 권장사항
항상 해제된 상태를 유지하여 배터리를 절약하세요.
위치정보의 변경 사항을 확인하는 것은 무료 작업이 아닙니다. 운영체제에서 애플리케이션이 지리적 하위 시스템에 연결될 수 있는 플랫폼 기능을 도입할 수는 있지만, 웹 개발자는 사용자 기기가 사용자의 위치 모니터링을 위해 어떤 기능을 지원하는지 알 수 없습니다. 또한 위치를 확인하는 동안 기기를 여러 추가 프로세싱에 참여시킵니다.
더 이상 사용자 위치를 추적할 필요가 없으면 clearWatch를 호출하여 위치정보 시스템을 사용 중지합니다.
적절한 오류 처리
안타깝게도 모든 위치 조회가 성공하는 것은 아닙니다. GPS를 찾을 수 없거나 사용자가 갑자기 위치 조회를 비활성화했을 수 있습니다. 오류가 발생하면 콜백 내에서 사용자에게 알릴 수 있도록 getCurrentPosition()의 선택적 인수인 두 번째 인수가 호출됩니다.
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
위치정보 하드웨어를 시작할 필요성이 줄어듭니다.
대부분의 사용 사례에서는 사용자의 최신 위치가 필요하지 않으며 대략적인 추정치만 있으면 됩니다.
maximumAge 선택적 속성을 사용하여 최근에 가져온 위치정보 결과를 사용하도록 브라우저에 지시합니다. 이렇게 하면 사용자가 이전에 데이터를 요청한 경우 더 빠르게 반환될 뿐만 아니라 브라우저에서 Wi-Fi 삼각 측량 또는 GPS와 같은 위치정보 하드웨어 인터페이스를 시작하지 못하도록 합니다.
window.onload = function () {
var startPos;
var geoOptions = {
maximumAge: 5 * 60 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
사용자가 기다리게 하지 말고 시간 제한을 설정하세요.
시간 제한을 설정하지 않으면 현재 위치에 대한 요청이 반환되지 않을 수 있습니다.
window.onload = function () {
var startPos;
var geoOptions = {
timeout: 10 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
세분화된 위치보다 대략적인 위치 선호
사용자와 가장 가까운 매장을 찾으려는 경우 1미터 정밀도가 필요한 경우는 거의 없습니다. 이 API는 최대한 빨리 반환되는 대략적인 위치를 제공하도록 설계되었습니다.
높은 수준의 정밀도가 필요한 경우 enableHighAccuracy 옵션을 사용하여 기본 설정을 재정의할 수 있습니다. 이 방법은 드물게 사용하세요. 확인 속도가 느리고 배터리 소모량이 더 많습니다.
window.onload = function () {
var startPos;
var geoOptions = {
enableHighAccuracy: true,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Chrome DevTools로 위치정보 에뮬레이션
위치정보를 설정한 후 해야 할 일은 다음과 같습니다.
- 다양한 위치정보에서 앱이 어떻게 작동하는지 테스트합니다.
- 위치정보를 사용할 수 없는 경우 앱의 성능이 단계적으로 저하되는지 확인합니다.
Chrome DevTools에서 둘 다 수행할 수 있습니다.
- Chrome DevTools를 엽니다.
- Esc를 눌러 콘솔 창을 엽니다.
- 콘솔 창 메뉴 열기
- 센서 옵션을 클릭하여 센서 탭을 표시합니다.
여기에서 미리 설정된 주요 도시로 위치를 재정의하거나, 맞춤 위치를 입력하거나, 재정의를 위치 정보 없음으로 설정하여 위치정보를 사용 중지할 수 있습니다.