게시일: 2025년 5월 12일
Chrome팀이 초기 오리진 트라이얼에서 마련된 기반을 바탕으로 개선하고 있으므로 제안된 HTML <permission> 요소는 아직 오리진 트라이얼 단계에 있습니다.
이 게시물에서는 웹 애플리케이션 내에서 권한을 요청할 때 더 많은 유연성과 제어 기능을 제공하기 위한 개선사항을 공유합니다. <permission> 요소의 도입 및 초기 기능에 관한 포괄적인 개요는 이전 도움말 새 HTML <permission> 요소의 오리진 트라이얼을 참고하세요.
대체 UX 콘텐츠 지원
<permission> 요소는 Chrome 136까지 콘텐츠가 없는 빈 요소로 처음 정의되었습니다. Chrome 137부터는 콘텐츠를 지원하므로 이제 시작 및 종료 태그로 표시해야 합니다.
<permission>
<!-- optional content -->
</permission>
이 변경사항을 통해 요소의 콘텐츠 내에 대체 사용자 인터페이스를 포함할 수 있습니다. 이러한 대체는 <permission> 요소를 지원하지 않는 브라우저에 표시되거나 지원되지 않는 type 속성이 지정된 경우에 표시됩니다.
이렇게 하면 다양한 브라우저 환경에서 더 원활한 성능 저하와 개선된 사용자 환경이 보장됩니다.
<!-- Invalid `type` attribute value -->
<permission type="not-supported">
<p>Your browser does not support the specified <code>type</code>.</p>
</permission>
더 자세한 프로그래매틱 기능 감지
특정 권한 유형의 지원 여부를 판단할 수 있도록 정적 메서드 isTypeSupported()가 도입되었습니다.
HTMLPermissionElement.isTypeSupported('geolocation');
이 메서드는 지정된 권한 유형이 지원되는지 여부를 나타내는 불리언을 반환합니다. 기존 기능 감지 기능인 typeof
HTMLPermissionElement !== 'undefined'와 결합하여 이제 <permission> 요소 지원과 특정 권한 유형 지원을 모두 프로그래매틱 방식으로 확인할 수 있습니다.
공백으로 구분된 권한 유형을 여러 개 전달할 수도 있습니다 (예: "camera microphone"). 그러면 전체 문자열이 유효한 "type" 값인지 여부가 반환됩니다. 예를 들어 다음 매개변수로 isTypeSupported()를 호출하면 다음 결과가 반환됩니다.
"camera"→true"geolocation"→true"camera geolocation"→false(유형이 개별적으로 지원되더라도 조합은 지원되지 않음)
업데이트된 이벤트 이름
Chrome 136에서는 이전 이벤트를 대체하는 두 가지 새로운 이벤트가 도입되었습니다.
onpromptdismiss(ondismiss대체)onpromptaction(onresolve대체)
이러한 새로운 이벤트는 더 명확한 시맨틱을 제공하고 요소의 동작과 더 잘 일치합니다. 이전 이벤트는 Chrome 138에서 지원 중단되므로 이벤트 핸들러를 적절하게 업데이트하는 것이 좋습니다.
아이콘 지원
Chrome 138을 목표로 <permission> 요소 내에서 아이콘 지원을 사용 설정하기 위해 노력하고 있습니다. 이 기능을 사용하면 색상 및 크기 조정과 같은 스타일 지정 옵션이 제한된 권한 유형에 해당하는 사전 정의된 아이콘을 표시할 수 있습니다. 정확한 API 세부정보는 아직 확정되지 않았습니다. 
다음 예에서는 기본값, 다른 채우기 색상, 채우기 색상이 없지만 검은색 윤곽선이 있는 경우를 보여줍니다.
기본 스타일 지정
아이콘의 기본 색상은 권한 요소의 텍스트 색상과 동일합니다.
수정된 스타일
다음 예에서는 기본 스타일의 수정사항을 보여줍니다.
아이콘 색상 변경
::permission-icon {
fill: black;
}
아이콘 윤곽선 변경
::permission-icon {
fill: white;
stroke: black;
stroke-width: 20px;
}
아이콘 사용 중지
앱이 실행되면 아이콘이 기본적으로 사용 설정됩니다. 아이콘을 사용 중지하려면 다음 CSS를 사용하면 됩니다.
::permission-icon {
display: none;
}
스타일 가이드라인
권장사항 및 제한사항을 포함하여 <permission> 요소 스타일 지정에 관한 포괄적인 안내는 <permission> 스타일 지정 가이드라인을 참고하세요.
이 리소스는 애플리케이션 내에서 요소를 효과적으로 스타일링하는 데 도움이 되는 자세한 안내를 제공합니다.
플랫폼 및 기능 지원 확대
이제 <permission> 요소가 추가 플랫폼과 기능을 지원합니다.
- Android 지원: 이제 Android 기기에서 요소가 작동하므로 다양한 사용자 플랫폼에서 적용 범위가 확대됩니다.
- 위치정보 지원: 이제 추가
preciselocation불리언 속성이 있는<permission>요소를 사용하여type="geolocation"권한을 요청할 수 있습니다.preciselocation속성은 프롬프트의 문구에만 영향을 미치지만, 향후 업데이트에서 대략적인 위치 정보 액세스 권한과 정확한 위치 정보 액세스 권한을 구분하기 위해 최선을 다하고 있습니다.
결론
<permission> 요소의 이러한 개선사항은 권한 요청을 간소화하고 웹에서 사용자 환경을 개선하기 위한 Google의 지속적인 노력의 일환입니다. 이러한 새로운 기능을 실험해 보고 의견을 제공하여 이 기능을 개선하고 발전시킬 수 있도록 도와주세요.