Android Notification의 Icon 만들기 (with One Signal)

Notifications

앱이 실행 중이지 않더라도 유저에게 간단한 정보를 제공할 수 있는 기능. 보통 '푸시'라고 부른다. 
보통 시기적절하게 정보를 제공하는데 효과적이고 유저에게 아래와 같이 보여줄 수 있다.

---

- 스테이터스바에 아이콘으로 보여주기
- 소리나 진동으로 보여주기
- 디바이스 LED 깜빡이기
- 현재 스크린에서 보여주기 (=헤드업 알림, Android 5.0부터)
- 락스크린에서 보여주기 (Android 5.0부터)
- 런처 아이콘 위에 색상 배지로 알림 표시 (Android 8.0부터)

---

 

 

 

Notification Elements

---

1. 작은 아이콘 : 필수 구성요소
2. 앱 이름 : 시스템에서 제공
3. 타임스탬프 : 시스템에서 제공, 재정의하거나 숨길 수 있다.
4. 큰 아이콘 : 선택사항 (일반적으로 연락처 사진에만 사용되며 앱 아이콘에 사용하지 않음)
5. 제목 : 선택사항
6. 텍스트 : 선택사항

---

제작해야할 푸시 아이콘은 Small icon과 Large icon로 2가지다. 이 두 가지는 용도가 다르기 때문에 조금 고민해서 만들 필요가 있다. 게다가 OS 별로 푸시의 모양새가 조금씩 달라서 헷갈렸다. 아래는 One Signal에서 제공하는 가이드라인이다. 그림이 복잡하지만 구글 예시와 함께 살펴보자.

Small Icon

필수 구성요소로 Status bar와 Notification에 같은 리소스가 사용된다. 기본적으로 SDK는 자동으로 흰색 벨 아이콘 또는 앱의 런처 아이콘을 사용하며 올바른 아이콘이 아닐 시, 상태 표시 줄에 종 모양이나 흰색 아이콘으로 표시될 가능성이 높다.

---

Android 7.0 (Nougat)

• 상태 표시 줄에 흰색 아이콘으로 표시됩니다.

 

Android 5.0, 6.0

• 상태 표시 줄에 흰색 아이콘으로 표시됩니다.
• 확장된 알림을 사용하고 큰 아이콘이 지정되지 않은 경우 왼쪽의 회색 배경에 표시됩니다.
• 확장된 알림으로 큰 아이콘의 경우 큰 아이콘 옆에 작은 아이콘으로 설정됩니다.

 

Android 4.0

• 상태 표시 줄에 회색 아이콘으로 표시됩니다.
• 확장된 알림을 사용하고 큰 아이콘이 지정되지 않은 경우 왼쪽에 흰색 아이콘으로 표시됩니다.
• 확장된 알림으로 큰 아이콘의 경우 오른쪽으로 이동합니다.

---

 

Large Icon

큰 아이콘은 필수요소가 아닌 선택사항이다. Android 3.0 이상에서 알림을 강화하기 위해 이미지를 추가할 수 있다. 큰 아이콘은 브랜딩을 위한 것이 아니기 때문에 로고를 중복해서 사용하면 안 된다. 구글 머테리얼은 아래와 같은 경우에 사용하라고  가이드하고 있다.

• 메시지를 보내는 사람의 이미지와 같은 다른 사람의 커뮤니케이션
• 사용자가 구독하는 YouTube 채널의 로고와 같이 알림을 보내는 앱과 다른 경우 콘텐츠 소스
• 운전 경로에 대한 화살표 기호와 같이 알림에 대한 의미있는 기호

 

 

작은 아이콘과 큰 아이콘은 Lollipop (5.0), Marshmallow (6.0)에서 겹쳐지는 모양새를 가지므로 이 두 아이콘이  동일한 디자인을 가지면,  곤란한 일이 발생한다. Nouget(7.0)에서는 큰 아이콘은 오른쪽으로 이동한다.

 

 

 

 

Notification Icon Design guide

가이드는 대강 알아보았으니, 아이콘을 제작하는 방법에 대해 알아보자. small Icon과 Large 아이콘은 제작 방식이 다르다.

Small Icon

Small Icon은 투명한 배경에 흰색 이미지가 올라간 png파일 이어야 한다. 이미지에 투명한 부분이 없다면 흰색 사각형으로 나온다. 나같은 경우엔 이미지를 반전시켜 백그라운드를 흰색으로, 로고 영역은 투명 영역으로 주었다. 리소스는 Android Asset Studio를 통해 뽑는 걸 권장하고 있다.

mdpi	24x24
hdpi	36x36
xhdpi	48x48
xxhdpi	72x72
xxxhdpi	96x96

 

Large Icon

사람을 표시 할 때는 원형이어야하지만 다른 모든 경우에는 정사각형으로 만든다. 리소스는 ic_pushbots_licon.png에 res/drawable-xxxhdpi 폴더에 위치시킨다. 브랜딩을 위한 것이 아니므로 로고를 사용하지 않도록 하며, Android 7.0에서는 Large icon과 small icon이 겹쳐 올라가기 때문에 디자인이 중복되지 않도록 한다.

xxxhdpi

256x256

 

---

+ Accent Color

푸시 아이콘은 개발자가 단색의 컬러를 입힐 수 있다. (단, Status bar에 노출되는 아이콘은 컬러를 커스텀할 수없다. 무조건 흰색)
One Signal에서는 아래와 같은 코드를 개발자가 삽입하면, 관리자가 옵션에서 컬러를 세팅할 수 있다.

<!-- Example: Sets all OneSignal notification's accent color to Green by default.  -->
<!-- Color format is in ARGB. -->
<meta-data android:name="com.onesignal.NotificationAccentColor.DEFAULT" android:value="FF00FF00" />

안드로이드에서는 'setColor'라는 속성을 이용해 컬러를 입힐 수 있다. 관련 stackoverflow

 

 

 

 

---

 

ⓘ 참고 자료

메터리얼 가이드

• material.io/design/platform-guidance/android-notifications.html#style
• intercom.help/pushbots/en/articles/499272-notification-icons-android
• developer.android.com/guide/topics/ui/notifiers/notifications.html?hl=kodeveloper.android.com/guide/topics/ui/notifiers/notifications.html?hl=ko

알림 개요  |  Android 개발자  |  Android Developers

Notification icons - Android

Material Design

 

One Signal Guide

• documentation.onesignal.com/docs/customize-notification-icons

Android Notification Icons

 

Pushbot

• intercom.help/pushbots/en/articles/499272-notification-icons-android

Notification icons - Android