AI로 i18n 키 추출하기

기존 React 앱을 다국어 지원으로 전환하는 것은 때때로 하드코딩된 문자열을 찾아 번역 키로 교체하는 지루한 과정입니다.

Lingo.dev CLI는 Cursor, GitHub Copilot 등 AI 기반 IDE와 원활하게 작동하여 React 컴포넌트에서 번역 가능한 콘텐츠 추출을 자동화합니다.

아래 설명된 개념은 모든 기술 스택에 사용할 수 있지만, 간단하고 아이디어를 설명하기 위해 hello world React 앱을 예시로 사용하겠습니다.

사전 요구사항

키를 추출하기 전에 React 앱에서 기본 국제화를 설정하세요. 전체 설정 지침은 react-intl 문서를 참조하세요.

기술 스택에 대한 국제화 설정을 완료한 후 프로젝트에는 다음이 포함되어야 합니다:

  • 앱에서 언어를 동적으로 전환하는 기능
  • 번역 파일을 구성하기 위한 기본 프로젝트 구조

설정 프로세스

Lingo.dev CLI 설치 및 구성:

npx lingo.dev@latest init

빈 소스 파일 생성:

mkdir -p src/locales
echo '{}' > src/locales/en.json

i18n.json 구성:

{
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "json": {
      "include": ["src/locales/[locale].json"]
    }
  }
}

AI로 키 추출하기

React 컴포넌트를 선택하고 AI IDE를 사용하여 하드코딩된 문자열을 추출하세요:

추출 전:

function WelcomeCard() {
  return (
    <div className="card">
      <h2>Welcome to our platform</h2>
      <p>Start your journey with us today</p>
      <button>Get started</button>
    </div>
  );
}

추출 요구사항:

  1. 하드코딩된 문자열을 react-intl 훅 및 컴포넌트로 교체
  2. 변수 및 복수형에 ICU 형식 사용
  3. 컴포넌트 구성에 따라 키를 계층적으로 구조화
  4. 모든 키를 소스 JSON 파일에 추가
  5. 일관된 명명 규칙 유지

AI 프롬프트:

Extract all hardcoded strings from React components and:

1. Replace with react-intl:
   - Use useIntl hook for dynamic strings
   - Use FormattedMessage for static text
   - Add ICU formatting for variables ({name}) and plurals ({count})

2. Structure translation keys:
   - Group by component hierarchy (components.*, pages.*)
   - Use descriptive, nested keys (header.nav.home)
   - Match component structure in JSON

3. Update locales:
   - Add all keys to src/locales/en.json
   - Maintain consistent naming across app

AI 추출 후:

import { useIntl } from "react-intl";

function WelcomeCard() {
  const intl = useIntl();

  return (
    <div className="card">
      <h2>{intl.formatMessage({ id: "welcome.title" })}</h2>
      <p>{intl.formatMessage({ id: "welcome.description" })}</p>
      <button>{intl.formatMessage({ id: "welcome.getStarted" })}</button>
    </div>
  );
}

생성된 en.json:

{
  "welcome.title": "Welcome to our platform",
  "welcome.description": "Start your journey with us today",
  "welcome.getStarted": "Get started"
}

일괄 처리

여러 컴포넌트의 경우 모든 파일을 선택하고 동일한 포괄적인 프롬프트를 사용하세요. Cursor, GitHub Copilot 등의 AI IDE는 여러 파일을 동시에 처리하면서 애플리케이션 전체에서 일관된 키 명명을 유지할 수 있습니다.

번역 생성

AI IDE가 키를 추출한 후 번역을 생성하세요:

npx lingo.dev@latest run

이렇게 하면 소스 파일의 번역된 버전이 생성됩니다:

src/locales/
  en.json    (source with extracted keys)
  es.json    (Spanish translations)
  fr.json    (French translations)
  de.json    (German translations)

검증

추출 후 설정을 확인하세요:

번역 범위 확인:

npx lingo.dev@latest run --frozen

이 명령은 누락된 번역이 있으면 실패하여 완전한 범위를 보장합니다.

다양한 로케일로 테스트:

// Switch locale in your app to verify translations work
<IntlProvider locale="es" messages={spanishMessages}>
  <WelcomeCard />
</IntlProvider>