Flutter 앱 아이콘과 이름, 스플래시 화면 설정하기

Flutter 앱을 개발했지만 앱의 아이콘이 기본 Flutter 아이콘이거나, 앱을 실행했을 때 기본 Flutter 스플래시 화면이 뜨는 경우가 있습니다. 이것은 아직 앱 아이콘과 스플래시 화면을 설정하기 않았기 때문입니다.

 

이번 글에서는 앱의 아이콘과 실행 시 나타나는 스플래시 화면을 어떻게 변경하고 커스터마이징할 수 있는지 알아보겠습니다.

 

 

1. 준비 단계

1.1. 필요한 이미지 준비하기

• 앱 아이콘 이미지: 정사각형 이미지 (권장 크기: 1024x1024 px, PNG 형식)
• 스플래시 이미지: 앱 실행 중 나타나는 이미지를 준비 (배경이 투명한 PNG 추천)

1.2. 이미지 경로 지정

이미지를 프로젝트 내 assets 디렉터리에 저장합니다. 예제 구조는 다음과 같습니다.

root/
├── assets/
│   └── icons/
│       ├── app_icon.png
│       └── splash_image.png

 

 

 

2. 앱 아이콘 설정하기

2.1. flutter_launcher_icons 패키지 추가

앱 아이콘을 쉽게 생성하기 위해 flutter_launcher_icons 패키지를 사용합니다.

 

pubspec.yaml에 다음 내용을 추가하세요:

dev_dependencies:
  flutter_launcher_icons: ^0.14.1

flutter_launcher_icons:
  android: true # 안드로이드 플랫폼에 런처 아이콘 적용 여부
  ios: true # iOS 플랫폼에 런처 아이콘 적용 여부
  image_path: "assets/icons/icon.png" # 런처 아이콘으로 사용할 이미지 경로
  adaptive_icon_background: "#000000" # 안드로이드 적응형 아이콘의 배경색 (검정색)
  adaptive_icon_foreground: "assets/icons/icon.png" # 안드로이드 적응형 아이콘의 전경 이미지 경로
  min_sdk_android: 21 # 안드로이드 최소 SDK 버전 (API 21(Android 5.0) 이상)

flutter:
  assets:
    - assets/icons/ # 앱에서 사용하는 에셋 파일 디렉터리 명시

 

dev_dependencies에 추가하는 이유는 해당 패키지가 앱 실행 시 필요하지 않기 때문입니다. flutter_launcher_icons는 로컬에서 아이콘 생성에만 사용되므로 앱 실행 시 불필요한 메모리 낭비를 줄이기 위해 dev_dependencies에 넣습니다.

 

아이콘 이미지의 크기는 1024 x 1024 로 맞춰주세요. 사이즈가 다르면 아이콘이 보이지 않을 수 있습니다.

 

2.2. 앱 아이콘 생성

터미널에서 다음 명령어를 실행해 아이콘을 생성합니다:

flutter pub get
flutter pub run flutter_launcher_icons

 

이 명령어는 각 플랫폼(Android, iOS)에서 요구하는 해상도에 맞는 아이콘 파일들을 자동으로 생성하고, AndroidManifest.xml 및 iOS 프로젝트 설정 파일에 반영합니다.

 

만약, flutter_launcher_icons 패키지를 사용하지 않는다면 세부 설정과 모든 해상도의 아이콘 이미지를 수동으로 변경해야 합니다.

 

 

3. 스플래시 화면 설정하기

3.1. flutter_native_splash 패키지 추가

스플래시 화면 설정을 위해 flutter_native_splash 패키지를 사용합니다.

 

pubspec.yaml에 다음을 추가하세요.

dependencies:
  flutter_native_splash: ^2.4.0

flutter_native_splash:
  color: "#FFFFFF" # 스플래시 화면의 배경색 설정 (흰색)
  image: "assets/icons/splash_image.png" # 스플래시 화면에 표시될 이미지 설정 (앱 로고)
  android: true # 안드로이드 플랫폼에 스플래시 화면 적용
  ios: true # iOS 플랫폼에 스플래시 화면 적용
  android_12: # Android 12 이상을 위한 추가 설정
    color: "#FFFFFF" # Android 12 이상 스플래시 화면의 배경색 (흰색)
    image: "assets/icons/splash_image.png" # Android 12 이상 스플래시 화면에 표시될 이미지

 

스플래시 이미지 사이즈는 전체 960 x 960 의 투명한 상자 안에 600 x 600 사이즈의 원형 로고를 넣습니다. 찾아본 바로는 640 x 640 이 권장 사이즈라고 보았는데 저는 아무리 해도 로고가 살짝 짤리더군요. 사이즈를 줄이니 그제서야 이미지가 정상적으로 보였습니다.

 

 

3.2. 스플래시 화면 생성

터미널에서 다음 명령어를 실행하세요.

flutter pub get
flutter pub run flutter_native_splash:create

 

이 명령어는 Android 및 iOS의 설정 파일을 자동으로 업데이트하고 플랫폼에 맞는 스플래시 화면을 생성합니다.

 

 

3.3. 스플래시 화면 재생성

만약, 스플래시 화면 이미지가 변경되거나 설정을 수정한 경우 remove 후에 다시 create 해야 합니다.

flutter pub run flutter_native_splash:remove

flutter clean
flutter pub get

flutter pub run flutter_native_splash:create

 

이때, flutter clean 후 다시 create 해주세요.

 

 

 

4. 앱 이름 설정하기

4.1. 안드로이드 앱 이름 설정

android/app/src/main/AndroidManifest.xml 파일에서 android:label 값을 수정합니다.

<application
    android:label="변경할 앱 이름"
    ...
>

 

4.2. IOS 앱 이름 설정

ios/Runner/Info.plist 파일에서 CFBundleDisplayName 값을 수정합니다.

<key>CFBundleDisplayName</key>
<string>"변경할 앱 이름"</string>

 

4.3. 변경 사항 빌드 및 확인

앱을 새로 빌드하면 설정한 아이콘, 이름, 스플래시 화면이 반영됩니다.

flutter clean // 생략 가능
flutter pub get
flutter build appbundle --release

 

4.4. 빌드 오류 케이스

Execution failed for task ':app:shrinkBundleReleaseResources'.
> A failure occurred while executing com.android.build.gradle.internal.transforms.ShrinkAppBundleResourcesAction
   > java.nio.file.FileSystemAlreadyExistsException (no error message)

 

해당 오류는 Gradle의 리소스 축소 과정에서 발생하는 문제입니다. 빌드 캐시를 정리 리소스 최적화를 건너뛰기 하여 해결 할 수 있습니다.

 

빌드 캐시 정리 명령어

flutter clean
flutter pub cache clean
flutter pub get

# Android 빌드 캐시 정리
cd android 
./gradlew cleanBuildCache
./gradlew clean
cd ..

 

최적화 건너뛰기는 android/app/build.gradle 파일에서 buildTypes 부분에 아래 값을 추가해주세요.

buildTypes {
    release {
        ...
        shrinkResources false
        ...
    }
}

 

 

 

아래는 최종 결과 화면입니다.

 

 

앱의 아이콘과 이름, 스플래시 화면이 정상적으로 변경된 모습입니다. 해당 요소들은 사용자들이 앱을 처음 접할 때 가장 먼저 마주하게 되는 요소들입니다. 이번 글에서 소개한 방법을 활용하면 사용자에게 좋은 첫인상을 남기고 기대감을 심어주세요.

 

 

 

참고

스플래시 화면  |  Views  |  Android Developers