최근 Android 휴대전화에 프로그레시브 웹 앱 (PWA)을 설치했다면 앱 아이콘 배경이 흰색일 수 있습니다. Android 8.0에는 기기 모델에서 다양한 모양으로 앱 아이콘을 표시하는 적응형 아이콘이 도입되었습니다. 이 형식을 사용하지 않는 아이콘은 배경이 흰색입니다.
마스크 가능 아이콘은 Chrome 및 Firefox의 새로운 아이콘 형식으로, 프로그레시브 웹 앱에서 적응형 아이콘을 사용할 수 있고 아이콘 모양을 더 세부적으로 관리할 수 있습니다.
현재 아이콘이 준비되었나요?
마스크 가능한 아이콘은 다양한 도형을 지원해야 하므로 브라우저에서 브라우저 또는 플랫폼에 필요한 모양과 크기로 자를 수 있는 패딩이 포함된 불투명 이미지를 제공해야 합니다.
마스크 가능한 아이콘 사양에는 모든 플랫폼에서 존중하는 표준화된 '최소 안전 영역'이 포함됩니다. 로고와 같이 아이콘의 중요한 부분은 반경이 아이콘 너비의 40% 인 원형 영역 내에 있어야 합니다. 일부 플랫폼에서는 외부 10% 가장자리가 잘릴 수 있습니다.
Chrome DevTools를 사용하여 아이콘의 어떤 부분이 안전 영역 내에 있는지 확인할 수 있습니다. 프로그레시브 웹 앱을 열고 DevTools를 실행하고 Application 패널로 이동합니다. 아이콘 섹션에서 마스크 가능한 아이콘의 최소 안전 영역만 표시하도록 선택할 수 있습니다. 이렇게 하면 아이콘이 잘리고 안전 영역만 표시됩니다. 로고가 이 안전 영역에 표시되면 아이콘이 준비된 것입니다.
다양한 Android 도형으로 마스크 가능한 아이콘을 테스트하려면 Tiger Oakes의 Maskable.app을 사용합니다. 아이콘을 열면 Maskable.app에서 다양한 모양과 크기를 시도하고 팀과 미리보기를 공유할 수 있습니다.
마스크 가능한 아이콘을 어떻게 채택하나요?
기존 아이콘을 기반으로 마스크 가능한 아이콘을 만들려면 Maskable.app Editor를 사용하면 됩니다. 아이콘을 업로드하고 색상과 크기를 조정한 다음 이미지를 내보냅니다.
마스크 가능한 아이콘을 만들고 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가 이 페이지를 검토했습니다.