피드로 돌아가기
Stop Shipping 20 Locale Files in React Native: On-Device Translation for Dynamic Language Packs
Dev.toDev.to
Frontend

On-Device Translation 기반 Dynamic Language Pack 도입으로 번들 크기 최적화 및 유지보수 효율화

Stop Shipping 20 Locale Files in React Native: On-Device Translation for Dynamic Language Packs

Subrata Kumar Das2026년 6월 2일8intermediate

Context

전통적인 정적 JSON Locale 파일 방식의 다국어 지원은 언어 확장 시 번들 크기가 선형적으로 증가하는 한계 존재. 빈번한 Copy 변경 시 모든 Locale 파일을 동기화해야 하는 Operational Debt와 서버 사이드 번역 API 호출 시 발생하는 Latency 및 비용 문제가 병목 지점으로 작용함.

Technical Solution

  • Google ML Kit Translate 기반의 Native Bridge 설계를 통한 On-Device Translation 엔진 구현
  • Source Language를 Canonical 데이터로 유지하고 Target Language를 로컬에서 생성하는 Derived Data 구조 채택
  • Language Code Normalization 레이어를 통해 앱 내부 식별자와 Translator 지원 코드 간의 불일치 해소
  • Flatten Source Dictionary와 캐시된 데이터를 비교하여 누락된 키만 번역하는 Incremental Generation 워크플로우 적용
  • Native Translator Module을 통한 모델 다운로드 및 Batch Translation 수행 후 로컬 저장소에 캐싱하는 3계층 아키텍처 설계

- 법률/금융 등 고정밀도가 필요한 텍스트는 인간 검수 프로세스를 병행하는 하이브리드 전략 검토 - 모델 다운로드 및 번역 실행 시간에 따른 UX 처리를 위해 Progress State UI 반영 필수 - 생성된 Language Pack을 Source of Truth가 아닌 Local Cache로 취급하는 데이터 흐름 설계 - 다국어 지원 범위 확장 시 정적 파일 배포 대신 On-Device 캐싱 기반의 Dynamic Loading 구조 고려

원문 읽기