최근 Android 휴대전화에 프로그레시브 웹 앱 (PWA)을 설치했다면 앱 아이콘 배경이 흰색일 수 있습니다. Android 8.0에는 기기 모델에서 다양한 모양으로 앱 아이콘을 표시하는 적응형 아이콘이 도입되었습니다. 이 형식을 사용하지 않는 아이콘은 배경이 흰색입니다.
![Android의 흰색 원 안에 있는 PWA 아이콘](https://web.dev/static/articles/maskable-icon/image/pwa-icons-white-circles-7fce0dc6ce82f.png?authuser=7&hl=ko)
마스크 가능 아이콘은 Chrome 및 Firefox의 새로운 아이콘 형식으로, 프로그레시브 웹 앱에서 적응형 아이콘을 사용할 수 있고 아이콘 모양을 더 세부적으로 관리할 수 있습니다.
![Android의 전체 원을 덮는 PWA 아이콘](https://web.dev/static/articles/maskable-icon/image/pwa-icons-covering-entir-011491639007f.png?authuser=7&hl=ko)
현재 아이콘이 준비되었나요?
마스크 가능한 아이콘은 다양한 도형을 지원해야 하므로 브라우저에서 브라우저 또는 플랫폼에 필요한 모양과 크기로 자를 수 있는 패딩이 포함된 불투명 이미지를 제공해야 합니다.
마스크 가능한 아이콘 사양에는 모든 플랫폼에서 존중하는 표준화된 '최소 안전 영역'이 포함됩니다. 로고와 같이 아이콘의 중요한 부분은 반경이 아이콘 너비의 40% 인 원형 영역 내에 있어야 합니다. 일부 플랫폼에서는 외부 10% 가장자리가 잘릴 수 있습니다.
Chrome DevTools를 사용하여 아이콘의 어떤 부분이 안전 영역 내에 있는지 확인할 수 있습니다. 프로그레시브 웹 앱을 열고 DevTools를 실행하고 Application 패널로 이동합니다. 아이콘 섹션에서 마스크 가능한 아이콘의 최소 안전 영역만 표시하도록 선택할 수 있습니다. 이렇게 하면 아이콘이 잘리고 안전 영역만 표시됩니다. 로고가 이 안전 영역에 표시되면 아이콘이 준비된 것입니다.
![가장자리가 잘린 PWA 아이콘을 표시하는 DevTools의 애플리케이션 패널](https://web.dev/static/articles/maskable-icon/image/applications-panel-devto-a75aad0ea167e.png?authuser=7&hl=ko)
다양한 Android 도형으로 마스크 가능한 아이콘을 테스트하려면 Tiger Oakes의 Maskable.app을 사용합니다. 아이콘을 열면 Maskable.app에서 다양한 모양과 크기를 시도하고 팀과 미리보기를 공유할 수 있습니다.
마스크 가능한 아이콘을 어떻게 채택하나요?
기존 아이콘을 기반으로 마스크 가능한 아이콘을 만들려면 Maskable.app Editor를 사용하면 됩니다. 아이콘을 업로드하고 색상과 크기를 조정한 다음 이미지를 내보냅니다.
![Maskable.app 편집기 스크린샷](https://web.dev/static/articles/maskable-icon/image/maskableapp-editor-scree-fdc82299dbabb.png?authuser=7&hl=ko)
마스크 가능한 아이콘을 만들고 DevTools에서 테스트한 후에는 새 애셋을 가리키도록 웹 앱 매니페스트를 업데이트해야 합니다. 웹 앱 매니페스트는 웹 앱에 관한 정보를 JSON 파일로 제공하며 icons
배열을 포함합니다.
purpose
필드는 아이콘 사용 방법을 브라우저에 알려줍니다. 기본적으로 아이콘의 용도는 "any"
입니다. Android에서 이러한 아이콘은 흰색 배경에서 크기가 조정됩니다.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
아이콘을 마스크 가능하게 만들려면 purpose
값을 "maskable"
로 설정하여 아이콘 마스크와 함께 사용해야 함을 나타냅니다. 이렇게 하면 흰색 배경이 삭제되고 아이콘의 모양을
더욱 세부적으로 관리할 수 있습니다. 다른 기기에서 마스크 없이 마스크 가능한 아이콘을 사용하려면 공백으로 구분된 여러 용도 (예: "any maskable"
)를 지정할 수도 있습니다.
감사의 말
Joe Medley가 이 페이지를 검토했습니다.