자동화된 i18n 테스트를 위한 의사 현지화

의사 현지화는 실제 번역이 시작되기 전에 국제화(i18n) 문제를 식별하기 위해 소스 텍스트를 가짜 언어로 변환하는 강력한 테스트 기법입니다. 이 가이드에서는 pseudo-l10n npm 패키지를 사용하여 의사 현지화 테스트를 자동화하는 방법을 보여줍니다.

의사 현지화란 무엇인가요?

의사 현지화는 애플리케이션의 소스 텍스트를 번역 후 UI가 어떻게 동작하는지 모방하는 변경된 가짜 언어로 변환하는 과정입니다. 이는 QA 엔지니어와 개발자가 개발 주기 초기에 i18n 문제를 식별하는 데 도움이 됩니다.

잠재적인 국제화 문제를 식별하기 위해 의사 현지화를 사용하는 예시입니다. 폰트와 크기는 양쪽 모두 동일하지만, 다른 스크립트를 지원하려면 더 많은 공간이 필요한 경우가 많습니다.

의사 현지화가 유용한 이유

의사 현지화는 i18n 문제를 조기에 포착하는 데 도움이 됩니다:

• 텍스트 확장으로 인한 레이아웃 깨짐 노출 (독일어와 핀란드는 일반적으로 영어보다 30-40% 더 깁니다).
• UTF-8 지원을 테스트하기 위해 악센트가 있는 문자를 추가하여 인코딩 문제를 표면화합니다.
• 모든 문자열이 번역 가능한지 확인 - 하드코딩된 텍스트는 변경되지 않은 상태로 유지되어 쉽게 발견할 수 있습니다.
• 플레이스홀더 오취급 노출 - {{name}}과 같은 동적 콘텐츠는 보존되어야 합니다.
• 공간 제약이 있는 UI 컴포넌트에 대한 번역 길이 제한을 정의하는 데 도움이 됩니다.

QA를 위한 자동화 전략

의사 현지화로 i18n 테스트를 자동화하는 검증된 전략은 다음과 같습니다:

악센트 및 비라틴 문자

문자 인코딩 및 폰트 지원을 테스트하기 위해 라틴 문자를 악센트가 있는 형태나 다른 스크립트로 교체하세요.

예시: "Save" → "Šàvē"

QA 확인: 모든 문자가 올바르게 표시되는지, 인코딩 문제로 인해 아무것도 깨지지 않는지 확인하세요.

텍스트 확장 시뮬레이션

독일어나 핀란드어처럼 긴 언어를 모방하기 위해 각 문자열을 약 30~40% 자동으로 확장하세요. 쉽게 잘림 현상을 감지할 수 있도록 시각적 마커로 감싸세요.

예시: "Save" → ⟦Šàvēēēēē⟧

QA 확인: 자동화된 스크린샷 비교를 사용하여 UI 넘침, 잘림 또는 정렬 불량을 찾아내세요.

플레이스홀더 스트레스 테스트

번역 중에 보존되는지 확인하기 위해 보간 변수(플레이스홀더)를 가시적인 마커로 교체하세요.

예시: "You have {{count}} items" → "You have <COUNT> items"

QA 확인: 회귀 테스트를 실행하세요; 마커가 누락되었거나 잘못 이스케이프(&lt;COUNT&gt;)된 경우 실패 처리하세요.

RTL 시뮬레이션

아랍어나 히브리어를 시뮬레이션하기 위해 유니코드 제어 문자를 사용하여 텍스트를 오른쪽에서 왼쪽(RTL) 마커로 감싸세요.

QA 확인: RTL 언어에 대해 정렬, 텍스트 방향 및 미러링이 올바른지 확인하세요.

CI/CD 통합

i18n 문제가 프로덕션에 도달하기 전에 포착할 수 있도록 자동화된 테스트 파이프라인에 의사 현지화를 추가하세요.

QA 확인: 테스트에서 누락된 번역, 깨진 플레이스홀더 또는 레이아웃 문제가 감지되면 배포를 차단하세요.

pseudo-l10n 패키지로 자동화

pseudo-l10n npm 패키지는 JSON 번역 파일에 대한 의사 현지화를 자동화하여 개발 워크플로에 i18n 테스트를 쉽게 통합할 수 있게 합니다.

핵심 기능

• 텍스트 확장: 번역된 텍스트가 영어보다 30-40% 더 긴 경우가 많은 상황을 시뮬레이션합니다.
• 악센트 문자: 악센트가 있는 대응 문자로 UTF-8 인코딩 및 폰트 지원을 테스트합니다.
• 시각적 마커: 번역되지 않았거나 잘린 텍스트를 쉽게 찾을 수 있도록 ⟦...⟧ 마커로 문자열을 감쌉니다.
• 플레이스홀더 처리: {{name}}, {count}, %key% 등과 같은 플레이스홀더를 보존합니다.
• RTL 시뮬레이션: 유니코드 제어 문자를 사용하여 오른쪽에서 왼쪽 언어를 시뮬레이션합니다.

설치

명령줄 사용을 위해 pseudo-l10n을 전역으로 설치하세요:

npm install -g pseudo-l10n

또는 개발 종속성으로 추가하세요:

npm install --save-dev pseudo-l10n

기본 사용법

소스 번역 파일을 의사 현지화 버전으로 변환하세요:

pseudo-l10n input.json output.json

변환 예시

입력 (en.json):

{
  "welcome": "Welcome to our application",
  "greeting": "Hello, {{name}}!",
  "itemCount": "You have {{count}} items"
}

출력 (pseudo-en.json):

