스플래시 화면

Android 12부터 SplashScreen API를 사용하면 실행 시 앱 내 모션, 앱 아이콘을 보여주는 스플래시 화면, 앱 자체로의 전환을 비롯한 애니메이션으로 앱을 실행할 수 있습니다. SplashScreen는 Window 및 Kubernetes에서 Activity입니다.

그림 1. 스플래시 화면입니다.

스플래시 화면 환경은 앱을 출시할 때마다 표준 디자인 요소를 제공하지만 맞춤설정도 가능하므로 앱이 고유한 브랜딩을 유지할 수 있습니다.

SplashScreen 플랫폼 API를 사용하는 것 외에도 SplashScreen compat 라이브러리는 SplashScreen API를 래핑합니다.

스플래시 화면 작동 방식

앱의 프로세스가 실행되고 있지 않을 때 사용자가 앱을 실행하는 경우 (콜드 start) 또는 Activity이 생성된 경우 (웜 스타트) 다음과 같은 이벤트가 발생합니다.

  1. 시스템은 개발자가 지정한 테마와 애니메이션을 사용하여 스플래시 화면을 표시합니다. 정의할 수 있습니다

  2. 앱이 준비되면 스플래시 화면이 닫히고 앱이 표시됩니다.

스플래시 화면은 핫 스타트 중에 표시되지 않습니다.

스플래시 화면의 요소 및 메커니즘

스플래시 화면의 요소는 Android 매니페스트 파일의 XML 리소스 파일로 정의됩니다. 각 요소에는 밝은 모드와 어두운 모드 버전이 있습니다.

스플래시 화면의 맞춤설정 가능한 요소는 앱 아이콘, 아이콘 배경, 창 배경으로 구성됩니다.

스플래시 화면에 포함된 요소를 보여주는 이미지
그림 2. 맞춤설정 가능한 스플래시 요소 화면에 나타납니다.

그림 2에 표시된 다음 요소를 고려하세요.

1 앱 아이콘은 벡터 드로어블이어야 합니다. 정적 또는 애니메이션일 수 있습니다. 애니메이션의 지속 시간은 무제한일 수 있지만, 1,000밀리초를 초과하지 않는 것이 좋습니다 기본적으로 런처 아이콘이 사용됩니다.

2 아이콘 배경은 선택사항이며 다음과 같은 경우 유용합니다. 아이콘과 창 배경 간에 더 많은 대비가 필요합니다. 적응형 아이콘 창 배경과 충분히 대비되는 경우 배경이 표시됩니다.

3 적응형 아이콘과 마찬가지로 포그라운드가 마스킹됩니다.

4 창 배경은 단일 이미지로 구성됩니다. 불투명 색상입니다. 창 배경이 설정되어 있고 단색인 경우 사용됩니다. 속성이 설정되지 않은 경우 기본적으로 설정됩니다.

스플래시 화면 크기

스플래시 화면 아이콘은 다음과 같이 적응형 아이콘과 동일한 사양을 사용합니다.

  • 브랜드 이미지: 200×80dp여야 합니다.
  • 아이콘 배경이 있는 앱 아이콘: 240×240dp여야 하며 원 직경 160dp
  • 아이콘 배경이 없는 앱 아이콘: 288×288dp이고 크기가 지름 192dp의 원입니다.

예를 들어 이미지의 전체 크기가 300x300dp인 경우 아이콘은 직경이 200dp인 원 안에 들어맞아야 합니다. 원 외부의 모든 항목이 보이지 않게 됩니다(마스킹됨).

단색 배경과 투명 배경의 다양한 아이콘 크기를 보여주는 이미지
그림 3. 스플래시 화면 아이콘 크기: 각각 단색과 투명한 배경을 사용합니다.

스플래시 화면 애니메이션 및 시작 시퀀스

추가 지연 시간은 콜드 스타트 시 앱을 실행하는 것과 관련이 있습니다. 스플래시 화면에 애니메이션 아이콘을 추가하면 시각적으로 매력적이고 더 고급스러운 환경을 제공할 수 있습니다. 사용자 연구에 따르면 인지된 스타트업은 시간을 단축할 수 있습니다.

