단위를 짧은 형식 또는 긴 형식으로 표시하는 방법

소개

인터페이스에서 측정값을 표시할 때 단위는 숫자와 함께 공간을 차지합니다. 5킬로미터의 거리는 사용 가능한 공간과 명확성 요구 사항에 따라 "5 km", "5 kilometers" 또는 "5km"로 표시될 수 있습니다. 각 형식은 가독성과 가로 공간 사이에서 균형을 맞춥니다.

상황에 따라 다른 형식 선택이 필요합니다. 여러 지표를 표시하는 모바일 대시보드는 "km" 또는 "kg"와 같은 간결한 단위가 유리합니다. 학생들에게 측정에 대해 가르치는 교육용 애플리케이션은 "kilometers" 또는 "kilograms"와 같이 명확하게 풀어 쓴 단위가 필요합니다. 데이터 집약적인 시각화는 화면에 더 많은 정보를 표시하기 위해 가능한 한 가장 간결한 형식을 사용합니다.

JavaScript의 Intl.NumberFormat는 이 선택을 제어하기 위한 unitDisplay 옵션을 제공합니다. 표준 약어를 사용한 짧은 표시, 전체 단어로 표기된 긴 표시, 또는 가능한 가장 간결한 표현인 좁은 표시 중에서 선택할 수 있습니다. 이 옵션을 통해 사용자에게 단위가 표시되는 방식을 정확하게 제어할 수 있습니다.

unitDisplay 옵션이 제어하는 것

unitDisplay 옵션은 Intl.NumberFormat에서 style를 "unit"로 설정할 때 작동합니다. 이 옵션은 "short", "long", "narrow"의 세 가지 값을 허용합니다. 각 값은 형식화된 출력의 단위 부분에 대해 서로 다른 수준의 상세도를 생성합니다.

short 값은 "5 km" 또는 "10 lb"와 같은 표준 약어 단위를 생성합니다. long 값은 "5 kilometers" 또는 "10 pounds"와 같이 전체 단위 이름을 풀어 씁니다. narrow 값은 "5km" 또는 "10lb"와 같이 가장 간결한 표현을 생성하며, 종종 숫자와 단위 사이의 공백을 제거합니다.

const shortFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

console.log(shortFormatter.format(5));
// Output: "5 km"

const longFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long"
});

console.log(longFormatter.format(5));
// Output: "5 kilometers"

const narrowFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

console.log(narrowFormatter.format(5));
// Output: "5km"

unitDisplay 옵션을 생략하면 기본값은 "short"입니다. 즉, 다른 표시 스타일을 명시적으로 요청하지 않는 한 단위 형식화는 표준 약어를 사용합니다.

짧은 표시로 단위 형식 지정

짧은 표시는 대부분의 사람들이 인식하는 표준 약어를 사용합니다. 이 형식은 가독성과 공간 효율성의 균형을 맞춥니다.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

console.log(formatter.format(5));
// Output: "5 km"

console.log(formatter.format(42));
// Output: "42 km"

포맷터는 숫자와 약어 단위 사이에 공백을 추가합니다. 이러한 구분은 출력을 간결하게 유지하면서 가독성을 향상시킵니다.

짧은 표시로 다양한 단위 유형을 형식 지정할 수 있습니다.

const distanceFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

const weightFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "short"
});

const volumeFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "liter",
  unitDisplay: "short"
});

console.log(distanceFormatter.format(10));
// Output: "10 km"

console.log(weightFormatter.format(25));
// Output: "25 kg"

console.log(volumeFormatter.format(3.5));
// Output: "3.5 L"

각 단위 유형은 표준 약어를 사용합니다. 거리는 km, 무게는 kg, 부피는 L을 사용합니다. 이러한 약어는 널리 인식되며 대부분의 상황에서 잘 작동합니다.

짧은 표시는 기본 동작입니다. unitDisplay 옵션을 생략하면 포맷터는 자동으로 짧은 표시를 사용합니다.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer"
});

console.log(formatter.format(5));
// Output: "5 km"

이 기본값은 표시 옵션을 명시적으로 지정하지 않고 표준 약어 단위를 원할 때 짧은 표시를 편리하게 만듭니다.

