다국어 인터페이스 및 현지화
1) 원칙
1. 언어는 피부가 아닙니다. 텍스트, 형식, 글쓰기 방향, 삽화, 법적 차단 및 탐색도 변경되고 있습니다.
2. 먼저 열쇠, 텍스트. 구조 의미 키 및 매개 변수-나중에 변환됩니다.
3. 의사 현지화-종료 전. 오버 플로우, "딱딱한" 라인 및 숨겨진 각성을 포착하십시오.
4. 폴백은 예측 가능합니다. 'ru-UA → ru → en'. "조용한" 실패가 없습니다.
5. 보안. 소독없이 DOM으로 번역 한 HTML이 없습니다. 장소 홀더는 위치/이름 만 있습니다.
6. A11y 동등성. Alt 텍스트, aria 레이블, 약어-모든 것이 현지화되어 있습니다.
2) 로케일 전략
시스템 코드: 'Language-REGEON' (예: 'pt-BR', 'en-GB').
로케일 선택: 사용자 프로필 → 설정; 예비 - 브라우저/지오에 의한 자동 감지 (확인 포함).
다 지역: 언어와 법을 구별합니다: 'es-ES' 및 'es-MX' (다른 법률/지불/제한).
폴백 체인: UI는 가장 가까운 언어입니다. 법률 문서-엄격하게 지역 버전, 그렇지 않으면 차단 및 확인 요청이
3) 정보 아키텍처 및 컨텐츠
주요 영역: 내비게이션, CTA, 버그, 양식, 프롬프트, 알림, 문자, DVD/배너.
텍스트 확장: + 30-40% 너비 예약 (독일어/핀란드어). 레이아웃-탄성 (플렉스/그리드).
톤/스타일: 브랜드 사전 (중요한 장소에서 "속어 번역" 이없는 용어).
이미지/아이콘: 그림의 텍스트를 피하십시오 필요한 경우 로컬 버전을 유지하십시오.
4) i18n 아키텍처
키: '도메인. 섹션. 의도 '→' 지불. 철회. 오류. 불충분 한 _ funds '.
장소 보유자: 이름이 지정되지 않은 ('{amount}', '{minutes}').
ICU 메세지 형식: 다중성, 성별, 일치.
파일: 로케일 및 도메인 ('/i18n/{ 로케일 }/{ 도메인} .json ') 별로 덩어리가 게으르게로드됩니다.
서버/클라이언트: 범용 렌더링, 쿠키 + HT- 바리의 로케일.
json
{
"betslip": {
"placed": "Ставка на сумму {amount} {currency} принята",
"timeout": "Ожидаем подтверждение… ~{seconds, plural, one {# сек} few {# сек} many {# сек} other {# сек}}"
}
}5) 형식: 숫자, 날짜, 통화, 단위
'Intl 사용. ':js const nf = new Intl.NumberFormat('uk-UA', { style:'currency', currency:'UAH' });
nf.format(2000); // 2 000,00 ₴
const df = new Intl.DateTimeFormat('tr-TR', { dateStyle:'medium', timeStyle:'short' });
df.format(new Date());
const pl = new Intl.PluralRules('ru-RU');사소한 단위: 센트/코펙으로 금액을 유지하십시오. 클라이언트 형식.
상대 시간: 'Intl. RelativeTimeform '.
단위: 'Intl. 숫자 형식 ({스타일: '단위', 단위: '미터'}) '.
캘린더/주: 요일 1 일 및 날짜 형식-로케일 별.
6) RTL과 글쓰기 방향
'ar', 'he', 'fa' 에 대한 'dir = "rtl" 지원; 사용자 정의 컨텐츠에 'dir = "auto" 를 사용하십시오.
반전 아이콘/쉐브론; 회전 목마 및 스테퍼 미러.
통화 번호/기호-LTR 창 (혼합 된 BiDi 혼돈 피하기).
왼쪽/오른쪽 대신 CSS 부울 속성 ('인라인 시작/끝').
7) 양식 및 입력
이름/주소: 아포스트로피/분음 부호/이중 성을 허용하십시오.
전화: E.164 스토리지; 마스크-부드럽고 삽입 지원.
주소 형식: 국가 별 현장 순서; 색인/상태가 누락되었을 수 있습니다.
키보드: 로케일에 맞는 '입력 모드', '자동 완료'
장소 보유자: 현지 언어/형식의 예.
8) 의사 지역화 및 테스트
자동으로 회선을 '확장 자료' + 확장 '+ + +' (~ 35%) 으로 바꿉니다.
개발자 어셈블리에 의사 로컬을 'qps-ploc' 로 포함하십시오.
번역가를위한 컨텍스트가있는 스크린 샷: 플레이스 홀더 및 긴 텍스트 강조.
테스트: 트리밍, 하이픈, 오버 플로우, "하드 스티치" 스트링, RTL.
9) 알림, 문자, 템플릿
문자 및 주제 템플릿-각 로케일에 대해; 별도의 텍스트와 레이아웃.
주제의 날짜/금액-로케일 형식입니다.
알림 링크 설정은 항상 문자의 언어에 있습니다.
SMS: 멀티 라인 따옴표가없는 짧은; UTM-현지화 없음.
10) 안전과 신뢰성
변환을 HTML로 해석하지 말고 안전한 인서트를 사용하십시오
장소 보유자-마크 업이 아닌 데이터 만.
로그/메트릭은 분류되지 않지만 문제를 추적 할 수있는 로케일이 있습니다.
번역 파일을 사용할 수없는 경우- "조용한" (영어 + 원격 측정 표시)
11) 성능
노선/도메인에 의한 환승 청크; 빈번한 사전로드.
'ETag '/' Cache-Control' 을 참조하십시오.
로케일을 변경할 때 재실행기를 피하십시오-메모로 i18n 컨텍스트.
12) iGaming의 세부 사항
면책 조항 및 책임있는 플레이: 문구는 국가 (18 +/21 +, 규제 기관, 헬프 라인) 에 따라 다릅니다.
KYC/AML: 법적으로 올바른 용어 (예: "자금 출처", "유익한 소유자"), 사례/출생 옵션.
지불 방법: 지역 이름 (PIX, Papara, SEPA) 및 조건 (ETA/커미션) -엄격하게 지역별.
계수 및 형식: '10 진수/분수/미국' -로컬 설명 및 예.
법률 문서: 변경되지 않은 지역 버전; 다른 관할권에서 폴벡 금지.
13) 디자인 시스템 토큰 (예)
json
{
"i18n": {
"fallback": ["en"],
"rtl": ["ar", "he", "fa"],
"textExpansionPct": 0.35,
"screenshotHints": true
},
"typography": {
"lineHeight": { "ui": 1.4, "dense": 1.3 },
"hyphens": "auto",
"tabularNums": true
},
"layout": {
"minLabelWidth": 96,
"gap": { "sm": 8, "md": 12, "lg": 16 }
},
"a11y": {
"ariaMirroring": true,
"altTranslate": true,
"contrastAA": true
}
}14) 스니펫
반응 + i18neth (게으른 부츠, ICU):ts import i18n from 'i18next';
import ICU from 'i18next-icu';
import { initReactI18next } from 'react-i18next';
i18n.use(ICU).use(initReactI18next).init({
lng: 'uk-UA',
fallbackLng: ['ru', 'en'],
load: 'languageOnly',
interpolation: { escapeValue: false },
resources: {} // пусто — грузим лениво
});
export async function loadNamespace(ns: string, lng = i18n.language){
const mod = await import(`/i18n/${lng}/${ns}.json`);
i18n.addResourceBundle(lng, ns, mod.default, true, true);
}json
{
"notifications": "{count, plural, one {# уведомление} few {# уведомления} many {# уведомлений} other {# уведомления}}"
}js const money = (v, c, l) => new Intl.NumberFormat(l, {style:'currency', currency:c}).format(v/100);
const rel = (v, unit, l) => new Intl.RelativeTimeFormat(l, {numeric:'auto'}).format(v, unit);
// money(250000,'EUR','de-DE') → 2.500,00 €js const rtl = new Set(['ar','he','fa']);
document.documentElement.dir = rtl.has(locale.split('-')[0])? 'rtl': 'ltr';js const pseudo = s => s.replace(/[aAeEiIoOuU]/g, m => ({a:'à',e:'ê',i:'ï',o:'ô',u:'û'}[m.toLowerCase()] m)).replace(/([^\s])/g,'$1\u0301');15) 빈/오류/회색 저하
키 번역이 없습니다: 영어 + 로그 'missing _ key' 를 표시합니다.
로케일 파일 없음: 폴백 및 배너 "영어 인터페이스의 일부".
너무 긴 텍스트: 멀티 라인, '라인 클램프', 전체 텍스트가있는 툴팁.
16) 측정 및 품질 관리
키/위치별로% 를 커버합니다 (대상 98% 이상).
새 릴리스의 경우 TTT (Time-to-Translation).
버그 속도 L10n: 시각적 클리핑, RTL 결함, 잘못된 형식.
로케일 당 읽기 용이성 (주관적 설문 조사) 및 NPS.
지역별 법적 검증 (준수 점검표).
17) 안티 패턴
코드에서 문자열의 구속 ("당신이 이겼습니다" + 양 + "!") -문법을 중단하십시오.
로컬 버전이없는 이미지/아이콘의 텍스트.
영어의 폭이 넓습니다.
국가 법을 언어로 대체 (멕시코에서는 'es-ES' 사용).
위생없이 CMS에서 Microsoft 번역.
다른 장소에서 다른 의미를 가진 동일한 키.
18) QA 체크리스트
라인과 키
- 명명 된 플레이스 홀더; 연결이 없습니다.
- 필요한 경우 ICU- 복수화/속.
- 폴백 체인이 작동합니다.
레이아웃 및 가용성
- 너비의 여백 + 30-40%; '라인 클램프', 단어 포장.
- Alt/aria 라벨이 현지화되어 있습니다.
- RTL은 아이콘/탐색을 미러링합니다. 숫자를 읽을 수 있습니다
형식
- 'Intl을 통한 날짜/통화. '; 작은 단위에서 금액입니다.
- 주소/전화/이름-유연한 국가 규칙.
안전/성능
- 번역은 HTML을 실행하지 않습니다. XSS는 제외되었습니다
- 불필요한 재실행기없이 게으른 덩어리, CNC 캐시.
iGaming-specifics
- 면책 조항/18 +/헬프 라인-관할권 별.
- KYC/AML 텍스트는 법적으로 조정됩니다.
- 지불 이름/ETA/수수료-현지.
19) 설계 시스템의 문서
지역 별 법적 문자열: i18n 토큰, 가이드 (ICU/복수/RTL), 패턴 (이메일/SMS/토스트), 지역 별 법적 문자열.
도구: 의사 로컬, 화면 스크린 샷, 적용 범위 보고서, 키 린터.
프로세스: 용어집, 번역 메모리, 상황 별 스크린 샷, 원어민의 검토.
간단한 요약
다국어 UI는 건축, 디자인, 컨텐츠 및 법률 수준에서 체계적인 작업입니다. 키와 폴백을 구성하고 ICU 및 'Intl' 을 사용하고 RTL을 지원하며 의사 로케일을 미리 실행하고 지역 문구의 법적 정확성을 보장합니다. 그런 다음 각 국가와 각 사용자에 대해 계수 및 지불에서 편지와 도움에 이르기까지 제품이 고유하게 느껴집니다.