웹 애플리케이션은 전 세계 사용자를 대상으로 할 때 다국어 지원이 중요합니다. 사용자에게 익숙한 단위로 정보를 표시하는 것이 중요한 부분 중 하나입니다. 이를 위해 자바스크립트 Intl API를 활용하여 다국어로 표시된 단위를 편리하게 변환할 수 있습니다.

Intl.NumberFormat

Intl API의 NumberFormat은 다양한 숫자 표기 형식을 지원합니다. 이를 활용하여 단위 변환을 구현할 수 있습니다. 아래는 숫자 값을 특정 국가의 통화 단위로 표시하는 예제입니다.

const number = 123456.789;
const format = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

console.log(format.format(number)); // $123,456.79

위 예제에서는 en-US 로케일을 사용하여 미국 달러로 통화 값을 표시했습니다. format 객체를 생성할 때 설정한 옵션에 따라 숫자가 통화 형식으로 변환됩니다.

Intl.NumberFormat 사용자 정의

Intl API는 사용자 정의 형식을 지원하기 때문에 특정 단위로 숫자 값을 표시하는 것도 가능합니다. 아래 예제에서는 길이 단위로 값을 변환하는 코드입니다.

const number = 12.345;
const format = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'inch',
  unitDisplay: 'long'
});

console.log(format.format(number)); // 12.345 inches

unit 스타일과 unit 옵션을 사용하여 단위를 지정했습니다. 이 예제는 inch 단위로 값을 표시하며, unitDisplay 옵션을 long으로 설정하여 단위 이름을 함께 표시합니다.

다국어 지원

Intl API는 다국어를 지원하기 때문에 단위 변환 문구도 사용자의 언어에 맞게 표시할 수 있습니다. 아래 예제에서는 한국어로 무게 단위를 표시하는 코드입니다.

const number = 45.67;
const format = new Intl.NumberFormat('ko-KR', {
  style: 'unit',
  unit: 'kilogram',
  unitDisplay: 'long'
});

console.log(format.format(number)); // 45.67킬로그램

ko-KR 로케일을 사용하여 한국어로 표시되는 것을 확인할 수 있습니다.

다국어 지원을 위해서는 사용자의 언어 설정을 파악해야 합니다. 웹 브라우저의 navigator.language 속성을 통해 확인할 수 있습니다.

const userLanguage = navigator.language;
const format = new Intl.NumberFormat(userLanguage, {
  style: 'unit',
  unit: 'meter',
  unitDisplay: 'long'
});

console.log(format.format(56.78)); // 56.78미터

자바스크립트 Intl API를 활용하여 다국어로 표시된 단위 변환을 손쉽게 구현할 수 있습니다. 이를 통해 웹 애플리케이션에 사용자 경험을 높일 수 있으며, 다국어 사용자들에게 보다 편리한 환경을 제공할 수 있습니다.

#javascript #다국어지원