적응형 아이콘

적응형 아이콘(AdaptiveIconDrawable)은 개별 기기 기능 및 사용자 테마 설정에 따라 다르게 표시될 수 있습니다. 적응형 아이콘은 주로 홈 화면의 런처에서 사용되지만 바로가기, 설정 앱, 공유 대화상자 및 개요 화면에서도 사용할 수 있습니다.

적응형 아이콘은 다음과 같은 다양한 사용 사례에 맞게 조정될 수 있습니다.

  • 다양한 모양: 적응형 아이콘은 여러 기기 모델에 걸쳐 다양한 모양을 표시할 수 있습니다. 예를 들어, 하나의 OEM 기기에는 원형으로 표시하고 다른 기기에는 둥근 모양 (정사각형과 원 사이의 모양)을 표시할 수 있습니다. 각 기기 OEM은 시스템이 모든 적응형 아이콘을 동일한 모양으로 렌더링하는 데 사용하는 마스크를 제공해야 합니다.

    동일한 샘플 Android 아이콘의 반복되는 애니메이션을 보여주는 gif로, 사용된 마스크에 따라 다른 모양(원과 두 종류의 둥근 모서리)을 보여줍니다.
    그림 1. 적응형 아이콘은 기기마다 다른 다양한 마스크를 지원합니다.
  • 시각 효과: 적응형 아이콘은 사용자가 홈 화면에서 아이콘을 배치하거나 옮길 때 관심을 끄는 다양한 시각 효과를 지원합니다.

    사용자 응답을 표시하도록 애니메이션 처리된 원 모양의 Android 샘플 아이콘 2개의 예를 보여주는 gif. 첫 번째 아이콘은 Android 로고가
원 안에서 좌우로 움직인 다음 위아래로 움직인다는 것을 보여줍니다. 두 번째 아이콘이 펼쳐졌다가 다시 접힙니다.
    그림 2. 적응형 아이콘으로 표시되는 시각 효과의 예
  • 사용자 테마 설정: Android 13 (API 수준 33)부터 사용자는 적응형 아이콘 테마를 설정할 수 있습니다. 사용자가 시스템 설정에서 테마 아이콘 전환 버튼을 사용 설정하여 테마 앱 아이콘을 사용 설정하고 런처가 이 기능을 지원하는 경우 시스템은 사용자가 선택한 배경화면 및 테마의 색상을 사용하여 색조 색상을 결정합니다.

    세 가지 Android 기기의 예를 보여주는 이미지입니다. 각각 서로 다른 색조의 다양한 사용자 테마를 보여주는 이미지입니다. 첫 번째는 어두운 색조의 배경화면을, 두 번째는 황금색 배경화면을, 세 번째는 푸른 색조의 배경화면이 있는 연한 회색의 배경화면을 표시합니다. 각 예에서 아이콘은 배경화면의 색조를 상속하여 완벽하게 혼합됩니다.
    그림 3. 사용자의 배경화면 및 테마에서 상속되는 적응형 아이콘

다음 시나리오에서는 홈 화면에 테마 앱 아이콘이 표시되지 않고 대신 적응형 앱 아이콘 또는 표준 앱 아이콘이 표시됩니다.

  • 사용자가 테마 앱 아이콘을 사용 설정하지 않은 경우
  • 앱이 단색 앱 아이콘을 제공하지 않는 경우
  • 런처가 테마 앱 아이콘을 지원하지 않는 경우

적응형 아이콘 디자인

