피드로 돌아가기
Internationalizing a Firefox Extension: i18n Without a Library
Dev.toDev.to
Frontend

외부 라이브러리 없이 browser.i18n API만으로 구현한 경량화 다국어 시스템

Internationalizing a Firefox Extension: i18n Without a Library

Weather Clock Dash2026년 5월 4일5beginner

Context

Firefox 확장 프로그램 개발 시 외부 i18n 라이브러리 도입에 따른 번들 크기 증가 및 런타임 오버헤드 발생 가능성 존재. 브라우저 내장 API를 활용하여 의존성을 제거하고 시스템 복잡도를 낮추는 최적화된 다국어 처리 구조 필요.

Technical Solution

  • _locales 디렉토리 구조화를 통한 언어별 messages.json 분리 및 정적 리소스 관리
  • manifest.json 내 MSG*_ 문법 적용으로 확장 프로그램 메타데이터의 선언적 Localization 구현
  • data-i18n 커스텀 속성과 DOMContentLoaded 이벤트 기반의 런타임 텍스트 주입 로직 설계
  • browser.i18n.getMessage API와 Placeholders 활용으로 언어별 어순 차이에 대응하는 가변 문자열 처리
  • getUILanguage API 기반의 RTL(Right-to-Left) 언어 감지 및 document.dir 속성 제어를 통한 UI 레이아웃 동적 변경
  • Pseudo-localization 함수 구현을 통한 실제 번역 전 UI Overflow 사전 검증 프로세스 도입

1. 문자열 연결(Concatenation) 대신 Placeholders를 사용하여 언어별 어순 변경에 대응했는가

2. English를 Base Locale로 설정하고 타 언어는 차분(Diff) 기반으로 관리하여 중복을 최소화했는가

3. RTL 언어 지원 시 단순 텍스트 변경을 넘어 document dir 속성 제어 로직을 포함했는가

4. Intl.DateTimeFormat 및 Intl.NumberFormat 등 브라우저 표준 API로 복잡한 포맷팅을 대체했는가

원문 읽기