웹 권한 권장사항

Marian Harbach

Thomas Steiner

권한 메시지는 개인 정보 보호 및 보안에 위험할 수 있는 강력한 기능으로부터 사용자를 보호하는 웹의 주요 메커니즘입니다. 브라우저는 사용자가 특정 웹사이트에서 기능을 허용하려고 하는지 확인하는 것을 목표로 합니다. 미디어 캡처 (카메라 및 마이크), 위치정보, 저장소 액세스, MIDI, 알림 등 다양한 API에 대한 권한을 구현할 수 있습니다.

Chrome 사용 통계 및 사용자 조사를 기반으로 사용자에게 권한 메시지를 표시할 때는 다음 권장사항을 따르세요. 이 가이드라인을 따르면 사용자에게 불필요한 메시지가 표시되는 횟수가 줄어들어 차단 결정이 줄어듭니다.

이 문서의 마지막 부분에서는 권한으로 관리되는 API의 코드 패턴과 사용자가 차단된 상태에서 복구할 수 있도록 지원하는 방법을 설명합니다.

프롬프트 권장사항

사용자가 요청 이유와 액세스 허용 시 얻을 수 있는 이점을 이해할 수 있는 컨텍스트가 있을 때 사용자 상호작용 후 권한을 요청합니다.

가능한 경우 동일한 작업을 수행할 수 있는 대체 수단을 제공하세요. 적절한 시기를 선택하여 요청하면 사용자가 복구하기 어려운 차단 상태에 빠질 가능성이 줄어듭니다.

페이지 로드 시 또는 사용자 상호작용 없이 요청하지 않음

페이지 로드 시 권한을 요청하는 것은 고객이 오프라인 매장에 들어올 때 민감한 정보를 요청하는 것과 같습니다. 권한 메시지가 뉴스레터 가입 및 쿠키 사용 동의를 위한 다른 메시지 사이에 표시되면 불편한 경험을 하게 됩니다. 사용자가 요청을 받는 이유와 혜택을 받는 방법을 이해하지 못합니다.

웹 애플리케이션이 특정 기능에 대한 액세스 권한이 없으면 작동할 수 없는 경우에도 사용자에게 필요한 이유를 이해할 기회를 제공하세요. 예를 들어 권한 메시지 앞에 메시지가 필요한 이유를 설명하고 사용자에게 선택권을 제공합니다 (예: 동일한 기능을 달성하는 대체 수단 제공). 페이지 로드보다 더 나은 권한 요청 시기를 생각할 수 없다면 이 가이드의 뒷부분에 몇 가지 예가 있습니다.

사전 사용자 상호작용 없이 권한을 요청하는 것도 효과가 없습니다. 이를 일시적인 사용자 활성화라고 합니다. Chrome 원격 분석에 따르면 데스크톱의 권한 메시지 중 77% 가 사용자 의도 신호 없이 표시되므로 이러한 메시지 중 12% 만 허용됩니다. 사용자 상호작용 후 허용 비율이 30%로 증가합니다.

사용자가 페이지와 상호작용한 후에만 권한을 요청합니다.

사용자가 이유를 이해할 수 있는 경우에만 요청

권한 결정은 개인 정보 보호 결정인 경우가 많습니다. 맥락적 무결성 프레임워크에 따르면 개인 정보 보호 결정은 맥락에 따라 크게 달라집니다. 액세스가 필요한 이유를 이해하는 것이 중요합니다. 사용자가 가치를 찾을 수 있다고 생각할 가능성이 높은 경우에만 가치를 제공하는 데 필요한 기능을 요청해야 합니다. 또한 사용자에게 기능이 유용한 이유가 명확할 때 권한을 요청하세요. 사용자가 사용 맥락을 더 쉽게 이해할 수 있도록 합니다.

사용자 조사에 따르면 사용자는 사이트에서 액세스를 요청하는 이유를 이해하고 혜택을 인식할 때 액세스를 허용할 가능성이 훨씬 더 높습니다. 또한 사용자는 액세스를 허용하면 얻을 수 있는 가치를 더 잘 이해하기 위해 먼저 익숙하지 않은 사이트를 탐색하는 것으로 나타났습니다. 그동안 권한 메시지를 닫거나 무시하는 경우가 많습니다. 일회성 권한을 사용하면 먼저 단일 방문을 허용할 수 있습니다. 애플리케이션에서 이러한 동작을 지원합니다.

대안 제시

일부 기능의 결과는 사용자에게 도움이 되지 않을 수 있습니다. 예를 들어 GPS 센서가 없는 데스크톱 기기의 위치정보는 사용자가 VPN에 연결되어 있기 때문에 잘못된 위치를 반환할 수 있습니다. 다른 사용자는 클립보드 액세스를 제공하고 싶지 않을 수 있습니다. 직접 제어하고 키 조합으로 이러한 이벤트를 수동으로 트리거하는 것을 선호하기 때문입니다. 이러한 상황에서는 동일한 결과를 달성할 수 있는 대체 방법을 제공하세요.

예를 들어 위치정보 액세스 권한을 요청하는 경우 사용자가 우편번호나 주소를 입력할 수 있는 텍스트 필드를 제공합니다. 키보드 단축키나 컨텍스트 메뉴를 사용하여 요소를 선택하고 클립보드에 복사할 수 있도록 허용합니다. 알림의 경우 푸시 알림 대신 이메일을 제공합니다.

