한지 - 한조각 쓸모있는 지식 레터

대부분의 성행하는 앱들은

앱 실행시 진입 화면이 있다.

그것이 광고성 이미지가 될수도있고

앱을 간략히 소개하는 이미지가 될수도 있다.

우리도 앱개발을 하다보면

반드시 넣을수밖에 없는 기능이라고 봐야한다.

준비물

1. react-native-splash-screen

2. @bam.tech/react-native-make

// splash-screen
npm install react-native-splash-screen
or
yarn add react-native-splash-screen


// helper
npm install --save-dev @bam.tech/react-native-make
or
yarn add npm --dev @bam.tech/react-native-make

@bam.tech/react-native-make는 설치시

설정할것은 따로없다.

react-native-splash-screen은 문서에 따르면

무언가 많이 설정해줘야하지만

그것을 따르지말고

아래의 가이드라인만 따라서 해보자

// android/app/src/main/java/com/[projectName]/MainActivity.java

...
import org.devio.rn.splashscreen.SplashScreen;
...

public class MainActivity extends ReactActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this, R.style.SplashScreenTheme); // 여기 추가
    super.onCreate(savedInstanceState);
  }

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "ProjectName";
  }
}

...
#import "RNSplashScreen.h"
...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  ...
  
  [RNSplashScreen show];
  return YES;
}

헬퍼로 이미지 변환해서 splash file 설정하는 스크립트 추가

// 사용방법: react-native set-splash --path [path-to-image] --resize [contain|cover|center] --background ["background-color"]
// NOTE: 이렇게 스크립트를 만들어두면 잊어버릴일도 없고, 이미지나 배경색상을 바꿀때 이 스크립트만 수정해주면 된다
// package.json

"scripts": {
  ...
  "splash": "react-native set-splash --path [image path] --background ['color'] --resize contain"
}

스크립트를 실행시켜보자

npm run splash

마지막으로, 실행된 스크립트가

앱 실행후 자동으로 닫히도록

코드를 추가

// project root - index.js or app.js

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

...
useEffect(() => {
  SplashScreen.hide();
}, []);
...


or 

...
useEffect(() => {
  setTimeout(() => {
    SplashScreen.hide();
  }, 1500);
}, []);
...

ReactNative 최고의 장점은 누가 뭐래도 크로스 플랫폼이라는 것이다.

나 또한 그것이 RN을 선택하게 된 이유 중 하나였다.

그동안 ios 개발은커녕 ios, mac os 그 무엇 하나 이용해본 적이 없던 나에게는 수많은 시련이 다가왔다.

안드로이드 개발도 전혀 경험이 없었지만 윈도우에서 개발이 가능하다는 것과 그동안 계속해서 안드로이드 핸드폰을 써왔다는 것만으로 친숙한 환경에서 개발하는 듯한 느낌을 주었다. 그래서 훨씬 수월했다. (솔직히 안드로이드가 개발이든 배포든지 간에 더 쉬운 것 같다.)

첫 번째 시련은 mac 없이는 보다 정확히는 mac의 xcode 없이는 개발이 불가능하다는 것을 알게 되었다.

개인 개발자에 불과했던 내게는 금전적인 벽은 생각보다 넘기 힘든 부분이었다.

모두가 잘 알고 있듯이 맥의 가격은 일반 노트북들보다 몇십만 원 이상 비싸다.

다행히도 내게는 지문 자국 하나 나지 않은 새것에 가까운 LG 그램이 있었고, 그램을 판매 후 중고 맥북을 사들였다.

맥을 이용해 안드로이드와 ios를 넘나들며 꾸준히 두 개의 플랫폼 모두 잘 만들어가지고 있는지 체크했다.

이 과정이 생각보다 귀찮은 부분이다. (안드로이드를 베이스로 개발하며 중간중간 ios가 잘 되고 있는지 체크했다.)

개인적으로는 안드로이드는 제법 수월했다. 크기가 아닌 비율을 활용해서 개발을 하고 나면 어느 기종이든 상관없이 화면이 아주 깔끔하게 잘 나왔다. (어느 블로그에서 보면 수천 종의 안드로이드 디바이스에 맞추는 것을 어려운 일이라고 하나 그것은 잘못된 얘기라고 생각된다)

하지만, 역시나 문제는 ios였다. 첫 번째로, iPhonX와 같은 무베젤 폰에 대한 처리가 필요했다.

react-native-iphone-x-helper라는 npm 라이브러리를 이용해 기종 체크를 하고 padding을 주는 것으로 처리하였다.

두 번째로, iPhoneX가 아니어도 안드로이드와 다르게 상태 바(status bar) 영역을 존중하지 않고 개발한 화면이 해당 영역을 침범하는 것이 발견되었다. (안드로이드에서는 상태 바 영역은 고유의 영역으로 개발자가 임의로 침범할 수 없다. 따라서, 별도의 핸들링을 해줄 필요가 없다)

마찬가지로, ios 중 무베젤이 아닌 기종의 경우에 대해서 padding을 주는 것으로 처리하였다.

마지막으로, 팁을 하나 주고자 한다.

모든 screen의 가장 바깥쪽을 커스터마이징한 VIew 컴포넌트로 감싸주는 것이 내게는 아주 도움이 되었다.

<CustomView> ... </CustomView>

이런 식으로 모든 화면을 감싸두면, 나중에 위의 사례와 같이 화면 비율이나 기기 특성에 따라 모든 화면의 스타일을 핸들링해야 될 때 정말 편하게 할 수 있다.