적응형 아이콘(AdaptiveIconDrawable
)은 개별 기기 기능 및 사용자 테마 설정에 따라 다르게 표시될 수 있습니다. 적응형 아이콘은 주로 홈 화면의 런처에서 사용되지만 바로가기, 설정 앱, 공유 대화상자 및 개요 화면에서도 사용할 수 있습니다.
적응형 아이콘은 다음과 같은 다양한 사용 사례에 맞게 조정될 수 있습니다.
다양한 모양: 적응형 아이콘은 여러 기기 모델에 걸쳐 다양한 모양을 표시할 수 있습니다. 예를 들어, 하나의 OEM 기기에는 원형으로 표시하고 다른 기기에는 둥근 모양 (정사각형과 원 사이의 모양)을 표시할 수 있습니다. 각 기기 OEM은 시스템이 모든 적응형 아이콘을 동일한 모양으로 렌더링하는 데 사용하는 마스크를 제공해야 합니다.
시각 효과: 적응형 아이콘은 사용자가 홈 화면에서 아이콘을 배치하거나 옮길 때 관심을 끄는 다양한 시각 효과를 지원합니다.
사용자 테마 설정: Android 13 (API 수준 33)부터 사용자는 적응형 아이콘 테마를 설정할 수 있습니다. 사용자가 시스템 설정에서 테마 아이콘 전환 버튼을 사용 설정하여 테마 앱 아이콘을 사용 설정하고 런처가 이 기능을 지원하는 경우 시스템은 사용자가 선택한 배경화면 및 테마의 색상을 사용하여 색조 색상을 결정합니다.
다음 시나리오에서는 홈 화면에 테마 앱 아이콘이 표시되지 않고 대신 적응형 앱 아이콘 또는 표준 앱 아이콘이 표시됩니다.
- 사용자가 테마 앱 아이콘을 사용 설정하지 않은 경우
- 앱이 단색 앱 아이콘을 제공하지 않는 경우
- 런처가 테마 앱 아이콘을 지원하지 않는 경우
적응형 아이콘 디자인
적응형 아이콘이 다양한 모양, 시각적 효과, 사용자 테마를 지원하도록 하려면 디자인이 다음 요구사항을 충족해야 합니다.
아이콘의 색상 버전에 두 개의 레이어, 즉 포그라운드 및 백그라운드 레이어를 제공해야 합니다.
앱 아이콘의 사용자 테마 설정을 지원하려면 흑백 버전의 아이콘에 단일 레이어를 제공하세요.
모든 레이어의 크기를 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()
메서드를 호출합니다.
적응형 아이콘 구현에 관한 자세한 내용은 적응형 아이콘 구현을 참고하세요. 바로가기에 관한 자세한 내용은 앱 바로가기 개요를 참고하세요.
추가 리소스
적응형 아이콘의 디자인 및 구현에 관한 추가 정보는 다음 리소스를 참고하세요.
- Figma 커뮤니티 페이지 템플릿
- Android 적응형 아이콘 이해
- 적응형 아이콘 디자인
- 적응형 아이콘 구현
- Android 스튜디오에서 앱 아이콘 만들기
- Google Play 아이콘 디자인 사양