긴 표시로 단위 형식 지정

긴 표시는 완전한 단위 이름을 표기합니다. 이 형식은 추가 가로 공간을 사용하는 대신 최대한의 명확성을 제공합니다.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long"
});

console.log(formatter.format(5));
// Output: "5 kilometers"

console.log(formatter.format(1));
// Output: "1 kilometer"

포맷터는 단수형과 복수형을 자동으로 처리합니다. 하나의 단위는 단수형 "kilometer"를 사용하고 여러 단위는 복수형 "kilometers"를 사용합니다. 어떤 형태를 사용할지 수동으로 결정할 필요가 없습니다.

긴 표시로 다양한 단위를 형식 지정하여 전체 단위 이름을 확인할 수 있습니다.

const distanceFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "mile",
  unitDisplay: "long"
});

const weightFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "pound",
  unitDisplay: "long"
});

const temperatureFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "celsius",
  unitDisplay: "long"
});

console.log(distanceFormatter.format(10));
// Output: "10 miles"

console.log(weightFormatter.format(25));
// Output: "25 pounds"

console.log(temperatureFormatter.format(22));
// Output: "22 degrees Celsius"

긴 표시는 사용자가 약어를 해석할 필요 없이 측정값을 즉시 명확하게 만듭니다. 특히 온도 단위는 C와 F 같은 약어가 모호할 수 있기 때문에 긴 표시의 이점을 누립니다.

측정 약어에 익숙하지 않은 사용자는 전체 표기된 단위를 더 쉽게 이해합니다. 교육 콘텐츠, 공식 보고서 및 접근성 중심 인터페이스는 이러한 명시성의 이점을 누립니다.

좁은 표시로 단위 형식 지정

좁은 표시는 가능한 가장 간결한 표현을 생성합니다. 이 형식은 공백을 제거하고 최소한의 기호를 사용하여 모든 문자를 절약합니다.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

console.log(formatter.format(5));
// Output: "5km"

console.log(formatter.format(42));
// Output: "42km"

포맷터는 숫자와 단위 사이의 공백을 제거하여 더 압축된 출력을 생성합니다. 이는 극도로 제한된 레이아웃에서 가로 공간을 절약합니다.

다양한 단위는 표준 규칙에 따라 서로 다른 좁은 표현을 생성합니다.

const distanceFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

const speedFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer-per-hour",
  unitDisplay: "narrow"
});

const weightFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "narrow"
});

console.log(distanceFormatter.format(10));
// Output: "10km"

console.log(speedFormatter.format(60));
// Output: "60km/h"

console.log(weightFormatter.format(25));
// Output: "25kg"

좁은 표시는 공간이 극도로 제한되어 있고 사용자가 측정 컨텍스트에 익숙한 경우에 가장 적합합니다. 압축된 형식은 사용자가 명시적인 구분이나 설명 없이 단위를 해석할 수 있다고 가정합니다.

짧은, 긴, 좁은 표시 비교

세 가지 표시 옵션 간의 차이는 각 옵션으로 동일한 측정값을 형식화할 때 명확해집니다.

const shortFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

const longFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long"
});

const narrowFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

const distances = [1, 5, 10, 42];

distances.forEach(distance => {
  console.log(`${distance}:`);
  console.log(`  Short:  ${shortFormatter.format(distance)}`);
  console.log(`  Long:   ${longFormatter.format(distance)}`);
  console.log(`  Narrow: ${narrowFormatter.format(distance)}`);
});

// Output:
// 1:
//   Short:  1 km
//   Long:   1 kilometer
//   Narrow: 1km
// 5:
//   Short:  5 km
//   Long:   5 kilometers
//   Narrow: 5km
// 10:
//   Short:  10 km
//   Long:   10 kilometers
//   Narrow: 10km
// 42:
//   Short:  42 km
//   Long:   42 kilometers
//   Narrow: 42km

짧은 표시는 단위 부분에 4-5자를 사용합니다. 긴 표시는 복수형을 포함하여 9-10자를 사용합니다. 좁은 표시는 2자를 사용하고 공백을 제거합니다. 이러한 진행은 명확성과 공간 효율성 간의 절충을 보여줍니다.

