사용자 위치

Geolocation API를 사용하면 사용자의 동의하에 사용자 위치를 확인할 수 있습니다.

Paul Kinlan

Geolocation API를 사용하면 사용자의 동의를 받아 사용자의 위치를 탐색할 수 있습니다. 이 기능으로 사용자를 목적지까지 안내하고 사용자 생성 콘텐츠에 위치 태그(예: 사용자가 사진을 촬영한 위치 표시)를 지정할 수 있습니다.

사용자의 동의가 있는 경우 Geolocation API를 사용하여 사용자의 위치를 확인하고 사용자의 이동을 계속 추적할 수 있습니다(페이지가 열려 있는 동안만). 이를 통해 백엔드 시스템과 통합하여 사용자가 근처에 있을 때 수령 주문을 준비하는 등 다양한 흥미로운 사용 사례를 만들 수 있습니다.

Geolocation API를 사용할 때는 많은 사항을 알고 있어야 합니다. 이 가이드는 일반적인 사용 사례와 솔루션을 안내합니다.

요약

  • 사용자에게 도움이 될 때 위치정보를 사용합니다.
  • 사용자 동작에 대한 명확한 반응으로 권한을 요청합니다.
  • 사용자의 브라우저에서 위치정보를 지원하지 않는 경우 기능 감지를 사용합니다.
  • 위치정보를 구현하는 방법뿐만 아니라 위치정보를 가장 적절히 사용하는 방법까지 배웁니다.
  • 사이트에서 위치정보를 테스트합니다.

위치정보를 사용해야 하는 경우

  • 사용자에게 가장 가까운 특정 물리적 위치를 찾아 사용자 환경을 맞춤설정합니다.
  • 사용자 위치 관련 정보(예: 뉴스)를 제공하려는 경우
  • 사용자 위치를 지도에 표시하려는 경우
  • 사용자 위치를 사용하여 애플리케이션에서 생성된 데이터에 태그를 지정하려는 경우(예: 사진에 위치 태그 지정)

책임감 있게 권한 요청

최근 사용자 연구에 따르면 사용자는 페이지 로드 시 위치 정보를 요청하는 메시지를 표시하는 사이트를 신뢰하지 않는 것으로 나타났습니다. 그렇다면 어떻게 하는 것이 가장 좋을까요?

사용자가 본인의 위치를 제공하지 않을 것임을 가정하기

많은 사용자가 자신의 위치를 제공하기를 원하지 않으므로 방어적인 개발 스타일을 채택해야 합니다.

  1. 이러한 상황에 맞게 사이트를 조정할 수 있도록 Geolocation API에서 발생하는 모든 오류를 처리합니다.
  2. 위치의 필요성을 명확하고 명확하게 설명합니다.
  3. 필요한 경우 대체 솔루션을 사용합니다.

지리적 위치 정보가 필요한 경우 폴백 사용하기

사이트 또는 애플리케이션에서 사용자의 현재 위치에 대한 액세스 권한을 요청하지 않는 것이 좋습니다. 그러나 사이트 또는 애플리케이션에 사용자의 현재 위치가 필요하다면 현재 위치를 가장 가깝게 추정할 수 있는 서드 파티 솔루션이 있습니다.

이러한 솔루션은 흔히 사용자의 IP 주소를 확인하고 이 주소를 RIPE 데이터베이스에 등록되어 있는 물리적 주소에 매핑하는 방식으로 작동합니다. 이러한 위치는 매우 정확하지 않은 경우가 많고, 주로 사용자에게 가장 가까운 전기통신 허브나 이동전화 기지국 위치를 제공합니다. 대부분의 경우 이 정보는 그렇게 정확하지 않을 수 있습니다. 특히 사용자가 VPN이나 다른 프록시 서비스를 이용하는 경우 정확도가 낮을 수 있습니다.

사용자 동작 시 위치에 대한 액세스 항상 요청하기

사용자의 위치를 요청하는 이유와 위치 정보 제공 시 사용자가 얻게 되는 이점을 사용자에게 확실히 이해시켜야 합니다. 사이트가 로드되자마자 홈 페이지에서 사용자 위치 정보를 요청하면 사용자 환경이 저하됩니다.

