<geolocation> HTML 요소 소개

Mari Viana

Minh Le

Thomas Steiner

게시일: 2026년 1월 13일

Chrome 144부터 새로운 <geolocation> HTML 요소를 사용할 수 있습니다. 이 요소는 사이트에서 사용자 위치 데이터를 요청하는 방식에 큰 변화를 가져와 스크립트 트리거 권한 프롬프트에서 선언적이고 사용자 작업 중심의 환경으로 전환합니다. 권한 상태 및 오류를 처리하는 데 필요한 상용구 코드를 줄이고 사용자 의도를 더 강력하게 전달하여 브라우저 개입 (예: 자동 차단)을 방지합니다.

이 출시는 광범위한 실제 테스트와 웹 표준 커뮤니티와의 엄격한 논의의 결과입니다. 이 요소의 유용성을 이해하려면 개발 기록과 디자인을 주도한 데이터를 검토하는 것이 중요합니다.

일반 <permission>에서 특정 <geolocation>으로

<geolocation> 요소는 페이지 삽입 권한 제어 이니셔티브의 최신 발전으로, 처음에는 일반 <permission> 요소에 type 속성이 있는 것으로 제안되었습니다 (원래 설명 참고). type 속성의 값 (예: "geolocation")은 요청된 권한의 유형을 결정합니다. 예를 들어 초기 제안에는 카메라, 마이크, 지리적 위치와 같은 값이 포함됩니다.

개념 검증

Chrome 126~143에서 일반 <permission> 요소의 오리진 트라이얼을 실행했습니다. 이 트라이얼의 목표는 전용 컨텍스트 내 버튼이 사용자 신뢰와 의사 결정을 개선한다는 가설을 테스트하는 것이었습니다.

이 오리진 트라이얼의 결과는 이 핵심 개념의 검증을 뒷받침했습니다:

• Zoom은 요소를 사용하여 사용자에게 복구를 안내함으로써 카메라 또는 마이크 캡처 오류 (예: 시스템 수준 차단기)가 46.9% 감소했다고 보고했습니다.
• Immobiliare.it은 지리적 위치 흐름이 20% 증가했습니다.
• ZapImóveis는 요소가 표시될 때 '이전에 차단됨' 상태에서 복구하는 사용자의 성공률이 54.4% 라고 관찰했습니다.

디자인 재정의

개념은 성공적인 것으로 입증되었지만 구현에는 개선이 필요했습니다. Apple (Safari/WebKit) 및 Mozilla (Firefox)를 비롯한 브라우저 공급업체의 의견에 따르면 "모든 경우에 적합한" 요소는 고유한 기능 동작과 관련하여 상당한 복잡성을 도입했습니다.

따라서 일반 권한 제어에서 타겟팅된, 기능별 요소로 전환했습니다 (WICG 토론 참고). <geolocation> 요소는 이러한 전문화된 컨트롤 중 처음으로 출시되는 요소입니다. 이후에는 자체 오리진 트라이얼이 있는 전용 <usermedia> 요소 (카메라 및 마이크 액세스용)도 개발하고 있습니다.

권한 상태 관리 (즉, 허용 또는 거부)에 중점을 둔 원래 제안과 달리 이러한 새 요소는 데이터 중재자 역할을 하며 대부분의 사용 사례에서 JavaScript API를 직접 호출할 필요성을 효과적으로 대체합니다.

<geolocation> 요소를 사용하는 이유는 무엇인가요?

