JavaScript Intl API: 글로벌 사용자를 위한 국제화 모범 사례

오늘날처럼 서로 연결된 세상에서는 전 세계 사용자를 대상으로 하는 웹 애플리케이션을 만드는 것이 매우 중요합니다. JavaScript Intl API는 국제화(i18n)를 위한 강력한 도구를 제공하여, 다양한 로캘의 관례에 따라 날짜, 숫자, 통화 등을 서식 지정할 수 있게 해줍니다. 이 글에서는 Intl API를 활용하여 진정으로 글로벌한 애플리케이션을 구축하기 위한 모범 사례를 살펴봅니다.

국제화(i18n)와 현지화(l10n)의 이해

Intl API의 세부 사항을 살펴보기 전에, 국제화(i18n)와 현지화(l10n)의 차이점을 이해하는 것이 중요합니다. I18n은 엔지니어링 변경 없이도 다양한 언어와 지역에 쉽게 적응할 수 있도록 애플리케이션을 설계하고 개발하는 과정입니다. 반면에 L10n은 국제화된 애플리케이션을 특정 로캘에 맞게 텍스트를 번역하고 다른 로캘별 요소를 사용자 정의하여 적용하는 과정입니다.

Intl API는 i18n 측면에 중점을 두어 로캘에 민감한 데이터를 처리하는 메커니즘을 제공하는 반면, 현지화는 일반적으로 번역 및 로캘별 구성을 제공하는 작업을 포함합니다.

Intl API의 주요 구성 요소

Intl API는 여러 주요 객체로 구성되며, 각 객체는 국제화의 특정 측면을 처리하는 역할을 합니다:

Intl.Collator: 로캘에 민감한 방식으로 문자열을 비교하는 데 사용됩니다.
Intl.DateTimeFormat: 날짜와 시간 서식을 지정하는 데 사용됩니다.
Intl.NumberFormat: 통화 및 백분율을 포함한 숫자 서식을 지정하는 데 사용됩니다.
Intl.PluralRules: 다른 언어의 복수형 규칙을 처리하는 데 사용됩니다.
Intl.ListFormat: 로캘에 민감한 방식으로 목록 서식을 지정하는 데 사용됩니다.
Intl.RelativeTimeFormat: 상대 시간(예: "어제", "2시간 후") 서식을 지정하는 데 사용됩니다.

Intl API 사용을 위한 모범 사례

Intl API를 효과적으로 활용하고 글로벌 사용자에게 긍정적인 사용자 경험을 보장하려면 다음 모범 사례를 고려하십시오:

1. 올바른 로캘 지정하기

국제화의 기초는 올바른 로캘을 지정하는 것입니다. 로캘은 서식 지정에 사용할 언어, 지역 및 특정 변형을 식별합니다. 사용자가 선호하는 로캘은 navigator.language 속성이나 Accept-Language HTTP 헤더에서 얻을 수 있습니다.

Intl 객체를 생성할 때 로캘을 문자열 또는 문자열 배열로 지정할 수 있습니다. 배열을 제공하면 API는 사용 가능한 옵션 중에서 가장 일치하는 로캘을 찾으려고 시도합니다.

예시:

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

사용자가 선호하는 로캘을 사용할 수 없는 경우 대체 로캘을 제공할 수 있습니다. 예를 들어, 사용자의 브라우저가 지원되지 않는 로캘을 보고하는 경우 'en-US'를 기본값으로 사용할 수 있습니다.

2. 날짜 및 시간 서식 지정에 Intl.DateTimeFormat 활용하기

날짜와 시간을 올바르게 서식 지정하는 것은 현지화된 경험을 제공하는 데 매우 중요합니다. Intl.DateTimeFormat 객체를 사용하면 특정 로캘의 관례에 따라 날짜와 시간의 서식을 지정할 수 있습니다.

연도, 월, 일, 시, 분, 초 형식과 같은 다양한 옵션을 지정하여 서식을 사용자 정의할 수 있습니다. 또한 시간대를 지정하여 전 세계 다른 지역의 사용자에게 날짜와 시간이 올바르게 표시되도록 할 수 있습니다.

예시:

const locale = 'de-DE'; // 독일어 (독일)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // 출력 예시: "22. Mai 2024, 14:30"
console.log(formattedDate);

이 예시는 현재 날짜와 시간을 독일(독일) 로캘에 따라 연, 월, 일, 시, 분을 포함하여 서식을 지정합니다. 또한 'Europe/Berlin' 시간대도 지정합니다.

