📖
i18n 다국어 번역 키 비교기 및 사전 감사 도구 기술 가이드
글로벌 웹 및 모바일 애플리케이션 개발 시 다국어 지원(i18n, Internationalization)은 필수적인 요소입니다. React(`react-i18next`), Vue(`vue-i18n`), Angular 등 현대 프론트엔드 프레임워크는 언어별 번역 메시지를 JSON 사전 파일(`en.json`, `ko.json`, `ja.json` 등)로 관리합니다. 그러나 신기능 추가와 빠른 리팩토링 과정에서 개발자가 기준 언어 파일에는 신규 UI 키를 추가하고 타겟 언어 파일에는 번역 키 입력을 누락하는 실수가 빈번하게 발생합니다. 이로 인해 실제 운영 화면에 번역 텍스트 대신 `auth.login.submit_button` 같은 원시 키 문자열이 노출되거나 화면 렌더링 에러가 발생합니다. JuicyDevs i18n 번역 키 비교기는 중첩된 JSON 구조를 점 표기법(`auth.login.title`)으로 자동 평탄화(Flatten)한 후, 언어 간 차이점(Set Difference)을 계산하여 누락된 번역 키(Missing Keys), 빈 문자열(`""`), 미사용 고아 키(Orphaned Keys)를 자동으로 추출해 주는 100% 클라이언트 사이드 검수 도구입니다.
🔒실무 기술 스펙 & 100% 클라이언트 로컬 연산 아키텍처
깊이 우선 탐색(DFS) 알고리즘으로 중첩 객체를 재귀 순회하여 자바스크립트 `Map` 객체로 평탄화합니다. 이어서 두 맵 간의 차집합($A \setminus B$) 연산을 통해 누락된 키 세트를 100% 로컬 RAM에서 계산합니다.
✨ 주요 기술 스펙 & 특장점
- •기준 언어(Base Locale)와 대상 언어(Target Locale) 간 번역 키 누락 자동 탐지
- •중첩된 JSON 트리를 점 표기법(`user.profile.title`)으로 전환하는 재귀적 평탄화(Flatten) 처리
- •누락된 키, 값이 비어있는 빈 문자열(`""`), 기준 파일에 없는 고아 키(Orphaned Keys) 구별 표시
- •번역가 전달용 누락 키 JSON 템플릿 원클릭 추출 기능
- •양측 JSON 구문 검증(Linting) 및 자동 정렬 에디터 내장
- •100% 로컬 브라우저 연산으로 사내 미공개 서비스 텍스트 유출 차단
🚀 단계별 실무 가이드
- 1좌측 에디터(Base Locale)에 마스터 기준 언어(예: `en.json`) 데이터를 붙여넣습니다.
- 2우측 에디터(Target Locale)에 검수 대상 언어(예: `ko.json`) 데이터를 붙여넣습니다.
- 3하단 감사 리포트 대시보드에서 누락된 키 수, 빈 값 수, 고아 키 수 통계를 확인합니다.
- 4"누락된 키 복사" 버튼을 눌러 번역에 필요한 키 목록을 JSON 포맷으로 내보냅니다.
- 5외주 번역가나 사내 담당자에게 전달하여 누락된 번역 텍스트를 완성한 후 코드 베이스에 반영합니다.