JavaScript로 구현하는 금액 단축 표기 (K / M / B 표기법)

연관글

• 2025.04.18 - [Programing/javascript] - 💰 숫자를 한글로 금액 단위로 표현
• 2025.04.18 - [Programing/javascript] - 💻 숫자를 한글 숫자 표기로 변환
• 2025.05.27 - [Programing/javascript] - JavaScript로 구현하는 금액의 영어 단위 변환 (Number to Words)
• 2025.05.27 - [Programing/javascript] - JavaScript로 구현하는 게임 데미지 단위 축약 (A ~ ZZZZ)
• 2025.06.11 - [Programing] - 엑셀/스프레디시트에서 숫자를 한글로 표기하는 방법 총정리 (Excel to Hangul Conversion)

---

금액 단축 표기의 필요성과 활용 사례

"천 단위 압축" 방식은 숫자 데이터를 간결하게 보여주는 데 매우 유용합니다. 예를 들어, 1500은 "1.5K", 1,000,000은 "1M"과 같이 표기할 수 있습니다. 이러한 표기 방식은 다음과 같은 실무 환경에서 자주 사용됩니다:

• 모바일 UI 및 반응형 디자인에서 숫자 공간 절약
• 대시보드, 리포트, 데이터 시각화 영역에서 가독성 향상
• 소셜 미디어나 금융 앱 등에서 사용자 친화적인 데이터 표현

---

자바스크립트로 단축 금액 표기 함수 만들기

숫자를 "K", "M", "B" 단위로 축약해서 보여주기 위해 다음과 같은 구성 요소가 필요합니다:

1. "단위 기준 정의"

• 1,000 → "K" (Thousand)
• 1,000,000 → "M" (Million)
• 1,000,000,000 → "B" (Billion)

2. "소수점 제어 및 반올림"

• 사용자에게 명확한 수치를 전달하기 위해 소수점 자리수 제한 (예: 1.2K, 2.5M)

3. "예외 처리"

• 0일 경우는 "0"으로 출력
• 음수는 부호 유지

---

전체 자바스크립트 코드 예제

function formatCurrencyAbbreviation(num, digits = 1) {
  if (num === 0) return "0";

  const units = [
    { value: 1_000_000_000, symbol: "B" },
    { value: 1_000_000, symbol: "M" },
    { value: 1_000, symbol: "K" }
  ];

  const absNum = Math.abs(num);
  const sign = num < 0 ? "-" : "";

  for (let i = 0; i < units.length; i++) {
    if (absNum >= units[i].value) {
      return (
        sign + (absNum / units[i].value).toFixed(digits).replace(/\.0+$/, "") + units[i].symbol
      );
    }
  }

  return sign + absNum.toString();
}

---

코드 설명

• "단위 기준 정의" 배열에서 큰 단위부터 차례로 비교하며 해당 단위를 적용합니다.
• toFixed로 소수점 자리수를 제어하고, 정수면 "0"을 제거하여 불필요한 소수점 표기를 생략합니다.
• 음수일 경우 부호를 유지하며 출력됩니다.

---

예시 출력 결과

console.log(formatCurrencyAbbreviation(1234));        // "1.2K"
console.log(formatCurrencyAbbreviation(5000000));     // "5M"
console.log(formatCurrencyAbbreviation(-987654321));  // "-987.7M"
console.log(formatCurrencyAbbreviation(0));           // "0"
console.log(formatCurrencyAbbreviation(999));         // "999"

각 숫자는 적절한 단위로 축약되며, 가독성이 뛰어난 형태로 출력됩니다.

---

성능 및 확장성 고려

이 방식은 O(1) 복잡도로 매우 빠르게 작동하며, 사용자 입력에 실시간 대응하는 UI에도 무리가 없습니다. 또한 단위 배열만 조정하면 "T"(trillion) 등의 확장도 손쉽게 가능합니다.

---

마무리 및 추천 자료

"K / M / B" 표기법은 대규모 데이터를 사용자 친화적으로 표현할 수 있는 효과적인 방법입니다. 간단한 알고리즘으로도 실무에서 크게 도움이 되는 기능이므로, 다양한 숫자 포맷팅 유틸 함수와 함께 익혀두는 것을 추천합니다.

금액/숫자 처리 함수나 UI 숫자 축약 표기법에 대해 더 배우고 싶다면 다음 리소스를 활용해 보세요:

• MDN Number.prototype.toFixed()
• Observable Number Format Examples
• replit 자바스크립트 실습 환경

실제 서비스에서 숫자를 다루는 컴포넌트를 구현할 때 위와 같은 유틸 함수는 코드 품질과 UX 모두를 향상시킬 수 있습니다.