flutter splash image 설정하기 앱 처음 나오는 이미지 만들기

Flutter 앱 스플래시 이미지 설정 완벽 가이드

준비물

• Flutter 개발 환경
• 스플래시 이미지 (PNG 또는 JPEG 형식)

단계별 설정

1. flutter_native_splash 패키지 설치

flutter pub add flutter_native_splash

2. pubspec.yaml 설정

dependencies:
  flutter:
    sdk: flutter

  #splash creator
  flutter_native_splash: ^2.3.0

3. flutter_native_splash.yaml 설정

flutter_native_splash:
  image: assets/splash.png  # 스플래시 이미지 경로 (assets 폴더 기준)
  color: "#42a5f5"           # 배경색 (스플래시 이미지 로딩 실패 또는 투명 이미지 사용 시)

• image: 스플래시 이미지 파일 경로를 지정합니다. 파일 경로를 설정해야 내부 코드에서 해당 파일을 인식합니다. 폴더 경로만 적어도 됩니다.
• color: 스플래시 이미지 로딩 실패 또는 투명 이미지 사용 시 표시될 배경색을 지정합니다.

안드로이드 12이상인 경우

flutter_native_splash:
  android_12:
    image: assets/image/splash/android12.png
  # Splash screen background color.
    color: "#0a0a0a"

다음과 같은 설정을 추가로 해 주면 좋습니다.

4. 스플래시 이미지 생성

flutter pub run flutter_native_splash:create

위 명령어를 실행하면 앱 아이콘과 테마를 기반으로 각 플랫폼에 맞는 스플래시 이미지가 자동 생성됩니다.

toss clone을 해보고 있기 때문에 토스 클론 모습을 보여드릴게요.

5. 스플래시 이미지 권장 규격

앱 출시를 위한 이미지 준비 가이드: 필수 이미지 및 크기 요약

필수 이미지

• 아이콘:
  • 높은 해상도의 정사각형 이미지 (1024x1024 권장)
  • 다양한 크기로 변환 (각 플랫폼별 지침 참고)
• 스플래시 이미지:
  • 높은 해상도의 세로형 이미지 (2536x2560 권장)
    • 가로 전용 앱이 아닌 경우
  • 높은 해상도의 가로형 이미지 (2560x1536 권장)
    • 세로 전용 앱이 아닌 경우
  • 다양한 크기로 변환 (각 플랫폼별 지침 참고)
• 기타:
  • 멋진 스크린샷
  • 홍보 동영상 (선택 사항)

각 플랫폼별 이미지 크기 및 지침

안드로이드

아이콘:

• drawable/icon.png (기본) - ?x?
• drawable-ldpi/icon.png - 36x36
• drawable-mdpi/icon.png - 48x48
• drawable-hdpi/icon.png - 72x72
• drawable-xhdpi/icon.png - 96x96

스플래시 이미지:

• drawable/splash.png (기본) - ?x?
• drawable-ldpi/splash.png - 200x320
• drawable-mdpi/splash.png - 320x480
• drawable-hdpi/splash.png - 480x800
• drawable-xhdpi/splash.png - 720x1280
• drawable-land/splash.png (가로) - 200x320
• drawable-land-ldpi/splash.png (가로) - 200x320
• drawable-land-mdpi/splash.png (가로) - 320x480
• drawable-land-hdpi/splash.png (가로) - 480x800
• drawable-land-xhdpi/splash.png (가로) - 720x1280

기타:

• Google Play 스토어:
  • 아이콘: 512x512, PNG 32 (알파 채널 포함)
  • 스크린샷: 최소 2개, 320~3840px, JPG/PNG 24 (알파 채널 없음)
  • 피처 배너: 1024x500, JPG/PNG 24 (알파 채널 없음)
  • 프로모 배너: 180x120, JPG/PNG 24 (알파 채널 없음)
  • 프로모 동영상: 30초~2분

T 스토어:

• 대표 아이콘: 212x212, JPG/PNG/GIF
• 스크린샷: 4~8개, 720x1280 (권장), JPG

iOS

아이콘:

• Icon.png - 57x57
• Icon@2x.png (Retina) - 114x114
• Icon-72.png (iPad) - 72x72
• Icon-72@2x.png (Retina iPad) - 144x144
• Icon-small.png (Spotlight) - 29x29
• Icon-small@2x.png (Retina Spotlight) - 58x58
• Icon-small-50.png (iPad Spotlight) - 50x50
• Icon-small-50@2x.png (Retina iPad Spotlight) - 100x100
• Icon-60.png (iOS 7) - 60x60
• Icon-60@2x.png (Retina iOS 7) - 120x120
• Icon-76.png (

이 글을 통해 Flutter 앱에 스플래시 이미지를 설정하는 방법을 익혔습니다. 스플래시 이미지는 앱의 첫 인상을 중요하게 결정하는 요소이므로, 적절한 이미지를 활용하여 앱의 매력을 더욱 높여보세요!