컴팩트 형식에서 1K와 1천 중 선택하는 방법
compactDisplay 옵션을 사용하여 컴팩트 숫자를 약어로 표시할지 단어로 표시할지 제어하세요
소개
큰 숫자를 컴팩트 표기법으로 형식화하면 숫자 1500은 기본적으로 1.5K가 됩니다. 이 약어 형식은 모바일 화면 및 대시보드 카드와 같이 공간이 제한된 인터페이스에서 잘 작동합니다. 그러나 일부 컨텍스트에서는 크기를 풀어서 표기하는 것이 유리합니다. 동일한 숫자를 1.5K 대신 1.5천으로 표시하여 간결함 대신 명확성을 선택할 수 있습니다.
JavaScript의 Intl.NumberFormat는 이 선택을 제어하기 위한 compactDisplay 옵션을 제공합니다. K, M, B와 같은 약어를 사용하는 짧은 표시 또는 천, 백만, 십억으로 크기를 풀어쓰는 긴 표시 중에서 선택할 수 있습니다. 이 옵션을 사용하면 압축된 숫자가 사용자에게 표시되는 방식을 정확하게 제어할 수 있습니다.
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));
// Output: "1.5K"
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(longFormatter.format(1500));
// Output: "1.5 thousand"
compactDisplay 옵션을 생략하면 기본값은 "short"입니다. 즉, 긴 표시를 명시적으로 요청하지 않는 한 압축 표기법은 약어를 사용합니다.
짧은 컴팩트 표시로 숫자 형식화
짧은 컴팩트 표시는 크기를 나타내기 위해 한 글자 약어를 사용합니다. 이 형식은 가독성을 유지하면서 가로 공간을 최소화합니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(formatter.format(1500));
// Output: "1.5K"
console.log(formatter.format(2400000));
// Output: "2.4M"
console.log(formatter.format(7800000000));
// Output: "7.8B"
console.log(formatter.format(5600000000000));
// Output: "5.6T"
포맷터는 숫자의 크기에 따라 적절한 약어를 자동으로 선택합니다. 천 단위는 K, 백만 단위는 M, 십억 단위는 B, 조 단위는 T를 사용합니다.
짧은 표시는 좁은 공간에 숫자를 맞춰야 할 때 잘 작동합니다. 모바일 인터페이스, 데이터 테이블, 차트 레이블 및 대시보드 카드는 약어 숫자의 컴팩트한 너비로 이점을 얻습니다.
긴 간략 표시로 숫자 형식 지정
긴 간략 표시는 크기 단위를 축약하지 않고 전체 단어로 표기합니다. 이 형식은 추가적인 가로 공간을 사용하는 대신 더 명확한 정보를 제공합니다.
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 표기법에 익숙하지 않은 사용자는 천, 백만, 십억이라는 표현이 더 이해하기 쉽습니다.
긴 표시는 공간보다 명확성이 중요한 상황에서 효과적입니다. 교육 콘텐츠, 재무 보고서, 접근성 중심 인터페이스, 공식 문서에서는 전체 단어로 표기된 크기 단위가 유용합니다.
짧은 간략 표시와 긴 간략 표시 비교
동일한 숫자를 두 옵션으로 형식 지정하면 짧은 표시와 긴 표시의 차이가 명확해집니다.
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
짧은 표시는 일관되게 더 적은 문자를 사용합니다. 축약어 K는 한 글자를 차지하는 반면, thousand는 공백을 포함하여 여덟 글자를 차지합니다. 이러한 차이는 표나 목록에 많은 숫자를 표시할 때 배가됩니다.
긴 표시는 각 숫자에 대해 더 많은 맥락을 제공합니다. 사용자는 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이 아닌 240만이라고 명시하는 비즈니스 보고서는 축약 규칙에 익숙하지 않은 독자에게 더 명확합니다.
접근성 중심 인터페이스는 화면 읽기 프로그램이 전체 단어를 더 자연스럽게 발음하기 때문에 긴 표시 형식의 이점을 얻습니다. 화면 읽기 프로그램이 1.5천을 발음하는 것이 1.5K보다 더 자연스럽게 들립니다. 1.5K는 일점오 케이 또는 일점오 K로 읽힐 수 있습니다.
인쇄 레이아웃은 디지털 인터페이스보다 가로 공간이 더 많아 긴 표시 형식을 실용적으로 사용할 수 있습니다. 인쇄된 보고서, 인포그래픽 및 프레젠테이션은 레이아웃 문제를 일으키지 않고 추가 문자를 수용할 수 있습니다.
사용자가 약어에 익숙하지 않을 수 있는 상황에서는 긴 표시 형식이 필요합니다. 국제 사용자, 비기술 사용자 또는 디지털 리터러시가 낮은 사용자는 K, M, B보다 천, 백만, 십억을 더 쉽게 인식합니다.
간결한 표시를 다른 서식 옵션과 결합
compactDisplay 옵션은 다른 모든 숫자 형식 옵션과 함께 작동합니다. 짧은 표시와 긴 표시 중에서 선택하면서 소수 자릿수, 그룹화 및 기타 형식을 제어할 수 있습니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long",
maximumFractionDigits: 2
});
console.log(formatter.format(1234567));
// Output: "1.23 million"
console.log(formatter.format(9876543));
// Output: "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));
// Output: "$2.4 million"
console.log(formatter.format(750000));
// Output: "$750 thousand"
이 형식은 통화 기호와 전체 단어로 표시된 크기가 모두 명확성을 제공하는 재무 보고서나 예산 요약에서 큰 금액을 표시하는 데 적합합니다.
간결한 표시는 부호 표시와도 함께 작동하여 변화 또는 델타를 표시합니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long",
signDisplay: "always"
});
console.log(formatter.format(1500000));
// Output: "+1.5 million"
console.log(formatter.format(-850000));
// Output: "-850 thousand"
명시적 부호와 전체 단어로 표시된 크기의 조합은 사용자에게 변화를 즉시 명확하게 전달합니다.
기억해야 할 사항
compactDisplay 옵션은 압축 표기법이 약어를 사용할지 풀어쓴 단어를 사용할지 제어합니다. 1.5K와 같은 약어 출력을 위해 "short"로 설정하거나, 1.5 thousand와 같은 풀어쓴 출력을 위해 "long"로 설정합니다. 이 옵션을 생략하면 기본값은 "short"입니다.
공간이 제한적이거나 일관된 너비가 필요한 많은 숫자를 표시할 때는 짧은 표시를 사용하세요. 공간 효율성보다 명확성과 접근성이 더 중요한 경우에는 긴 표시를 사용하세요. 포매터는 짧은 형식과 긴 형식 모두에 대해 로케일별 변형을 자동으로 처리합니다.
compactDisplay를 소수 자릿수, 통화, 부호 표시와 같은 다른 서식 옵션과 결합하여 애플리케이션에 필요한 정확한 숫자 형식을 만드세요.