현재 지리적 위치 흐름은 컨텍스트 외부에서 또는 페이지 로드 시에도 실행되는 경우 사용자를 방해할 수 있는 권한 프롬프트를 트리거하는 Geolocation API에 의존합니다. 중요한 점은 브라우저 개입으로 인해 이러한 명령형 프롬프트에 대한 의존도가 낮아지고 있다는 것입니다. 예를 들어 Chrome은 사용자가 프롬프트를 세 번 닫은 경우 권한 요청을 적극적으로 차단하여 처음에는 1주일 동안 지속되는 임시 자동 차단 을 적용합니다. 즉, 프롬프트를 트리거하려는 기존 코드가 자동으로 실패하여 사용자에게 손상된 환경이 제공되고 기능을 사용 설정하는 명확한 방법이 없을 수 있습니다. 또한 표준 프롬프트에는 컨텍스트가 없는 경우가 많습니다. 프롬프트가 예기치 않게 표시되면 사용자는 이 결정이 되돌리기 어려운 영구적인 차단을 생성한다는 사실을 알지 못한 채 반사적으로 또는 실수로 차단할 수 있습니다. 이러한 컨텍스트 격차는 기능 자체가 아니라 높은 거부율의 주요 원인입니다.

<geolocation> 요소는 요청이 엄격하게 사용자 시작되도록 하여 컨텍스트 격차 문제를 해결합니다. 이 모델은 다음과 같은 세 가지 고유한 이점을 제공합니다.

• 명확한 의도 및 타이밍: 사용자는 위치 사용 버튼을 클릭하여 해당 특정 시점에 위치를 사용하려는 의도를 명시적으로 나타냅니다. 이는 사용자가 위치의 가치를 이해하고 적극적으로 사용하려는 의도를 나타내므로 잠재적인 차단을 성공적인 상호작용으로 전환합니다.
• 간소화된 복구: 사용자가 이전에 사이트를 탐색할 때 (실수로 또는 컨텍스트 부족으로) 위치 액세스를 차단한 경우 요소를 클릭하면 전문화된 복구 흐름이 트리거됩니다. 이렇게 하면 브라우저의 사이트 설정을 깊이 탐색하는 번거로움 없이 실제로 위치를 사용하려는 순간에 위치를 다시 사용 설정할 수 있습니다.
• 자동 새로고침: 권한이 이미 부여된 경우 요소를 클릭하면 새로고침 버튼 역할을 하여 다시 프롬프트를 표시하지 않고 새 데이터를 즉시 가져옵니다.

구현

요소를 통합하려면 JavaScript API보다 훨씬 적은 상용구가 필요합니다. 개발자는 콜백 및 오류 상태를 수동으로 관리하는 대신 페이지에 태그를 추가하고 onlocation 이벤트를 수신 대기할 수 있습니다.

<geolocation
  onlocation="handleLocation(event)"
  autolocate
  accuracymode="precise">
</geolocation>

function handleLocation(event) {
  // Directly access the GeolocationPosition object on the element
  if (event.target.position) {
    const { latitude, longitude } = event.target.position.coords;
    console.log("Location retrieved:", latitude, longitude);
  } else if (event.target.error) {
    console.error("Error:", event.target.error.message);
  }
}

주요 속성

• autolocate: 요소가 로드될 때 자동으로 위치를 가져오려고 시도하지만 현재 권한 상태에서 이미 허용된 경우에만 가져옵니다(예기치 않은 프롬프트 방지).
• accuracymode: 표준 enableHighAccuracy 옵션에 해당하는 "precise" 또는 "approximate" 값을 허용합니다.
• watch: 사용자가 이동할 때 이벤트를 계속 실행하는 watchPosition()과 일치하도록 동작을 전환합니다.
• position: 사용 가능한 경우 GeolocationPosition 객체를 반환하는 DOM 요소의 읽기 전용 속성입니다.
• error: 요청이 실패하면 GeolocationPositionError를 반환하는 읽기 전용 속성입니다.

스타일 지정 제약 조건

사용자 신뢰를 보장하고 기만적인 디자인 패턴을 방지하기 위해 <geolocation> 요소는 이전 <permission> 요소 실험과 유사한 특정 스타일 지정 제한사항을 적용합니다. 버튼을 사이트 테마에 맞게 맞춤설정할 수 있지만 브라우저는 여러 가드레일을 적용합니다.

