앱 아이콘 디자인 및 미리보기

1. 소개

최종 업데이트: 2022년 8월 4일

Android 13부터 사용자는 적응형 런처 아이콘 테마를 설정할 수 있습니다. 이 기능을 사용하면 지원되는 Android 런처의 앱 아이콘이 사용자가 선택한 배경화면 및 기타 테마의 색상을 상속받도록 색조가 조정됩니다.

새로운 적응형 색상 아이콘을 비롯하여 Android 앱에 필요한 모든 시스템 애셋을 손쉽게 만드세요.

학습할 내용

다양한 유형의 앱 아이콘과 아이콘 디자인을 위한 팁을 이해합니다.
Android 런처 Figma 템플릿을 사용하는 방법을 알아봅니다.
Android 스튜디오 애셋 생성기를 사용하는 방법을 알아봅니다.
Android 스튜디오 에뮬레이터로 런처 아이콘을 미리 보는 방법을 알아봅니다.

기본 요건

Figma에 관한 기본 지식
선택사항: 앱 아이콘 아트워크 (포그라운드, 백그라운드, 단색)

필요한 항목

2. 시작하기

설정

시작하려면 Android 앱 아이콘 Figma 파일에 액세스해야 합니다.

먼저 Figma에 로그인하거나 계정을 만듭니다.

Figma 커뮤니티에서 복제

Android 런처 템플릿 파일로 이동하거나 Figma 커뮤니티 내에서 변수 글꼴로 마이그레이션하기를 검색합니다. 오른쪽 상단의 Get a Copy(사본 가져오기)를 클릭하여 해당 파일을 사용자의 파일에 복사합니다.

템플릿 사용

Android 아이콘 템플릿은 두 페이지로 구성됩니다.

표지 에서는 관련 개념과 템플릿 사용 방법을 간략히 설명합니다.
템플릿 페이지 에는 필요한 애셋을 만드는 데 필요한 모든 항목이 세 개의 프레임 (색상, 모양, Play 스토어)으로 나뉘어 포함되어 있습니다.

참고: 왼쪽 레이어 패널에서 대부분의 레이어와 그룹이 잠겨 있습니다. 이러한 레이어와 그룹은 잠긴 상태로 유지해야 합니다. (잠금 해제된 아트워크 그룹 내에 아트워크를 배치할 수 있습니다.)

하지만 애셋을 만들기 전에 만들 항목을 살펴보겠습니다.

3. Android 시스템 아이콘

런처 아이콘

런처 아이콘 또는 앱 아이콘은 앱의 실행 환경에서 필수적인 부분으로, 홈 화면에 앱으로 연결되는 진입점으로 표시됩니다.

적응형 모양

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

적응형 아이콘은 여러 기기 모델에서 다양한 모양을 표시할 수 있습니다. 예를 들어 한 OEM 기기에서는 원형으로 표시되고 다른 기기에서는 모서리가 둥근 사각형으로 표시될 수 있습니다. 각 기기 OEM에서는 마스크가 제공되는데, 시스템에서는 이를 사용하여 모든 적응형 아이콘을 같은 형태로 렌더링합니다.

모양에 맞게 조정하는 기능을 사용하면 시스템에서 사용자 상호작용을 통해 다양한 애니메이션 효과를 적용할 수도 있습니다.

적응형 색상

이제 적응형 아이콘에서 동적 색상을 사용하여 맞춤설정된 테마 앱 아이콘을 사용할 수 있습니다.

사용자가 테마 앱 아이콘을 사용 설정 (즉, 시스템 설정에서 테마 아이콘 전환 버튼을 사용 설정)했으며 런처에서 이 기능을 지원하는 경우 시스템은 사용자가 선택한 배경화면 및 테마의 색상을 사용하여 색조 색상을 결정합니다.

모양에 맞게 조정되는 아이콘과 마찬가지로 적응형 색상 아이콘은 포그라운드와 백그라운드로 구성됩니다. 단색 포그라운드 아이콘 애셋만 제공하면 시스템에서 추출된 색 구성표로 백그라운드와 색상을 모두 처리합니다.

알림 아이콘에 동일한 단색 아이콘을 사용할 수도 있습니다.

기존

기존 아이콘은 이전 Android 버전을 실행하거나 적응형 기능을 지원하지 않는 기기 (8.0 이전)를 지원하기 위해 포함되어야 합니다.

포그라운드 및 백그라운드 리소스가 없으며 자유형 모양을 가질 수 있습니다. 제공된 템플릿을 사용하는 경우 최종 적응형 모양 아트워크가 기존 아이콘에 필요한 크기로 내보내집니다.

