Expo Splash Screen 만들기

리액티브 네이티브 앱만들기에서 앱 초기 구동시 보여지는 스플래시 스크린(Splash Screen)에 대해 간단한 예시를 통해 알아보고자 합니다.

 

1.  스플래시 스크린이란?

• 앱을 초기 구동시 보여주는 시작 화면
• 일반적으로 앱이 준비되는  1 ~ 3초 정도 보여지게 됨
• 목적
  • 앱 로딩 시간동안 빈 화면 대신 표출되어 사용자에게 정상적인 구동중임을 표시
  • 서비스와 브랜드 이미지 전달하는 것이므로 중요하게 여김
• 표출내용
  • 앱 로고, 브랜드 이미지, 간단한 애니메이션 등을 포함
  • 단순하면서도 눈길이 가는 시각적 요소 중요
  • 다양한 디바이스 해상도 고려 필요

2.  Expo 용 필요 라이브러리 설치 및 사용

• 설치 : npx expo install expo-splash-screen
• 사용
  • import * as SplashScreen from 'expo-splash-screen';
  • SplashScreen.preventAutoHideAsync();
    • fetch 등 데이터 로딩시 스플래시 스크린이 계속 보여지도록 함
  • SplashScreen.hideAsync()
    • 원하는 시점에 스플래시 스크린 닫기

👉 자세한 사용법 개발 문서 참조

https://docs.expo.dev/versions/latest/sdk/splash-screen/

SplashScreen

 

3.  스플래시 스크린용 이미지 만들기

• 다양한 툴을 통해 만들어 볼 수 있지만 가장 쉽게 만들 수 있는 방법 안내
• Figma Template 활용

Figma Expo App Icon & Splash

• template 이용 가운데 아이콘만 교체하고 
• 박스와 이미지를 마우스 우측버튼의 create component 로 하나로 만들고 

create component

• 우측의 메뉴에서 export 하여 png 이미지를 받아 splash.png로 파일명을 바꾸고 

slpash export

• assets 폴더내 splash 이미지를 대체

 

이번 포스트는 스플래시 스크린을 적용하기 위해 간단히 스플래시 이미지를 만들어 보았습니다.