마스크 가능한 아이콘이 있는 PWA에서 적응형 아이콘 지원

Thomas Steiner

Tiger Oakes

최신 Android 휴대전화에 프로그레시브 웹 앱 (PWA)을 설치한 경우 앱 아이콘의 배경이 흰색인 것을 확인할 수 있습니다. Android 8.0 도입 기기 전체에서 다양한 모양의 앱 아이콘을 표시하는 적응형 아이콘 모델을 학습시키는 작업도 반복해야 합니다 이 형식을 사용하지 않는 아이콘은 배경색이 흰색입니다.

</ph>

마스크 가능한 아이콘은 Chrome 및 Firefox의 새로운 아이콘 형식으로, 프로그레시브 웹 앱은 적응형 아이콘을 사용하여 변경할 수 있습니다.

</ph>

현재 사용 중인 아이콘을 사용할 수 있나요?

마스크 가능한 아이콘은 다양한 도형을 지원해야 하므로 브라우저에서 원하는 만큼 자를 수 있는 패딩이 있는 불투명 이미지 모양과 크기를 설정할 수 있습니다.

마스크 가능한 아이콘 사양에는 표준화된 아이콘 및 '최소 안전 영역' 모든 플랫폼에서 존중하는 마케팅의 중요한 부분은 로고와 같은 아이콘은 중앙의 원형 영역 내에 있어야 하며 너비의 40% 에 해당하는 반지름을 가지는 아이콘입니다. 바깥쪽 10% 가장자리는 일부 플랫폼에서 잘립니다

Chrome을 사용하여 아이콘의 어느 부분이 안전 영역 내에 있는지 확인할 수 있습니다. DevTools를 사용할 수 있습니다. 프로그레시브 웹 앱을 연 상태에서 DevTools를 실행하고 Application 패널로 이동합니다. 아이콘 섹션에서 마스크 가능한 아이콘의 최소 안전 영역만 표시합니다. 이렇게 하면 아이콘이 잘려서 안전 영역만 보입니다. 로고가 이 안전 영역에 표시되면 아이콘이 준비되었습니다.

</ph>

다양한 Android 모양으로 마스크 가능한 아이콘을 테스트하려면 Tiger Oakes의 Maskable.app입니다. 아이콘을 열면 Maskable.app을 통해 다양한 모양과 크기를 시도해 보고 팀과 미리보기를 공유하세요.

마스크 가능한 아이콘을 채택하려면 어떻게 해야 하나요?

기존 아이콘을 기반으로 마스크 가능한 아이콘을 만들려면 Maskable.app 편집자 아이콘을 업로드하고 선택한 다음 이미지를 내보냅니다.

</ph>

마스크 가능한 아이콘을 생성하고 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가 이 페이지를 검토했습니다.