알림 아이콘

알림은 사용자에게 알림, 다른 사용자로부터의 메시지 또는 앱의 기타 실시간 정보를 제공하도록 Android가 앱의 UI 외부에 표시하는 메시지입니다. 시스템은 상태 표시줄의 아이콘, 알림 창의 더 자세한 항목, 앱 아이콘의 배지, 페어링된 웨어러블 기기처럼 다양한 위치와 형식으로 알림을 표시합니다.

스토어 아트워크

그래픽 이미지, 스크린샷, 간단한 설명, 동영상을 사용하여 Google Play 및 기타 Google 프로모션 채널에서 앱을 강조하고 홍보할 수 있습니다.

앱 아이콘이 앱의 런처 아이콘을 대체하지는 않지만 화질과 해상도가 높아야 합니다.

런처 아이콘과 마찬가지로 아트워크는 전체 애셋 공간을 차지하거나, 로고와 같은 아트워크 요소를 디자인하여 키라인 그리드 위에 배치할 수도 있습니다.

스토어 등록정보를 게시하려면 512x512픽셀 정사각형 앱 아이콘을 제공해야 합니다. Android 앱 아이콘 템플릿을 사용하는 경우 적응형 모양 아트워크를 사용하여 내보내기 시 제공됩니다.

4. 디자인 권장사항

런처 아이콘은 사용자를 위해 앱을 실행합니다. 앱으로 연결되는 진입점이므로 인식 가능하고 읽을 수 있어야 합니다. 다음은 런처 아이콘에서 이러한 품질을 보장하기 위한 권장사항입니다.

아트워크를 단순하게 유지합니다. 여러 레이어, 많은 효과, 텍스트는 피하세요. 이러한 세부정보는 크기가 작으면 표시되지 않거나 보기 어려울 수 있습니다.

복잡한 모양은 피하세요. 여기에는 로고가 포함됩니다. 가능하면 단순화된 로고를 사용하거나 사용자가 앱과 연결하는 기호 체계를 고려하세요. 읽기 쉽고 고유한 모양은 사용자가 다양한 컨텍스트 (적응형 색상 및 알림)에서 앱을 쉽게 인식할 수 있도록 통합을 만드는 데 도움이 됩니다.

그리드를 사용합니다. 그리드 또는 키라인을 활용하여 풀 블리드 일러스트레이션 아트워크를 비롯하여 잘릴 때 포그라운드 아트워크가 작동하도록 합니다.

대비를 고려합니다. 적응형 모양 및 기존 아이콘의 경우 아이콘 포그라운드와 백그라운드가 읽기 쉬운 대비를 갖도록 합니다. 시스템 그림자로 오인될 수 있는 무거운 그림자는 사용하지 마세요.

아트워크를 안전 영역 내에 유지합니다. 포그라운드 애셋을 72x72픽셀 내에 유지합니다 (풀 블리드를 사용하는 경우 제외). 백그라운드를 108x108픽셀 로 유지합니다. 참고: 아이콘 템플릿 아트워크 프레임은 아이콘 아트워크를 빌드할 수 있도록 72x72픽셀보다 큽니다. 애셋의 크기가 사양에 맞게 조정됩니다.

벡터 형식. 래스터 형식 (예: PNG, JPG, GIF 파일)과 반대로 벡터 형식 (예: SVG, AI, PDF, EPS 파일)의 아트워크를 사용해 보세요. 이렇게 하면 아트워크가 최신 기능과 호환되고 더 쉽게 수정할 수 있습니다.

5. 적응형 색상 및 알림 아이콘

이제 나만의 Android 시스템 아이콘을 만들 차례입니다.

