Flutter의 스플래시 스크린 설정 방법

Flutter의 스플래시 스크린 설정 방법

스플래시 스크린(Splash Screen)은 앱이 실행될 때 가장 먼저 표시되는 화면으로, 로딩 화면 역할을 하며 사용자 경험을 향상시킵니다. Flutter에서는 기본적으로 흰색 화면이 표시되지만, 커스텀 스플래시 스크린을 설정하여 브랜드 이미지를 강화할 수 있습니다.

이 글에서는 Flutter에서 스플래시 스크린을 설정하는 방법을 설명하고, flutter_native_splash 패키지를 활용하여 자동으로 설정하는 방법을 소개하겠습니다.

---

1. Flutter 스플래시 스크린 설정 방법

Flutter에서 스플래시 스크린을 설정하는 방법은 다음과 같습니다.

• flutter_native_splash 패키지를 사용 (자동 설정)
• Android 및 iOS에서 직접 설정 (수동 설정)

대부분의 개발자는 flutter_native_splash 패키지를 사용하여 간단하게 스플래시 스크린을 설정합니다.

---

2. flutter_native_splash 패키지를 사용한 스플래시 스크린 설정

(1) 패키지 설치

다음 명령어를 실행하여 flutter_native_splash 패키지를 추가합니다.

flutter pub add flutter_native_splash

또는 pubspec.yaml 파일의 dev_dependencies 섹션에 추가할 수도 있습니다.

dev_dependencies:
  flutter_native_splash: latest

(2) pubspec.yaml 설정

스플래시 스크린을 설정하려면 pubspec.yaml 파일에 다음 내용을 추가합니다.

flutter_native_splash:
  color: "#ffffff"  # 배경색
  image: "assets/splash_screen.png"  # 스플래시 이미지
  android_12:
    image: "assets/splash_screen.png"
    icon_background_color: "#ffffff"

• color: 스플래시 스크린의 배경색
• image: 중앙에 표시될 로고 이미지
• android_12: Android 12 이상의 OS에서 적용할 스플래시 설정

(3) 스플래시 스크린 생성

다음 명령어를 실행하면 자동으로 Android 및 iOS에 스플래시 스크린이 설정됩니다.

flutter pub run flutter_native_splash:create

이제 앱을 실행하면 설정한 스플래시 이미지가 표시됩니다.

---

3. Android에서 수동으로 스플래시 스크린 설정

Android에서 스플래시 스크린을 수동으로 설정하려면 android/app/src/main/res/drawable/ 폴더에 이미지를 추가해야 합니다.

(1) 스플래시 이미지 추가

android/app/src/main/res/drawable/splash_screen.xml 파일을 생성하고 다음 내용을 추가합니다.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/white" />
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash_logo" />
    </item>
</layer-list>

(2) AndroidManifest.xml 수정

android/app/src/main/AndroidManifest.xml 파일을 열고 다음 코드를 추가합니다.

<activity
    android:name=".SplashActivity"
    android:theme="@style/LaunchTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

(3) SplashActivity.java 생성

android/app/src/main/java/com/example/app/SplashActivity.java 파일을 생성하고 다음 코드를 추가합니다.

package com.example.app;

import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

---

4. iOS에서 수동으로 스플래시 스크린 설정

iOS에서 스플래시 스크린을 설정하려면 ios/Runner/LaunchScreen.storyboard를 수정해야 합니다.

(1) Xcode에서 LaunchScreen.storyboard 편집

1. Xcode에서 ios/Runner.xcworkspace를 엽니다.
2. Runner 프로젝트의 LaunchScreen.storyboard 파일을 엽니다.
3. ViewController에 이미지 뷰를 추가하고, 원하는 스플래시 이미지를 설정합니다.

(2) iOS 배경색 변경

ios/Runner/Info.plist 파일을 열고 다음 내용을 추가합니다.

<key>UILaunchScreen</key>
<dict>
    <key>UILaunchImageName</key>
    <string>LaunchImage</string>
</dict>

이제 iOS에서 스플래시 스크린이 정상적으로 표시됩니다.

---

5. 스플래시 스크린 적용 확인

스플래시 스크린이 정상적으로 적용되었는지 확인하려면 다음 명령어를 실행하여 앱을 실행해 봅니다.

flutter run

또한, 스플래시 화면이 변경되지 않았다면 flutter clean을 실행한 후 다시 빌드해 보세요.

flutter clean
flutter pub get
flutter pub run flutter_native_splash:create
flutter run

---

결론

Flutter에서 스플래시 스크린을 설정하는 방법은 다음과 같습니다.

• flutter_native_splash 패키지를 사용하여 자동 설정
• Android 및 iOS에서 수동 설정을 통해 직접 구성
• 적용 후 앱 실행하여 정상 동작 확인

자동화된 방법을 사용하면 더 쉽게 스플래시 스크린을 변경할 수 있으며, 프로젝트 유지보수도 편리해집니다. 이제 스플래시 스크린을 설정하여 앱의 첫인상을 개선해 보세요!