자동화된 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 오버플로우, 클리핑 또는 정렬 오류를 발견합니다.

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

보이는 마커로 보간 변수(플레이스홀더)를 교체하여 번역 중에 보존되는지 확인합니다.

예시: "당신은 {{count}} 항목이 있습니다" → "당신은 <COUNT> 항목이 있습니다"

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-localized 버전으로 변환하세요:

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 스크립트에 pseudo-localization 생성을 추가하세요:

{
  "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"
  }
}

빌드 프로세스 통합

빌드 프로세스의 일환으로 pseudo-locale을 생성하세요:

// 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 파이프라인 통합

지속적인 통합 파이프라인에 pseudo-localization을 통합하세요:

# .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. 빌드 프로세스 중에 pseudo-locale을 생성하세요.
2. 애플리케이션에 pseudo-locale을 추가하세요 (예: 언어 선택기에서).
3. pseudo-locale이 활성화된 상태에서 애플리케이션을 테스트하세요.
4. 일반적인 i18n 문제에 대해 애플리케이션을 검토하세요.

찾아야 할 것

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

테스트에서 실제 번역으로

pseudo-localization으로 i18n 구현을 검증한 후, 실제 사용자들을 위해 애플리케이션을 번역할 시간입니다. 이때 l10n.dev와 같은 AI 기반 번역 서비스가 필요합니다.

프로덕션 번역을 위한 l10n.dev의 이유

pseudo-localization으로 애플리케이션이 국제화를 올바르게 처리하는지 확인한 후, 전문 AI 기반 번역을 위해 l10n.dev를 사용하세요:

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

완전한 i18n 작업 흐름

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

i18n 문제를 조기에 발견하고 로컬라이제이션 작업 흐름을 간소화할 준비가 되셨나요?