압축 형식에서 1K와 1천 중 선택하는 방법
compactDisplay 옵션을 사용하여 압축된 숫자가 약어로 표시될지 또는 철자가 풀린 단어로 표시될지 제어할 수 있습니다
소개
큰 숫자를 간결한 표기법으로 포맷팅할 때, 숫자 1500은 기본적으로 1.5K가 됩니다. 이러한 축약된 형식은 모바일 화면이나 대시보드 카드와 같이 공간이 제한된 인터페이스에서 잘 작동합니다. 그러나 일부 상황에서는 크기를 풀어서 표현하는 것이 더 유용할 수 있습니다. 동일한 숫자가 1.5K 대신 1.5 thousand로 표시되어 간결함 대신 명확성을 제공합니다.
자바스크립트의 Intl.NumberFormat은 이러한 선택을 제어하기 위한 compactDisplay 옵션을 제공합니다. K, M, B와 같은 약어를 사용하는 짧은 표시 방식이나 thousand, million, billion과 같이 크기를 풀어서 표현하는 긴 표시 방식 중에서 선택할 수 있습니다. 이 옵션을 통해 간결한 숫자가 사용자에게 어떻게 표시될지 정확하게 제어할 수 있습니다.
compactDisplay 옵션이 제어하는 것
compactDisplay 옵션은 notation을 "compact"로 설정했을 때만 작동합니다. 이 옵션은 "short"와 "long" 두 가지 값을 허용합니다. short 값은 1.5K와 같은 축약된 출력을 생성하고, long 값은 1.5 thousand와 같이 풀어서 표현된 출력을 생성합니다.
const shortFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(shortFormatter.format(1500));
// 출력: "1.5K"
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(longFormatter.format(1500));
// 출력: "1.5 thousand"
compactDisplay 옵션을 생략하면 기본값은 "short"입니다. 이는 명시적으로 긴 표시를 요청하지 않는 한 간결한 표기법이 약어를 사용한다는 의미입니다.
짧은 간결 표시로 숫자 포맷팅하기
짧은 간결 표시는 크기를 나타내기 위해 한 글자 약어를 사용합니다. 이 형식은 가독성을 유지하면서 수평 공간을 최소화합니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(formatter.format(1500));
// 출력: "1.5K"
console.log(formatter.format(2400000));
// 출력: "2.4M"
console.log(formatter.format(7800000000));
// 출력: "7.8B"
console.log(formatter.format(5600000000000));
// 출력: "5.6T"
포맷터는 숫자의 크기에 따라 적절한 약어를 자동으로 선택합니다. 천 단위는 K, 백만 단위는 M, 십억 단위는 B, 조 단위는 T를 사용합니다.
짧은 표시는 제한된 공간에 숫자를 맞춰야 할 때 유용합니다. 모바일 인터페이스, 데이터 테이블, 차트 레이블, 대시보드 카드는 축약된 숫자의 간결한 너비의 이점을 얻을 수 있습니다.
long compact display로 숫자 형식 지정하기
Long compact display는 단위를 축약하는 대신 단위 단어를 완전히 표기합니다. 이 형식은 더 많은 가로 공간을 사용하는 대신 더 명확한 표현을 제공합니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(formatter.format(1500));
// Output: "1.5 thousand"
console.log(formatter.format(2400000));
// Output: "2.4 million"
console.log(formatter.format(7800000000));
// Output: "7.8 billion"
console.log(formatter.format(5600000000000));
// Output: "5.6 trillion"
이 포맷터는 전체 단위 단어를 사용하여 숫자의 규모를 즉시 명확하게 표현하므로 사용자가 약어를 해석할 필요가 없습니다. K, M, B 표기법에 익숙하지 않은 사용자들은 thousand, million, billion과 같은 전체 단어 표기를 더 이해하기 쉽게 느낄 것입니다.
Long display는 공간보다 명확성이 더 중요한 상황에서 잘 작동합니다. 교육 콘텐츠, 재무 보고서, 접근성 중심 인터페이스 및 공식 문서에서는 단위를 완전히 표기하는 것이 유용합니다.
short와 long compact display 비교하기
동일한 숫자를 두 옵션으로 모두 형식화할 때 short와 long display의 차이점이 명확해집니다.
const shortFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
const numbers = [1500, 45000, 2400000, 950000000];
numbers.forEach(num => {
console.log(`${num}:`);
console.log(` Short: ${shortFormatter.format(num)}`);
console.log(` Long: ${longFormatter.format(num)}`);
});
// Output:
// 1500:
// Short: 1.5K
// Long: 1.5 thousand
// 45000:
// Short: 45K
// Long: 45 thousand
// 2400000:
// Short: 2.4M
// Long: 2.4 million
// 950000000:
// Short: 950M
// Long: 950 million
Short display는 일관되게 더 적은 문자를 사용합니다. 약어 K는 한 문자를 차지하는 반면, thousand는 공백을 포함하여 8개의 문자를 차지합니다. 이러한 차이는 테이블이나 목록에 많은 숫자를 표시할 때 더 커집니다.
Long display는 각 숫자에 대해 더 많은 컨텍스트를 제공합니다. 사용자는 M이 무엇을 나타내는지 해독할 필요 없이 2.4 million을 읽을 수 있습니다. 이러한 명시적 표현은 약식 숫자 형식에 익숙하지 않은 사용자에게 도움이 됩니다.
언어별 간결한 표시 방식의 차이
짧은 형식과 긴 형식의 간결한 표시 방식은 지정한 로케일에 따라 달라집니다. 언어마다 다른 약어와 크기 단위 단어를 사용합니다.
const locales = ["en-US", "fr-FR", "de-DE", "es-ES"];
locales.forEach(locale => {
const shortFormatter = new Intl.NumberFormat(locale, {
notation: "compact",
compactDisplay: "short"
});
const longFormatter = new Intl.NumberFormat(locale, {
notation: "compact",
compactDisplay: "long"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(2400000)}`);
console.log(` Long: ${longFormatter.format(2400000)}`);
});
// Output:
// en-US:
// Short: 2.4M
// Long: 2.4 million
// fr-FR:
// Short: 2,4 M
// Long: 2,4 millions
// de-DE:
// Short: 2,4 Mio.
// Long: 2,4 Millionen
// es-ES:
// Short: 2,4 M
// Long: 2,4 millones
프랑스어에서는 millions에 s를 추가하여 복수형을 만듭니다. 독일어는 짧은 형식으로 Mio.를 사용하고 긴 형식으로 Millionen을 사용합니다. 스페인어는 복수형으로 millones를 사용합니다. 각 언어는 짧은 형식과 긴 형식 모두에 자체 문법 규칙을 적용합니다.
포맷터는 로케일에 따라 이러한 변형을 자동으로 처리합니다. 각 언어별로 별도의 포맷팅 로직을 유지할 필요가 없습니다.
아시아 언어는 종종 완전히 다른 숫자 그룹화 시스템을 사용합니다.
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact",
compactDisplay: "short"
});
console.log(jaFormatter.format(15000000));
// Output: "1500万"
const zhFormatter = new Intl.NumberFormat("zh-CN", {
notation: "compact",
compactDisplay: "short"
});
console.log(zhFormatter.format(15000000));
// Output: "1500万"
일본어와 중국어는 천 단위가 아닌 만 단위로 그룹화합니다. 문자 '万'은 만을 나타내므로 15,000,000은 15M이 아닌 1500万이 됩니다. Intl API는 이러한 숫자 시스템의 근본적인 차이를 자동으로 처리합니다.
짧은 간결 표시를 사용해야 하는 경우
짧은 압축 표시는 모든 문자가 중요한 공간 제약적 상황에서 가장 효과적입니다. 모바일 인터페이스는 수평 공간이 제한되어 있어 콘텐츠를 화면에 맞추기 위해 축약된 숫자가 필수적입니다.
여러 숫자를 표시하는 데이터 테이블은 균일한 너비가 유리합니다. 1.5K, 2.4M, 7.8B와 같은 형식을 사용하면 열이 정렬되고 줄바꿈을 방지할 수 있습니다. 일관된 약어 형식은 사용자가 숫자 열을 빠르게 스캔하는 데 도움이 됩니다.
대시보드 카드와 메트릭 패널은 정보 밀도를 최대화하기 위해 짧은 표시를 사용합니다. 여러 플랫폼에서 팔로워 수, 조회 수, 참여 지표를 보여주는 대시보드는 모든 지표를 동시에 화면에 맞추기 위해 압축된 형식이 필요합니다.
차트 축과 레이블은 겹치거나 혼잡해지는 것을 방지하기 위해 최소한의 텍스트가 필요합니다. 1.5 million 대신 1.5M을 사용하면 축 레이블을 회전하거나 잘라내지 않고도 읽기 쉽게 유지할 수 있습니다.
대화형 지도 및 데이터 시각화는 오버레이나 툴팁으로 숫자를 표시할 때 짧은 표시 형식이 유리합니다. 축약된 형식은 텍스트가 기본 콘텐츠를 가리는 것을 방지합니다.
긴 압축 표시를 사용해야 할 때
긴 압축 표시는 공간 효율성보다 명확성과 접근성이 더 중요할 때 가장 효과적입니다. 사용자에게 큰 숫자에 대해 가르치는 교육 콘텐츠는 크기를 철자로 표기하는 것이 유리합니다. 인구 통계나 경제 수치에 대해 배우는 학생들은 규모를 이해하기 위해 명시적인 크기 단어가 필요합니다.
재무 보고서와 공식 문서는 모호함을 피하기 위해 긴 표시를 사용합니다. 수익이 2.4M이라고 하는 것보다 2.4 million이라고 명시하는 비즈니스 보고서가 특히 약어 규칙에 익숙하지 않은 독자에게 더 명확합니다.
접근성 중심 인터페이스는 스크린 리더가 철자가 풀린 단어를 더 자연스럽게 발음하기 때문에 긴 표시가 유리합니다. 스크린 리더가 1.5 thousand라고 발표하는 것이 1.5K(원 포인트 파이브 케이 또는 원 포인트 파이브 K로 읽힐 수 있음)보다 더 자연스럽게 들립니다.
인쇄 레이아웃은 디지털 인터페이스보다 수평 공간이 더 많아 긴 표시가 실용적입니다. 인쇄된 보고서, 인포그래픽, 프레젠테이션은 레이아웃 문제를 일으키지 않고 추가 문자를 수용할 수 있습니다.
사용자가 약어에 익숙하지 않을 수 있는 상황에서는 긴 표시가 필요합니다. 국제 사용자, 비기술적 사용자 또는 디지털 리터러시가 낮은 사용자는 K, M, B보다 thousand, million, billion이 더 인식하기 쉽습니다.
간결한 표시를 다른 서식 옵션과 결합하기
'compactDisplay' 옵션은 모든 다른 숫자 서식 옵션과 함께 작동합니다. 짧은 표시와 긴 표시 중에서 선택하면서 소수점, 그룹화 및 기타 서식을 제어할 수 있습니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long",
maximumFractionDigits: 2
});
console.log(formatter.format(1234567));
// 출력: "1.23 million"
console.log(formatter.format(9876543));
// 출력: "9.88 million"
maximumFractionDigits 옵션은 소수점 정밀도를 제어하는 반면, compactDisplay는 크기 형식을 제어합니다. 이러한 옵션들은 함께 작동하여 필요한 정확한 형식을 생성합니다.
통화 서식과 간결한 표시를 결합하여 크기가 철자로 표시된 통화 금액을 표시할 수 있습니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
notation: "compact",
compactDisplay: "long"
});
console.log(formatter.format(2400000));
// 출력: "$2.4 million"
console.log(formatter.format(750000));
// 출력: "$750 thousand"
이 형식은 통화 기호와 철자가 표시된 크기가 명확성을 제공하는 재무 보고서나 예산 요약에서 큰 통화 값을 표시하는 데 적합합니다.
간결한 표시는 또한 부호 표시와 함께 작동하여 변화나 델타를 표시합니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long",
signDisplay: "always"
});
console.log(formatter.format(1500000));
// 출력: "+1.5 million"
console.log(formatter.format(-850000));
// 출력: "-850 thousand"
명시적 부호와 철자가 표시된 크기의 조합은 사용자에게 변화를 즉시 명확하게 보여줍니다.
기억해야 할 사항
compactDisplay 옵션은 간결한 표기법이 약어를 사용할지 또는 철자가 표시된 단어를 사용할지를 제어합니다. 1.5K와 같은 약식 출력을 위해 "short"로 설정하거나, 1.5 thousand와 같은 철자가 표시된 출력을 위해 "long"으로 설정하세요. 이 옵션은 생략하면 기본값이 "short"입니다.
공간이 제한되어 있거나 일관된 너비가 필요한 많은 숫자를 표시할 때는 짧은 표시를 사용하세요. 공간 효율성보다 명확성과 접근성이 더 중요할 때는 긴 표시를 사용하세요. 포맷터는 짧은 형식과 긴 형식 모두에 대해 로케일별 변형을 자동으로 처리합니다.
애플리케이션에 필요한 정확한 숫자 형식을 만들기 위해 compactDisplay를 소수점, 통화, 부호 표시와 같은 다른 서식 옵션과 결합하세요.