안드로이드 앱 아이콘 크기 - andeuloideu aeb aikon keugi

모바일 서비스를 런칭하기 위해서는 애플 앱스토어와 안드로이드 마켓에 업로드하는 작업을 해야합니다. iOS와 안드로이드는 각각 요구하는 규격이 다릅니다. 안드로이드는 [dpi] 사이즈를 iOS는 [1@,2@,3@]사이즈를 요구하는데요. 스토어에 업로드하기 위해서는 디자이너가 어떠한 사이즈로 작업해서 넘겨줘야하는지 살펴보려 합니다.

안드로이드 앱 아이콘 크기 - andeuloideu aeb aikon keugi
iOS 앱스토어

먼저 모바일 배경화면에 깔리는 아이콘입니다. 저는 개발자와 원활한 소통을 위해 런처아이콘이라고 지칭을 하였습니다. 상황에 따라 다양하게 부르는것 같습니다. 앱 아이콘, 모바일 아이콘, 런처아이콘 등등.. 

먼저 안드로이드 픽셀에 대한 설명과 iOS 앱 아이콘 지침입니다. iOS같은 경우엔 스포트라이트, 설정 메뉴에서 작은 아이콘이 등장하는데 작은 아이콘들의 사이즈도 고려해야 합니다.

안드로이드 앱 아이콘 크기 - andeuloideu aeb aikon keugi
https://developer.android.com/training/multiscreen/screendensities?hl=ko#java
안드로이드 앱 아이콘 크기 - andeuloideu aeb aikon keugi
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/
그래서.. 어떤 사이즈로 작업해야 되는데..?
안드로이드 앱 아이콘 크기 - andeuloideu aeb aikon keugi
아이콘을 쉽게 만들어주는 편리한 툴이 있습니다. 기술 만세!
https://apetools.webprofusion.com/#/

툴의 존재를 몰랐을 때는 개발자가 필요한 아이콘 사이즈를 엑셀표로 정리하여 저에게 보내준적이 있었는데요, 저는 그 엑셀표에 하나씩 체크해가면서 사이즈별로 만들어 파일 이름을 통일하고 한번 더 확인해보고.. 했던 경험이 있었는데 이젠 그럴 필요가 없습니다! 아이콘을 만들어주는 편리한 툴이 있습니다!

안드로이드 앱 아이콘 크기 - andeuloideu aeb aikon keugi
1024x1024를 기억합니다.

1024x1024으로 PNG으로 이미지를 만들어 업로드한 후 iOS와 안드로이드에 체크하여 파일을 다운받습니다.

안드로이드 앱 아이콘 크기 - andeuloideu aeb aikon keugi
안드로이드 앱 아이콘 크기 - andeuloideu aeb aikon keugi

안드로이드, iOS 런처아이콘 사이즈

그러면 이렇게 손쉽게 런처아이콘을 만들어 줍니다. 그리고 압축된 폴더를 개발자에게 넘겨줍니다. (디자이너 칼퇴 가능)

잠깐! 근데 안드로이드의 어댑티브 아이콘은 뭐지?

2019년에 안드로이드 아이콘 규격이 바뀌었습니다. 기존 자유형식의 아이콘의 크기를 75%를 줄여 정해진 규격안에 가둬버리는 업데이트를 진행하였습니다.

안드로이드 앱 아이콘 크기 - andeuloideu aeb aikon keugi
https://developer.android.com/google-play/resources/icon-design-specifications?hl=ko
안드로이드 앱 아이콘 크기 - andeuloideu aeb aikon keugi
플레이 스토어 아이콘만 다르네?
안드로이드 앱 아이콘 크기 - andeuloideu aeb aikon keugi

안드로이드의 런처아이콘들을 살펴보면 기존형식은 Play 스토어 아이콘처럼 자유로운 아이콘의 형식이었는데요. 앞으로 더욱 일관되고 깔끔한 디자인을 위해 구글에서는 아이콘 규격을 변경합니다. 마치 iOS의 라운디드 된 네모네모 아이콘처럼 전부 통일하도록 변경하겠다는 건데요. 

안드로이드 앱 아이콘 크기 - andeuloideu aeb aikon keugi
https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive?hl=ko

어댑티브 아이콘은 애니메이션 시각효과를 동반합니다. 하지만 낮은 버전에서는 움직이는 시각효과를 볼 수 없다고 합니다. 디자인 작업을 할 때는 최신 버전보다는 최저 버전에 맞춰서 작업을 하기 때문에 어댑티브 아이콘을 고려해야하느냐?에 대해서는 충분히 팀내에서 상의를 해봐야하는 상황입니다. (어댑티브 아이콘에 대해서 물어봤더니 개발자가 귀찮아합니다) 저는 항상 최저 버전에 맞춰서 작업을 해왔기 때문에 어댑티브 아이콘은 추후에 진행해보도록 하겠습니다.