📱 64. React Native에서 앱 아이콘 & 스플래시 스크린 설정하기

---

앱을 처음 켰을 때 보이는 아이콘과 스플래시 스크린은
사용자에게 첫인상을 주는 중요한 요소다.

앱의 기능이나 UX는 좋았는데,
아이콘이 뿌옇거나 스플래시가 이상하면…?
바로 신뢰도가 떨어질 수 있다.

이번 글에서는 React Native (Expo 포함) 프로젝트에서
앱 아이콘과 스플래시를 어떻게 설정하는지 정리해봤다.

---

🖼️ 1. 앱 아이콘 설정 (App Icon)

✅ Expo 프로젝트

app.json 또는 app.config.js에 아래처럼 설정한다:

{
  "expo": {
    "icon": "./assets/icon.png"
  }
}

• 권장 사이즈: 1024x1024px
• 형식: PNG
• 배경은 투명하지 않게 만드는 걸 추천한다

✅ Non-Expo (bare React Native)

• Android:
  android/app/src/main/res/mipmap-* 폴더 안에 다양한 크기의 아이콘 추가

• iOS:
  ios/YourApp/Images.xcassets/AppIcon.appiconset에 아이콘 이미지 추가

App Icon Generator에서 한번에 여러 크기의 아이콘을 생성해주는 툴이 있으니 사용 추천!

---

🚀 2. 스플래시 스크린 설정 (Splash Screen)

✅ Expo 프로젝트

{
  "expo": {
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    }
  }
}

• image: 스플래시에 표시할 이미지 경로
• resizeMode: contain 또는 cover
• backgroundColor: 스플래시 시작 전 배경색

Expo는 기본적으로 expo-splash-screen 패키지를 통해 자동 처리됨

✅ Non-Expo (bare)

Android

1. android/app/src/main/res/drawable/launch_screen.xml에서 이미지 설정
2. styles.xml에서 테마 지정

iOS

1. Xcode에서 LaunchScreen.storyboard 파일을 편집
2. 이미지나 텍스트, 로고 등을 직접 배치

---

🛠️ 3. 이미지 자동 생성 툴 추천

• appicon.co: 아이콘 세트 자동 생성
• expo-assets-generator: 아이콘 & 스플래시 생성 도구
• Launch Image Generator: 런치 이미지용 사이즈 변환

---

🧾 최종 요약

항목	Expo	Non-Expo
아이콘 설정	icon 키 하나로 끝	Android/iOS 각자 설정
스플래시 설정	splash 키로 간단 적용	직접 Xcode, XML 수정
이미지 툴	expo-assets-generator 등	appicon.co 추천

---

✨ 사용자 경험은 눈에 보이는 디테일에서 시작된다
첫 화면부터 신뢰감을 주고 싶다면
아이콘 & 스플래시 설정은 꼭 제대로 챙기자!

---