Adaptive Icons
Adaptive launcher icons
Adaptive Icons
모든 앱 아이콘의 크기와 모양을 동일하게 하여 홈 화면을 보다 일관성 있게 만들어 주는 Adaptive icons가 안드로이드 8.0 (안드로이드 O)에 새로 나왔습니다.
#01 Adaptive icons
#02 https://dribbble.com/shots/3616777-Adaptive-Icons-for-Android-O현재 제가 확인한 바로는 원형(circle), 정사각형(square), 모서리가 둥근 정사각형(rounded square, squircle), 눈물방울(teardrop) 형태로 앱 아이콘 형태를 통일시킬 수 있습니다.
Why Adaptive icons?
#03 Google Play l App Excellence Program 발표올 초에 있었던 Google Play | App Excellence Program 발표에서는 동일한 형태의 천편일률적인 아이콘보다는 배경에 투명도를 줘서 전부 채우지 않고 고유의 특징을 가지는 '안드로이드'스러운 앱 아이콘들을 이용하길 권장했었습니다.
그렇다면 왜 '안드로이드'스럽지 않은 Adaptive icons이 나왔을까요?
결론부터 말하면 다양한 형태로 앱 아이콘을 모양과 크기를 변형하는 과정에서 의도하지 않은 결과물(앱 아이콘)을 방지 위해서입니다.
#04 OEM launcher screenOEM launcher screensGalaxy Note5의 홈 화면입니다.
Adaptive Icons이 적용되지 않은 안드로이드 7.0 (N) OS가 탑재되었지만, 기기 자체적으로 기존 앱 아이콘을 모서리가 둥근 정사각형(Squircle) 형태로 바꿔서 보여주고 있습니다.
이 외에도 여러 기기에서 앱 아이콘 형태를 강제로 바꿔서 보여주고 있는데, 대부분 앱 아이콘은 문제가 없지만 일부 앱 아이콘은 문제가 발생할 수 있습니다.
예를 들어 배달통의 경우엔 아이콘 우측 상단에 No.1이라는 이미지가 있습니다.
하지만 Galaxy Note5에서는 1이 잘려서 No만 보이고 있습니다.
배달계의 No.1 임을 강조하고 싶지만 보이지 않으니 이용자들은 No.2인지 No.3인지 모르게 됩니다.
이를 방지하기 위해 안드로이드 8.0에서 Adaptive icons가 나오게 되었습니다.
Fixing Android Icons
사실 Adaptive icons가 나오기 이전부터 구글에서는 위에서 설명한 앱 형태 변형으로 인한 문제를 해결하려는 시도가 있었지만 해결하지 못했습니다.
#01 Material Design
#05 App Icon Material Design Guide앱 아이콘의 일관성을 유지하고 명확한 그래픽 요소의 위치 지정을 앱 아이콘 Material 디자인 가이드가 있습니다.
하지만 말 그대로 가이드이기 때문에 강제성이 없습니다.
#02 Round icon
#06 Round Icon안드로이드 7.1 (N)에서 Round Icon이 생겼습니다.
직접 Round Icon을 만들거나, Image Asset Studio를 통해 쉽게 만들어서 AndroidManifest.xml에 지정만 해주면 됩니다. 그러면 기기에 따라 Round Icon이나 그냥 Icon 둘 중에 하나를 선택하여 표시하게 됩니다.
이 또한 강제성이 없고, 기기에 따라 상이함으로 앱 아이콘 변형 문제를 완전히 해결하지 못했습니다.
Adaptive icons
#01 Simple formula
#07 A Simple formula for Adaptive icons안드로이드가 Adaptive icons을 표시하는 방법(공식)은 간단합니다.
개발자가 background 이미지 또는 색상과 foreground 이미지만 제공하면, 내부적으로(시스템, 기기, OEM) 나타내고자 하는 아이콘 형태의 마스크를 적용하여 Adaptive icons을 표시하게 됩니다.
개발자 : background 이미지 or 색상, foreground 이미지
시스템, 기기, OEM : mask, Adaptive icons
#02 Size
#08 Background & Foreground images해상도 별로 동일한 사이즈의 background 이미지와 foreground 이미지가 필요합니다.
- mdpi (중간 밀도) : 108 * 108 (pixel)
- hdpi (고밀도) : 162 * 162(pixel)
- xhdpi (초고밀도) : 216 * 216(pixel)
- xxhdpi (초초 고밀도) : 324 * 324(pixel)
- xxxhdpi (초초 초고밀도) : 432 * 432(pixel)
#03 Anatomy of adaptive icons
#09 Background & Foreground image sizebackground, foreground 이미지 모두 가로, 세로 108dp입니다.
그리고 상하좌우 18dp 여백을 제외한 가로, 세로 72dp 중앙 부분만 실제로 마스크가 적용되어 이용자에게 표시가 되는 영역입니다.
하지만 일부 기기에서는 중앙 66dp 영역에 마스크를 적용할 수 도 있기 때문에 안전하게 Adaptive icons을 적용하기 위해서는 실제 표시되는 Foreground의 이미지 영역을 66dp로 잡는 게 좋습니다.
그리고 상하좌우 18dp 여백은 위에서 보듯이 Adaptive icons이 나타낼 수 있는 여러 시각적 효과를 위해 필요합니다.
Add Adaptive icons
#01 Install Android Studio 3.0
안드로이드 8.0 (O)에서 동작하는 Adaptive icons를 적용하기 위해서는 우선 Android Studio 3.0을 설치해야 합니다.
#02 Update build version
빌드 버전을 안드로이드 8.0과 Android Studio 3.0에 맞춰서 업데이트해야 합니다.
#03 Configure Image Asset
#10 Configure Image Asset직접 Adaptive Icons관련 파일들을 추가해도 괜찮지만, Android Studio 3.0에서 제공하는 Image Asset 툴을 이용하여 쉽게 추가할 수 있습니다.
#11 Configure Image Asset - Background Layerbackground에는 색상(Color)나 이미지 파일을 설정할 수 있습니다.
#12 Configure Image Asset - Foreground Layerforeground에는 이미지 파일이나 Clip Art, Text를 설정할 수 있습니다.
#04 New Adaptive icons
#13 New Adaptive iconsImage Asset을 통해 Adaptive icons을 추가하면 자동으로 해당 파일들을 추가해 줍니다.
기존 legacy icon 파일들(ic_launcher.png, ic_launcher_round.png)은 건드리지 않고, foreground 이미지 파일들(ic_launcher_foreground.png)과 background 이미지 파일들(ic_launcher_background.png)을 추가해 줍니다.
그리고 foreground과 background를 설정해 주는 'res/mipmap-anydpi/ic_launcher.xml' 파일을 추가해 줍니다.
#14 res/mipmap-anydpi/ic_launcher.xmlShow Adaptive Icons
#15 Android 8.0 Homescreen안드로이드 8.0 홈 화면입니다.
현재 Adaptive icons가 적용되지 않은 기본(default) Round icon들이 표시되고 있습니다.
Pixel Launcher를 쓰는 기기나 에뮬레이터에서는 아래와 같이 Adaptive icons의 형태를 직접 고를 수 있습니다.
Google Launcher는 현재 'Change icon shape' 기능을 지원하고 있지 않습니다.
따라서 기기에 따라 해당 기능 없이, 지정된 형태로 변형해주고 있습니다.
만약 Pixel Launcher에서도 안 보인다면, 개발자 옵션은 활성화시키고 해보시기 바랍니다.
#16 Change icon shape앱 아이콘의 형태를 사각형(Square)으로 바꾸면 아래와 같이 Adaptive Icons이 적용된 경우엔 사각형으로 앱 아이콘 형태가 바뀌지만, Adaptive Icons가 적용되지 않은 경우엔 아무런 변화가 없습니다.
#17 Adaptive Icons Home screenAdaptive Icons을 적용하면 장단점이 있습니다.
장점
- 시스템, 기기 OEM에서 앱 아이콘을 변형했을 때, 의도한 대로 보일 수 있음.
- 일관된 앱 아이콘 형태로 홈 화면이 깔끔해짐.
단점
- 디자인, 개발 공수가 들어감.
- Adaptive Icons 이미지 파일 추가로 인해 앱 용량 증가.
- 특유의 앱 아이콘 특징이나 컨셉이 사라짐.
특히 특유의 앱 아이콘의 특징이나 컨셉이 사라진다는 점에서 많은 개발사들이 Adaptive Icons를 적용하기 꺼려하고 있습니다.
Adaptive Icons는 필수가 아닌 권장사항이기 때문에 상황에 맞게 적용 여부를 결정하면 될 거 같습니다.
============== 11월 24일 추가 ==============
구글 내부 직원과 Adaptive icon에 대해 얘기해보니 마켓에 노출되는 아이콘이 개성이 있어야 최초 다운로드로 이어가기 더 유리하기 때문에, 홈화면에 동일하게 보이는 Adaptive icon과 별개로 개성있는 아이콘을 권장하고 있습니다.