적응형 아이콘이 다양한 모양, 시각적 효과, 사용자 테마를 지원하도록 하려면 디자인이 다음 요구사항을 충족해야 합니다.

  • 아이콘의 색상 버전에 두 개의 레이어, 즉 포그라운드 및 백그라운드 레이어를 제공해야 합니다.

    포그라운드 레이어 (왼쪽 이미지) 및 백그라운드 레이어 (오른쪽 이미지)의 예를 보여주는 이미지 포그라운드에는 66x66 안전 영역 중앙에 샘플 Android 로고의 16면 아이콘이 표시되어 있습니다. 안전 영역은 108x108 컨테이너 내부의 중앙에 있습니다. 배경에는 안전 영역과 컨테이너의 측정된 크기가 동일하게 표시되지만 로고는 파란색 배경만 표시됩니다.
    그림 4. 포그라운드 및 백그라운드 레이어를 사용하여 정의된 적응형 아이콘 표시된 66x66 안전 영역은 OEM에서 정의한 모양의 마스크에 의해 절대 잘리지 않는 영역입니다.
    원형 마스크에 오버레이된 이전 이미지의 아이콘을 보여주는 이미지입니다.
    그림 5. 원형 마스크가 적용된 포그라운드 및 백그라운드 레이어가 함께 표시되는 방식의 예
  • 앱 아이콘의 사용자 테마 설정을 지원하려면 흑백 버전의 아이콘에 단일 레이어를 제공하세요.

    단색 아이콘 레이어 (왼쪽 이미지) 및 색상 미리보기 (오른쪽 이미지)의 예를 보여주는 이미지 단색 레이어는 66x66 안전 영역 중앙에 샘플 Android 로고의 16면 아이콘을 표시합니다. 안전 영역은 108x108 컨테이너 내부의 중앙에 있습니다. 색상 미리보기는 서로 다른 색상의 사용자 테마 (주황색, 분홍색, 노란색, 녹색)에 적용될 때 이 레이어 표시를 보여줍니다.
    그림 6. 색상 미리보기 예 (오른쪽)가 있는 단색 아이콘 레이어 (왼쪽)
  • 모든 레이어의 크기를 108x108dp로 조정합니다.

  • 가장자리가 깨끗한 아이콘을 사용합니다. 레이어의 아이콘 윤곽선 주위에 마스크나 배경 그림자가 없어야 합니다.

  • 48x48dp 이상의 로고를 사용하세요. 아이콘의 내부 66x66 dp가 마스킹된 표시 영역 내에 표시되므로 66x66 dp를 초과하면 안 됩니다.

레이어의 4개 측면 각각에 있는 외부 18dp는 마스킹 및 시차 또는 펄싱과 같은 시각 효과를 만들기 위해 예약되어 있습니다.

Android 스튜디오를 사용하여 적응형 아이콘을 만드는 방법을 알아보려면 Android 앱 아이콘 Figma 템플릿 또는 런처 아이콘 만들기에 관한 Android 스튜디오 문서를 참고하세요. 적응형 아이콘 디자인 블로그 게시물도 참고하세요.

앱에 적응형 아이콘 추가

앱에 적응형 아이콘을 추가하려면 앱 매니페스트에서 android:icon 속성을 업데이트하여 드로어블 리소스를 지정하세요. android:roundIcon 속성을 사용하여 아이콘 드로어블 리소스를 정의할 수도 있지만 원형 마스크에 다른 아이콘 애셋이 필요한 경우에만(예: 브랜딩에서 원형을 사용하는 경우) 가능합니다.

다음 코드 스니펫은 이러한 두 속성을 모두 보여주지만 대부분의 앱은 android:icon만 지정합니다.

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

다음으로, Android 8.0 (API 수준 26)과의 하위 호환성을 위해 res/mipmap-anydpi-v26/ic_launcher.xml에서 앱에 대체 드로어블 리소스를 만듭니다. <adaptive-icon> 요소를 사용하여 아이콘의 포그라운드, 백그라운드, 단색 레이어 드로어블을 정의합니다. <foreground>, <background>, <monochrome> 내부 요소는 android:drawable 속성을 지원합니다.

다음 예는 <adaptive-icon> 내에서 <foreground>, <background>, <monochrome> 요소를 정의하는 방법을 보여줍니다.

<?xml version="1.0" encoding="utf-8"?>
...
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

드로어블을 <foreground>, <background>, <monochrome> 요소에 포함하여 요소로 정의할 수도 있습니다. 다음 스니펫은 포그라운드 드로어블을 사용하여 이 작업을 실행하는 예를 보여줍니다.

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

바로가기에 일반 적응형 아이콘과 동일한 마스크와 시각 효과를 적용하려면 다음 기법 중 하나를 사용합니다.

  • 정적 바로가기에는 <adaptive-icon> 요소를 사용합니다.
  • 동적 바로가기의 경우 바로가기를 만들 때 createWithAdaptiveBitmap() 메서드를 호출합니다.

적응형 아이콘 구현에 관한 자세한 내용은 적응형 아이콘 구현을 참고하세요. 바로가기에 관한 자세한 내용은 앱 바로가기 개요를 참고하세요.

추가 리소스

적응형 아이콘의 디자인 및 구현에 관한 추가 정보는 다음 리소스를 참고하세요.