Android 앱 아이콘에 대한 실용 가이드: 적응형 아이콘 설명(및 올바르게 생성하는 방법)

Android를 처음 사용하는 개발자에게는 일반적으로 놀라운 일입니다. 앱 아이콘을 위한 단일 정사각형 PNG를 다듬고 깔끔한 512x512로 내보내면 이미지 편집기에서 완벽하게 보입니다. 그런 다음 삼성 휴대폰에 디버그 빌드를 설치하면 로고의 일부가 잘린 것처럼 아이콘이 갑자기 잘리고 중앙에서 약간 벗어난 것처럼 보입니다. 파일 자체에는 아무런 문제가 없습니다. 문제는 하나의 정사각형 이미지가 Android 런처의 실제 세계와 접촉할 때 결코 살아남지 못한다는 것입니다. 각 런처는 아이콘을 자르고 마스크하고 모양을 변경합니다. 아직 이 문제를 겪지 않았다면 그렇게 하는 것은 시간 문제이므로 내부적으로 무슨 일이 일어나고 있는지, 그리고 처음에 문제를 해결하는 방법을 살펴보겠습니다.

단일 정사각형 PNG로는 더 이상 충분하지 않은 이유

Android 초창기에는 앱 아이콘이 정확히 그 모습 그대로였습니다. 즉, 모든 런처가 있는 그대로 표시되는 단일 정사각형(또는 경우에 따라 자유 모양) PNG였습니다. 제조업체가 휴대폰을 시각적으로 차별화하기 시작할 때까지는 괜찮았으며 그렇게 하기 가장 쉬운 곳 중 하나는 홈 화면이었습니다. 삼성은 둥근 사각형을 원했고 일부 중국 OEM 스킨은 다른 모서리 처리를 원했으며 기본 Android는 결국 원형에 정착했습니다. 갑자기, 똑같은 아이콘 파일이 눈에 띄게 다르게 보였고, 어떤 휴대폰에 착륙했는지에 따라 때로는 눈에 띄게 더 나빠졌습니다.

Android 8.0 Oreo에서 도입된 Google의 대답은 적응형 아이콘 시스템이었습니다. 하나의 고정된 모양을 제공하는 대신 개발자는 운영 체제 자체가 특정 실행 프로그램이 선호하는 모양으로 마스크되는 계층화된 아트워크를 제공합니다. 시각적 정체성은 일관되게 유지됩니다. 바깥쪽 실루엣만 변경됩니다.

적응형 아이콘이란 정확히 무엇입니까?

적응형 아이콘은 각각 108dp x 108dp 캔버스를 차지하는 두 개의 개별 레이어, 즉 배경 레이어와 전경 레이어로 구성됩니다. Android는 두 가지를 함께 합성한 다음 원, 둥근 사각형, 눈물방울 등 현재 런처에서 사용하는 마스크 모양을 적용합니다. 아이콘을 탭하거나 드래그할 때 레이어가 독립적으로 이동할 수 있기 때문에 2개의 레이어 구조를 통해 Android는 미묘한 시차 및 모션 효과도 추가할 수 있습니다.

앱 리소스에서 이는 일반적으로 mipmap-anydpi-v26/ic_launcher.xml와 같은 XML 파일을 통해 정의됩니다. 이 파일은 픽셀 데이터 자체를 포함하기보다는 단순히 배경 및 전경 드로어블을 가리킵니다. 전통적인 플랫 ic_launcher.png는 적응형 아이콘 시스템보다 먼저 작동하는 Android 7.1 이하를 실행하는 기기에 대한 대체 수단으로 여전히 유지됩니다.

안전지대가 중요한 이유

사람들을 가장 당황하게 만드는 부분이 바로 여기에 있습니다. 각 레이어의 캔버스가 108dp x 108dp인 경우에도 어떤 마스크 모양이 적용되는지에 관계없이 해당 캔버스 중앙에 있는 내부 66dp x 66dp 원만 표시됩니다. 이 내부 영역을 일반적으로 안전 지대라고 합니다. 외부에 있는 모든 것은 원형 마스크에 표시되었다가 갑자기 더 공격적인 소용돌이 모양 또는 눈물방울 마스크에 고정될 수 있으며, 그 반대의 경우도 마찬가지입니다.

이는 시각적 크기를 최대화하기 위해 로고를 캔버스 가장자리 가까이에 그릴 때 나타나는 문제와 정확히 같습니다. 원형 마스크에서는 완벽하게 보일 수 있지만 삼성의 소용돌이 마스크에서는 고르지 않게 잘릴 수 있습니다. 수정 사항은 재설계가 아니라 아트웍을 약간 축소하여 궁극적으로 어떤 모양이 적용되든 의미 있는 콘텐츠가 안전 영역 내에 유지되도록 하는 것입니다.

당신이 만나게 될 런처 모양

