React Native에서 Hermes 엔진 적용 후 앱 시작 속도 개선

배경

운영 중인 React Native 앱의 초기 로딩 속도가 느리다는 피드백이 계속 들어왔다. 특히 저사양 Android 기기에서 앱 시작까지 3~4초가 걸렸다.

React Native 0.64부터 Hermes가 iOS에서도 정식 지원되면서, 이번 기회에 양쪽 플랫폼 모두 적용하기로 했다.

Hermes 적용

android/app/build.gradle에서 설정 추가:

project.ext.react = [
    enableHermes: true
]

iOS는 Podfile에서:

use_react_native!(
  :hermes_enabled => true
)

발생한 문제

1. Intl API 미지원

Hermes는 기본적으로 Intl API를 지원하지 않았다. 날짜 포맷팅에 Intl.DateTimeFormat을 쓰던 부분이 모두 크래시가 났다.

해결책으로 @formatjs/intl-polyfill 시리즈를 추가했다:

import '@formatjs/intl-getcanonicallocales/polyfill';
import '@formatjs/intl-locale/polyfill';
import '@formatjs/intl-datetimeformat/polyfill';

2. Proxy 미지원

MobX에서 Proxy를 사용하는 부분이 있었는데, Hermes는 Proxy를 지원하지 않았다. MobX 설정에서 useProxies: false 옵션을 추가해 해결했다.

import { configure } from 'mobx';

configure({
  useProxies: 'never'
});

성능 측정 결과

Galaxy S9 기준:

• 적용 전: 3.2초
• 적용 후: 1.9초 (약 40% 개선)

iPhone 11:

• 적용 전: 1.8초
• 적용 후: 1.3초 (약 28% 개선)

APK 크기는 약 2MB 감소했다. Bundle 크기가 줄어든 효과였다.

결론

Hermes 적용으로 체감 가능한 성능 개선을 얻었다. Intl, Proxy 등 일부 JS 기능이 제한되지만, polyfill로 충분히 해결 가능했다.

저사양 기기 사용자 비율이 높은 서비스라면 적용을 고려해볼 만하다.