기능이 모든 언어에서 정상 작동하고 각 독자의 관례에 맞게 표시되면 전 세계 사용자를 위한 준비가 완료됩니다. 이 페이지는 Microsoft의 가이드라인을 따릅니다.국제화 체크리스트: 각 섹션에서는 시장별 차이점, 올바른 코드 작성법, 그리고글로벌화 검사코드로 잘못된 습관을 식별할 수 있습니다.
대부분의 경우 핵심 규칙은 하나입니다: 독자의 로케일 설정을 따르는 것입니다. 브라우저의IntlAPI, 프레임워크의 포매터 및 관련 데이터를 활용하세요.문화각 시장의 관례를 반영해야 하며, 특정 시장의 기준을 하드코딩한 코드는 적합하지 않습니다.
텍스트 및 문장
사용자가 읽는 모든 텍스트는 소스 카탈로그에 키 값으로 저장되어 프로젝트의 번역 기능을 통해 렌더링됩니다. 여기에는 라벨, 헤딩, 버튼, 메시지, 오류 문구, 플레이스홀더 등이 포함됩니다.alt텍스트 및 ARIA 라벨도 포함됩니다. 코드:hardcoded_text.
문장 하나는 하나의 메시지입니다. 언어마다 단어 순서가 다르므로 부분으로 구성된 문장은 번역할 수 없습니다. 값은 플레이스홀더로 전달하고 개수는 복수형으로 처리하세요. 코드:concatenated_text.
// Not world-ready: English word order and English plurals
'You have ' + count + ' new ' + (count === 1 ? 'message' : 'messages');
// World-ready: one ICU message
t('inbox.new', { count });
// "inbox.new": "{count, plural, one {You have # new message} other {You have # new messages}}"언어마다 필요한 복수형이 다릅니다. 영어는 2개, 아랍어는 6개, 일본어는 1개입니다. 소스 메시지에 ICU 복수형 구문을 적용하면 엔진이 각 언어에 맞는 형태를 자동으로 생성합니다.
숫자
같은 숫자도 시장마다 표기 방식이 다릅니다. 미국에서는 1,234.5, 독일에서는 1.234,5, 스웨덴과 프랑스에서는 1 234,5이며 일부 아랍권 시장에서는 다른 형태로 표기됩니다. 독자의 로케일 설정에 맞게 포맷하세요. 코드:locale_number.
new Intl.NumberFormat(locale).format(1234.5);
new Intl.NumberFormat(locale, { style: 'percent' }).format(0.25);사용자가 입력한 숫자는 해당 로케일 기준으로 읽거나, 브라우저가 정규화한 값을 사용하세요.parseFloat('1,5')1로 표기되며 절대 'one and a half'로 표시되지 않습니다. 코드:locale_parsing.
날짜, 시간 및 시간대
날짜 순서, 구분 기호, 월 이름, 12시간/24시간제, 달력 형태 등은 시장마다 다릅니다. 독자의 로케일 설정에 맞게 포맷하되 "와 같은 고정 패턴을 사용해서는 안 됩니다.MM/dd/yyyy. 코드:locale_date.
new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short', timeZone }).format(when);- 시점 데이터는 UTC로 저장하세요., 즉 오프셋이 포함된 ISO 8601 형식으로 저장한 뒤 독자의 시간대에 맞게 포맷하세요. '오늘'이나 일 단위 경계도 서버의 시간대가 아닌 해당 시간대를 기준으로 계산해야 합니다.
- 요일의 시작일은 시장마다 다릅니다.: 미국에서는 일요일, 대부분의 유럽 국가에서는 월요일, 중동 일부 지역에서는 토요일입니다. 주말도 시장마다 다르죠. 이 정보는 로케일 설정에서 가져오세요 (
new Intl.Locale(locale).getWeekInfo()가 지원되는 경우) 또는 날짜 라이브러리의 로케일 데이터를 사용하세요. 코드:calendar_names. - 요일 및 월 이름이름은 로케일 설정에서 가져와야 합니다 (
Intl.DateTimeFormat(locale, { weekday: 'long' })), 코드에 직접 정의해서는 안 됩니다. 코드:calendar_names. - 달력사우디아라비아, 이스라엘, 일본은 그레고리력 외에 움 알쿠라력, 히브리력, 일본력도 함께 사용하며, 태국과 이란은 불교력과 페르시아력을 기본으로 채택합니다. 문화 정보를 통해 해당 시장에서 사용하는 달력을 확인할 수 있습니다.
통화
금액은 통화 단위와 독자의 로케일 설정에 맞게 포맷하되, 숫자 옆에 상징을 직접 붙이지 마세요. 같은 금액도 독자에 따라$1,234.50, 1.234,50 $또는US$1,234.50로 표기됩니다. 많은 시장에서 동일한 상징을 공유하기도 합니다. 코드:hardcoded_currency.
new Intl.NumberFormat(locale, { style: 'currency', currency }).format(1234.5);통화는 형식 설정 문제가 아닌 비즈니스 결정 사항입니다. 독자의 로케일을 변경해도 가격이 자동으로 변환되어서는 안 됩니다. 문화 정보에 각 시장에서 사용하는 통화가 기록되어 있습니다.
정렬, 비교 및 대소문자 처리
언어마다 고유한 정렬 방식이 있습니다. 스웨덴어는 å, ä, ö를 z 뒤에 배치하고, 독일어는 ä를 a와 같게 취급하며, 중국어는 병음 또는 획수를 기준으로 정렬합니다. 사용자가 읽는 텍스트는 독자의 로케일 설정에 맞게 정렬하세요. 코드:ordinal_sort.
names.sort(new Intl.Collator(locale).compare);대소문자 매핑도 언어에 따라 다릅니다. 터키어에서는 i의 대문자가 İ입니다. 사용자가 읽는 텍스트에는toLocaleUpperCase(locale)를 사용하세요. 코드:case_mapping.
목록
"Anna, Ben and Chen"과 같은 목록의 표기 방식은 언어마다 다릅니다. 로케일 설정에 맞게 목록을 구성하세요. 코드:joined_list.
new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' }).format(names);이름, 주소, 우편번호 및 전화번호
- 이름많은 시장에서는 성을 먼저 표기하며, 한 사람이 하나의 이름만 가지거나 두 개 이상의 이름을 가질 수도 있습니다. 특정 시장에서 이름을 분리해야 하는 경우를 제외하고는 이름을 하나의 필드에 입력하세요. 모든 문자 체계를 허용해야 합니다. Åsa, José, 王, Мария 등 모두 유효한 이름입니다. 코드:
latin_only_input. - 주소필드의 종류, 순서, 명칭은 시장마다 다릅니다. 미국에는 주와 ZIP 코드가 있고, 일본에는 현이 있으며, 일부 시장에서는 우편번호가 전혀 필요하지 않기도 합니다. 문화 정보를 통해 각 시장의 주소 형식을 확인하세요. 해당 시장에서 사용하지 않는 필드는 요구하지 마세요.
- 우편번호우편번호는 텍스트로 저장하고 국가별로 유효성을 검사하거나 아예 검사하지 마세요. 5자리 패턴은 전 세계 대부분의 우편번호를 처리할 수 없습니다. 코드:
postal_code_format. - 전화번호전화번호는 E.164 형식으로 저장하세요 (
+46 8 123 456 78), 각 국가의 번호 체계를 인식하는 libphonenumber와 같은 라이브러리를 사용해 포맷 및 유효성 검사를 수행하세요. "와 같은 패턴은 사용하지 마세요.(555) 555-1234북미 지역 외의 모든 숫자를 거부합니다. 코드:phone_number_format.
단위 및 용지
전 세계 대부분의 지역에서는 킬로미터, 킬로그램, 섭씨도를 사용하지만, 미국은 마일, 파운드, 화씨도를 사용하며 영국은 두 체계를 혼용합니다. 독자의 지역에 맞는 단위를 선택하여 해당 로케일에 맞게 형식화하세요. 코드:fixed_unit.
new Intl.NumberFormat(locale, { style: 'unit', unit: 'kilometer' }).format(12);인쇄물 및 PDF 출력물은 시장별 용지를 따릅니다. 북미에서는 Letter 용지를, 그 외 지역에서는 거의 모두 A4 용지를 사용합니다. 코드:paper_size.
입력 방식 및 글꼴
중국어, 일본어, 한국어는 입력기 편집기를 통해 입력됩니다. 단어를 선택할 때는 Enter 키를 누르지만 제출용으로는 사용하지 않습니다. 단어가 입력 중일 때는 Enter 키로 제출하는 핸들러가 이를 무시해야 합니다. 코드:ime_composition.
onKeyDown={event => {
if (event.key === 'Enter' && !event.nativeEvent.isComposing) submit();
}}배포하는 모든 스크립트를 지원하는 글꼴을 선택하거나, 이를 지원하는 시스템 글꼴로 대체하세요. 아랍어, 중국어, 히브리어, 일본어, 한국어, 태국어 각각에 맞는 글꼴이 필요합니다. 높은 기호가 있는 스크립트를 위해 줄 높이에 여유를 두고, 이탤릭체에 의존하지 마세요(중국어와 일본어에는 이탤릭체가 없음). 또한 번역할 수 없는 이미지에 텍스트를 넣지 마세요.
오른쪽에서 왼쪽으로 쓰기
아랍어와 히브리어는 오른쪽에서 왼쪽으로 쓰이며, 레이아웃 전체도 이에 맞춰 반전됩니다. 내비게이션, 정렬, 방향을 나타내는 아이콘, 열의 순서 등이 포함됩니다.
- 다음을 설정하세요:
dir="rtl"해당 언어의 루트 요소에 지정하고,lang모든 언어에 대해서는 로케일을 설정하세요. - 논리적 속성을 사용하세요:
margin-inline-start대신 다음을 사용하세요:margin-left,padding-inline-end,inset-inline-start,text-align: start,float: inline-start, 그리고 CSS 프레임워크의 논리적 유틸리티 클래스(ms-4,pe-2,text-start). 코드:physical_direction,unmirrored_layout. - 화살표나 chevron처럼 방향을 나타내는 아이콘은 반전시키되, 시계나 재생 버튼 같은 다른 아이콘은 그대로 유지하세요.
- 숫자, 코드, URL, 라틴 문자로 된 이름은 오른쪽에서 왼쪽으로 쓰이는 텍스트 내에서도 왼쪽에서 오른쪽으로 표시됩니다. 사람이나 데이터로부터 텍스트를 분리하여 주변 요소의 순서가 뒤바뀌지 않도록 하세요:
<bdi>이렇게 설정하면 주변 요소의 순서가 뒤바뀌는 것을 방지할 수 있습니다.
여유 공간 확보
번역문은 종종 영어보다 길어지며, 특히 짧은 라벨의 경우 그 폭이 더 큽니다. 독일어의 'OK'는 완전한 단어로 변할 수 있고, 10자짜리 라벨은 두 배로 늘어날 수도 있습니다. 텍스트에 여유를 주세요. 줄바꿈을 허용하고, 버튼과 탭이 라벨에 맞게 확장되도록 하며, 텍스트에 필요한 라벨을 잘라내지 마세요. 코드:clipped_text.
이의사 번역기능은 모든 문자열의 길이를 이만큼 늘려서 번역가가 작업하기 전에 문제를 미리 확인할 수 있게 합니다:
| 원본 길이 | 추가된 길이 |
|---|---|
| 최대 10자 | 100% |
| 11~20자 | 80% |
| 21~30자 | 60% |
| 31~50자 | 40% |
| 51~70자 | 31% |
| 70자 초과 | 30% |
중국어, 일본어, 한국어는 보통 더 짧지만 줄 높이는 더 높아야 합니다.
모든 변경 사항에 대한 체크리스트
- 사용자가 읽는 텍스트는 카탈로그에서 가져오며, 각 문장은 하나의 메시지입니다.
- 숫자, 날짜, 시간, 통화, 단위, 목록은 독자의 로케일에 따라 처리됩니다.
- 정렬 및 대소문자 매핑도 독자의 로케일을 따릅니다.
- 이름, 주소, 우편번호, 전화번호는 모든 시장의 형식을 지원해야 합니다.
- 단어가 입력 중일 때는 Enter 키로 양식이 제출되지 않습니다.
- 레이아웃은 논리적 속성을 사용하며 더 긴 텍스트를 위한 여유를 둡니다.