React Native에서 Hermes 엔진 도입 후 번들 사이즈 개선

문제 상황

회사 안드로이드 앱의 초기 로딩 속도가 3초 이상 소요되면서 사용자 이탈률이 증가했다. 특히 저사양 기기에서 문제가 심각했다.

Hermes 도입 결정

React Native 0.70부터 Hermes가 기본 엔진으로 채택되기 전이었지만, 이미 안정화된 상태였다. 주요 기대 효과는 다음과 같았다.

• APK 사이즈 감소
• 앱 시작 시간 단축
• 메모리 사용량 최적화

적용 과정

android/app/build.gradle 수정:

project.ext.react = [
    enableHermes: true
]

빌드 후 즉시 크래시가 발생했다. react-native-fast-image 라이브러리가 Proxy 객체를 사용하는 부분에서 문제가 생겼다.

호환성 문제 해결

문제가 된 라이브러리들:

1. react-native-fast-image: 최신 버전으로 업데이트
2. realm: Hermes 지원 버전으로 마이그레이션
3. Intl polyfill: Hermes에 내장되어 제거 가능

특히 Realm 마이그레이션이 까다로웠다. 기존 DB 스키마 유지를 위해 마이그레이션 스크립트를 작성했다.

const schemaVersion = 5;
const migration = (oldRealm, newRealm) => {
  if (oldRealm.schemaVersion < 5) {
    // 기존 데이터 유지
  }
};

결과

• APK 사이즈: 42MB → 34MB (19% 감소)
• TTI: 3.2초 → 2.1초 (34% 개선)
• 메모리: 평균 180MB → 140MB

특히 저사양 기기(RAM 2GB 이하)에서 체감 개선이 컸다.

주의사항

Hermes는 일부 ES6+ 기능을 완벽히 지원하지 않는다. Proxy 객체 사용에 주의가 필요하고, 써드파티 라이브러리 호환성을 사전에 확인해야 한다.

iOS는 JSC 성능이 충분해서 당분간 Hermes를 적용하지 않기로 했다.