RE:BORN Frontend - React Native App Icon

안녕하세요 오랜만입니다.....

벌써 4학년 1학기가 끝나갑니다....

 

REBORN 프로젝트를 4학년 1학기에도 이어서 하고 있는 와중에

앱 아이콘 변경하는 방법을 정리해야지 생각만하다가 정리를 안 했다는 사실을 깨닫고

정리해봅니다 :D

(사실 지금 바꿔야 하는 시기라서 변경하면서 겸사 겸사 씁니다)

 

아 근데 왜 산학프로젝트에 쓰냐고요?

(제 맘입니 - )

프로젝트X 1 카테고리에는 리뉴얼하면서 어떻게 달라졌는지 이전 프로젝트와 비교해보는 글을 적어보려고 합니다.

그래서 여기에 적습니다.

 

앱 아이콘을 바꾸기 위해서는 변경하고자 하는 앱 아이콘 이미지를 사이즈 별로 추출해 주어야 합니다.

(네 겁나 귀찮 - )

 

하지만 우리에게는 generator 사이트가 있습니다! 이를 활용해서 앱 아이콘 이미지를 준비해봅시다.

아 참, 저는 Window 사용자이기 때문에 Mac은.. 음.. 모.. 몰라요!

 

먼저, Android Asset Studio 링크 접속 후 이미지를 사이즈 별로 추출합니다.
https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=1&foreground.space.pad=0&foreColor=rgba(96%2C%20125%2C%20139%2C%200)&backColor=rgb(255%2C%20255%2C%20255)&crop=0&backgroundShape=circle&effects=none&name=ic_launcher_round 

Android Asset Studio - Launcher icon generator

둥근 버전과, 네모난 버전 둘 다 추출해 주시면 되는데요,

둥근 버전 Name:  ic_launcher_round / 네모난 버전 Name: ic_launcher 로 설정해 주세요.

Foreground에 Image를 눌러 원하는 이미지를 첨부할 수 있고, Padding도 줄 수 있습니다.

**Image를 첨부하실 때는 1024 * 1024 사이즈의 Image를 첨부하시는 것을 권장드립니다.

 

zip파일로 다운받으시면 다음과 같이 여러 이미지들이 만들어질텐데,

이제 react native로 가서 android/app/src/main/res 안에 있는 이미지들을 폴더 이름, 이미지 이름과 매칭 시켜가면서 바꿔주면 끝납니다.

**아래에는 참고용으로 바꿔야 하는 res/ 디렉토리 내 mipmap- 폴더 구조와 ic_launcher 아이콘 파일들을 정리하였습니다.

res/
├── mipmap-xxxhdpi/
│   ├── ic_launcher.png
│   └── ic_launcher_round.png
├── mipmap-xxhdpi/
│   ├── ic_launcher.png
│   └── ic_launcher_round.png
├── mipmap-xhdpi/
│   ├── ic_launcher.png
│   └── ic_launcher_round.png
├── mipmap-hdpi/
│   ├── ic_launcher.png
│   └── ic_launcher_round.png
├── mipmap-mdpi/
│   ├── ic_launcher.png
│   └── ic_launcher_round.png

 

앱 아이콘 바꾸기 끝!

^_^d