혹시나 하는 마음에 제목 뒤에 #1을 붙이고는 하는데 정말 두 번째 이야기를 하게 될지는 몰랐네요. "RN 가볍게 만들기 #1"에서는 react-native-firebase와 lodash 라이브러리의 크기를 줄이는 과정을 통해 앱을 가볍게 만드는 과정을 설명드렸었죠.

이번에는 소셜 로그인 기능 때문에 많이 사용하는 react-native-fbsdk, react-native-google-signin과 효율적인 이미지 컴포넌트를 제공하는 react-native-fast-image 라이브러리의 크기를 줄여서 앱을 경쾌하게 만드는 과정을 설명해볼까 해요. 재미있을 수 없는 내용이지만 재미있게 봐주세요. (?)

# 앱 크기가 왜 작아야 할까요?

좋아 보이는 라이브러리를 꼭 필요한지 깊게 고민하는 과정 없이 하나 둘 사용하고 고퀄리티의 이미지와 몇 군데 노출되지만 브랜드를 잘(?) 표현하기 위한 커스텀 폰트 같은 리소스들을 넣다보면 앱의 크기가 비대해질 수 있다는 걸 걱정해보신 적이 있으신가요? 아마 많은 분들이 고민해보시지 않았을 겁니다.

아래는 앱 크기가 설치율에 미치는 영향입니다.

(출처 : Effect of Mobile App Size on Downloads)

성능적인 측면을 떠나서 앱이 커질수록 인입된 사용자를 앱 설치로 전환시키는데 부정적인 영향을 준다는 것은 업계 정설입니다. 제가 만들고 있는 Cake는 iOS가 20MB, 안드로이드가 9MB 정도로 매우 가볍게 설치가 가능합니다. 이게 얼마나 작은 것인지는 인기 TOP 100 앱들의 크기를 살펴보시면 아실 수 있습니다.

이 글을 읽고 기회가 될 때마다 크기를 줄이려고 노력하는 습관을 들이시면 여러분도 이렇게 작은 크기의 앱을 만드실 수 있게 될 겁니다. (끝까지 읽어달라는 미끼?)

# 자~ 그럼 시작해볼게요

신규 프로젝트를 만들고 라이브러리들을 설치하고

$ yarn add react-native-fbsdk
$ yarn add react-native-google-signin
$ yarn add react-native-fast-image

react-native-bundle-visualizer를 설치&실행합니다.

$ yarn add --dev react-native-bundle-visualizer@next
$ yarn run react-native-bundle-visualizer
....
**Bundle is 0.58 MB in size**

React Native 기본 프로젝트의 자바스크립트 번들 파일 크기는 0.58 MB입니다. 추가한 모듈이 번들에 포함될 수 있도록 import를 추가합니다.

// App.js
.....

import {
  LoginManager,
  AccessToken,
  GraphRequest,
  GraphRequestManager,
  AppEventsLogger,
} from 'react-native-fbsdk';

import {
	GoogleSignin, 
	statusCodes,
} from 'react-native-google-signin';

import FastImage from 'react-native-fast-image';

const App = () => {

다시 visualizer를 실행해보면 번들이 아주 조금 늘어나는 걸 보니 모듈 들의 JS 구현이 복잡하지 않은 것 같네요!

$ yarn run react-native-bundle-visualizer
....
**Bundle is 0.60 MB in size (+++ has increased with 16782 bytes since last run)**

# 그렇다면 Native를 줄여봅시다