<geolocation> HTML 요소 소개

Mari Viana

Minh Le

Thomas Steiner

게시일: 2026년 1월 13일

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

이번 출시는 광범위한 실제 테스트와 웹 표준 커뮤니티와의 엄격한 논의를 거친 결과입니다. 이 요소의 유용성을 이해하려면 개발의 역사와 설계를 주도한 데이터를 살펴보는 것이 중요합니다.

일반적인 <permission>에서 구체적인 <geolocation>로

<geolocation> 요소는 페이지에 삽입된 권한 제어 이니셔티브의 최신 발전으로, 처음에는 type 속성이 있는 일반 <permission> 요소로 제안되었습니다 (원래 설명 참고). 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를 사용하며, 이 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](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement)로 처리합니다. 중요한 점은 브라우저가 요소를 지원하는 경우 하위 요소를 렌더링하지 않는다는 것입니다. 이렇게 하면 지원되는 브라우저와 지원되지 않는 브라우저 모두에 대해 HTML을 깔끔하게 작성할 수 있습니다.

맞춤 대체 패턴

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

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

폴리필

또는 일반 JavaScript 위치정보 API로 지원되는 맞춤 요소 <geo-location> (대시 참고)로 <geolocation>의 모든 항목을 투명하게 자동으로 대체하는 npm에서 폴리필을 설치할 수 있습니다. 브라우저가 <geolocation> 요소를 지원하는 경우 폴리필은 아무 작업도 하지 않습니다. polyfill이 실제로 작동하는 모습을 보여주는 이 데모를 확인하세요. 소스 코드는 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부터 <usermedia> HTML 요소 오리진 트라이얼에 참여하여 카메라와 마이크에 동일한 인체공학적 이점을 제공할 수 있습니다.

관련 링크

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

감사의 말씀

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