Android 앱 아이콘 Figma 파일 을 찾습니다.
파일 내에서 적응형 색상 프레임을 찾습니다. 왼쪽 레이어 패널에서 적응형 색상 > 구성요소 > 아트 > 아이콘 아트워크 영역 > 테마 아이콘 아트 < 아이콘 추가 를 찾습니다. 단색 아이콘이 준비되어 있는 경우 여기에 복사하여 샘플 bugdroid 아이콘을 대체하고 6단계로 건너뜁니다.
단색 아이콘이 없는 경우 앱과 관련된 로고 또는 아이콘으로 시작합니다. 디자인 팁을 살펴보고 아이콘을 업데이트합니다. 먼저 단순화하고 복잡한 모양을 피합니다. 예를 들어 인앱에 사용되는 일러스트레이션은 덜 복잡한 잎 모양으로 단순화됩니다. 그림자와 선 세부정보는 공백으로 시뮬레이션됩니다.
이제 키라인 그리드 를 사용하여 크기를 업데이트합니다. 여기서는 크기 조정을 크기 조정 으로 설정하고 아트워크가 포그라운드 안전 영역 내에 있는지 확인했습니다. 템플릿은 아트워크가 4배로 설정되어 있으며 내보내기를 위해 자동으로 크기가 조정되므로 더 큰 규모로 아이콘을 디자인할 수 있습니다.
파일은 Material Theme Builder 와 함께 작동하도록 설정되어 동적 색상을 미리 볼 수 있습니다. 포그라운드 아이콘 색상 스타일을 표면 변형에 연결합니다.
이제 플러그인 패널에서 Material Theme Builder를 열면 소스 색상을 섞거나 이미지를 추가하여 추출된 소스 색상을 사용하여 색상을 업데이트할 수 있습니다.
해상도나 홈 화면이 다르면 어떻게 표시되나요? 템플릿은 아트워크 프레임 내에 배치된 아트워크가 다양한 미리보기 컨텍스트에 표시되도록 설정되어 있습니다.
시스템은 단색 아이콘을 알림으로 사용하고 미리보기에 알림으로 표시합니다.

6. 적응형 모양 및 기존 아이콘

이제 아이콘을 광범위하게 지원하기 위해 적응형 모양 및 기존 아이콘을 만듭니다.

파일 내에서 모양 프레임 을 찾습니다. 왼쪽 레이어 패널에서 아이콘 백그라운드 < 아이콘 추가* 를 찾습니다. 아이콘이 준비되어 있는 경우 여기에 복사하여 샘플 bugdroid 아이콘을 대체하고 5단계로 건너뜁니다.* 아이콘이 없는 경우 앱과 관련된 로고 또는 아이콘으로 시작하거나 단색 아이콘을 재사용합니다.
아이콘 권장사항을 염두에 두고 포그라운드 아이콘을 업데이트합니다. 여기서는 원래 일러스트레이션 색상을 다시 가져왔지만 세부정보는 최소한으로 유지했습니다.
이제 키라인 그리드 를 사용하여 크기를 업데이트합니다. 여기서는 크기 조정을 크기 조정으로 설정하고 아트워크가 포그라운드 안전 영역 내에 있는지 확인했습니다.
적응형 모양 앱 아이콘은 고유한 백그라운드를 가질 수도 있습니다. 이렇게 하면 아이콘의 레이어를 안전하게 자르고 상호작용 시 미묘한 움직임 효과를 제공할 수 있습니다. Android 스튜디오에서 단색 백그라운드를 사용하고 정의할 수도 있습니다.
미리보기가 업데이트되어 포그라운드와 백그라운드가 홈 화면, 다양한 잘린 모양, 기존 아이콘으로 함께 표시되는 방식을 보여줍니다.

자르는 데 사용되는 모양은 아이콘을 선택하고 모양 변형 옵션을 변경하여 홈 화면 미리보기 내에서 업데이트할 수 있습니다.

7. 내보내기

이제 앱 아이콘으로 템플릿을 업데이트했습니다. 구현을 위해 내보내 보겠습니다.

캔버스에 아무것도 선택되지 않았는지 확인합니다.
Figma 메뉴 > 파일 > 내보내기 (Shift + Cmd + E)로 이동합니다.
내보내기 메뉴에서 내보내기를 확인합니다. 이렇게 하면 템플릿에서 애셋이 다운로드됩니다.

내보내기에는 무엇이 포함되나요?

내보낸 애셋에는 다음과 같이 앱 아이콘을 구현하는 데 필요한 모든 파일이 있습니다.

Figma는 적응형 색상의 단색 포그라운드 아이콘을 SVG 파일로 내보내고 적응형 모양 아이콘의 포그라운드와 백그라운드를 모두 내보냅니다.
Figma는 해상도별로 정리된 다양한 mipmap 디렉터리에 기존 아이콘도 제공합니다.

작업이 끝났습니다. 이제 아이콘을 개발에 보낼 수 있습니다.

또는 Android 스튜디오 내에서 아이콘을 미리 보고 이러한 SVG를 최종 애셋 형식으로 변환하려면 다음 단계를 계속 진행하세요.

8. Image Asset Studio 사용

Android 스튜디오 시작하기

Android 스튜디오를 다운로드하여 설치합니다.
Android 스튜디오를 시작합니다.

Android 스튜디오는 새 프로젝트를 시작하거나 기존 프로젝트를 선택하는 옵션을 표시합니다.

