i18n 구현 방법 비교

i18n 구현 방법 비교

React i18next 방식

import { useTranslation } from 'react-i18next';

const { t } = useTranslation();

// 사용법
t('message', { count: 5 });
t('user.name', { name: 'John' });

Lighthouse ICU MessageFormat 방식

import * as i18n from '../lib/i18n/i18n.js';

const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

// 사용법
str_(UIStrings.unsupportedCSSProperty, {
  propertyCount: properties.length,
  properties: properties.join(', ')
});

차이점과 특징

React i18next

// 번역 파일 (JSON)
{
  "message": "You have {{count}} items",
  "message_plural": "You have {{count}} items"
}

// 사용
t('message', { count: 1 });  // "You have 1 item"
t('message', { count: 5 });  // "You have 5 items"

Lighthouse ICU

// UI 문자열 정의 (소스코드에서)
unsupportedCSSProperty: `{propertyCount, plural,
  =1 {Unsupported CSS Property: {properties}}
  other {Unsupported CSS Properties: {properties}}
}`,

// 사용
str_(UIStrings.unsupportedCSSProperty, {
  propertyCount: 1,
  properties: "height"
});  // "Unsupported CSS Property: height"

str_(UIStrings.unsupportedCSSProperty, {
  propertyCount: 3,
  properties: "height, width, color"
});  // "Unsupported CSS Properties: height, width, color"

왜 Lighthouse가 ICU를 선택했나?

1. Google 표준: Google 내부 프로젝트들이 공통으로 사용

2. Unicode 표준: 국제 표준이므로 안정적

3. 복잡한 복수형 지원: 언어별 복수형 규칙을 정확히 처리

4. 조건부 메시지: 단순 번역을 넘어서 복잡한 로직 지원

React i18next vs ICU

구현한 부분에서의 ICU 활용

// 추가한 새로운 메시지
unsupportedCustomCSSProperty: `{propertyCount, plural,
  =1 {Custom CSS properties cannot be animated on the compositor: {properties}}
  other {Custom CSS properties cannot be animated on the compositor: {properties}}
}`,

// 실제 사용에서 ICU 엔진이 처리하는 과정:
// 입력: propertyCount=2, properties="--swing-y, --rotation"
// ICU 처리: propertyCount != 1 이므로 "other" 브랜치 선택
// 결과: "Custom CSS properties cannot be animated on the compositor: --swing-y, --rotation"