본문 바로가기

Programming/React Native

[React Native] iOS, Android App icon 적용하기

 

준비

  • 1024X1024px 사이즈의 앱 아이콘에 들어갈 기본 이미지

급하게 만들어온 logo.png

 


 

우선 xcode와 android studio가 요구하는 파일을 확인 해 봅시다.

 

iOS (XCode)

프로젝트 폴더의 Images.xcassets을 누르면 비어있는 AppIcon이 보입니다. 클릭 해 주세요.

 

Images.xcassets/AppIcon
AppIcon

AppIcon을 확인해 보면 iPhone의 경우 알림을 보낼 때 사용되는 것, Settings에서 사용하는 것 등 상황에 따라 요구하는 이미지의 크기가 다릅니다. 

 

이번에는 Android를 살펴보겠습니다.

 

Android (Android Studio)

안드로이드의 경우는 프로그램 자체에서 적용하는 것이 아닌, 폴더의 이미지만 바꿔주면 됩니다.

android/app/src/main/res 에 들어가면 mipmap 폴더들이 보입니다.

android/app/src/main/res

해당 폴더에 들어가면 각각의 해상도가 요구하는 사이즈에 맞춰 round형식과 squere형식의 두 가지 이미지를 넣어주어야 합니다.

 

회사와 프로젝트 팀에 디자이너가 있다면 각각의 파일을 요구하는 방법도 있겠지만,

1024px의 기본 사이즈만 있으면 아래의 웹 사이트를 통해 효율적으로 이미지 변환이 가능합니다.

 


App Icon Generator

 

App Icon Generator

Generate icons and images for mobile apps, android and iOS. No need to upload or download. Works on your browser

appicon.co

App Icon Generator에서는 iOS와 macOS가 요구하는 사이즈를 얻을 수 있습니다.

App Icon Generator / 이미지를 넣고 필요한 형식을 선택 후 이름을 지정하고 하단의 generate 버튼을 누르면 다운로드 됩니다.
자동으로 정리되어 저장된 이미지들

해당 이미지들을 각각의 사이즈에 맞춰 Xcode의 Images.xcassets/AppIcon에 넣어줍니다.

 

 

Android Asset Studio Launcher icon generator

 

Android Asset Studio - Launcher icon generator

 

romannurik.github.io

Android Asset Studio Launcher icon generator에서는 Android가 요구하는 형식(round, square)의 이미지를 얻을 수 있습니다.

Android Asset Studio Launcher icon generator / 이미지 삽입 후, Shape에서 형식을 선택. 파일 이름을 지정 후 오른쪽 상단의 파란색 버튼을 누르면 다운로드 됩니다.

Android에서는 round 형식과 square 형식을 요구하므로 두 가지 모두 각각 저장해주셔야 합니다.

round 형식의 아이콘과 square 형식의 아이콘

해당 파일들을 해상도에 맞춰 android/app/src/main/res의 mipmap폴더에 넣어줍니다.

 

그리고 시뮬레이션을 돌려보시면, 바뀐 아이콘을 확인 할 수 있습니다.

 

 

'Programming > React Native' 카테고리의 다른 글

[React Native] Single & Multi-select Flatlist  (0) 2021.02.22