다양한 단위 유형을 비교하여 각 표시 옵션이 다양한 측정값을 어떻게 처리하는지 확인할 수 있습니다.

const units = [
  { unit: "mile", value: 10 },
  { unit: "pound", value: 25 },
  { unit: "gallon", value: 5 },
  { unit: "fahrenheit", value: 72 }
];

units.forEach(({ unit, value }) => {
  const short = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "short"
  }).format(value);

  const long = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "long"
  }).format(value);

  const narrow = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "narrow"
  }).format(value);

  console.log(`${unit}:`);
  console.log(`  Short:  ${short}`);
  console.log(`  Long:   ${long}`);
  console.log(`  Narrow: ${narrow}`);
});

// Output:
// mile:
//   Short:  10 mi
//   Long:   10 miles
//   Narrow: 10mi
// pound:
//   Short:  25 lb
//   Long:   25 pounds
//   Narrow: 25lb
// gallon:
//   Short:  5 gal
//   Long:   5 gallons
//   Narrow: 5gal
// fahrenheit:
//   Short:  72°F
//   Long:   72 degrees Fahrenheit
//   Narrow: 72°F

온도 단위는 흥미로운 동작을 보여줍니다. 짧은 표시와 좁은 표시는 모두 도 기호와 약어 단위를 사용하는 반면, 긴 표시는 "degrees Fahrenheit"를 완전히 표기합니다. 이는 전체 컨텍스트가 중요한 온도에서 긴 표시를 특히 유용하게 만듭니다.

언어에 따라 단위 표시가 달라지는 방식

