웹 권한 재고: Chrome의 새로운 제안된 <permission> 요소를 사용하여 강력한 기능을 원활하게 제어할 수 있습니다.

게시일: 2025년 6월 6일

Chrome의 새로운 제안된 <permission> 요소가 더 간소화되고 신뢰할 수 있으며 문맥에 맞는 권한 환경을 만드는 방법을 알아보세요.

Chrome팀은 사용자가 강력한 기능을 제어할 수 있도록 <permission> 요소 제안을 설계했습니다. 이 요소를 사용하면 개발자는 사용자가 맥락에서 이러한 기능의 사용을 허용하면서 동시에 원치 않는 중단으로부터 보호되는 원활한 엔드 투 엔드 환경을 만들 수 있습니다. 이 사례 연구에서는 새로운 요소가 실제로 작동하는 방식을 보여줍니다.

권한 요청 문제

위치, 카메라, 마이크와 같은 기기 기능을 사용하려면 사용자가 여러 권한 요청을 거쳐야 하는 불편을 겪는 경우가 많습니다. 개발자의 경우 API를 호출하여 기능을 사용하는 것이 간단하며 성공 또는 실패가 발생합니다. 하지만 사용자에게는 방해가 되고 문맥과 관련 없는 메시지로 다가가며, 불만과 인지 부하를 유발하는 최종 결정으로 보일 수 있습니다.

오늘날 권한 메시지는 사용자로 하여금 '이 사이트에 이 권한이 필요한 이유는 무엇인가요?'라는 의문을 갖게 하는 경우가 많습니다. 명확하지 않으면 사용자가 권한 요청을 거부하는 경우가 많습니다. 향후 사용자에게 방해가 되지 않도록 Chrome은 이후 더 이상 메시지를 표시하지 않습니다. 그러면 나중에 사용자가 마음을 바꿔 이 거부를 번복하는 역과제에 직면하게 됩니다. 이로 인해 사용자가 기능이나 사이트를 완전히 포기할 수 있습니다.

사용자에게 상황별 제어 제공

제안된 <permission> 요소는 웹 권한의 인체공학적 측면에서 중요한 진화를 나타냅니다. 이 제안된 HTML 요소를 사용하면 스타일 지정이 가능하지만 브라우저에서 제어되는 진입점을 원활하게 통합하여 강력한 기능 (예: 화상 채팅의 선명한 '카메라 사용' 버튼)을 사이트 디자인 내에서 직접 사용할 수 있습니다. 스타일 지정 유연성을 누리는 동안 브라우저는 핵심 텍스트와 아이콘을 제어하고 보안, 일관성, 접근성을 관리합니다. 즉, 이 요소와의 상호작용은 사용자의 의도를 명확하게 나타내는 신호가 되어 브라우저가 필요한 결정과 기타 단계를 통해 사용자를 유용하게 안내할 수 있습니다. 이는 브라우저에 사용자 의도의 직접적인 신호가 없으므로 항상 유용성과 방해하지 않는 것 사이의 균형을 유지해야 하는 프로그래매틱 방식으로 트리거된 메시지와는 대조적입니다.

카메라 액세스 권한 요소
카메라 사용을 위한 <permission> 요소의 예시 구현입니다.
마이크 버튼을 클릭했습니다.
한 번 허용 옵션이 있는 권한 메시지
사용자가 마이크를 사용하려는 순간에 카메라 액세스를 허용할 수 있도록 하는 Cisco Webex의 구현 예시를 참고하세요.

환경이 어떻게 변환되는지 살펴보세요.

  • 사용자 시작: 웹사이트에서 메시지를 시작하는 대신 요소는 사용자가 관련 기능을 사용하려는 경우 선택하도록 설계되었습니다.
  • 문맥 내 요청: 제안된 <permission> 요소는 사이트 흐름의 일부이므로 사용자는 권한이 필요한 이유를 이해합니다. 예를 들어 사용자가 주변 상점을 찾기 위해 버튼을 클릭했으므로 위치 요청이 적절합니다.
  • 포괄적인 문제 해결: 브라우저는 사용자의 의도에 관한 직접적인 신호를 수신하므로 기능 액세스에 필요한 모든 플랫폼별 단계를 사용자에게 사전에 안내할 수 있습니다. 예를 들어 시스템 설정에 딥 링크하여 사용자가 기기 수준 카메라 설정을 변경할 수 있도록 할 수 있으므로 웹사이트에서 플랫폼에 종속된 문제 해결 단계를 제공할 필요가 없습니다.
  • 권한 복구 간소화: 제안된 <permission> 요소는 사용자가 브라우저 설정으로 이동하지 않고도 이전에 거부된 권한을 변경할 수 있는 직접적인 페이지 내 방법을 제공합니다. 이 요소를 클릭하면 특수 버전의 권한 메시지가 트리거되어 복구가 크게 개선됩니다.
