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

배경

운영 중인 React Native 앱의 Android 버전에서 초기 로딩 속도가 느리다는 피드백이 지속적으로 들어왔다. 특히 중저가 디바이스에서 흰 화면이 3초 이상 지속되는 문제가 있었다.

React Native 0.64부터 Hermes가 안정화되었다는 소식을 듣고 적용을 결정했다.

Hermes 적용

android/app/build.gradle에서 설정을 변경했다.

project.ext.react = [
    enableHermes: true
]

적용 후 클린 빌드가 필요했다.

cd android
./gradlew clean
cd ..
npx react-native run-android

결과

• TTI(Time to Interactive): 2.8초 → 1.7초 (약 39% 개선)
• APK 크기: 52MB → 48MB (약 8% 감소)
• 메모리 사용량: 큰 차이 없음

이슈 대응

Intl API 미지원

날짜 포맷팅에 사용하던 Intl.DateTimeFormat이 Hermes에서 동작하지 않았다. date-fns로 교체했다.

// Before
const formatted = new Intl.DateTimeFormat('ko-KR').format(date);

// After
import { format } from 'date-fns';
const formatted = format(date, 'yyyy-MM-dd');

Proxy 미지원

MobX에서 Proxy를 사용하는 부분이 있었는데, Hermes는 Proxy를 지원하지 않았다. MobX 설정에서 useProxies: "never"를 추가했다.

정리

Hermes 도입으로 Android 성능이 체감 가능할 정도로 개선되었다. iOS는 JavaScriptCore가 충분히 빠르기 때문에 당분간 적용하지 않기로 했다. 일부 호환성 이슈가 있지만 대부분 대안이 존재했고, 성능 개선 효과가 확실했다.