전 세계적으로 사용되는 다양한 날짜 및 시간 형식을 고려해야 합니다. 예를 들어, 미국은 MM/DD/YYYY를 사용하는 반면, 다른 많은 국가에서는 DD/MM/YYYY를 사용합니다.

3. 숫자, 통화 및 백분율 서식 지정에 Intl.NumberFormat 사용하기

Intl.NumberFormat 객체는 로캘별 관례에 따라 숫자, 통화 및 백분율을 서식 지정하는 유연한 방법을 제공합니다. 통화, 스타일(decimal, currency 또는 percent), 최소 및 최대 소수 자릿수 등과 같은 옵션을 지정하여 서식을 사용자 정의할 수 있습니다.

예시 (통화 서식 지정):

const locale = 'ja-JP'; // 일본어 (일본)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // 출력 예시: "￥12,346"
console.log(formattedAmount);

이 예시는 숫자 12345.67을 일본 엔(JPY)으로 서식을 지정합니다. 통화 기호(￥)와 그룹 구분 기호(,)가 일본 로캘에 따라 자동으로 조정되는 것을 확인하세요.

예시 (백분율 서식 지정):

const locale = 'ar-EG'; // 아랍어 (이집트)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // 출력 예시: "٧٥٫٠٠٪"
console.log(formattedPercentage);

이 예시는 숫자 0.75를 아랍어(이집트)로 백분율 서식을 지정합니다. 출력에는 아랍어 백분율 기호(٪)와 두 자리 소수점이 포함됩니다.

통화 서식 지정 시 중요 고려 사항:

통화 코드: 올바른 ISO 4217 통화 코드(예: USD, EUR, JPY)를 사용하십시오.
기호 위치: 통화 기호의 위치는 로캘에 따라 다릅니다(예: 금액 앞 또는 뒤).
소수점 구분 기호 및 그룹 구분 기호: 소수점 구분 기호(예: 마침표 또는 쉼표)와 그룹 구분 기호(예: 쉼표 또는 마침표)에 대한 다양한 관례를 이해하십시오.

4. Intl.PluralRules로 복수형 올바르게 처리하기

복수형 규칙은 언어마다 크게 다릅니다. 예를 들어, 영어는 단수형과 복수형의 간단한 규칙을 가지고 있지만, 다른 언어들은 숫자의 값에 따라 더 복잡한 규칙을 가지고 있습니다. Intl.PluralRules 객체는 주어진 숫자와 로캘에 대해 올바른 복수형을 결정하는 데 도움을 줍니다.

예시:

const locale = 'ru-RU'; // 러시아어 (러시아)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (단수)
    case 'few': return 'товара'; // tovara (소수)
    case 'many': return 'товаров'; // tovarov (다수)
    default: return 'товаров'; // 기본값은 다수
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // 출력: "5 товаров"

이 예시는 Intl.PluralRules를 사용하여 러시아어로 "товар"(항목)라는 단어의 올바른 복수형을 얻는 방법을 보여줍니다. 러시아어는 숫자가 1, 2-4 또는 5-9로 끝나는지에 따라 다른 복수형을 가집니다.

5. Intl.ListFormat으로 목록 서식 지정하기

항목 목록을 표시할 때 서식은 로캘에 따라 다를 수 있습니다. Intl.ListFormat 객체를 사용하면 다른 접속사(예: "and", "or") 및 목록 구분 기호(예: 쉼표, 세미콜론) 사용을 포함하여 로캘별 관례에 따라 목록 서식을 지정할 수 있습니다.

예시:

const locale = 'es-ES'; // 스페인어 (스페인)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // 출력: "manzanas, naranjas y plátanos"
console.log(formattedList);

이 예시는 스페인(스페인)어로 과일 목록의 서식을 지정하며, 마지막 두 항목을 연결하기 위해 접속사 "y"(and)를 사용합니다.

6. Intl.RelativeTimeFormat으로 상대 시간 서식 지정하기

상대 시간(예: "어제", "2시간 후")을 표시하면 사용자 친화적인 방식으로 시간 정보를 제공할 수 있습니다. Intl.RelativeTimeFormat 객체를 사용하면 로캘별 관례에 따라 상대 시간 서식을 지정할 수 있습니다.

예시:

const locale = 'fr-CA'; // 프랑스어 (캐나다)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // 출력: "hier"
console.log(rtf.format(2, 'day')); // 출력: "dans 2 jours"

이 예시는 프랑스어(캐나다)로 상대 시간 서식을 지정합니다. 출력은 "hier"(어제)와 "dans 2 jours"(2일 후)를 보여줍니다.

numeric 옵션은 숫자가 표시되는 방식을 제어합니다. 'auto'는 "어제"와 같이 사용 가능한 경우 상대적인 단어를 표시하고, 그렇지 않으면 숫자를 표시합니다. 'always'는 항상 숫자를 표시합니다.

