Components · 데이터

KPI / Stat (수치 강조)

핵심 수치 하나를 값·단위·라벨로 크게 강조한다. 값은 display 폰트 800, 한 줄에 2~4개.

정의

핵심 수치 하나를 값·단위·라벨로 강조해 보여주는 컴포넌트다.

Anatomy

부위	토큰
① 값	`--kpi-value-color`(navy) · display 폰트 `--font-family-display` · 굵기 `--font-weight-extrabold`(800) · 크기 `--font-size-4xl`
② 단위	`--kpi-unit-color`(틸) · 값보다 작게 `--font-size-lg` · `--font-weight-bold`
③ 라벨	`--kpi-label-color`(muted) · `--text-caption`

변형

변형	용도
기본	값 + 단위 + 라벨 세로 스택 1개
인라인 그룹	2~4개를 한 줄에 나란히(성과 요약 밴드) — `.pi-kpi-group`

상태

해당 없음 — 수치를 표시만 하는 컴포넌트라 상호작용 상태가 없다. 값이 실시간으로 바뀌면 라이브 영역으로 알린다(접근성 참조).

Do / Don't

한 줄에 2~4개까지만 — 그 이상은 표(Table)로 옮긴다.
단위는 값보다 작게 붙여, 값이 먼저 읽히게 한다.
라벨로 "무엇의 수치인지"를 명확히 한다(값만 크게 두지 않는다).

Don't

검증되지 않은 수치를 쓰지 말 것 — 인증·실적 표기는 정본(금지 표현)을 준수한다.
값을 색 대비만으로 강조하지 말 것 — 크기·굵기로 위계를 만든다.
한 그룹에서 KPI마다 자릿수·소수점 형식을 다르게 쓰지 말 것 — 형식을 통일한다.

콘텐츠 규칙

값은 아라비아 숫자 + 천단위 쉼표, 단위는 숫자 뒤에 붙여 쓴다("132,000원", "3종", "15%").
라벨은 명사구로 짧게("보유 인증", "주력 제품군") — 문장 금지.
수치는 출처가 확인된 값만 쓴다(미검증·과장 표현 금지 — BRAND_CONSTANTS 금지 표현).
인증 사실은 "GREENGUARD GOLD(UL 2818)·KC"로만 적는다.

키보드 인터랙션

해당 없음 — KPI는 포커스를 받지 않는 표시 요소다.

접근성

값·단위·라벨은 하나의 의미 묶음으로 마크업해 스크린리더가 "보유 인증 2종"처럼 이어 읽게 한다.
값이 실시간 갱신되면 컨테이너에 aria-live="polite"를 준다.
색 대비: --kpi-value-color(navy) on 캔버스는 AA 이상, 단위 틸은 큰 텍스트 기준 충족. 기준: ../guidelines/accessibility.md.

코드

2종
보유 친환경·안전 인증: 3종
주력 제품군: 4개
브랜드 성장 4대 축

html

<dl class="pi-kpi-group">
  <div class="pi-kpi">
    <dd class="pi-kpi__value">2<span class="pi-kpi__unit">종</span></dd>
    <dt class="pi-kpi__label">보유 친환경·안전 인증</dt>
  </div>
  <div class="pi-kpi">
    <dd class="pi-kpi__value">3<span class="pi-kpi__unit">종</span></dd>
    <dt class="pi-kpi__label">주력 제품군</dt>
  </div>
  <div class="pi-kpi">
    <dd class="pi-kpi__value">4<span class="pi-kpi__unit">개</span></dd>
    <dt class="pi-kpi__label">브랜드 성장 4대 축</dt>
  </div>
</dl>

css

.pi-kpi-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
}
.pi-kpi { display: flex; flex-direction: column; gap: var(--space-1); word-break: keep-all; }
.pi-kpi__value {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-4xl);
  line-height: var(--font-lh-tight);
  color: var(--kpi-value-color);
  font-variant-numeric: tabular-nums;
}
.pi-kpi__unit {
  margin-left: var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--kpi-unit-color);
}
.pi-kpi__label {
  font: var(--text-caption);
  color: var(--kpi-label-color);
}

Changelog

날짜	변경
2026-07-15	문서 계약(10섹션) 적용 — Anatomy 도해·인라인 그룹 변형·미검증 수치 금지 Don't·코드 신설, 기존 규격 승계