Builder.shin

React Native에서 Hermes 엔진 도입 후 앱 성능 개선

문제 상황

운영 중인 React Native 0.63 앱의 Android 사용자들로부터 초기 로딩이 느리다는 피드백이 계속 들어왔다. 특히 중저가 디바이스에서 앱 시작 후 첫 화면이 나오기까지 3~4초 정도 소요되었다.

Hermes 엔진 도입

Facebook이 공개한 Hermes는 React Native에 최적화된 JavaScript 엔진이다. android/app/build.gradle에서 간단히 활성화할 수 있다.

project.ext.react = [
    enableHermes: true
]

그리고 android/app/proguard-rules.pro에 난독화 규칙을 추가했다.

-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.jni.** { *; }

성능 측정 결과

동일한 Galaxy A30 디바이스로 측정한 결과:

  • APK 크기: 42MB → 38MB (약 10% 감소)
  • TTI (Time To Interactive): 3.2초 → 1.9초 (약 40% 개선)
  • 메모리 사용량: 평균 145MB → 110MB

특히 앱 시작 시 JS 번들 파싱 시간이 크게 단축되었다. Hermes는 빌드 타임에 바이트코드로 미리 컴파일하기 때문에 런타임 파싱 오버헤드가 없다.

주의사항

Hermes는 일부 ES6+ 기능을 지원하지 않는다. Proxy 객체를 사용하던 상태 관리 라이브러리를 교체해야 했고, 일부 폴리필을 추가했다. 또한 iOS는 아직 실험 단계라 Android만 적용했다.

재택근무로 사용자 피드백 확인이 어려웠지만, Crashlytics 지표상 ANR 발생률도 함께 감소한 것을 확인했다.