매장 검색 페이지에서 권한을 요청하는 사이트
권장: 사용자 동작 시 항상 위치 액세스를 요청하세요.
홈페이지에서 권한을 요청하는 사이트
금지: 사이트가 로드되자마자 홈 페이지에서 사용자 위치 정보를 요청하면 사용자는 거부감을 갖게 됩니다.

대신 작업을 수행하는 데 사용자 위치에 대한 액세스가 필요함을 사용자에게 알리는 설명 또는 명확한 콜투액션을 제공해야 합니다. 그러면 사용자는 액세스를 요청하는 시스템 메시지와 방금 시작된 작업을 보다 쉽게 연결할 수 있습니다.

작업에서 위치를 요청한다는 명확한 표시

Google Ads팀의 연구에 따르면 예정된 회의가 열릴 예정인 특정 호텔 사이트의 호텔 객실을 예약해 달라는 요청을 받은 사용자에게는 홈페이지에서 '찾기 및 예약' 클릭 유도문안을 탭하는 즉시 GPS 위치를 공유하라는 메시지가 표시되었습니다.

보스톤 지역의 객실을 예약하려고 하는데 샌프란시스코의 호텔이 표시되는 이유를 이해할 수 없어 사용자가 불만을 표시한 경우도 있었습니다.

사용자의 위치 정보를 요청하는 이유를 사용자에게 더 확실히 이해시키면 사용자의 거부감은 줄어듭니다. 거리계와 같이 장치 전체에서 일반적으로 사용되는 잘 알려진 기표(signifier)나 “나에게 가까운 위치 찾기”와 같은 명확한 콜투액션을 추가합니다.

거리계
거리계 사용
주변 찾기 버튼이 있는 양식
나에게 가까운 위치를 찾기 위한 특정 콜투액션

사용자의 위치에 대한 사용 권한을 제공하도록 유도하기

개발자는 사용자가 하는 일에 액세스할 권한은 없습니다. 개발자는 사용자가 위치에 대한 액세스를 허용하지 않은 경우는 확실히 파악할 수 있지만 사용자가 액세스를 부여할 때는 알지 못합니다. 결과가 표시될 때만 액세스가 부여되었음을 파악할 수 있습니다.

사용자의 작업 완료가 필요한 경우 사용자의 액션을 '유도'하는 것이 좋습니다.

권장사항:

  1. 짧은 시간 후에 트리거하는 타이머를 설정합니다. 5초가 권장됩니다.
  2. 오류 메시지가 표시되면 사용자에게 메시지를 표시합니다.
  3. 긍정적인 응답을 얻은 경우 타이머를 사용 중지하고 결과를 처리합니다.
  4. 시간이 초과된 후에도 긍정적인 응답을 얻지 못한 경우 사용자에게 알림을 표시합니다.
  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()와 유사하게 작동하지만 다음과 같은 경우 위치 지정 소프트웨어로 여러 번 실행됩니다.

  1. 위치 지정 소프트웨어가 사용자에 대한 더욱 정밀한 추적 정보를 확보하는 경우
  2. 사용자의 위치가 변경되는지 확인합니다.
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를 사용하여 최근에 가져온 위치정보 결과를 사용하도록 브라우저에 알립니다. 이 속성은 사용자가 이전에 데이터를 요청했는지 여부를 신속하게 반환할 뿐만 아니라 브라우저가 더 이상 와이파이 삼각측량 또는 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로 위치정보 에뮬레이션

DevTools의 센서 탭

위치정보를 설정하고 나면 다음을 수행할 수 있습니다.

  • 다양한 위치정보에서 앱이 어떻게 작동하는지 테스트합니다.
  • 위치정보를 사용할 수 없는 경우 앱이 단계적으로 성능이 저하되는지 확인합니다.

이 작업은 Chrome DevTools에서 모두 수행할 수 있습니다.

  1. Chrome DevTools를 엽니다.
  2. Esc 키를 눌러 Console 창을 엽니다.
  3. 콘솔 창 메뉴 열기
  4. 센서 옵션을 클릭하여 센서 탭을 표시합니다.

여기에서 위치를 미리 설정된 주요 도시로 재정의하거나, 맞춤 위치를 입력하거나, 재정의를 위치 사용 불가능으로 설정하여 위치정보를 사용 중지할 수 있습니다.

의견