스플래시 화면 애니메이션은 그림 4와 같이 시작 시퀀스 구성요소 내에 삽입됩니다.

12개의 연속된 프레임에서 시작 시퀀스를 보여주는 이미지(런처 아이콘을 탭한 후 확대됨에 따라 화면을 채우는 것부터 시작)
그림 4. 실행 시퀀스

  1. 애니메이션 시작: 스플래시 화면의 시스템 뷰로 구성됩니다. 그것은 시스템에서 제어하고 맞춤설정할 수 없습니다.

  2. 스플래시 화면(시퀀스의 '대기' 부분에 표시됨): 스플래시 화면을 맞춤설정하여 자체 로고 애니메이션과 브랜딩을 제공할 수 있습니다. 요구사항을 충족해야 합니다. 이 페이지에 설명된 대로 올바르게 작동합니다.

  3. 종료 애니메이션: 스플래시 화면을 숨기는 애니메이션으로 구성됩니다. 맞춤설정하려면 SplashScreenView 및 아이콘을 클릭합니다. 변환, 불투명도, 색상 설정을 사용하여 어떤 애니메이션이든 실행할 수 있습니다. 이 경우 애니메이션이 완료됩니다.

아이콘 애니메이션을 실행할 때 앱 실행은 앱이 더 일찍 준비된 경우 시퀀스를 건너뛰는 옵션을 제공합니다. 앱이 onResume()를 트리거하거나 스플래시 화면이 자동으로 시간 초과되므로 모션을 편안하게 건너뛸 수 있는지 확인합니다. 스플래시 화면은 앱이 시각적으로 안정적일 때만 onResume()로 닫아야 하므로 추가 스피너가 필요하지 않습니다. 불완전한 인터페이스를 도입하면 사용자를 혼란스럽게 할 수 있고 예측하기 어렵거나 세련되지 않은 듯한 인상을 줍니다.

스플래시 화면 애니메이션 요구사항

스플래시 화면은 다음 사양을 준수해야 합니다.

  • 단일 창 배경 색상을 투명하지 않게 설정합니다. 주간 및 야간 지원되는 모드는 SplashScreen compat 라이브러리.

  • 애니메이션 아이콘이 다음 사양을 충족하는지 확인합니다.

    • 형식: 아이콘은 AnimationVectorDrawable (AVD) XML입니다.
    • 크기: AVD 아이콘은 적응형 배너 크기의 4배여야 합니다. 아이콘에 표시됩니다. <ph type="x-smartling-placeholder">
        </ph>
      • 아이콘 영역은 432dp, 즉 아이콘의 4배 마스킹되지 않은 적응형 아이콘의 108dp 영역
      • 이미지의 안쪽 3분의 2가 런처 아이콘에 표시되며 288dp여야 합니다. 즉, 적응형 아이콘의 내부 마스크 영역을 구성하는 72dp의 4배여야 합니다.
    • 시간: 휴대전화에서는 1,000ms를 초과하지 않는 것이 좋습니다. 이때 지연된 시작이지만 이 시간은 166ms를 초과할 수 없습니다 앱이 시작 시간이 1,000ms보다 길면 연속 재생 애니메이션을 고려하세요.

  • 스플래시 화면을 닫을 적절한 시간을 설정합니다. 이는 다음과 같이 발생합니다. 첫 번째 프레임을 그립니다. 스플래시 화면을 화면에 더 오래 표시 섹션에 설명된 대로 이를 추가로 맞춤설정할 수 있습니다.

스플래시 화면 리소스

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> 그림 5. AVD 예시

지금 바로 스타터 키트 예, 애니메이션을 만들고, 서식을 지정하고 AVD로 내보내는 방법을 보여줍니다. 이 패키지에는 다음 도구가 포함되어 있습니다.

  • 애니메이션의 Adobe After Effects 프로젝트 파일입니다.
  • 마지막으로 내보낸 AVD XML 파일입니다.
  • 애니메이션 GIF 예시

이 파일을 다운로드하면 Google 서비스 약관에 동의하는 것으로 간주됩니다.

Google 개인정보처리방침에서 데이터는 이 서비스에서 처리됩니다

