플랫폼에 맞게 조정되는 앱 아이콘
마스크 가능한 아이콘이란 무엇인가요?
최근 Android 휴대전화에 프로그레시브 웹 앱을 설치한 경우 아이콘이 흰색 배경으로 표시될 수도 있습니다. Android Oreo에서는 여러 기기 모델에서 다양한 모양으로 앱 아이콘을 표시하는 적응형 아이콘을 도입했습니다. 이 새로운 형식을 따르지 않는 아이콘에는 흰색 배경이 지정됩니다.
마스크 가능한 아이콘은 더 세밀하게 제어할 수 있고 프로그레시브 웹 앱에서 적응형 아이콘을 사용할 수 있는 새로운 아이콘 형식입니다. 마스크 가능한 아이콘을 제공하면 아이콘이 전체 모양을 채우고 모든 Android 기기에서 멋지게 표시될 수 있습니다. 최근 Firefox와 Chrome에서 이 새로운 형식에 대한 지원을 추가했으며 이제 앱에서 이를 채택할 수 있습니다.
현재 아이콘이 준비되었나요?
마스크 가능한 아이콘은 다양한 도형을 지원해야 하므로 브라우저에서 필요한 모양과 크기로 자를 수 있는 패딩이 포함된 불투명 이미지를 제공합니다. 궁극적인 형태는 브라우저와 플랫폼에 따라 달라지므로 특정 형태에 의존하지 않는 것이 좋습니다.
다행히 모든 플랫폼에서 존중하는 잘 정의되고 표준화된 '최소 안전 영역'이 있습니다. 로고와 같이 아이콘에서 중요한 부분은 반경이 아이콘 너비의 40% 인 원형 영역 내에 있어야 합니다. 외부 10% 가장자리가 잘릴 수 있습니다.
Chrome DevTools를 사용하여 아이콘의 어느 부분이 안전 영역 내에 있는지 확인할 수 있습니다. 프로그레시브 웹 앱을 열고 DevTools를 실행하고 Application 패널로 이동합니다. 아이콘 섹션에서 마스크 가능한 아이콘의 최소 안전 영역만 표시를 선택할 수 있습니다. 안전 영역만 표시되도록 아이콘이 잘립니다. 로고가 이 안전 영역 안에 표시되면 계속 진행해도 됩니다.
다양한 Android 도형으로 마스크 가능한 아이콘을 테스트하려면 Tiger가 만든 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가 이 문서를 검토했습니다.