7. Intl.Collator로 문자열 정렬하기

문자열 비교는 로캘에 민감합니다. 문자열이 정렬되는 방식은 언어에 따라 다릅니다. 예를 들어, 독일어에서는 문자 "ä"가 일반적으로 "a"처럼 정렬되는 반면, 스웨덴어에서는 "z" 뒤에 정렬됩니다. `Intl.Collator` 객체를 사용하면 특정 로캘의 규칙에 따라 문자열을 비교할 수 있습니다.

예시:

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // 출력: ["äpfel", "aprikosen", "bananen", "birnen"]

이 예시는 Intl.Collator를 사용하여 독일어 단어 배열을 정렬합니다. "ä"가 알파벳 순서상 뒤에 오지만 "äpfel"이 "aprikosen"보다 먼저 정렬되는 것을 확인하세요.

8. 예외 상황 및 누락된 데이터 처리하기

모든 브라우저나 환경에서 모든 로캘이 지원되는 것은 아닙니다. 로캘을 사용할 수 없거나 데이터가 누락된 경우의 예외 상황을 처리하는 것이 중요합니다. 다음 전략을 고려하십시오:

대체 로캘 제공: 사용자가 선호하는 로캘이 지원되지 않을 때 사용할 기본 로캘을 지정하십시오.
점진적 기능 저하: 특정 서식 옵션이 로캘에 대해 지원되지 않는 경우 합리적인 대체 방안을 제공하십시오. 예를 들어, 덜 상세한 형식으로 날짜를 표시할 수 있습니다.
Try-Catch 블록 사용: Intl API 호출을 try-catch 블록으로 감싸 잠재적인 오류를 정상적으로 처리하십시오.

9. 다른 로캘로 철저하게 테스트하기

국제화된 애플리케이션이 지원되는 모든 로캘에서 올바르게 작동하는지 확인하려면 철저한 테스트가 중요합니다. 다른 문자 집합, 날짜 및 시간 형식, 숫자 형식 및 복수형 규칙을 사용하는 언어를 포함하여 다양한 로캘로 애플리케이션을 테스트하십시오.

자동화된 테스트 도구를 사용하여 애플리케이션이 다른 로캘에서 예상대로 작동하는지 확인하는 것을 고려하십시오.

10. 성능 영향 고려하기

Intl API는 일반적으로 효율적이지만 Intl 객체를 생성하는 것은 비교적 비용이 많이 들 수 있습니다. 성능을 최적화하려면 다음을 고려하십시오:

Intl 객체 캐싱: 각 서식 지정 작업에 대해 새 객체를 만드는 대신 Intl 객체를 한 번 만들고 가능할 때마다 재사용하십시오.
로캘 데이터 지연 로딩: 모든 로캘 데이터를 미리 로드하는 대신 필요할 때만 로캘 데이터를 로드하십시오.

Intl API를 넘어서: 국제화를 위한 추가 고려 사항

Intl API는 데이터 서식 지정을 위한 강력한 도구를 제공하지만, 국제화는 단순한 서식 지정 이상의 것을 포함합니다. 다음 추가 측면을 고려하십시오:

텍스트 방향 (RTL/LTR): CSS를 사용하여 애플리케이션의 레이아웃을 조정하여 아랍어 및 히브리어와 같은 오른쪽에서 왼쪽으로 쓰는(RTL) 언어를 지원하십시오.
문자 인코딩: UTF-8 인코딩을 사용하여 애플리케이션이 다양한 문자를 처리할 수 있도록 하십시오.
번역 관리: 번역 관리 시스템을 사용하여 애플리케이션 텍스트 번역 프로세스를 간소화하십시오.
문화적으로 민감한 디자인: 애플리케이션을 디자인할 때 문화적 차이를 염두에 두십시오. 예를 들어, 색상의 상징성은 문화에 따라 다를 수 있습니다.

결론

JavaScript Intl API는 전 세계 사용자를 대상으로 하는 웹 애플리케이션을 구축하는 데 매우 귀중한 도구입니다. 이 글에서 설명한 모범 사례를 따르면 기능적일 뿐만 아니라 전 세계 사용자에게 문화적으로 민감하고 사용자 친화적인 애플리케이션을 만들 수 있습니다. Intl API의 힘을 받아들여 글로벌 무대에서 애플리케이션의 잠재력을 발휘하십시오. Intl API를 마스터하면 위치나 언어에 관계없이 모든 사용자에게 더 포용적이고 접근성 높은 경험을 제공할 수 있습니다.