프로그래밍/React Native

React Native 스플래쉬 스크린 구현 2020.11.13

React Native 스플래쉬 스크린 구현

2020. 11. 13. 17:27

리액트 네이티브(React Native) 스플래쉬 스크린(Splash Screen) 구현

스플래쉬 스크린이란

단순하다. 앱이 실행될 때 처음에 보이는 화면이다. 단순하지만 중요한 화면이다.

그 이유로 첫째, 비어있는 메인 콘텐츠 화면이 표시되는 것을 막아 준다. 보통 메인 화면에는 다양한 정보가 담겨져 있다. 네이버 앱을 생각해보면, 알림 갯수, 날씨, 뉴스 등을 보여줘야하는데 다양한 콘텐츠를 불러오는데 시간이 조금 소요된다. 이 과정에서 빈 화면이 보여질 수 있는데, 이를 방지하기 위해 콘텐츠가 완전히 로딩 되기 전에 스플래쉬 스크린을 보여주면서 사용자 경험을 개선한다.

두번째는 앱의 첫인상을 보여준다. 스플래쉬 스크린에는 보통 앱의 로고와 이름, 더 나아가선 기업의 이름과 저작권 표시 등이 있다. 자신의 앱을 접하는 사람에게 이 앱이 어떤 것인지 알려주기도 하고, 특정 애니메이션을 통해 강렬한 인상을 주기도 한다. 그만큼 단순하면서도 중요한 스크린이다. 새롭게 받은 두 앱이 있다. A는 멋진 로고와 깔끔한 배경색과 화면이 사라질 때 적절한 애니메이션을 통해 당신이 사용하는 이 앱은 멋지고 예쁘고 힙한 앱이야. 라는 느낌을 준다. B는 튜토리얼 앱에서나 볼만한 구린 회색 배경에 텍스트가 달랑 떠 있다. 이 로딩화면이 사라지면 왠지 광고가 덕지덕지 붙어있는 공짜앱 느낌이 들지 않는가?

이 처럼 단순하면서도 중요한 스플래쉬 스크린을 리액트 네이티브에서 고맙게도 만들기 편한 라이브러리들이 있다. 특정 이미지를 스플래쉬 스크린 이미지로 만들어주는 라이브러리까지 있어서 꽤 쉽게 만들수 있다. 다음은 이에 대한 설명이다.

리액트 네이티브 스플래쉬 스크린

React Native Splash Screen(Git Repository) 라이브러리를 사용하면 쉽게 스플래쉬 스크린을 구현할 수 있다.

설치

다운로드

$ npm i react-native-splash-screen --save

플러그인 설치

react-native < 6 일 경우 link 연결이 필요하다. 이상일 경우에는 자동으로 링크된다.

$ react-native link react-native-splash-screen

플러그인 설정

Android

[MainActivity.java](http://mainactivity.java) 수정

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

iOS

AppDelegate.m 수정

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // here

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // here
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
    return YES;
}

@end

스플래쉬 스크린 생성

react-native-make 라이브러리

react-native-splash-screen git에서 설명하는 것과 여기서 좀 다르다. 스플래쉬 스크린에 사용할 이미지를 만드는 단계이다. 위의 react-native-make 를 사용할 것이다.

먼저 로고용 이미지 하나를 준비한다. 이미지 요구사항은 다음과 같다.

png 확장자
최소 3000px 높이 또는 가로
cover사이즈를 위해 로고에 1/3 정도 여백이 있으면 좋음

다음의 명령어로 리액트 네이티브의 iOS 내용을 대상으로 xcode 편집기를 연다.

$ xed ./ios

프로젝트 우클릭 > New File... > Launch Screen > Save as: SplashScreen 작업을 진행한다. 처음에는 단순히 프로젝트 이름 텍스트만 들어가 있는데 다음 단계를 진행하면서 로고용 이미지로 변경된다.

마지막으로 다음 명령어를 수행한다

react-native set-splash --path <path-to-image> --resize <[contain]|cover|center> --background "<background-color>"

path 옵션은 필수이며 스플래쉬 스크린에 사용할 로고용 이미지 경로를 입력한다.
resize는 위의 라이브러리 git을 참고하면 되는데 center를 추천한다.
background는 배경색을 지정하는데 로고용 이미지의 배경이 투명이면 원하는 배경색을 지정하고, 투명이 아닐 경우 로고용 이미지 배경색과 같은 색상을 지정하자

위의 명령어를 수행하면 android > app > src > main > res에 drawable- 디렉토리가 생성된다. drawable-해상도 디렉토리에는 각 해상도에 맞는 로고용 이미지가 생성된다.

안드로이드 스튜디오에서 android > app > src > main > res > layout > launch_screen.xml 을 열면 스플래쉬 스크린 view를 확인할 수 있다. 내 경우에는 안드로이드 이미지에서 로고가 좀 커서 해당 파일을 직접 수정하여 크기를 조금 줄였다. 안드로이드에 대해 더 잘 안다면 직접 xml의 view를 수정해서 더 나은 화면을 만들 수 있겠다.

iOS도 xcode에서 ScreenSplash.storyboard를 열면 변경된 로고용 이미지로 스플래쉬 스크린이 생성된 것을 확인할 수 있다. 안드로이드 보다 조금 더 예쁘고 작게 만들어진다.

이후 App.js에서 SplashScreen 코드를 추가하자

import SplashScreen from 'react-native-splash-screen';

export default class App extends Component {
  componentDidMount() {
    SplashScreen.hide();
  }

  render() {
     // ...
  }
}

이제 리액트 네이티브를 실행하면 다음처럼 스플래쉬 이미지가 적용된 것을 확인할 수 있다.

참고

저작자표시 비영리

PREV 1 NEXT

훈마로의 보물창고