크롬 웹앱에서 다국어 지원

---

 

1. 왜 i18n 라이브러리가 필요한가?

다국어 지원을 직접 구현하는 것도 가능하지만, 이미 검증된 라이브러리를 사용하면 많은 시간과 노력을 절약할 수 있습니다. 특히 i18next와 같은 국제화(i18n) 라이브러리는 다음과 같은 기능을 제공합니다:

• 동적 텍스트 삽입: {name}과 같은 변수를 포함한 텍스트를 쉽게 처리.
• 복수형 처리: 언어별로 복수형 규칙이 다른 경우(예: 영어는 "1 item", "2 items"처럼).
• 네임스페이스 분리: 번역 파일을 모듈화하여 관리하기 쉽게 만듦.
• 플러그인 지원: 날짜, 숫자, RTL 지원 등을 쉽게 추가.

---

2. i18next를 통한 다국어 지원 구현

2.1 i18next 설치 및 초기화

먼저, 프로젝트에 i18next와 관련 플러그인을 설치합니다.

npm install i18next i18next-browser-languagedetector i18next-http-backend

초기화 코드

import i18next from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';

i18next
  .use(LanguageDetector) // 사용자의 브라우저 언어 자동 감지
  .use(Backend) // 번역 파일 로딩
  .init({
    fallbackLng: 'en', // 기본 언어 설정
    debug: true, // 디버깅 활성화
    interpolation: {
      escapeValue: false // XSS 공격 방지 (React에서는 불필요)
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json' // 번역 파일 경로
    }
  });

2.2 번역 파일 작성

번역 파일은 JSON 형식으로 작성합니다. 예를 들어, en/translation.json과 ko/translation.json 파일을 생성합니다.

en/translation.json

{
  "welcome": "Hello, {{name}}!",
  "greeting": "Good morning",
  "items": "{{count}} item",
  "items_plural": "{{count}} items"
}

ko/translation.json

{
  "welcome": "안녕하세요, {{name}}님!",
  "greeting": "좋은 아침입니다",
  "items": "{{count}}개",
  "items_plural": "{{count}}개"
}

2.3 동적 텍스트 삽입 및 복수형 처리

i18next는 동적 텍스트 삽입과 복수형 처리를 간단하게 지원합니다.

예제 코드

// 동적 텍스트 삽입
const name = "사용자";
console.log(i18next.t('welcome', { name })); // 출력: 안녕하세요, 사용자님!

// 복수형 처리
console.log(i18next.t('items', { count: 1 })); // 출력: 1개
console.log(i18next.t('items', { count: 5 })); // 출력: 5개

---

3. RTL(Right-to-Left) 지원

일부 언어(예: 아랍어, 히브리어)는 오른쪽에서 왼쪽으로 읽습니다. 이를 지원하려면 CSS와 JavaScript를 함께 사용해야 합니다.

3.1 CSS 설정

html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

3.2 JavaScript로 RTL 적용

사용자가 RTL 언어를 선택했을 때, dir 속성을 변경합니다.

function setLanguageDirection(language) {
  const isRTL = ['ar', 'he'].includes(language); // RTL 언어 목록
  document.documentElement.setAttribute('dir', isRTL ? 'rtl' : 'ltr');
}

// 예시: 아랍어 선택 시 RTL 적용
setLanguageDirection('ar');

---

4. 날짜, 시간, 숫자 지역화

날짜와 시간, 숫자는 지역별로 다르게 표기됩니다. 이를 위해 Intl 객체를 사용합니다.

4.1 날짜 및 시간 지역화

const date = new Date();
const formatter = new Intl.DateTimeFormat('ko-KR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
});
console.log(formatter.format(date)); // 출력: 2023년 10월 5일 오후 3:30

4.2 숫자 지역화

const number = 1234567.89;
const formatter = new Intl.NumberFormat('ko-KR', {
  style: 'currency',
  currency: 'KRW'
});
console.log(formatter.format(number)); // 출력: ₩1,234,567.89

---

5. 번역 파일 관리 및 최적화

5.1 번역 파일 분리

대규모 프로젝트에서는 번역 파일을 네임스페이스로 분리하여 관리하는 것이 좋습니다. 예를 들어, common.json, home.json, settings.json 등으로 나눌 수 있습니다.

i18next.init({
  ns: ['common', 'home'], // 네임스페이스 정의
  defaultNS: 'common' // 기본 네임스페이스
});

5.2 번역 파일 로딩 최적화

번역 파일을 지연 로딩(lazy loading)하여 초기 로드 시간을 줄일 수 있습니다.

i18next.init({
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json'
  },
  preload: ['en', 'ko'] // 미리 로드할 언어
});

---

6. 테스트 및 디버깅

6.1 단위 테스트

번역이 제대로 작동하는지 확인하기 위해 Jest와 같은 테스트 도구를 사용할 수 있습니다.

test('welcome message translation', () => {
  const translated = i18next.t('welcome', { name: 'John' });
  expect(translated).toBe('Hello, John!');
});

6.2 크로스 브라우저 테스트

각 브라우저에서 동작을 확인하고, RTL 언어나 특수 문자가 포함된 텍스트가 올바르게 렌더링되는지 확인합니다.

---

7. 결론

크롬 웹앱에서 다국어 지원을 구현하는 것은 단순히 텍스트를 번역하는 것을 넘어, 사용자 경험을 극대화하는 중요한 과정입니다. i18next와 같은 강력한 라이브러리를 활용하면 번역 관리, 동적 텍스트 처리, RTL 지원 등을 효율적으로 처리할 수 있습니다. 또한, 날짜와 숫자의 지역화, 번역 파일의 최적화, 그리고 철저한 테스트를 통해 신뢰성 있는 다국어 지원을 구현할 수 있습니다.

개발자로서 다국어 지원을 성공적으로 구현하면 애플리케이션의 글로벌 확장성을 크게 높일 수 있습니다. 이 문서가 여러분의 프로젝트에 실질적인 도움이 되길 바랍니다!

---

참고 자료

• i18next 공식 문서
• MDN - Intl API