📱 스플래시 스크린(Splash Screen)이란?

스플래시 스크린(Splash Screen)은 모바일 앱을 실행할 때 가장 처음 나타나는 화면.
보통 앱 로고나 브랜드 이미지를 보여줌.
앱이 실행 중이라는 것을 사용자에게 알리고, 초기 설정이나 데이터를 로딩할 시간을 확보하는 역할을 함.

---

🔍 스플래시 스크린이 필요한 이유

1. 앱의 브랜드 노출

   • 앱 실행 시 브랜드 로고나 아이덴티티를 강조할 수 있음.

2. UI 깜빡임 방지

   • 앱이 실행될 때 흰 화면이 잠깐 보이는 문제를 방지할 수 있음.

3. 초기 데이터 로딩 시간 확보

   • 사용자 데이터를 불러오거나, 언어 설정 및 권한 확인 같은 작업을 안정적으로 처리하는 시간을 확보할 수 있음.

4. 사용자 경험 개선

   • 앱이 갑자기 튀어나오는 것보다 부드럽게 전환되면서 더 안정적인 느낌을 줄 수 있음.

---

🛠️ React Native에서 스플래시 스크린 구현하기

React Native에서 스플래시 스크린을 추가하려면 react-native-splash-screen 라이브러리를 사용할 수 있음.

1️⃣ 라이브러리 설치

npm install react-native-splash-screen

2️⃣ Android 설정

android/app/src/main/res/drawable/splash_screen.xml 생성:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/white" />
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher" />
    </item>
</layer-list>

android/app/src/main/res/values/styles.xml 수정:

<style name="LaunchTheme" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/white</item>
    <item name="windowSplashScreenAnimatedIcon">@mipmap/ic_launcher</item>
</style>

3️⃣ iOS 설정

ios/PROJECT_NAME/Info.plist 파일 수정:

<key>UILaunchStoryboardName</key>
<string>SplashScreen</string>

4️⃣ React Native에서 스플래시 스크린 숨기기

앱이 실행되면 스플래시 화면을 자동으로 닫아야 한다. App.tsx에서 다음과 같이 설정한다:

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import SplashScreen from 'react-native-splash-screen';

const App = () => {
  useEffect(() => {
    // 앱이 실행된 후 스플래시 화면 숨기기
    setTimeout(() => {
      SplashScreen.hide();
    }, 1500); // 1.5초 후 숨김
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>메인 화면</Text>
    </View>
  );
};

export default App;

---

하지만 현재 필자가 사용하고 있는 Expo에서는 react-native-splash-screen을 사용할 수 없음:

대신 Expo에서 기본 제공하는 AppLoading이나 expo-splash-screen 라이브러리를 사용해야 함.

---

📱 Expo에서 스플래시 스크린 설정하기

Expo에서는 app.json(또는 app.config.js)에서 기본적으로 스플래시 스크린을 설정할 수 있음.

---

🔍 스플래시 스크린 설정 방법

1️⃣ expo-splash-screen 설치

Expo 프로젝트에서는 expo-splash-screen을 사용해서 스플래시 화면을 관리.

npx expo install expo-splash-screen

---

2️⃣ app.json 또는 app.config.js 설정

Expo에서는 app.json(또는 app.config.js)에서 스플래시 이미지를 지정할 수 있음.

📌 app.json 설정 예시:

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

• image: 스플래시 화면에 표시할 이미지 경로
• resizeMode: contain(이미지를 원본 비율 유지) 또는 cover(화면을 가득 채움)
• backgroundColor: 스플래시 화면의 배경색

---

3️⃣ 스플래시 스크린을 숨기기 전에 데이터 로딩

앱이 실행되면 expo-splash-screen을 사용해 필요한 데이터를 로딩한 후 스플래시 화면을 숨길 수 있음.

📌 App.tsx에서 스플래시 스크린 제어:

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';

// 스플래시 화면 유지
SplashScreen.preventAutoHideAsync();

const App = () => {
  useEffect(() => {
    const loadResources = async () => {
      // 예제: 데이터 로딩 or 초기 설정 적용
      await new Promise(resolve => setTimeout(resolve, 1500));

      // 스플래시 화면 숨기기
      await SplashScreen.hideAsync();
    };

    loadResources();
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>메인 화면</Text>
    </View>
  );
};

export default App;

🚀 작동 방식:

• SplashScreen.preventAutoHideAsync(); → 앱이 실행될 때 스플래시 화면을 유지
• await SplashScreen.hideAsync(); → 데이터 로딩이 끝난 후 스플래시 화면을 숨김

---

✅ 정리

Expo에서는 expo-splash-screen을 사용해 스플래시 스크린을 제어할 수 있음.
1. app.json에서 기본 스플래시 이미지 설정
2. expo-splash-screen을 설치하고 스플래시 화면을 제어
3. 앱이 로딩될 때 필요한 작업을 마친 후 스플래시 스크린을 숨기기