{
  "welcome": "⟦Ŵëļçõɱë ţõ õür àƥƥļïçàţïõñēēēēēēēēēēēēēēēēēē⟧",
  "greeting": "⟦Ĥëļļõēēēēēē, {{name}}!ēēēēē⟧",
  "itemCount": "⟦Ŷõü ĥàṽë {{count}} ïţëɱšēēēēēēēēēēēēēēēē⟧"
}

고급 기능

사용자 지정 확장

pseudo-l10n en.json pseudo-en.json --expansion=30

RTL 시뮬레이션

아랍어나 히브리어와 같은 오른쪽에서 왼쪽 언어를 시뮬레이션하세요:

pseudo-l10n en.json pseudo-ar.json --rtl

시각적 테스트를 위한 플레이스홀더 교체

더 쉬운 시각적 감지를 위해 플레이스홀더를 대문자 마커로 교체하세요:

pseudo-l10n en.json pseudo-en.json --replace-placeholders

# Input:  { "greeting": "Hello, {{name}}!" }
# Output: { "greeting": "⟦Ĥëļļõēēēēēē, <NAME>!ēēēēē⟧" }

다양한 플레이스홀더 형식 지원

이 패키지는 다양한 i18n 라이브러리에서 사용하는 여러 플레이스홀더 형식을 지원합니다:

# For i18next (default)
pseudo-l10n en.json pseudo-en.json --placeholder-format="{{key}}"

# For Angular/React Intl
pseudo-l10n en.json pseudo-en.json --placeholder-format="{key}"

# For sprintf style
pseudo-l10n en.json pseudo-en.json --placeholder-format="%key%"

프로그래밍 방식 사용

Node.js 스크립트나 빌드 프로세스에서 프로그래밍 방식으로 pseudo-l10n을 사용하세요:

const { generatePseudoLocaleSync, pseudoLocalize } = require('pseudo-l10n');

// Generate a pseudo-localized JSON file
generatePseudoLocaleSync('en.json', 'pseudo-en.json', {
  expansion: 40,
  rtl: false
});

// Pseudo-localize a single string
const result = pseudoLocalize('Hello, {{name}}!');
console.log(result);
// Output: ⟦Ĥëļļõēēēēēēēēēēēēēē, {{name}}!ēēēēē⟧

워크플로에 통합

npm 스크립트

package.json 스크립트에 의사 현지화 생성을 추가하세요:

{
  "scripts": {
    "pseudo": "pseudo-l10n src/locales/en.json src/locales/pseudo-en.json",
    "pseudo:rtl": "pseudo-l10n src/locales/en.json src/locales/pseudo-ar.json --rtl"
  }
}

빌드 프로세스 통합

빌드 프로세스의 일부로 의사 로캘을 생성하세요:

// build.js
const { generatePseudoLocaleSync } = require('pseudo-l10n');

// Generate pseudo-locales as part of build
generatePseudoLocaleSync(
  './src/locales/en.json',
  './src/locales/pseudo-en.json',
  { expansion: 40 }
);

generatePseudoLocaleSync(
  './src/locales/en.json',
  './src/locales/pseudo-ar.json',
  { rtl: true }
);

CI/CD 파이프라인 통합

지속적 통합 파이프라인에 의사 현지화를 통합하세요:

# .github/workflows/test.yml
- name: Generate pseudo-locales
  run: |
    npm install -g pseudo-l10n
    pseudo-l10n src/locales/en.json src/locales/pseudo-en.json

- name: Run i18n tests
  run: npm run test:i18n

테스트 전략

1. 빌드 프로세스 중에 의사 로캘을 생성하세요.
2. 애플리케이션에 의사 로캘을 추가하세요(예: 언어 선택기).
3. 의사 로캘이 활성화된 상태에서 애플리케이션을 테스트하세요.
4. 일반적인 i18n 문제에 대해 애플리케이션을 검토하세요.

확인해야 할 사항

• ⟦⟧ 마커 누락 = 번역되지 않은 문자열(하드코딩된 텍스트).
• 잘린 마커 = 텍스트 잘림 또는 UI 넘침.
• 깨진 레이아웃 = 텍스트 확장을 위한 공간 부족.
• 깨진 텍스트 = 인코딩 문제 또는 폰트 지원 누락.
• 잘못된 텍스트 방향 = RTL 문제(RTL 의사 로캘의 경우).

테스트에서 실제 번역으로

의사 현지화로 i18n 구현을 검증했다면, 이제 실제 사용자를 위해 애플리케이션을 번역할 차례입니다. 이때 l10n.dev와 같은 AI 기반 번역 서비스가 필요합니다.

프로덕션 번역을 위해 l10n.dev를 사용하는 이유

의사 현지화로 앱이 국제화를 올바르게 처리하는지 확인한 후, 전문적인 AI 기반 번역을 위해 l10n.dev를 사용하세요:

• 플레이스홀더, 서식 및 구조를 보존합니다 - 테스트 중 pseudo-l10n이 보호하는 것과 같습니다.
• 컨텍스트 인식 AI 번역으로 165개 언어를 지원합니다.
• 복수형, 보간 및 특수 문자를 자동으로 처리합니다.
• 자동화된 워크플로우를 위해 API 또는 npm 패키지(ai-l10n)를 통한 CI/CD 통합을 제공합니다.
• 수동 번역 및 검토를 위한 VS Code 확장 프로그램과 웹 UI를 제공합니다.

완벽한 국제화 워크플로우

1. 의사 현지화를 사용하여 국제화 구현을 테스트하고 문제를 조기에 발견하세요.
2. 테스트 중에 발견된 레이아웃, 인코딩 또는 플레이스홀더 문제를 수정하세요.
3. l10n.dev를 사용하여 검증된 소스 파일을 프로덕션 준비가 완료된 번역으로 변환하세요.

국제화 문제를 조기에 발견하고 현지화 워크플로우를 간소화할 준비가 되셨나요?