권한 메시지는 사용자의 개인 정보 및 보안에 위협이 될 수 있는 강력한 기능을 보호하기 위한 웹의 기본 메커니즘입니다. 권한 메시지를 통해 브라우저는 사용자가 요청하는 웹사이트가 문제의 기능에 액세스하도록 허용하고자 하는지 확인하는 것을 목표로 합니다. 권한 메시지는 미디어 캡처 (카메라 및 마이크), 위치정보, 저장소 액세스, MIDI, 알림을 비롯한 여러 API에 사용됩니다 (자세한 내용은 MDN의 Permissions API 문서 참고).
이 가이드에서는 Chrome 사용 통계 및 사용자 연구를 기반으로 사용자에게 권한 메시지를 표시하기 위한 권장사항을 설명합니다. 이러한 권장사항을 따르면 사용자에게 불필요한 메시지가 더 적게 표시되므로 개발자가 '차단' 결정을 내리는 경우가 줄어듭니다. 마지막으로, 권한 제한 API 작업을 위한 몇 가지 코드 패턴과 사용자가 차단된 상태에서 복구하는 데 도움이 되는 권장사항을 설명합니다.
메시지 표시 권장사항
사용자 상호작용 후 사용자가 요청 이유와 요청을 허용함으로써 얻게 되는 이점을 이해할 수 있는 순간에 권한을 요청해야 합니다. 가능한 경우 사용자가 다른 방법을 사용하여 동일한 기능을 실행할 수 있도록 해야 합니다. 일반적으로 신중하게 묻는 순간을 선택하여 권한 요청 빈도를 줄이면 사용자가 복구하기 어려운 차단 상태에 빠질 가능성이 낮아집니다. 다음 권장사항은 이러한 각 제안에 관한 자세한 내용을 제공합니다.
페이지 로드 시 또는 사용자 상호작용 없이 묻지 않음
페이지 로드 시 사용자에게 권한을 요청하는 것은 고객이 오프라인 상점에 들어올 때 민감한 정보를 요청하는 것과 같습니다. 뉴스레터 가입 및 쿠키 동의를 묻는 여러 메시지 중에서 권한 메시지가 표시되면 매우 거슬릴 수 있습니다. 사용자는 요청하는 이유와 어떤 이점이 있는지 이해할 수 없습니다.
웹 애플리케이션이 특정 기능에 액세스하지 않으면 작동하지 않는 경우에도 사용자가 그 기능이 필요한 이유를 이해할 수 있는 기회를 제공해야 합니다. 예를 들어 권한 메시지를 자체 프롬프트로 시작하여 필요성을 설명하고 사용자에게 선택권을 제공하는 경우입니다 (예: 가능한 경우 동일한 기능을 실행할 수 있는 대체 수단을 제공). 페이지 로드 시점보다 권한을 요청하는 시점이 적절하지 않다면 이 가이드 뒷부분의 몇 가지 예시를 참고하세요.
권한을 요청하면 이전 사용자 상호작용 (일시적인 사용자 활성화라고도 함)이 없는 경우에도 권한을 요청할 수 있습니다. Chrome 텔레메트리에 따르면 데스크톱 Chrome에서 권한 메시지 중 77% 가 사용자 의도에 관한 기본적인 신호 없이 표시되므로 이러한 메시지 중 12%만 허용됩니다. 사용자 상호작용 후 허용 비율이 30%까지 증가합니다. 따라서 사용자가 어떤 형태로든 페이지와 상호작용한 후에만 권한을 요청하세요.
사용자가 요청 이유를 이해할 수 있는 경우에만 질문
권한 결정은 개인 정보 보호와 관련된 결정인 경우가 많습니다. Google은 상황별 무결성 프레임워크를 기반으로 개인 정보 보호 결정이 상황에 따라 매우 다르다는 것을 알고 있습니다. 액세스가 필요한 이유를 이해하는 것이 이 작업의 주요 측면으로 간주될 수 있습니다. 따라서 사용자에게 가치를 제공하는 데 필요한 기능 및 사용자가 실제로 가치를 얻는다는 데 동의할 가능성이 높은 기능만 요청해야 합니다. 또한 기능이 유용한 이유를 사용자에게 분명히 알 수 있는 순간에 권한을 요청해야 합니다. 목표는 사용자가 사용 컨텍스트를 최대한 쉽게 이해할 수 있도록 하는 것입니다.
Google의 사용자 연구에 따르면 사용자가 사이트에서 액세스를 요청하는 이유를 이해하고 이점을 인지할 때 액세스를 허용할 가능성이 훨씬 더 높습니다. 또한 사용자는 액세스를 허용함으로써 얻을 수 있는 가치를 더 잘 이해하기 위해 낯선 사이트를 먼저 탐색하길 기대합니다. 그동안 권한 메시지를 닫거나 무시하는 경우가 많습니다. 일회성 권한이 있으면 한 번의 방문을 먼저 허용할 수도 있습니다 애플리케이션은 이러한 동작을 지원해야 합니다.
가능한 경우 동일한 기능을 구현할 수 있는 대체 수단을 제공하세요.
일부 기능의 결과는 사용자에게 유용하지 않을 수 있습니다. 예를 들어 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() 또는 Device Orientation Events 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를 사용할 수 있는지 확인하려면 Permissions 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.
}
사용자가 차단된 상태에서 복구하도록 지원
사용자가 액세스 문제를 해결할 수 있도록 사용자가 Permissions API를 사용하여 액세스를 차단했는지 감지하고 설정을 변경하는 방법에 관한 가이드를 제공합니다. 예를 들어 사용자가 권한 제한 기능과 연결된 UI 요소와 상호작용할 때 이전 섹션에서 설명한 패턴을 사용하고 문제 해결 대화상자를 엽니다. 권한 상태를 변경하는 정확한 단계는 브라우저에 따라 다르므로 사용자 에이전트 문자열과 제품에서 가장 일반적으로 사용되는 브라우저를 기준으로 일치하는 설명을 제공하는 것이 좋습니다.
Chrome에서 사용자는 주소 표시줄 왼쪽에 있는 '조정' 아이콘을 클릭하여 사이트 제어로 이동해야 합니다. 여기에서 각 권한을 사용 설정할 수 있습니다. 경우에 따라 기능을 사용하기 전에 페이지를 새로고침해야 할 수도 있습니다. 이 경우 각 버튼을 클릭하면 새로고침하라는 메시지 표시줄이 창 상단에 표시됩니다.
다른 브라우저에도 권한 제어를 위한 유사한 UI가 있습니다 (예: Firefox에서 작동 방식 보기).