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>
  );
}

추출 요구 사항:

하드코딩된 문자열을 react-intl 훅과 컴포넌트로 대체
변수 및 복수형에 ICU 포맷팅 사용
컴포넌트 구성에 따라 키를 계층적으로 구성
모든 키를 소스 JSON 파일에 추가
일관된 명명 규칙 유지

AI 프롬프트:

React 컴포넌트에서 모든 하드코딩된 문자열을 추출하고:

1. react-intl로 대체:
   - 동적 문자열에는 useIntl 훅 사용
   - 정적 텍스트에는 FormattedMessage 사용
   - 변수({name})와 복수형({count})에 ICU 포맷팅 추가

2. 번역 키 구조화:
   - 컴포넌트 계층에 따라 그룹화(components.*, pages.*)
   - 설명적이고 중첩된 키 사용(header.nav.home)
   - JSON에서 컴포넌트 구조와 일치시키기

3. 로케일 업데이트:
   - 모든 키를 src/locales/en.json에 추가
   - 앱 전체에서 일관된 명명 유지

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 i18n

이 명령은 소스 파일의 번역 버전을 생성합니다:

src/locales/
  en.json    (추출된 키가 있는 소스)
  es.json    (스페인어 번역)
  fr.json    (프랑스어 번역)
  de.json    (독일어 번역)

유효성 검증

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

번역 커버리지 확인:

npx lingo.dev@latest i18n --frozen

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

다양한 로케일로 테스트:

// 앱에서 로케일을 전환하여 번역이 작동하는지 확인
<IntlProvider locale="es" messages={spanishMessages}>
  <WelcomeCard />
</IntlProvider>