안드로이드 적응형 앱아이콘 만들기 (Adaptive icon)

Adaptive icon

예전 안드로이드에서는 iOS와는 다르게 불규칙한 아웃라인의 앱 아이콘 형태를 사용했었다. 하지만 각 핸드폰 제조사들이 각자 통일된 앱 아이콘 모양새를 쓰기 시작하면서 아이콘이 잘려 보이는 등 제작자가 의도하지 않은 모양새가 나오기 시작했다. 구글은 이것을 해결하기 위해 Android 8.0(Oreo)부터 적응형 아이콘(Adaptive icon)을 도입했다. 

디바이스들마다 사용되는 모양새는 위와 같이 크게 5가지로 구분할 수 있다.
각 모양대로 시스템에서 마스크를 씌우기 때문에 제작하는 입장에서는 가이드에 맞춘 이미지만 1종으로 제작하면 된다.

 

---

 

Guideline

구글 디자인 블로그

개발자에게 전달할 리소스는 아래와 같다.

- Background image (108dp*108dp) : 불투명 이미지
- Foreground image (108dp*108dp) : 메인 그래픽 외에는 투명 영역
- Legacy image : 뒷 부분에서 설명.

이미지로 보면 파란색 Background 이미지에 안드로이드 이미지의 Foreground 이미지를 얹는 형식이다.
그 뒤에 앱 아이콘 모양대로 마스킹을 한다. 

 

 

 

구글 디자인 블로그

Background와 Foreground 이미지로 분리하여 뽑는 이유는 인터랙션을 적용하기 위함도 있다. 두 장의 이미지 레이어를 이용하여 시차를 이용한 안드로이드에서 제공하는 인터랙션을 만들 수 있다. 인터랙션을 세팅하지 않는다면 정적인 아이콘 이미지로만 보인다.

 

 

Resource

Background image

108dp * 108dp 아트보드에 백그라운드를 깔아 추출한다.

Foregroud image

메인 그래픽을 66dp * 66dp의 안전 영역 안에 배치하여 108dp * 108dp로 추출한다. 그래야 어떤 앱 아이콘 모양이 마스킹되더라도 메인 그래픽이 잘리는 일을 막을 수 있다. 일반적으로 메인그래픽을 배치하고 배경은 투명이 될 것이다.

위 2종의 이미지는 각 해상도 별로 개발자에게 전달해야하는데, 그 해상도는 아래와 같다.

- mdpi : 108px * 108px
- hdpi : 162px * 162px
- xhdpi : 216px * 216px
- xxhdpi : 324px * 324px
- xxxhdpi : 432px * 432px

 

 

Legacy icon

적응형 아이콘을 대응하지 않을 경우

적응형 디자인이 없을 당시 사용하던 아이콘 형식을 레거시 아이콘이라고 부른다.
적응형 아이콘은 Android 8.0(Oreo)부터 지원하기 때문에 그 이하 버전을 위한 레거시 아이콘이 필요하다. 그러므로 레거시 아이콘과 적응형 아이콘을 따로 전달하기! 

만약 적응형은 만들지 않고 기존 레거시 아이콘만 사용된다면, 안들로이드 8.0이상 부터 위 이미지처럼 나온다. 레거시 아이콘은 키라인 그리드 크기의 75%로 축소되어 들어간다. (512 * 0.75 = 384px). 백그라운드는 시스템이 자동으로 흰색으로 채운다. 원하는 아이콘은 이런 모습이 아닐테니 꼭 적응형 아이콘도 대응하도록 하자!

 

 

---

 

최종 정리

제작해야할 리소스
- Background image (108dp*108dp)
- Foreground image (108dp*108dp)
- Legacy image

해상도 대응
- mdpi : 108px * 108px
- hdpi : 162px * 162px
- xhdpi : 216px * 216px
- xxhdpi : 324px * 324px
- xxxhdpi : 432px * 432px

 

구글 공식 가이드라인 : https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive?authuser=1
구글 디자인 블로그 : https://medium.com/google-design/designing-adaptive-icons-515af294c783
참조한 브런치글 : https://brunch.co.kr/@oemilk/98