React Native 스플래시 스크린 구현하기: 적절한 로딩 시간 관리

들어가며

앱을 실행할 때 처음 보여지는 스플래시 스크린은 단순한 로딩 화면 이상의 의미를 가집니다.
사용자에게 브랜드 아이덴티티를 전달하는 첫 접점이자, 앱의 초기화 작업을 자연스럽게 처리할 수 있는 시간을 제공합니다.

기본 구현

1. 스플래시 스크린 컴포넌트 생성

// src/components/common/SplashScreen.tsx
import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

const SplashScreen = () => {
  return (
    <View style={styles.container}>
      <Image 
        source={require('../../assets/splash-icon.png')}
        style={styles.logo}
        resizeMode="contain"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 200,
    height: 200,
  },
});

export default SplashScreen;

2. 앱 진입점에서 사용

if (isLoading) {
  return <SplashScreen />;
}

로딩 시간 관리의 중요성

단순히 로딩 상태에 따라 스플래시 스크린을 표시하면 다음과 같은 문제가 발생할 수 있습니다:
1. 초기화가 너무 빨리 완료되어 스플래시 스크린이 순식간에 사라짐
2. 사용자가 앱의 브랜딩을 인식하기도 전에 메인 화면으로 전환
3. 화면 전환이 너무 급격하게 일어나 사용자 경험 저하

개선된 구현

1. 최소 표시 시간 보장

export default function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const initialize = async () => {
      try {
        // 로그인 상태 체크
        const [loginStatus, token] = await AsyncStorage.multiGet([
          "isLoggedIn",
          "accessToken",
        ]);

        if (loginStatus[1] === "true" && token[1]) {
          setIsLoggedIn(true);
        } else {
          await AsyncStorage.multiRemove(["isLoggedIn", "accessToken"]);
          setIsLoggedIn(false);
        }
      } catch (error) {
        console.error("Error checking login status:", error);
        setIsLoggedIn(false);
      }

      // 최소 2초 표시 보장
      setTimeout(() => {
        setIsLoading(false);
      }, 2000);
    };

    initialize();
  }, []);

  if (isLoading) {
    return <SplashScreen />;
  }

  return (
    <NavigationContainer>
      {/* ... 나머지 네비게이션 로직 */}
    </NavigationContainer>
  );
}

구현 시 고려사항

1. 적절한 표시 시간

• 너무 짧으면 브랜딩 효과 감소
• 너무 길면 사용자 경험 저하
• 일반적으로 2-3초가 적당

2. 비동기 작업 관리

• 로그인 상태 체크
• 필요한 리소스 로드
• 초기 데이터 fetching

3. 자연스러운 전환

• fade in/out 효과 추가 고려
• 급격한 화면 전환 방지

성능 최적화 팁

1. 리소스 최적화

   • 스플래시 이미지 크기 최적화
   • 불필요한 초기화 작업 제거

2. 비동기 작업 병렬 처리

   const initialize = async () => {
     const loginCheckPromise = checkLoginStatus();
     const minimumLoadingPromise = new Promise(resolve => 
       setTimeout(resolve, 2000)
     );
   
     await Promise.all([loginCheckPromise, minimumLoadingPromise]);
     setIsLoading(false);
   };

3. 조건부 초기화

   • 필요한 경우에만 특정 리소스 로드
   • 사용자 상태에 따른 최적화

결론

스플래시 스크린은 단순한 로딩 화면이 아닌, 앱의 첫인상을 결정하는 중요한 요소입니다.
적절한 로딩 시간 관리를 통해 사용자에게 더 나은 경험을 제공할 수 있습니다.

앞으로는 다음과 같은 개선을 고려해볼 수 있습니다:
1. 애니메이션 효과 추가
2. 진행률 표시
3. 초기화 작업 최적화

이러한 요소들을 잘 조합하여 사용자에게 더 나은 첫인상을 전달할 수 있습니다.