피드로 돌아가기
Dev.toFrontend
원문 읽기
12개 언어 확장 및 10,800개 엔트리 처리를 위한 i18n 아키텍처 최적화
Translating 30 Pages into 12 Languages Without Losing Your Mind
AI 요약
Context
Hardcoded 문자열 기반의 30개 페이지를 12개 언어로 확장해야 하는 상황에서 기존 minimal context provider 기반 i18n 시스템의 확장성 한계 직면. UI 우선 개발 후 i18n을 사후 적용함에 따라 발생하는 동적 값 처리 및 다국어 문법 구조 차이로 인한 병목 발생.
Technical Solution
- TypeScript Object 기반 번역 파일 설계를 통한 Compile-time Type Check 및 Autocomplete 구현
- 단순 문자열 결합 방식의 한계를 극복하기 위해 Interpolation 방식의 변수 삽입 구조 채택
page.element및common.element규칙의 계층적 Key Naming Convention 수립으로 병렬 작업 시 Collision 방지tsc --noEmit및forceConsistentCasingInFileNames옵션을 활용한 Duplicate Key 검출 프로세스 구축- Locale 기반
dir="rtl"속성 동적 할당 및 Root Element 제어를 통한 Arabic 언어 레이아웃 대응 grep기반의 Key Count Diffing 스크립트를 활용하여 언어 파일 간 Missing Key 정밀 검수
실천 포인트
1. 하드코딩된 문자열의 사후 추출보다 초기 단계의 t() 함수 적용 습관화
2. 단순 결합 방식이 아닌 Interpolation 방식을 통한 언어별 어순 차이 해결
3. CI 단계에서 Translation Key 간의 구조적 동일성을 검증하는 Diff 스크립트 운영
4. RTL 지원 언어 포함 시 Tailwind CSS의 방향성 유틸리티(space-x-* 등) 동작 확인