배경 | 앱 아이콘 모양의 파편화
먼저, 오늘자로 올라온 구글 플레이 인기 순위만 보더라도 정말 많은 어플들이 서로 다른 모양(텍스트형, 아이콘형, 네모난 배경, 라운드 배경, 동그란 배경 등)을 가지고 있는걸 볼 수 있습니다. 앱 들이 자유로운 아이콘을 사용할 수 있는 것 까진 좋았지만, 앱의 개성을 서로 뽐내기 위해 만들어진 아이콘이 실제 사용자의 폰에서 설치하고 나면 지저분하고 한 눈에 안들어오기도 합니다. (반대로 지저분해서 눈에 들어오는 경우도 있습니다)
역사 | 수 년 간의 노력들
구글도 초창기엔 다른 앱과 다름없이 기능을 이해시키기 위한 아이콘 위주로 만들다 보니 서로 다른 크기와 모양을 가진 아이콘을 사용했습니다. 2012년엔 앱 개발자가 직접 획일화를 해결해주길 바라면서 런처 개발이 가능해지면서 앱 리스트 화면이 깔끔해지기 시작했습니다. 그럼에도 불구하고 방황하는 개발자와 디자이너들을 위해 2014년 구글은 머티리얼 디자인 메뉴얼을 발표하자, 이 메뉴얼을 따라가는 앱들이 많아지면서 획일화 되기 시작했습니다.
어떤 앱은 아이콘 모서리에 New표시 또는 텍스트를 넣게 되는데, 이럴 경우엔 런처를 통해서 마스킹 처리가 될 경우, 위와 같이 많은 부분이 짤릴 수 있게 됩니다. (제 앱은 아닙지만 학습용 예시로 사용 되었습니다. 문제가 될시 말씀해주세요 삭제하겠습니다.)
Adaptive-Icon | 적응형 런처 아이콘의 등장
아이콘을 깔끔하게 관리하기 위해 안드로이드는 O (오레오, 8.0, API 26)버전 부터 어댑티브 아이콘이 추가되었습니다.
이 방식은 어떤 디바이스에서든 획일화된 아이콘 스타일을 가질 수 있도록 해주는 아이콘 스타일 입니다.
픽셀2와 같은 구글 레퍼런스 폰에서는 구글 픽셀 런처가 작동하고 있고 픽셀 런처에서는 위 사진에서처럼 다양한 어댑티브 아이콘을 제공하지 않고 왼쪽에서 2번째인 원형만 지원하고 있습니다. 시험삼아 설치해본 노바런처에서는 위와 같은 모양을 전부 지원하고 있습니다.
과거에 마스킹 처리한 런처를 사용하면 휴대폰 CPU 및 메모리 자원이 부족한 현상으로 인해 버벅거리곤 했는데 최근에는 자원이 넘치는 만큼 버벅거리는 불편함이 없어지게 되어서 공식적으로 지원하게 되지 않았나 합니다.
어댑티브 아이콘 원리
간단하게 말하자면 마스킹 처리해서 아이콘을 보여주는 형태 입니다. 배경 레이어(Background-Layer)와 포그라운드 레이어(Foreground-Layer)를 합한 레이어를 마스크 레이어(Mask-Layer)를 적용해서 보여주는 방식으로 구현되어 있습니다.
응용 | 어댑티브 아이콘 효과
레이어를 분리해 두었기 때문에 각 레이어를 별도로 조절하게 되면, 위와 같이 좌우 또는 상하 슬라이드에 따라서 반응하게 할 수 있고, 확대했다가 축소도 가능합니다. 이러한 시각적인 효과는 런처마다 다르게 지원되곤 합니다.
이외의 다른 응용 방법(Background Anchoring, Foreground-Masking, Light-Shadow)은 Yunkom님이 설명하신 게시물을 참고하는게 좋을 것 같습니다.
어댑티브 아이콘 적용 범위
특정 런처를 통해서 어댑티브 아이콘으로 모양을 변경하게 되면, 런처 아이콘 리스트 화면 뿐만 아니라, 알림창의 아이콘, 상단 퀵 설정창의 아이콘, 환경설정창의 아이콘까지도 변경이 가능합니다. (출처)
사이즈
기존(안드로이드 오레오 미만 버전) 런처 아이콘 크기는 48*48dp인 반면에,
안드로이드 오레오 부터는 어댑티브 아이콘을 지원하기 때문에, 어댑티브 아이콘에 사용하는 백그라운드 레이어와 포그라운드 레이어는 모두 108*108dp로 설정해야하며, 마스킹 되는 화면 영역은 최대 72*72dp, 최소 66*66dp로 설정합니다
SVG파일로 어댑티브 아이콘 만들기
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="810px" height="710px" viewBox="0 0 810 710" enable-background="new 0 0 810 710" xml:space="preserve">
<g>
<g>
<path fill="#0021D1" d="M235.371,514.771c-1.477-11.191-4.19-19.363-8.127-24.512c-5.912-6.958-15.646-10.439-29.188-10.439
c-13.548,0-22.903,2.877-28.076,8.622c-3.695,3.938-5.542,9.691-5.542,17.252c0,7.262,4.434,13.016,13.301,17.249
c5.417,3.026,16.007,6.511,31.773,10.437c26.597,6.665,45.441,13.925,56.523,21.791c19.21,13.017,28.818,32.387,28.818,58.104
c0,33.898-11.083,58.715-33.25,74.447c-16.012,11.495-35.346,17.248-58.002,17.248c-27.589,0-50.125-6.662-67.609-19.973
c-21.429-16.036-32.387-40.096-32.88-72.177h56.894c0,12.413,3.201,21.793,9.604,28.147c7.39,7.566,19.334,11.346,35.84,11.346
c12.311,0,21.667-3.325,28.075-9.986c4.924-5.141,7.39-11.044,7.39-17.704c0-8.172-4.683-14.675-14.041-19.52
c-5.667-2.726-16.624-6.197-32.879-10.439c-26.11-6.651-44.583-13.766-55.417-21.336c-18.472-13.007-27.709-32.376-27.709-58.103
c0-23.605,5.915-43.273,17.737-59.01c14.777-19.671,37.064-29.506,66.866-29.506c25.123,0,45.193,5.298,60.22,15.884
c20.192,14.231,31.275,38.288,33.25,72.178H235.371z"/>
<path fill="#0021D1" d="M433.998,704.969h-58.371l-75.365-278.26h49.999l54.554,208.812h1.479l56.024-208.812h47.416
L433.998,704.969z"/>
<path fill="#0021D1" d="M647.401,514.771c-1.479-11.191-4.19-19.363-8.126-24.512c-5.912-6.958-15.646-10.439-29.186-10.439
c-13.549,0-22.905,2.877-28.078,8.622c-3.695,3.938-5.541,9.691-5.541,17.252c0,7.262,4.431,13.016,13.299,17.249
c5.414,3.026,16.008,6.511,31.772,10.437c26.599,6.665,45.44,13.925,56.527,21.791c19.207,13.017,28.814,32.387,28.814,58.104
c0,33.898-11.083,58.715-33.251,74.447c-16.011,11.495-35.346,17.248-58.005,17.248c-27.584,0-50.123-6.662-67.608-19.973
c-21.427-16.036-32.388-40.096-32.88-72.177h56.895c0,12.413,3.2,21.793,9.606,28.147c7.393,7.566,19.334,11.346,35.838,11.346
c12.313,0,21.666-3.325,28.075-9.986c4.927-5.141,7.395-11.044,7.395-17.704c0-8.172-4.686-14.675-14.044-19.52
c-5.667-2.726-16.623-6.197-32.88-10.439c-26.107-6.651-44.583-13.766-55.416-21.336c-18.472-13.007-27.709-32.376-27.709-58.103
c0-23.605,5.913-43.273,17.732-59.01c14.779-19.671,37.068-29.506,66.87-29.506c25.12,0,45.194,5.298,60.22,15.884
c20.195,14.231,31.274,38.288,33.254,72.178H647.401z"/>
</g>
<path fill="#E60000" d="M768.005,204.013c-17.819,15.522-27.003,8.217-37.53-7.665c-10.53-15.881-18.803-26.131-32.571,0
c-13.772,26.129-22.714,50.13-34.391,0.709c-8.453-35.776-33.02-95.58-48.404,0c-21.247,132.012-28.277,33.717-30.979,0
c-2.698-33.716-30.241-210.402-50.76-0.305c-20.521,210.095-23.22,29.741-24.84,0.305c-1.621-29.434-31.765-342.154-52.021,0
c-17.018,287.49-25.921,46.739-28.082,0c-1.391-30.107-7.639-192.122-23.312-192.088c-15.672,0.034-22.133,161.438-23.552,192.086
c-2.155,46.737-10.602,289.73-28.079,0c-20.641-342.133-50.4-29.436-52.019,0c-1.62,29.434-4.321,209.788-24.84-0.307
c-20.522-210.097-47.652-33.374-50.763,0.307c-2.307,25.002-6.637,125.918-31.488-0.581c-19.19-97.696-38.781-40.299-47.894,0.581
c-7.997,35.879-17.619,42.705-35.896-0.711c-11.453-27.206-20.534-15.882-31.065,0c-10.53,15.881-19.71,23.188-37.53,7.669
c-17.82-15.522-36.992-2.678-36.992-2.678v17.484c0,0,14.402-14.272,32.4-0.715c18,13.557,30.241,10.704,36.722,5.71
c6.481-4.996,17.538-41.413,29.52-14.987c36.722,87.771,52.461,5.708,56.063-12.131c3.602-17.842,12.205-50.242,21.699,0
c36.724,172.686,46.805,92.764,57.605-0.713c10.8-93.479,16.558-67.077,23.039,0.713c32.4,300.413,46.8,123.448,56.162,0
c9.355-123.449,12.956-106.323,19.439,0.713c23.76,284.717,46.079,271.164,56.881,0.717c3.534-88.525,7.712-103.916,10.588-103.923
c2.877-0.007,6.898,17.47,10.353,103.928c10.801,270.445,33.121,284,56.882-0.719c6.48-107.035,10.081-124.162,19.44-0.71
c9.357,123.446,23.758,300.413,56.162,0c6.477-67.792,12.236-94.193,23.036-0.714c10.801,93.477,20.884,173.396,57.603,0.714
c9.499-50.245,18.854-17.843,22.453,0c3.602,17.837,18.588,99.897,55.31,12.128c11.984-26.426,23.041,9.992,29.521,14.985
c6.482,4.998,18.723,7.851,36.724-5.706c17.997-13.56,32.399,0.713,32.399,0.713V201.34
C804.996,201.34,785.828,188.493,768.005,204.013z"/>
</g>
</svg>
다양한 사이즈에서 깨지지 않는 모습을 제공하기 위해 어댑티브 아이콘으로 사용될 SVG파일을 준비합니다. 파일이 없다면 위의 코드를 복사하여 텍스트 내용으로 붙여넣기 하시고 svg 확장자를 가진 파일로 저장하시면 됩니다.
SVG는 벡터로 되어 있어서 늘리거나 줄여도 상관없기 때문에, 캔버스 사이즈를 예시처럼 810px이 아니여도 됩니다.
안드로이드 스튜디오에서 리소스(res) 폴더에서 마우스 오른쪽 [New] ▸ [Image Asset]을 클릭합니다.
어댑티브 아이콘을 만들기 위해서는 Icon Type을 'Launcher Icons (Adaptive and Legacy)'로 선택합니다.
저는 간단히 만들기 위해 포그라운드 레이어 [ForegroundLayer - Source Asset - Image - Path]는 미리 준비한 SVG파일을 선택했고, 배경 레이어 [BackgroundLayer - Source Asset - Color]는 흰색 칼라로 선택하였습니다.
포그라운드 레이어의 사이즈를 바꾸고 싶을때는 SVG파일을 수정하지 않고 리사이즈 [Scaling - Resize] 기능을 통해서 사이즈를 조절 할 수 있습니다
Next 버튼을 누르면 위 화면처럼 파일을 미리보거나 저장될 위치와 사이즈를 미리 볼 수 있습니다. 저는 기존에 파일이 있기 때문에 저장할 위치의 파일 이름이 모두 빨간색으로 뜨고 있습니다. Finish 버튼을 눌러 마무리 합니다.
친절하게도 구글 플레이(마켓)의 대표 웹용 아이콘으로 사용되는 512*512 사이즈를 만들어주고, 포그라운드와 백그라운드도 분리해서 리소스를 생성해줍니다. 이외에도 모든 디바이스에서 적용되는 anydpi 폴더와 각 해상도 별 런처아이콘을 담는 mipmap 폴더에도 원형 아이콘과 라운드형 아이콘 파일을 생성됩니다.
더욱 자세한 옵션을 알고 싶으시면 구글에서 만든 문서에서 확인할 수 있습니다.
어댑티브 아이콘 파일 (ic_launcher.xml, ic_launcher_round.xml)
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@color/ic_launcher_background"/>
<foreground android:drawable="@drawable/ic_launcher_foreground"/>
</adaptive-icon>파일의 구조는 adaptive-icon 태그 안에 Background, Foreground 태그로 이뤄져 있습니다.
AndroidStudio의 ImageAsset을 통해 만드는 예시에서 Background를 칼라로 설정했기 때문에 '@color/ ~ '로 drawable값이 지정되어 있고, Foreground를 SVG이미지로 했기 때문에 '@drawable/ ~'로 drawable값이 지정되어 있는걸 알 수 있습니다.
아이콘 파일 적용 (AndroidManifest.xml)
<application
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round">
...
</application>어댑티브 아이콘은 다른 아이콘 적용과 다르지 않게 AndroidManifest.xml파일의 application의 android:icon (또는 android:roundIcon) 속성으로 지정해 주면 됩니다.
android:roundIcon 속성은 API 25(Android 7.1, 누가) 부터 지원한 아이콘 속성입니다. 어댑티브 아이콘을 지원하는 마당에 필요가 없을지 모르지만 하위 호환을 위해서 android:roundIcon 속성도 적용하면 좋다고 생각합니다.
XML로 변경된 SVG 확인
SVG파일을 가지고 안드로이드 스튜디오의 Image Asset 기능을 통해서 어댑티브 아이콘을 만들게 되면 SVG가 안드로이드에서 읽을 수 있는 Vector 파일로 변경이 됩니다. 엄청 비슷하지만 태그명과 태그의 파라매터 명이 다르곤 합니다. (svg▸vector, g▸group)
주의할 점은 svg파일에 fill-rule:evenodd 기능이 안드로이드에서 지원되지 않기 때문에 사용되었는지 확인이 필요합니다.
이와 관련된 문서는 Racehl Kim 님께서 작성하신 게시물을 읽어봐주세요.
마치며
앱을 사용하는데 있어서 아름다운 표준이 나온거 같아 기쁩니다. 많은 앱들이 하루빨리 어댑티브 아이콘을 사용해서 통일화된 모습으로 런처 화면을 채워줬으면 합니다. 아이콘에 2개의 레이어를 준 것 만으로도 다양한 경험을 주는데, 앞으로는 어떠한 아이콘 시스템이 나올지 기대가 많이 됩니다.
'스터디 > Android+Java' 카테고리의 다른 글
| 안드로이드 APK 자동 네이밍 (0) | 2019.12.09 |
|---|---|
| 예전 안드로이드 개발땐 이런게 필요했습니다! ㅠㅠ (0) | 2018.08.20 |
| Android ListView CheckBox로 버그 유발될때 해결 방법 - ViewHolder 사용 (2012.09.26) (0) | 2017.10.07 |
| Android Drawable, TextColor에 따른 Selector 사용법 (2012.09.25) (0) | 2017.10.07 |
| Android ListView Row Color 문제 (2012.09.25) (0) | 2017.10.07 |
댓글