앱의 스플래시 화면 맞춤설정

다음과 같은 경우 기본적으로 SplashScreen에서 테마의 windowBackground를 사용합니다. windowBackground는 단색입니다. 스플래시 화면을 맞춤설정하려면 앱 테마에 속성을 추가합니다.

다음 중 한 가지 방법으로 앱의 스플래시 화면을 맞춤설정할 수 있습니다.

  • 테마 속성을 설정하여 모양을 변경합니다.

  • 화면에 더 오래 표시합니다.

  • 스플래시 화면 닫기 애니메이션을 맞춤설정합니다.

시작하기

Android 12 스플래시 화면을 모든 기기에 제공하는 핵심 SplashScreen 라이브러리 기기에서 지원됩니다 이를 프로젝트에 추가하려면 다음 스니펫을 내 build.gradle 파일:

Groovy

dependencies {
    implementation "androidx.core:core-splashscreen:1.0.0"
}

Kotlin

dependencies {
    implementation("androidx.core:core-splashscreen:1.0.0")
}

스플래시 화면 테마를 설정하여 모양 변경

Activity 테마에서 다음 속성을 지정하여 앱의 스플래시 화면을 맞춤설정할 수 있습니다. android:windowBackground와 같은 속성을 사용하는 기존 스플래시 화면 구현이 이미 있다면 Android 12 이상의 대체 리소스 파일을 제공하는 것이 좋습니다.

  1. windowSplashScreenBackground를 사용하여 특정 단색으로 배경을 채웁니다.

    <item name="android:windowSplashScreenBackground">@color/...</item>

  2. 사용 windowSplashScreenAnimatedIcon 시작 창 중앙의 아이콘을 바꿀 수 있습니다.

    Android 12(API 수준 32)만 타겟팅하는 앱의 경우 다음을 실행합니다.

    객체가 애니메이션 가능하고 AnimationDrawable 및 AnimatedVectorDrawable의 경우 windowSplashScreenAnimationDuration를 다음과 같이 설정합니다. 시작 창을 표시하는 동안 애니메이션 재생 필수는 아닙니다. 이는 Android 13에서 지속 시간이 AnimatedVectorDrawable

    <item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>

  3. windowSplashScreenAnimationDuration을 사용하여 스플래시 화면 아이콘 애니메이션의 지속 시간을 나타냅니다. 이 설정을 사용해도 스플래시 화면이 표시되는 실제 시간은 영향을 받지 않지만, SplashScreenView.getIconAnimationDuration을 사용하여 스플래시 화면 종료 애니메이션을 맞춤설정할 때 지속 시간을 가져올 수 있습니다. 자세한 내용은 다음 섹션의 스플래시 화면을 화면에 더 오래 표시를 참고하세요.

    <item name="android:windowSplashScreenAnimationDuration">1000</item>

  4. windowSplashScreenIconBackgroundColor를 사용하여 스플래시 화면 아이콘 뒤의 배경을 설정합니다. 창 배경과 아이콘 사이에 대비가 충분하지 않은 경우에 유용합니다.

    <item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>

  5. 이때 windowSplashScreenBrandingImage 를 사용하여 스플래시 화면 하단에 표시되도록 이미지를 설정할 수 있습니다. 그러나 디자인 가이드라인에서는 브랜드 이미지 사용을 권장하지 않습니다.

    <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>

  6. windowSplashScreenBehavior를 사용하여 Android 13 이상에서 앱이 항상 스플래시 화면에 아이콘을 표시할지 여부를 지정할 수 있습니다. 기본값은 0이며, 이 경우 실행 활동이 splashScreenStyle를 다음과 같이 설정하는 경우 스플래시 화면 SPLASH_SCREEN_STYLE_ICON, 또는 시작 활동이 특정 시점의 시작 시간을 지정하지 않은 경우 있습니다. 빈 스플래시 화면을 표시하지 않고 항상 애니메이션 아이콘을 표시하려면 이 값을 icon_preferred로 설정하세요.

    <item name="android:windowSplashScreenBehavior">icon_preferred</item>

스플래시 화면을 화면에 더 오래 표시

