숫자를 1K, 1M, 1B로 포맷하는 방법
컴팩트 표기법을 사용하여 큰 숫자를 공간 효율적이고 가독성 높은 형식으로 표시
소개
큰 숫자는 상당한 공간을 차지하고 빠르게 스캔하기 어렵습니다. 1,500,000과 같은 숫자는 서식을 포함하여 7자리가 필요한 반면, 1.5M은 동일한 크기를 3자로 전달합니다. 이러한 간결한 표현은 소셜 미디어 팔로워 수, 동영상 조회 수, 대시보드 지표 및 파일 크기에서 흔히 볼 수 있습니다.
자바스크립트는 Intl.NumberFormat API를 통해 간결한 숫자 서식을 기본적으로 지원합니다. 이 API는 변환을 자동으로 처리하고 다양한 언어와 지역에 맞게 서식을 조정하여 모든 사용자에게 숫자가 올바르게 표시되도록 합니다.
큰 숫자에 간결한 서식이 필요한 이유
사용자 인터페이스에 큰 숫자를 표시할 때 두 가지 문제가 발생합니다. 첫째, 숫자가 가로 공간을 차지합니다. 1,234,567 조회수를 보여주는 카운터는 1.2M 조회수를 보여주는 것보다 더 많은 공간이 필요합니다. 둘째, 사용자는 간결한 숫자를 더 빠르게 처리합니다. 인간의 뇌는 1,500,000을 분석하는 것보다 1.5M을 150만으로 더 빠르게 인식합니다.
간결한 표기법은 후행 0을 크기 표시기로 대체하여 두 문제를 모두 해결합니다. 모든 자릿수를 표시하는 대신 유효 숫자만 표시하고 그 뒤에 크기를 나타내는 문자를 붙입니다. 이 접근 방식은 정밀도와 가독성의 균형을 맞춥니다.
다양한 상황에서 다양한 수준의 정밀도가 필요합니다. 소셜 미디어 팔로워 수는 정확한 숫자가 거의 필요하지 않습니다. 1,234,567 팔로워 대신 1.2M 팔로워를 표시하는 것으로 충분한 정보를 제공합니다. 재무 대시보드는 1.2M 대신 1.23M을 표시하는 등 더 높은 정밀도가 필요할 수 있습니다. Intl API를 사용하면 간결한 서식을 유지하면서 이러한 정밀도를 제어할 수 있습니다.
자바스크립트에서 간결한 표기법 사용하기
Intl.NumberFormat의 notation 옵션은 숫자가 표현되는 방식을 제어합니다. 이를 "compact"로 설정하면 간결한 서식이 활성화됩니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(formatter.format(1500));
// 출력: "1.5K"
console.log(formatter.format(1500000));
// 출력: "1.5M"
console.log(formatter.format(1500000000));
// 출력: "1.5B"
포맷터는 숫자의 크기에 따라 적절한 크기 표시기를 자동으로 선택합니다. 천 단위는 K, 백만 단위는 M, 십억 단위는 B가 됩니다. 포맷터는 또한 숫자를 읽기 쉬운 형태로 줄여 1.5 thousand 대신 1.5K를 표시합니다.
K, M 또는 B를 사용할 시기를 결정하는 로직을 작성할 필요가 없습니다. Intl API는 숫자의 크기에 따라 이 결정을 처리합니다.
간략 표기법이 다양한 크기를 어떻게 형식화하는지
간략 표기법은 다양한 규모에 따라 다른 형식을 적용합니다. 이러한 임계값을 이해하면 숫자가 어떻게 표시될지 예측하는 데 도움이 됩니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(formatter.format(500));
// Output: "500"
console.log(formatter.format(1000));
// Output: "1K"
console.log(formatter.format(1500));
// Output: "1.5K"
console.log(formatter.format(999000));
// Output: "999K"
console.log(formatter.format(1000000));
// Output: "1M"
console.log(formatter.format(1500000));
// Output: "1.5M"
console.log(formatter.format(1000000000));
// Output: "1B"
console.log(formatter.format(1000000000000));
// Output: "1T"
천 미만의 숫자는 압축 없이 표시됩니다. 숫자가 천에 도달하면 K 표기법으로 전환됩니다. 동일한 패턴이 백만, 십억, 조 단위에서도 계속됩니다.
포맷터는 간략 표현에 맞게 숫자를 반올림합니다. 예를 들어 1,234,567은 기본적으로 1.2M이 됩니다. 다음 수업에서는 간략 표기법에서 표시되는 소수점 자릿수를 제어하는 방법을 다룰 것입니다.
짧은 표시와 긴 표시 중 선택하기
간략 표기법은 두 가지 표시 스타일을 제공합니다. 짧은 스타일은 K, M, B와 같은 문자를 사용합니다. 긴 스타일은 크기를 단어로 표기합니다.
const shortFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(shortFormatter.format(1500));
// Output: "1.5K"
console.log(shortFormatter.format(1500000));
// Output: "1.5M"
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(longFormatter.format(1500));
// Output: "1.5 thousand"
console.log(longFormatter.format(1500000));
// Output: "1.5 million"
compactDisplay 옵션이 이 동작을 제어합니다. 이 옵션은 "short"와 "long" 두 가지 값을 허용합니다. 이 옵션을 생략하면 기본값은 "short"입니다.
짧은 표시는 공간이 제한된 경우에 적합합니다. 대시보드 카드, 모바일 인터페이스, 데이터 테이블은 K, M, B의 간결함의 이점을 얻습니다. 긴 표시는 공간보다 명확성이 더 중요할 때 더 적합합니다. 교육 콘텐츠, 재무 보고서, 접근성 중심 인터페이스는 크기를 단어로 표기하는 것이 유리합니다.
다양한 언어에서 간결 표기법이 작동하는 방식
간결 표기법은 로케일에 지정된 언어와 지역에 맞게 조정됩니다. 다양한 언어는 크기 표시자에 대해 서로 다른 글자, 단어 및 형식 규칙을 사용합니다.
const enFormatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(enFormatter.format(1500000));
// Output: "1.5M"
const frFormatter = new Intl.NumberFormat("fr-FR", {
notation: "compact"
});
console.log(frFormatter.format(1500000));
// Output: "1,5 M"
const deFormatter = new Intl.NumberFormat("de-DE", {
notation: "compact"
});
console.log(deFormatter.format(1500000));
// Output: "1,5 Mio."
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact"
});
console.log(jaFormatter.format(15000000));
// Output: "1500万"
프랑스어는 M 앞에 공백을 사용합니다. 독일어는 Million의 약어로 Mio.를 사용합니다. 일본어는 만(10,000)을 나타내는 万과 같이 완전히 다른 숫자 체계를 사용합니다.
이러한 차이는 로케일에 따라 자동으로 발생합니다. 다양한 크기 표시자를 처리하기 위해 로케일별 코드를 작성할 필요가 없습니다. 사용자의 언어 선호도를 포매터에 전달하면 해당 언어에 맞는 올바른 출력이 생성됩니다.
긴 표시 방식도 각 언어에 맞게 조정됩니다.
const enFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(enFormatter.format(1500000));
// Output: "1.5 million"
const frFormatter = new Intl.NumberFormat("fr-FR", {
notation: "compact",
compactDisplay: "long"
});
console.log(frFormatter.format(1500000));
// Output: "1,5 million"
const deFormatter = new Intl.NumberFormat("de-DE", {
notation: "compact",
compactDisplay: "long"
});
console.log(deFormatter.format(1500000));
// Output: "1,5 Millionen"
독일어는 million의 복수형으로 Millionen을 사용합니다. 프랑스어는 s 없이 million을 사용합니다. Intl API는 이러한 언어적 변형을 자동으로 처리합니다.
작은 숫자가 압축되지 않는 경우
간결 임계값 미만의 숫자는 정상적으로 표시됩니다. 이 임계값은 로케일에 따라 다르지만, 대부분의 서양 언어에서는 일반적으로 1,000부터 시작합니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(formatter.format(10));
// Output: "10"
console.log(formatter.format(100));
// Output: "100"
console.log(formatter.format(999));
// Output: "999"
console.log(formatter.format(1000));
// Output: "1K"
이러한 동작은 작은 숫자에 대한 어색한 형식을 방지합니다. 500을 0.5K로 표시하는 것보다 500으로 표시하는 것이 더 명확합니다. 포매터는 가독성을 향상시킬 때만 간결 표기법을 적용합니다.
임계값이 항상 1,000인 것은 아닙니다. 일본어와 같은 일부 언어는 다른 숫자 그룹화 시스템을 사용합니다. 일본어는 만 단위로 그룹화하므로 간결 표기법이 다른 임계값에서 시작될 수 있습니다.
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact"
});
console.log(jaFormatter.format(9999));
// Output: "9999"
console.log(jaFormatter.format(10000));
// Output: "1万"
Intl API는 이러한 로케일별 임계값을 자동으로 처리합니다.
간결 표기법과 다른 형식 옵션 결합하기
간결 표기법은 다른 숫자 형식 옵션과 함께 작동합니다. 간결 표기법을 사용하면서 소수점, 그룹 구분 기호 및 반올림을 제어할 수 있습니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 1
});
console.log(formatter.format(1234567));
// 출력: "1.2M"
const preciseFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 2
});
console.log(preciseFormatter.format(1234567));
// 출력: "1.23M"
const noDecimalsFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 0
});
console.log(noDecimalsFormatter.format(1234567));
// 출력: "1M"
maximumFractionDigits 옵션은 정수 뒤에 표시되는 소수점 자릿수를 제어합니다. 이를 0으로 설정하면 모든 소수점이 제거되어 숫자가 더욱 간결해집니다.
또한 간결 표기법을 최소 자릿수 옵션과 결합하여 다양한 숫자에 걸쳐 일관된 형식을 보장할 수 있습니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
minimumFractionDigits: 1,
maximumFractionDigits: 1
});
console.log(formatter.format(1000));
// 출력: "1.0K"
console.log(formatter.format(1500));
// 출력: "1.5K"
console.log(formatter.format(2000));
// 출력: "2.0K"
이 접근 방식은 모든 숫자가 소수점 한 자리를 표시하도록 보장하여 표와 차트에서 시각적 일관성을 유지하는 데 도움이 됩니다.
간결 표기법을 사용해야 하는 경우
간결 표기법은 공간이 제한되어 있거나 정확한 정밀도가 중요하지 않을 때 가장 효과적입니다. 소셜 미디어 카운터, 대시보드 지표 및 요약 통계는 이상적인 사용 사례입니다. 사용자는 동영상이 정확히 1,234,567회 조회되었다는 것을 알 필요가 없습니다. 1.2M회 조회되었다는 것을 아는 것만으로도 충분한 정보를 제공합니다.
정확한 숫자가 중요한 경우에는 간결 표기법을 사용하지 마십시오. 금융 거래, 과학적 측정 및 법적 문서는 완전한 정밀도가 필요합니다. 은행 잔고는 $1.2K가 아닌 $1,234.56으로 표시되어야 합니다. 청구서는 $1.5K가 아닌 $1,500.00으로 표시되어야 합니다.
대상 사용자와 컨텍스트를 고려하세요. 데이터 분석가는 정확한 값을 이해하기 위해 전체 숫자를 보는 것을 선호할 수 있습니다. 일반 소비자는 더 빠르게 처리할 수 있기 때문에 간결한 숫자를 선호하는 경우가 많습니다. 일부 인터페이스는 기본적으로 간결한 숫자를 표시하고 필요에 따라 정확한 숫자를 표시하는 방법을 제공하는 두 가지 옵션을 모두 제공합니다.
간결 표기법은 파일 크기에도 잘 작동하지만 구현 방식이 약간 다릅니다. 파일 크기는 일반적으로 1000이 아닌 1024의 거듭제곱을 사용하여 킬로바이트와 메가바이트가 아닌 키비바이트와 메비바이트를 사용합니다. Intl API는 이진 단위를 처리하지 않으므로 파일 크기 형식 지정에는 사용자 정의 로직이나 전용 라이브러리가 필요합니다.