유용한 패턴은 액세스가 유익한 이유에 대한 설명으로 대체 UI를 사용하는 것입니다. 위치정보 API를 트리거하는 버튼 옆에 위치를 입력하는 옵션이 표시되는 사용자는 주소를 입력할 수 있다는 것을 이해하므로 제어권을 갖고 있다고 느낍니다. 마찬가지로 푸시 또는 이메일을 통해 알림을 수신하거나 카메라 및 마이크 액세스를 허용하지 않고 회의에 참여하는 것 중에서 선택할 수 있는 경우 사용자는 절충안을 이해합니다.

차단된 상태 방지

사용자가 권한으로 관리되는 기능에 대한 액세스를 영구적으로 거부하면 브라우저에서 이 결정을 따릅니다. 액세스 권한을 계속 요청할 수 있다면 악성 사이트가 사용자에게 프롬프트를 퍼부을 것입니다. 기능의 차단된 상태에서 복구하려면 의도적으로 노력이 필요합니다. 사용자가 액세스를 허용하지 않을 가능성이 큰 상황에서는 권한을 요청하지 마세요.

이를 수행하는 일반적인 방법은 소위 사전 프롬프트를 사용하는 것입니다. 사전 프롬프트에서는 사용자에게 곧 일어날 일과 애플리케이션에 요청할 기능이 필요한 이유를 설명합니다. 사용자가 이러한 사전 프롬프트에 긍정적으로 반응하는 경우에만 브라우저의 권한 프롬프트를 트리거해야 합니다. 사용자가 해당 상태에서 복구해야 하는 상황이 있을 수 있습니다. 자세한 내용은 사용자가 차단 상태에서 복구하도록 지원 섹션을 참고하세요.

서드 파티 콘텐츠에 주의

예상치 못한 권한 요청 소스를 파악하세요. 사이트의 서드 파티 스크립트가 의도치 않은 권한 요청을 트리거할 수 있습니다. 특히 요청이 권장사항을 따르지 않는 경우 사용자 환경에 영향을 줄 수 있습니다. 사용자 환경을 관리하려면 코드에 추가하는 서드 파티 라이브러리 및 스크립트의 문서를 읽어보세요.

권한을 요청해야 하는 경우

다음은 권장사항에 따라 권한을 요청하기에 적합한 순간의 몇 가지 예입니다.

• 사용자가 양식 필드 옆에 있는 내 위치 사용을 클릭한 후 주소를 수동으로 입력하는 경우
• 사용자가 동영상 채널 또는 게시물을 구독하고 업데이트가 이메일 또는 알림으로 전송될 수 있음을 설명하는 대화상자에서 확인 버튼을 클릭한 후
• 사용자가 영상 통화에 참여할 준비가 된 페이지에 도착하고, 표시되고 들리기를 원하는지 묻는 사전 프롬프트에 긍정적으로 답변한 후 Google Meet 우수사례에서 자세히 알아보세요.

코드 패턴

API 사용 권한은 API에 따라 다양한 방법으로 부여됩니다. 일부 이전 API는 API를 처음 사용하려고 할 때 브라우저에서 자동으로 권한을 요청하는 모델을 사용합니다. 한 가지 예는 navigator.geolocation.getCurrentPosition()를 호출할 때 Geolocation API입니다.

try {
  navigator.geolocation.getCurrentPosition((pos) => console.log(pos));
} catch (error) {
  console.error(error);
}

다른 API는 정적 메서드로 먼저 권한을 명시적으로 요청하는 모델을 사용합니다. 좋은 예는 알림을 허용하는 Notification.requestPermission() 또는 기기 방향 이벤트 API의 일부인 DeviceOrientationEvent.requestPermission()입니다.

일부 브라우저는 특정 API에 자동으로 권한을 부여합니다. 예를 들어 Chrome은 항상 기기 방향에 대한 액세스를 허용하는 반면 Safari는 프롬프트를 표시합니다.

const result = await DeviceOrientationEvent.requestPermission();
console.log(`The user's decision when prompted to use the Device Orientation
Events API was: ${result}.`);
if (result === 'granted') {
  /* Use the API. */
}

권한 상태 확인

특정 API를 사용할 수 있는지 확인하려면 권한 API의 navigator.permissions.query() 메서드를 사용하세요.

const result = await navigator.permissions.query({ name: 'geolocation' });
console.log(`The result of querying for the Geolocation API is:
${result.state}.`);
if (result.state === 'granted') {
  // Use the API.
}

사용자가 차단된 상태에서 복구하도록 지원

사용자가 액세스 문제를 해결할 수 있도록 권한 API를 사용하여 액세스를 차단했는지 감지하고 설정을 변경하는 방법을 안내합니다. 사용자가 권한으로 관리되는 기능과 연결된 UI 요소와 상호작용할 때는 권한 상태를 확인하고 문제 해결 대화상자를 엽니다.

권한 상태를 변경하는 정확한 단계는 브라우저마다 다르므로 흔히 사용되는 브라우저의 사용자 에이전트 문자열에 따라 일치하는 설명을 제공합니다.

Chrome에서 사용자는 주소 표시줄에 있는 사이트 정보 보기 > 사이트 설정에서 권한을 변경할 수 있습니다. 기능을 사용하기 전에 페이지를 새로고침해야 할 수도 있습니다. 이 경우 창 상단에 사이트를 새로고침하라는 메시지 표시줄이 표시됩니다.

권한을 제어하는 유사한 UI는 Firefox와 같은 다른 브라우저에도 있습니다.