Flutter

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

wsstar 2025. 3. 30. 20:00
728x90
반응형

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에서 수동 설정을 통해 직접 구성
  • 적용 후 앱 실행하여 정상 동작 확인

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

728x90
반응형
저작자표시 비영리 변경금지