[ React Native ] animated splash screen / gif, lottie, 동영상에 대한 고찰

 

고민 끝에 완성된 splash screen

 

스플래시화면부터 강렬한 인상을 주고싶은게 모든 앱 제작자의 마음이다.

지금 하고 있는 프로젝트에서는 주 타겟층이 힙한 20/30대기때문에, 많은 애니메이션 효과를 사용하고있다.

 

앱 로딩시 애니메이션 효과를 위해 내가 고민했던 문제는 총 3가지였다.

 

1.처음 splash screen 자체에 gif 를 넣는 방법

2.react-native-lottie-splash-screen 을 사용하여 lottie 파일로 넣는방법

3.splash screen 별도의 영상을 띄우는 방법

 

현재 앱에 최종적으로 적용된 방법은 3번이다.

 

1.5초 정도가 되는 동영상을 lottie 와 gif 로 변경하여 넣어보니 프레임이 많이 떨어지는 느낌을 받았다.

 

react-native-splash-screen 과 react-native-video 를 통하여

splash 스크린을 띄우고, 그뒤에 react-native-video 컴포넌트를 띄운다.

해당 컴포넌트에서 동영상이 모두 플레이가되면 앱화면이 나오도록 하였다.

 

UX적으로, 컴포넌트를 교체하는 것이아닌, 동영상 재생시 컴포넌트 위에 띄워주고 해당 컴포넌트만 제거하는 것이 안정감이 있어서 해당 방법으로 구현하였다.

 

스플레시 화면에서 동영상으로 넘어가는 부분을 매끄럽게 하기위해서, 동영상 부분의 첫 이미지를 스플래시화면으로 넣어놓는 방법도 있는데

 

자연스럽게 로고다음에 동영상이 플레이되는 것이 디자인팀에서 예쁜것 같다는 피드백이와서 해당 화면으로 최종 결정 하였다.