세 가지 표시 옵션 모두 지정한 로케일에 맞게 조정됩니다. 언어마다 다른 약어, 단위 이름 및 간격 규칙을 사용합니다.

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer",
    unitDisplay: "short"
  });

  const longFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer",
    unitDisplay: "long"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(5)}`);
  console.log(`  Long:  ${longFormatter.format(5)}`);
});

// Output:
// en-US:
//   Short: 5 km
//   Long:  5 kilometers
// de-DE:
//   Short: 5 km
//   Long:  5 Kilometer
// fr-FR:
//   Short: 5 km
//   Long:  5 kilomètres
// ja-JP:
//   Short: 5 km
//   Long:  5キロメートル

짧은 표시는 "km"가 국제적으로 인정되는 약어이기 때문에 로케일 전반에 걸쳐 일관성을 유지합니다. 긴 표시는 각 언어마다 킬로미터에 대한 고유한 단어가 있기 때문에 다양합니다. 독일어는 "Kilometer", 프랑스어는 "kilomètres", 일본어는 "キロメートル"를 사용합니다.

포매터는 문법적 변형을 자동으로 처리합니다. 독일어는 영어가 "kilometers"를 복수화하는 방식과 동일하게 "Kilometer"를 복수화하지 않습니다. 프랑스어는 단어에 악센트를 추가합니다. 일본어는 완전히 다른 문자 체계를 사용합니다. Intl API는 로케일에 따라 이러한 차이를 관리합니다.

일부 로케일은 다른 로케일과 다르게 좁은 표시를 처리합니다.

const locales = ["en-US", "de-DE", "fr-FR"];

locales.forEach(locale => {
  const narrowFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer-per-hour",
    unitDisplay: "narrow"
  });

  console.log(`${locale}: ${narrowFormatter.format(60)}`);
});

// Output:
// en-US: 60km/h
// de-DE: 60 km/h
// fr-FR: 60 km/h

영어는 좁은 표시에서 공백을 제거하여 "60km/h"를 생성합니다. 독일어와 프랑스어는 공백을 유지하여 "60 km/h"를 생성합니다. 이러한 로케일별 규칙은 각 문화권이 압축 형식으로 측정값을 작성하는 방식을 반영합니다.

짧은 표시를 사용해야 하는 경우

짧은 표시는 공간이 중요하지만 약어가 널리 이해되는 컨텍스트에서 가장 잘 작동합니다. 이는 범용 애플리케이션에서 가장 일반적인 선택입니다.

모바일 인터페이스는 화면 너비가 제한되어 있기 때문에 짧은 표시의 이점을 얻습니다. 여러 메트릭을 표시하는 대시보드 카드는 정보를 화면에 맞추기 위해 압축된 단위가 필요합니다. "42 kilometers" 대신 "42 km"를 사용하면 측정값당 5자를 절약할 수 있으며, 여러 값에 걸쳐 누적됩니다.

열에 측정값을 표시하는 데이터 테이블은 일관된 너비가 필요합니다. "km", "kg", "L"과 같은 짧은 약어는 열 너비를 관리 가능하게 유지합니다. "kilometers", "kilograms", "liters"와 같은 긴 단위는 불필요하게 열을 넓힙니다.

과학 및 기술 인터페이스는 이러한 컨텍스트의 사용자가 표준 약어에 익숙하기 때문에 짧은 표시를 사용합니다. 엔지니어, 과학자 및 기술 전문가는 측정값이 약어 단위를 사용할 것으로 예상합니다.

지도 및 시각화는 텍스트로 인터페이스를 어지럽히지 않기 위해 짧은 표시를 사용합니다. 마커 주변 공간이 제한된 경우 지도 마커에 "5 kilometers"보다 "5 km"를 표시하는 것이 더 읽기 쉽습니다.

짧은 표시는 명확성과 효율성 사이의 균형을 유지합니다. 대부분의 사용자는 혼동 없이 km, mi, kg, lb, L, gal과 같은 표준 약어를 인식합니다.

긴 표시를 사용해야 하는 경우

긴 표시는 공간 효율성보다 명확성과 접근성이 더 중요할 때 가장 효과적입니다. 이 선택은 해석이 필요 없이 측정값을 즉시 이해할 수 있게 만듭니다.

교육 콘텐츠는 긴 표시의 이점을 누릴 수 있습니다. 학생들이 측정 단위 약어에 익숙하지 않을 수 있기 때문입니다. 거리, 무게 또는 부피를 설명하는 교육 자료는 혼란을 피하기 위해 단위를 완전히 표기해야 합니다.

접근성 중심 인터페이스는 긴 표시의 이점을 누릴 수 있습니다. 스크린 리더가 완전히 표기된 단어를 더 자연스럽게 발음하기 때문입니다. 스크린 리더가 "5 kilometers"를 발음하는 것이 "5 km"보다 더 자연스럽게 들립니다. "5 km"는 "5 k m" 또는 "5 kay em"으로 읽힐 수 있습니다.

공식 문서와 보고서는 전문적인 어조를 유지하기 위해 긴 표시를 사용합니다. 비즈니스 보고서, 과학 논문 및 공식 문서는 일반적으로 측정값을 약어로 표기하지 않고 완전히 표기합니다.

국제 사용자는 측정 시스템이 다를 때 긴 표시의 이점을 누릴 수 있습니다. 미터법 또는 야드파운드법에 익숙하지 않은 사용자는 "kilometers" 또는 "miles"와 같이 완전히 표기된 이름을 약어보다 더 쉽게 이해합니다.

사용자가 측정값이나 단위에 대해 학습하는 상황에서는 긴 표시가 필요합니다. 요리 측정값을 가르치는 레시피 애플리케이션, 거리를 설명하는 피트니스 애플리케이션 또는 무게를 표시하는 건강 애플리케이션은 명확하고 완전히 표기된 단위를 사용해야 합니다.

좁은 표시를 사용해야 하는 경우

좁은 표시는 모든 문자가 중요하고 사용자가 측정 영역에 매우 익숙한 극도로 공간이 제한된 상황에서 가장 효과적입니다.

밀집된 정보가 있는 데이터 시각화는 좁은 표시의 이점을 누릴 수 있습니다. 차트 레이블, 그래프 주석 및 데이터 오버레이는 기본 시각적 콘텐츠를 가리지 않도록 최소한의 텍스트가 필요합니다. "60 km/h" 대신 "60km/h"를 사용하면 문자 하나를 절약하면서도 컨텍스트를 이해하는 사용자에게 읽기 쉽게 유지됩니다.

단일 지표를 표시하는 컴팩트 대시보드 타일은 타일 크기가 최소일 때 좁은 표시를 사용할 수 있습니다. 큰 텍스트로 "60km/h"를 표시하는 속도계 위젯이 "60 kilometers per hour"보다 더 적합합니다.

화면 공간이 제한된 모바일 위젯은 정보 밀도를 최대화하기 위해 좁은 표시를 사용합니다. 작은 홈 화면 위젯에서 온도, 풍속, 강수량을 표시하는 날씨 위젯은 컴팩트 단위의 이점을 누릴 수 있습니다.

전문 사용자를 위한 기술 인터페이스는 대상 사용자가 명시적인 구분 없이 측정값을 이해하기 때문에 좁은 표시를 사용할 수 있습니다. 항공 디스플레이, 엔지니어링 도구, 과학 기기는 전문가가 즉시 인식할 수 있는 컴팩트 단위 표기법을 자주 사용합니다.

좁은 표시는 사용자가 측정 컨텍스트에 익숙하고 도움 없이 단위를 해석할 수 있다고 가정합니다. 이 옵션은 명확성을 최대 공간 효율성과 교환합니다.

단위 표시를 다른 서식 옵션과 결합

unitDisplay 옵션은 다른 모든 숫자 형식화 옵션과 함께 작동합니다. 단위 표시 스타일을 선택하면서 소수 자릿수, 그룹화 및 기타 형식화를 제어할 수 있습니다.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long",
  maximumFractionDigits: 2
});

console.log(formatter.format(42.7856));
// Output: "42.79 kilometers"

console.log(formatter.format(5.1));
// Output: "5.1 kilometers"

maximumFractionDigits 옵션은 소수점 정밀도를 제어하고 unitDisplay는 단위 형식을 제어합니다. 이러한 옵션은 함께 작동하여 필요한 정확한 형식을 생성합니다.

단위 표시를 컴팩트 표기법과 결합하여 큰 측정값을 읽기 쉬운 형식으로 표시할 수 있습니다.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "meter",
  unitDisplay: "long",
  notation: "compact"
});

console.log(formatter.format(1500));
// Output: "1.5K meters"

console.log(formatter.format(2400000));
// Output: "2.4M meters"

이 조합은 크기와 단위가 모두 명확해야 하는 매우 큰 측정값을 표시할 때 잘 작동합니다. 과학 데이터, 지리적 거리 또는 천문학적 측정은 긴 단위 표시와 함께 컴팩트 표기법의 이점을 누릴 수 있습니다.

단위 표시를 부호 표시와 결합하여 측정값의 변화 또는 차이를 표시할 수 있습니다.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "long",
  signDisplay: "always"
});

console.log(formatter.format(2.5));
// Output: "+2.5 kilograms"

console.log(formatter.format(-1.8));
// Output: "-1.8 kilograms"

이 형식은 체중 변화, 고도 차이 또는 변화 방향이 중요한 모든 측정값을 표시하는 데 적합합니다. 명시적인 부호와 전체 단위를 결합하면 변화가 즉시 명확해집니다.

기억해야 할 사항

unitDisplay 옵션은 Intl.NumberFormat로 측정값을 형식화할 때 단위가 표시되는 방식을 제어합니다. "5 km"와 같은 표준 약어의 경우 "short"로, "5 kilometers"와 같이 전체 단어로 표기된 단위의 경우 "long"로, "5km"와 같은 간결한 형식의 경우 "narrow"로 설정합니다. 이 옵션을 생략하면 기본값은 "short"입니다.

공간이 중요하고 사용자가 표준 약어를 이해하는 범용 애플리케이션에서는 short 표시를 사용하십시오. 공간보다 명확성과 접근성이 더 중요하거나 사용자가 약어에 익숙하지 않은 경우에는 long 표시를 사용하십시오. narrow 표시는 사용자가 측정 도메인에 매우 익숙하고 공간이 극도로 제한된 상황에서만 사용하십시오.

포매터는 다양한 약어, 단위 이름, 간격 규칙 및 복수형을 포함하여 로케일별 변형을 자동으로 처리합니다. unitDisplay를 소수 자릿수, 간결한 표기법, 부호 표시와 같은 다른 서식 옵션과 결합하여 애플리케이션에 필요한 정확한 측정 형식을 만드세요.