권한 설정 변경 흐름
<permission> 요소를 사용하면 사용자가 사이트 설정으로 이동하지 않고도 권한 설정을 빠르게 변경할 수 있습니다.

이 접근 방식은 더 직관적이고 신뢰할 수 있으며 사용자 중심의 상호작용 모델을 향해 나아가고 있습니다.

우수사례

Zoom은 <permission> 요소를 사용하여 브라우저의 카메라 및 마이크 캡처 오류를 46.9% 줄여 사용자를 지원합니다.

과제

회의 웹사이트의 가장 큰 문제 중 하나는 이전에 카메라 또는 마이크 액세스를 거부한 사용자가 화상 통화에 참여할 때 권한을 다시 사용 설정하도록 지원하는 것입니다. 표준 흐름에서는 회의 사이트 인터페이스 외부의 브라우저 설정을 탐색해야 했습니다.

접근 방식

<permission> 요소의 영향을 테스트하기 위한 Zoom의 접근 방식은 전후 비교를 사용합니다. 여기서 <permission> 요소는 데스크톱 Chrome 웹브라우저에서 Zoom 회의에 참여하는 모든 Zoom 사용자에게 노출되었습니다.

결과

Zoom의 주요 측정항목 중 하나는 카메라 및 마이크 캡처율입니다. 이 측정항목은 사용자가 브라우저에서 Zoom 회의에 참여할 때 카메라와 마이크를 사용 설정했는지 측정합니다. Zoom의 <permission> 요소가 크게 개선되었습니다. 시스템 수준 또는 브라우저 수준에서 마이크와 카메라가 사용 설정되지 않거나 사용자가 브라우저의 마이크 및 카메라 권한 메시지를 닫는 등 브라우저 환경의 실패가 46.9% 감소했습니다.

<permission> 요소는 오류를 줄이는 데 도움이 되었을 뿐만 아니라 처음에 문제가 발생했거나 실수로 액세스가 거부된 사용자가 마이크와 카메라를 복구하고 구성하는 데도 도움이 되었습니다. 이를 통해 사용자는 대화와 회의에 참여하고 집중할 수 있었으며 모든 사용자를 선명하게 볼 수 있었습니다.

Immobiliare.it에서 이전에 <permission> 요소를 사용하여 권한을 거부한 상태에서 사용자가 지도 위치 기능을 사용할 수 있도록 지원한 방법

과제

이전에 Immobiliare.it 사이트에서 위치에 대한 사이트 권한 공유를 거부한 사용자는 원하는 경우 위치 정보 액세스 권한을 다시 부여할 수 있도록 브라우저의 사이트 설정에 액세스하여 권한을 수동으로 잠금 해제해야 합니다.

접근 방식

Immobiliare.it은 Permissions API JavaScript 메서드를 사용하여 사용자가 이미 사이트에 위치 정보 액세스 권한을 부여했는지 여부를 감지하여 위치 정보 액세스 권한 요청 흐름을 개선했습니다. 이미 권한을 공유한 경우 이전과 같이 위치정보 getCurrentPosition() 메서드를 요청하게 됩니다. Permission API에서 사용자가 위치 정보 액세스 권한을 차단했다고 반환하면 사이트에 위치 정보 버튼이 작동하지 않는 이유를 설명하는 메시지가 표시되고 <permission> 요소가 클릭 유도 문구로 사용됩니다.

'위치 사용' <permission> 요소를 클릭하면 사용자가 원하는 경우 이전에 차단되었더라도 브라우저 설정에 액세스하지 않고도 원활하게 위치 권한을 공유할 수 있습니다.

4단계 권한 흐름
A: 크로스헤어 아이콘 버튼을 클릭하면 위치정보 액세스 권한 사용자 흐름이 시작됩니다.
B: 이전에 권한을 차단한 경우 사용자에게 <permission> 요소가 포함된 메시지 UX가 표시됩니다.
C: <permission> 요소가 브라우저 권한 메시지를 트리거했습니다.
D: 사용자가 권한을 부여하여 getCurrentPosition()를 요청하고 지도를 업데이트했습니다.

결과

<permission> 요소를 사용하면 위치정보 액세스 권한 사용자 흐름의 성공률이 20% 증가했습니다. 이는 Permissions API 및 <permission> 요소를 사용하는 새로운 권한 흐름이 과거에 이러한 종류의 권한 요청을 차단한 사용자도 원하는 경우 권한을 다시 허용하도록 도왔음을 나타냅니다.

