en-US 및 fr-CA와 같은 언어 태그 작업 방법
더 나은 국제화 결정을 내리기 위해 BCP 47 언어 태그의 구조와 의미 이해하기
소개
언어 태그는 특정 언어와 지역별 변형을 식별하는 표준화된 코드입니다. 이러한 태그는 국제화 작업 전반에 걸쳐 나타납니다. 사용자의 선호 언어를 감지할 때 브라우저는 언어 태그를 반환합니다. 날짜나 숫자를 형식화할 때 Intl API에 언어 태그를 전달합니다. 번역을 로드할 때 언어 태그를 사용하여 표시할 콘텐츠를 결정합니다.
이러한 태그의 작동 방식을 이해하면 언어 선택, 대체 동작 및 콘텐츠 구성에 대해 더 나은 결정을 내릴 수 있습니다. 이 레슨에서는 언어 태그의 구조를 설명하고 JavaScript에서 이를 사용하는 방법을 보여줍니다.
언어 태그란 무엇인가
언어 태그는 en, en-US 또는 zh-Hans-CN와 같은 문자열로, 언어를 식별하고 선택적으로 문자 체계와 지역을 지정합니다. 이러한 태그는 인터넷 엔지니어링 태스크 포스와 인터넷 할당 번호 관리 기관이 유지 관리하는 BCP 47 표준을 따릅니다.
BCP 47은 Best Current Practice 47의 약자입니다. 이 표준은 서브태그라고 하는 더 작은 구성 요소로 언어 태그를 구성하는 방법을 정의합니다. 각 서브태그는 사용 중인 언어, 사용하는 문자 체계 또는 연관된 국가와 같은 언어의 특정 측면을 나타냅니다.
모든 프로그래밍 언어와 국제화 라이브러리는 BCP 47 태그를 사용합니다. 이러한 일관성은 브라우저 감지부터 서버 측 형식화, 번역 파일 이름에 이르기까지 전체 애플리케이션에서 동일한 언어 식별자를 사용할 수 있음을 의미합니다.
언어 태그의 구조
언어 태그는 하이픈으로 구분된 하위 태그로 구성됩니다. 가장 일반적인 세 가지 하위 태그는 언어, 문자 체계, 지역입니다. 이러한 하위 태그는 존재할 경우 항상 이 특정 순서로 나타납니다.
언어 하위 태그가 먼저 오며 유일한 필수 구성 요소입니다. ISO 639의 두 글자 또는 세 글자 코드를 사용합니다. 예를 들어, en는 영어를, fr는 프랑스어를, zh는 중국어를 나타냅니다.
문자 체계 하위 태그는 존재할 경우 두 번째로 옵니다. 쓰기 체계를 식별하는 ISO 15924의 네 글자 코드를 사용합니다. 예를 들어, Latn은 라틴 알파벳을, Cyrl는 키릴 문자를, Hans는 간체 중국어 문자를 나타냅니다.
지역 하위 태그는 존재할 경우 마지막에 옵니다. 일반적으로 국가를 나타내는 ISO 3166-1의 두 글자 코드를 사용합니다. 예를 들어, US는 미국을, CA는 캐나다를, CN는 중국을 나타냅니다.
일반적인 언어 태그 예시
다음은 언어 태그로 표현할 수 있는 다양한 수준의 구체성을 보여주는 예시입니다.
언어만 포함된 간단한 태그:
en- 영어(특정 지역이나 문자 체계 없음)fr- 프랑스어(특정 지역이나 문자 체계 없음)es- 스페인어(특정 지역이나 문자 체계 없음)
언어와 지역이 포함된 태그:
en-US- 미국에서 사용되는 영어en-GB- 영국에서 사용되는 영어fr-CA- 캐나다에서 사용되는 프랑스어es-MX- 멕시코에서 사용되는 스페인어
언어, 문자 체계 및 지역이 포함된 태그:
zh-Hans-CN- 중국에서 간체 문자를 사용하는 중국어zh-Hant-TW- 대만에서 번체 문자를 사용하는 중국어sr-Latn-RS- 세르비아에서 라틴 문자를 사용하는 세르비아어sr-Cyrl-RS- 세르비아에서 키릴 문자를 사용하는 세르비아어
필요한 구체성 수준은 애플리케이션에 따라 다릅니다. 텍스트만 번역하는 경우 언어와 지역만 필요할 수 있습니다. 여러 문자 체계를 사용하는 언어로 작업하는 경우 문자 체계 하위 태그가 필요합니다.
언어 태그의 대소문자 규칙
언어 태그는 대소문자를 구분하지 않습니다. en-US, EN-US, en-us, En-Us 태그는 모두 동일한 언어를 나타냅니다. 그러나 태그를 더 읽기 쉽게 만드는 관례적인 대문자 표기 패턴이 있습니다.
언어 하위 태그는 관례적으로 소문자를 사용합니다. EN나 En가 아닌 en로 작성합니다.
문자 체계 하위 태그는 관례적으로 첫 글자를 대문자로 하는 타이틀 케이스를 사용합니다. latn나 LATN가 아닌 Latn로 작성합니다.
지역 하위 태그는 관례적으로 대문자를 사용합니다. us나 Us가 아닌 US로 작성합니다.
이러한 규칙을 따르면 태그를 더 쉽게 읽을 수 있으며 문서 및 사양에서 사용되는 형식과 일치합니다. 그러나 형식이 공식적으로 대소문자를 구분하지 않기 때문에 코드는 대소문자에 관계없이 언어 태그를 허용해야 합니다.
JavaScript로 언어 태그 파싱하기
JavaScript는 언어 태그를 파싱하고 구성 요소를 추출하기 위해 Intl.Locale 생성자를 제공합니다. 이 생성자는 언어 태그 문자열을 받아 각 하위 태그에 대한 속성이 있는 객체를 반환합니다.
const locale = new Intl.Locale("en-US");
console.log(locale.language);
// Output: "en"
console.log(locale.region);
// Output: "US"
Intl.Locale 객체는 언어 태그의 각 구성 요소에 대한 속성을 가지고 있습니다. 이러한 속성은 원본 태그에 해당 하위 태그가 없는 경우 undefined를 반환합니다.
const simple = new Intl.Locale("fr");
console.log(simple.language);
// Output: "fr"
console.log(simple.region);
// Output: undefined
문자 체계 하위 태그가 있는 태그도 동일한 방식으로 파싱할 수 있습니다.
const complex = new Intl.Locale("zh-Hans-CN");
console.log(complex.language);
// Output: "zh"
console.log(complex.script);
// Output: "Hans"
console.log(complex.region);
// Output: "CN"
이러한 파싱 기능은 언어 태그의 특정 구성 요소를 기반으로 결정을 내려야 할 때 유용합니다. 예를 들어, 문자 체계에 따라 다른 글꼴을 로드하거나 지역에 따라 다른 콘텐츠를 표시할 수 있습니다.
특정 태그와 일반 태그를 사용하는 경우
언어 태그의 적절한 세부 수준을 선택하는 것은 애플리케이션이 처리해야 하는 언어 및 문화의 측면에 따라 달라집니다.
en 또는 fr와 같은 언어 전용 태그는 해당 언어의 모든 사용자에게 적용되는 단일 번역이 있는 경우에 사용합니다. 이는 현지화 예산이 제한적이거나 지역적 차이가 최소화된 언어를 사용하는 애플리케이션에서 일반적입니다.
en-US 또는 fr-CA와 같은 언어 및 지역 태그는 어휘, 철자 또는 문화적 관습의 지역적 차이를 고려해야 할 때 사용합니다. 영국 영어와 미국 영어는 많은 단어에 대해 다른 철자를 사용합니다. 캐나다 프랑스어와 유럽 프랑스어는 다른 어휘와 표현을 사용합니다.
zh-Hans-CN와 같은 언어, 문자 체계, 지역 태그는 여러 문자 체계를 사용하는 언어로 작업할 때 사용합니다. 중국어는 간체자 또는 번체자로 작성할 수 있습니다. 세르비아어는 라틴 문자 또는 키릴 문자로 작성할 수 있습니다. 문자 체계 하위 태그는 이러한 변형을 구분합니다.
번역 파일을 위한 언어 코드 추출
많은 번역 시스템은 언어 코드별로 파일을 구성합니다. 전체 언어 태그에서 언어와 지역만 추출하여 로드할 번역 파일을 결정할 수 있습니다.
const userLanguage = "zh-Hans-CN";
const locale = new Intl.Locale(userLanguage);
const translationKey = `${locale.language}-${locale.region}`;
console.log(translationKey);
// Output: "zh-CN"
이 접근 방식은 사용자의 언어 태그에 파일 선택에 필요하지 않은 구성 요소가 포함되어 있어도 작동합니다.
일부 애플리케이션은 지역 없이 언어 코드만 사용합니다.
const userLanguage = "fr-CA";
const locale = new Intl.Locale(userLanguage);
const translationKey = locale.language;
console.log(translationKey);
// Output: "fr"
번역 파일 이름에 선택하는 구조는 언어 태그에서 구성 요소를 추출하는 방식과 일치해야 합니다.
Intl API에서 언어 태그 사용하기
Intl API는 모든 생성자에서 언어 태그를 직접 허용합니다. 특정 구성 요소를 검사해야 하는 경우가 아니라면 태그를 직접 파싱할 필요가 없습니다.
const date = new Date("2025-03-15");
const usFormat = new Intl.DateTimeFormat("en-US").format(date);
console.log(usFormat);
// Output: "3/15/2025"
const gbFormat = new Intl.DateTimeFormat("en-GB").format(date);
console.log(gbFormat);
// Output: "15/03/2025"
Intl API는 언어 태그를 사용하여 적용할 형식 규칙을 결정합니다. 같은 언어를 사용하더라도 지역에 따라 날짜, 숫자, 통화 형식이 다릅니다.
브라우저에서 가져온 언어 태그를 Intl 생성자에 직접 전달할 수 있습니다.
const userLanguage = navigator.language;
const formatter = new Intl.NumberFormat(userLanguage);
console.log(formatter.format(1234.5));
// Output varies by language
// For "en-US": "1,234.5"
// For "de-DE": "1.234,5"
이것은 클라이언트 측 국제화에서 가장 일반적인 패턴입니다. 사용자의 언어를 감지한 다음 해당 언어 태그를 애플리케이션 전체에서 사용하여 콘텐츠를 적절하게 형식화합니다.
잘못된 언어 태그 처리하기
Intl.Locale 생성자는 잘못된 언어 태그를 전달하면 RangeError를 발생시킵니다. 신뢰할 수 없는 소스의 언어 태그를 사용할 때는 이 오류를 처리해야 합니다.
try {
const locale = new Intl.Locale("invalid-tag-format");
} catch (error) {
console.log(error.name);
// Output: "RangeError"
console.log(error.message);
// Output: "invalid language tag: invalid-tag-format"
}
브라우저의 대부분의 언어 태그는 유효하지만, 사용자 입력이나 외부 데이터 소스에는 잘못된 형식의 태그가 포함될 수 있습니다. 생성자를 오류 처리로 감싸면 이러한 잘못된 태그로 인해 애플리케이션이 중단되는 것을 방지할 수 있습니다.