본문 바로가기

react-native

[react-native] 앱 아이콘 및 스플래시 이미지 넣기 1

react native에서 앱 아이콘과 스플래시 이미지를 넣는 법을 살펴보겠습니다.

 

 

앱 아이콘


앱 아이콘을 넣기 위해서는 이미지 파일이 필요합니다. 1024 x 1024 크기의 png파일이 필요합니다.

저는 1024 x 1024 png 무료 이미지를 다운로드하여서 진행하겠습니다.

 

앱 아이콘 이미지

 

이후 앱 아이콘 이미지를 디바이스 크기에 따라 변경해주는 사이트가 있습니다.

https://appicon.co/

 

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

 

위 사이트로 이동하여 아이콘 이미지를 만드시면 됩니다.

이미지를 올려주시고 Generate를 누르시면 안드로이드 앱 아이콘과 ios 앱 아이콘이 생성된 것을 확인할 수 있습니다.

 

압축파일을 풀어주시고 폴더를 확인하시면 android용 앱 아이콘 'android'와 ios용 앱 아이콘 'Assets.xcassets'와 구글 플레이와 앱스토어에서 보일 아이콘들을 확인할 수 있습니다.

 

 

 

android파일을 확인하게 되면 

 

안드로이드 내의 파일과 동일하게 들어가 있습니다.

파일들을 그대로 변경하시면 됩니다.

 

안드로이드 빌드를 실행해 보시면 됩니다.

react-native run-android

 

변경된 것을 확인할 수 있습니다.

 

이제 ios의 앱 아이콘을 변경해 보겠습니다.

 

먼저, xcode를 실행시키시면 됩니다.

 

이후 다운로드하신 AppIcons에서 'Assets.xcassets'를 넣어 주시면 됩니다.

 

위의 그림과 같이 그대로 넣어주시면 됩니다.

 

Finish 버튼을 누른 후 확인해보겠습니다.

react-native run-ios

 

변경된 것을 확인하실 수 있습니다.

 

스플래시 이미지 넣는 법은 다음 포스트에서 확인하시면 되겠습니다.

스플래시이미지