지금은 새 프로젝트를 선택합니다. 다음 화면에서 새 프로젝트를 설정하는 과정을 안내합니다.
시작 아이콘만 살펴볼 것이므로 시작 템플릿에서 템플릿을 선택합니다.
그런 다음 새 프로젝트의 이름을 지정하고 마침 을 선택합니다. 새 프로젝트를 만드는 데 몇 분 정도 걸립니다.

Image Asset Studio 사용

이제 유용한 도구인 Asset Studio를 사용하여 프로젝트에 아이콘을 추가할 수 있습니다.

이 도구에 액세스하려면 파일 메뉴 > 새로 만들기 > 이미지 애셋을 선택합니다.
Image Asset Studio가 열리면 경로 에서 폴더 아이콘을 선택하여 포그라운드 레이어를 추가합니다. 내보낸 SVG 파일을 drawable-anydpi/ic_launcher.svg 로 선택합니다
백그라운드 레이어 탭을 선택하고 내보낸 백그라운드 레이어를 선택합니다. 또는 애셋 유형: 색상을 선택하여 단색 런처 백그라운드를 대신 사용합니다.
포그라운드 레이어로 돌아가서 이미지가 안전 영역 내에 있는지 다시 확인합니다. 시각적으로 가장 잘 작동하는 아이콘의 크기를 조정합니다.
완료되면 다음 을 클릭합니다. 그러면 프로젝트 내에서 아이콘이 이동해야 하는 위치를 묻는 메시지가 표시됩니다 (기본값으로 두거나 기본으로 전환). 그런 다음 마침 을 클릭합니다. res > drawable에서 런처 애셋을 찾을 수 있습니다. 더블클릭하면 최종 벡터 드로어블의 미리보기가 열립니다.

단색 레이어 애셋을 res/drawable 또는 res/drawable-v24 에 수동으로 복사하여 붙여넣거나 res 폴더를 마우스 오른쪽 버튼으로 클릭하고 새로 만들기 > 벡터 애셋 을 선택하여 단색 레이어를 수동으로 가져옵니다.
res/mipmap-anydpi-v26/ic_launcher.xml 및 res/mipmap-anydpi-v26/ic_launcher_round.xml 에서 기존 android:monochrome="path/to/monochrome/asset 을 추가하거나 변경하여 올바른 단색 애셋을 가리킵니다.

9. 미리보기 및 리소스

에뮬레이터에서 미리보기

앱 프로젝트에 추가하기 위해 이 작업을 실행하여 실제 기기 또는 에뮬레이터에서 미리 볼 수 있습니다. 아이콘이 실제로 어떻게 표시되는지 살펴보겠습니다.

기본적으로 에뮬레이터가 설정되어 있어야 하지만 그렇지 않은 경우 Android Virtual Device를 만듭니다. 녹색 재생 버튼 을 클릭합니다. 이렇게 하면 프로젝트가 빌드되고 에뮬레이터가 열립니다.

최종 애셋

에뮬레이터를 사용하여 기기에 런처 아이콘이 어떻게 표시되는지 확인하고 앱 프로젝트에 추가할 수 있습니다. 이렇게 하면 최종 프로덕션 형식으로 변환됩니다. 하지만 어디에 있나요?

애셋은 Android 앱의 리소스로 존재하며 리소스 패널 (일반적으로 왼쪽에 있음)을 열어 찾을 수 있습니다. 앱으로 드릴다운한 다음 Res 폴더를 찾습니다. 마우스 오른쪽 버튼으로 클릭하여 메뉴를 열고 Finder에서 열기 (Mac)를 선택하면 Finder 창이 열립니다. 선택적으로 유사한 프로세스를 사용하여 나머지 앱 애셋을 변환하고 테스트하여 개발 및 QA 시간을 절약할 수 있습니다. 나머지 앱 애셋을 변환한 경우 이 폴더를 개발과 공유할 수 있습니다.

10. 축하합니다

Android 앱을 빌드하는 데 필요한 Android 시스템 아이콘에 관해 알아보고, 자체 아이콘을 디자인하고, 아이콘 템플릿 리소스를 살펴보고, Android 스튜디오를 살펴보고 프로덕션을 위한 애셋을 미리 보고 변환하는 등 더 많은 작업을 수행했습니다.

궁금한 사항은 언제든지 Twitter의 @MaterialDesign으로 문의해 주세요.

youtube.com/MaterialDesign에서 더 많은 디자인 콘텐츠 및 튜토리얼을 기대해 주세요.