ZapImóveis (OLX 브라질)가 <permission> 요소를 사용하여 의도한 용도로 위치 검색을 개선함

브라질의 대표적인 부동산 플랫폼인 ZapImóveis는 완벽한 숙박 시설을 찾는 데는 위치가 중요하다는 점을 잘 알고 있습니다. ZapImoveis는 유명한 Grupo OLX의 일원으로, 전국에서 판매 및 임대할 수 있는 수백만 개의 주택, 아파트, 토지, 기타 부동산을 보유하고 있습니다. 이 과정에서 위치 기반 검색의 중요한 역할을 인식한 ZapImóveis는 브라우저 권한 메시지와 관련된 일반적인 불만을 해결하여 사용자 경험을 개선할 기회를 발견했습니다.

과제

ZapImóveis는 위치 검색 기능 내에서 특히 표준 브라우저 권한 메시지와 관련된 심각한 사용성 문제를 발견했습니다. 사용자는 처음에 위치 정보 액세스 권한을 부여할 때와, 더 중요한 것은 이전에 권한을 거부한 후 권한을 다시 사용 설정하려고 할 때 어려움을 겪었습니다. 이로 인해 전반적인 사용자 환경에 부정적인 영향을 미쳤으며 웹사이트의 위치 기반 검색 기능의 효과가 저하될 수 있었습니다.

접근 방식

이러한 사용성 문제를 해결하기 위해 ZapImóveis는 A/B 테스트를 실시했습니다. 이 테스트에서는 <permission> 요소가 일부 사용자에게 도입되었습니다. 목표는 ZapImóveis 인터페이스 내에 위치 권한을 관리하기 위한 전용 페이지 내 컨트롤을 제공하여 권한 워크플로를 간소화하고 사용자에게 더 직관적으로 제공하는 것이었습니다.

결과

ZapImóveis의 <permission> 요소를 구현한 결과, 특히 위치 기반 기능을 적극적으로 사용하는 사용자의 경우 위치 검색 사용성이 크게 개선되었습니다. 처음에 표준 브라우저 권한 메시지와 관련해 문제가 발생한 사용자의 경우 <permission> 요소에서 제공하는 페이지 내 컨트롤을 통해 4.3% 가 위치 액세스를 성공적으로 부여했습니다. 또한 권한 복구가 크게 개선되어 이전에 액세스를 거부한 사용자의 54.4% 가 나중에 위치 기반 기능을 사용하려고 할 때 권한을 다시 부여했습니다. 처음에 권한을 부여하는 데 걸리는 평균 시간이 약간 증가했지만 명확한 의도를 가진 사용자의 기능 성공이 크게 증가하여 이러한 절충점을 정당화했습니다.

<permission> 요소가 작동하는 더 많은 예 보기

  • Chrome 브라우저를 사용하여 Google Meet 에서 화상 회의 통화를 걸 수 있습니다.
  • Google 검색에서 근처 음식점 검색 (점진적 출시)
  • https://permission.site/pepc에서 사용 가능한 모든 기능에 대해 <permission> 요소를 테스트합니다 (Chrome 137부터).

<permission> 요소 통합

<permission> 요소는 개발팀이 쉽게 채택할 수 있도록 설계되었습니다. 일반 HTML 요소이므로 다른 버튼과 마찬가지로 통합할 수 있으며 브라우저에서 제어하는 한도 내에서 사이트의 디자인에 맞게 스타일을 지정할 수 있습니다. 아직 <permission> 요소를 지원하지 않는 브라우저의 경우 개발자는 기존 권한 요청 메서드를 사용하여 대체 환경을 제공할 수 있습니다. 자세한 내용은 <permission> 요소 개선사항을 참고하세요.

웹을 더 유용하고 직관적으로 만들기

Google은 Chrome과 웹 플랫폼을 더 안전하고 빠르며 유용하게 만들기 위해 지속적으로 노력하고 있습니다. <permission> 요소는 웹 권한에 관한 더 직관적이고 인체공학적인 모델을 향한 중요한 단계를 나타냅니다. <permission> 요소는 사용자에게 명확한 컨텍스트와 제어 기능을 제공하여 강력한 웹 기능과 사용자 신뢰 간의 격차를 해소하고 웹 전반에서 더 풍부하고 몰입도 높은 환경을 제공하는 데 도움이 됩니다. 제품 소유자와 개발팀은 <permission> 요소가 사용자 여정을 개선하고 웹 애플리케이션의 잠재력을 최대한 활용하는 방법을 살펴보시기 바랍니다.