실용적인 점은 아이콘이 어떤 모양을 입게 될지 선택할 수 없다는 것입니다. 기본 Android 런처 사용자는 설정 메뉴에서 원하는 모양을 선택할 수도 있습니다. 유일한 실제 수단은 예술 작품 자체가 모든 예술 작품에서 우아하게 살아남도록 하는 것입니다. 이는 바로 안전 지대에서 보장되는 것입니다.

자산 구축: 필요한 크기와 밀도

iOS에도 앱을 출시하는 경우 Apple의 App Store 아이콘 요구 사항은 1024x1024를 초과하고 투명도가 전혀 없는 완전히 다른 비계층 형식을 사용하므로 다른 세트를 완전히 추가하세요.

수동 방식과 생성기 사용 비교

이러한 크기는 모두 이미지 편집기에서 직접 생성하거나 Android Studio에 내장된 Image Asset Studio를 통해 생성할 수 있습니다. Android Studio에서는 단일 프로젝트에 대해 밀도 조정 및 마스크 미리보기를 합리적으로 잘 처리합니다. 이것이 지루해지는 곳은 여러 앱에서 디자인 시스템을 유지 관리하거나, 동일한 마스터 아트워크에서 일치하는 iOS 내보내기가 필요하거나, 디자인을 적용하기 전에 모든 모양에서 디자인이 어떻게 작동하는지 다시 확인하는 빠른 방법을 원할 때입니다.

기존 APK에서 아이콘 추출하기

때로는 필요성이 반대 방향으로 흘러가는 경우도 있습니다. 원본 디자인 파일 없이 프로젝트를 상속받았을 수도 있고, 직접 디자인하기 전에 경쟁업체가 아이콘을 어떻게 구성했는지 정확히 확인하고 싶거나, 빌드된 APK에서 아이콘을 다시 가져와 관련 도구나 마케팅 자산에서 재사용하기만 하면 될 수도 있습니다. APK는 사실상 앱의 모든 리소스를 포함하는 구조화된 아카이브이므로 해당 실행기 아이콘 파일이 APK 내부에 물리적으로 존재하며 처음부터 다시 구성하는 대신 직접 추출할 수 있습니다.

아이콘 추출기는 귀하가 업로드하는 모든 APK에서 이러한 파일을 정확하게 가져와 원본 개발자가 제공한 해상도에 관계없이 원시 아이콘 자산을 제공합니다. 이는 손실된 소스 파일을 복구하거나 다른 앱이 동일한 디자인 문제에 어떻게 접근했는지 연구하는 가장 빠른 방법입니다.

검토 시 표시되는 일반적인 아이콘 실수

• 추가 패딩 또는 UI 크롬으로 베이킹합니다. 이미지 내부에 수동으로 추가된 그림자, 테두리 또는 둥근 모서리 효과는 시스템 자체 마스킹과 충돌하며 종종 이중으로 표시되거나 잘못 정렬된 것처럼 보입니다.
• 뚜렷한 가장자리가 없는 순백색 배경을 사용합니다. 밝은 테마의 런처에서는 홈 화면 배경에서 아이콘이 거의 보이지 않게 될 수 있습니다.
• 지나치게 미세한 디테일. 512px에서는 선명하게 보이는 텍스트와 복잡한 선 작업이 48px로 축소되면 읽을 수 없는 얼룩으로 바뀌는 경우가 많습니다. 이는 대부분의 사용자가 일상적으로 보는 방식입니다.
• Play 스토어 목록 아이콘과 설치 아이콘이 일치하지 않습니다. 리뷰어와 사용자 모두 이 두 가지가 일치하지 않는 것을 알아채고, 엉성하거나 더 나쁘게는 의심스러운 것으로 읽힙니다.
• 레거시 폴백을 완전히 잊어버립니다. 앱이 여전히 8.0 이전의 Android 버전을 지원하는 경우 플랫 PNG 대체를 건너뛰면 해당 사용자에게 깨지거나 일반적으로 보이는 아이콘이 남을 수 있습니다.

배송하기 전에 다양한 모양으로 아이콘 테스트

아이콘을 완성하기 전에 깨끗하게 변환될 것이라고 가정하기보다는 최소한 원형 마스크와 물결 모양 마스크를 나란히 놓고 미리 보는 것이 좋습니다. Android Studio의 Image Asset Studio에는 바로 이러한 이유로 여러 런처 모양에 대한 실시간 미리보기가 포함되어 있으며, '잘못된' 런처 모양의 사용자가 뭔가 이상해 보인다고 보고할 때 게시 후에만 나타나는 문제를 포착하는 데 단 1분밖에 걸리지 않습니다.

자주 묻는 질문 (FAQ)

이를 위해서는 디자인 이론에 대한 배경 지식이 필요하지 않습니다. 단지 아이콘이 손에서 떠나는 순간을 제어할 수 없는 방식으로 모양이 바뀔 것이라는 점만 인식하면 됩니다. 안전 지대를 위해 디자인하고, 레거시 폴백을 유지하고, 하나의 깨끗한 마스터 파일에서 필요한 모든 크기를 생성하면 아이콘이 어떤 실행기에 있든 상관없이 아이콘이 유지됩니다.