스플래시 화면은 앱이 첫 프레임을 그리는 즉시 닫힙니다. 만약 앱에서 인앱 설정을 로드하는 등 소량의 데이터를 로드해야 하는 경우 비동기식으로 사용하려는 경우 ViewTreeObserver.OnPreDrawListener 앱을 정지하여 첫 번째 프레임을 그립니다.

시작 활동이 그리기 전에 완료되는 경우(예: 콘텐츠 뷰를 설정하지 않고 onResume 전에 종료하는 경우) 사전 그리기 리스너가 필요하지 않습니다.

Kotlin

// Create a new event for the activity.
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // Set the layout for the content view.
    setContentView(R.layout.main_activity)

    // Set up an OnPreDrawListener to the root view.
    val content: View = findViewById(android.R.id.content)
    content.viewTreeObserver.addOnPreDrawListener(
        object : ViewTreeObserver.OnPreDrawListener {
            override fun onPreDraw(): Boolean {
                // Check whether the initial data is ready.
                return if (viewModel.isReady) {
                    // The content is ready. Start drawing.
                    content.viewTreeObserver.removeOnPreDrawListener(this)
                    true
                } else {
                    // The content isn't ready. Suspend.
                    false
                }
            }
        }
    )
}

자바

// Create a new event for the activity.
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the layout for the content view.
    setContentView(R.layout.main_activity);

    // Set up an OnPreDrawListener to the root view.
    final View content = findViewById(android.R.id.content);
    content.getViewTreeObserver().addOnPreDrawListener(
            new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    // Check whether the initial data is ready.
                    if (mViewModel.isReady()) {
                        // The content is ready. Start drawing.
                        content.getViewTreeObserver().removeOnPreDrawListener(this);
                        return true;
                    } else {
                        // The content isn't ready. Suspend.
                        return false;
                    }
                }
            });
}

스플래시 화면 닫기 애니메이션 맞춤설정

Activity.getSplashScreen()을 통해 스플래시 화면의 애니메이션을 추가로 맞춤설정할 수 있습니다.

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    splashScreen.setOnExitAnimationListener { splashScreenView ->
        // Create your custom animation.
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.doOnEnd { splashScreenView.remove() }

        // Run your animation.
        slideUp.start()
    }
}

자바

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    getSplashScreen().setOnExitAnimationListener(splashScreenView -> {
        final ObjectAnimator slideUp = ObjectAnimator.ofFloat(
                splashScreenView,
                View.TRANSLATION_Y,
                0f,
                -splashScreenView.getHeight()
        );
        slideUp.setInterpolator(new AnticipateInterpolator());
        slideUp.setDuration(200L);

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                splashScreenView.remove();
            }
        });

        // Run your animation.
        slideUp.start();
    });
}

이 콜백이 시작되면 애니메이션 벡터 드로어블을 스플래시 화면에서 시작됩니다. 앱 실행 시간에 따라 드로어블이 애니메이션 중간에 있을 수 있기 때문입니다. SplashScreenView.getIconAnimationStart를 사용하여 애니메이션이 시작된 시점을 알 수 있습니다. 다음과 같이 아이콘 애니메이션의 남은 시간을 계산할 수 있습니다.

Kotlin

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenView.iconAnimationDuration
// Get the start time of the animation.
val animationStart = splashScreenView.iconAnimationStart
// Calculate the remaining duration of the animation.
val remainingDuration = if (animationDuration != null && animationStart != null) {
    (animationDuration - Duration.between(animationStart, Instant.now()))
        .toMillis()
        .coerceAtLeast(0L)
} else {
    0L
}

Java

// Get the duration of the animated vector drawable.
Duration animationDuration = splashScreenView.getIconAnimationDuration();
// Get the start time of the animation.
Instant animationStart = splashScreenView.getIconAnimationStart();
// Calculate the remaining duration of the animation.
long remainingDuration;
if (animationDuration != null && animationStart != null) {
    remainingDuration = animationDuration.minus(
            Duration.between(animationStart, Instant.now())
    ).toMillis();
    remainingDuration = Math.max(remainingDuration, 0L);
} else {
    remainingDuration = 0L;
}

추가 리소스