• 가독성: 권한 요청을 항상 읽을 수 있도록 텍스트 및 배경 색상의 대비가 충분한지 (일반적으로 3:1 이상의 비율) 확인합니다. 또한 요소가 기만적으로 투명해지지 않도록 알파 채널 (불투명도)을 1로 설정해야 합니다.
• 크기 조정 및 간격: 요소는 너비, 높이, 글꼴 크기의 최소 및 최대 경계를 적용합니다. 요소가 시각적으로 가려지거나 다른 콘텐츠와 기만적으로 겹치지 않도록 음수 여백 또는 윤곽선 오프셋이 사용 중지됩니다.
• 시각적 무결성: 왜곡 효과가 제한됩니다. 예를 들어 변환은 2D 변환 및 비례 크기 조정만 지원합니다.
• CSS 가상 클래스: 요소는 :granted (권한이 활성 상태인 경우)와 같은 상태 기반 스타일 지정을 지원합니다.

점진적 개선 전략

새 HTML 요소를 표준화하는 것은 점진적인 프로세스입니다. 하지만 개발자는 다른 브라우저의 사용자와의 호환성을 손상시키지 않고도 오늘 <geolocation> 요소를 채택할 수 있습니다.

요소는 성능이 단계적으로 저하되도록 설계되었습니다. <geolocation> 요소를 지원하지 않는 브라우저는 이를 HTMLUnknownElement로 처리합니다. 중요한 점은 브라우저가 요소를 지원하는 경우 하위 요소를 렌더링하지 않는다는 것입니다. 이렇게 하면 지원되는 브라우저와 지원되지 않는 브라우저 모두에 대해 HTML을 깔끔하게 작성할 수 있습니다.

맞춤 대체 패턴

대체 환경을 직접 완전히 제어하려면 일반 JavaScript Geolocation API와 연결하는 버튼과 같은 하위 요소를 활용하면 됩니다.

<geolocation onlocation="updateMap()">
  <!-- Fallback contents if the element is not supported -->
  <button onclick="navigator.geolocation.getCurrentPosition(updateMap)">
    Use my location
  </button>
</geolocation>

기본 예시로 동작이 어떻게 작동하는지 테스트해 보세요.

폴리필

또는 npm에서 폴리필을 설치하여의 모든 발생을 <geolocation> 일반 JavaScript Geolocation API로 지원되는 맞춤 요소 <geo-location> (대시 참고)으로 투명하게 자동으로 대체할 수 있습니다. 브라우저가 <geolocation> 요소를 지원하는 경우 폴리필은 아무것도 하지 않습니다. 폴리필이 작동하는 모습을 보여주는 이 폴리필 데모를 확인해 보세요. 소스 코드는 GitHub에 있습니다.

if (!('HTMLGeolocationElement' in window)) {
  await import('https://unpkg.com/geolocation-element-polyfill/index.js');
}

<geolocation onlocation="updateMap()"></geolocation>

기능 감지

더 복잡한 로직의 경우 인터페이스를 사용하여 지원을 프로그래매틱 방식으로 감지할 수 있습니다.

if ('HTMLGeolocationElement' in window) {
  // Use modern <geolocation> element logic
} else {
  // Fallback to legacy navigator.geolocation API
}

마무리

개발자가 새로운 <geolocation> HTML 요소를 사용하여 더 높은 성능의 위치 재시도 시나리오를 구현하는 방법을 기대합니다. 이는 오늘날 사용자가 실제로 웹을 사용하는 방식에 맞게 조정된 기능별 요소로의 전환을 나타냅니다.

다른 권한 사용 사례의 경우 Chrome 144부터 the <usermedia> HTML 요소 오리진 트라이얼에 참여하여 카메라와 마이크에 동일한 인체공학적 이점을 제공할 수 있습니다.

관련 링크

• Chrome 플랫폼 상태의 <geolocation> 요소
• Geolocation HTML 요소 설명
• 데모 페이지
• Mozilla 표준 위치
• WebKit 표준 위치

감사의 말씀

이 문서는 Andy Paicu, Gilberto Cocchi, Rachel Andrew가 검토했습니다.