Components

Gauge

목표 대비 현재 수준을 보여주는 반원 게이지입니다. 품질 점수·SLA·응답률처럼 '얼마나 좋은가'를 말합니다.

68.4%응답 품질
31.0%SLA 미달
위 미리보기는 이미지가 아니라 실제 코드입니다 — 눌러 보고, 올려 보세요.
코드 보기
<div class="tn-gauge" style="--val:68">
  <div class="arc"></div>
  <div class="gv">68.4%<small>응답 품질</small></div>
</div>

Variants

이름설명미리보기
기본파랑 호 — 정상 범위
68.4%응답 품질
경고임계 미달 시 호만 에러색으로
31%

Guidelines

✓ Do
  • 임계값 기준의 상태색 (정상=파랑, 미달=에러색)
  • 값+단위+한 단어 레이블까지만
  • 대시보드 상단 요약 열에 배치
✕ Don't
  • 바늘·눈금·빨강-노랑-초록 그라데이션 금지
  • 비중 데이터에 쓰지 않는다 (그건 Donut)
  • 한 화면에 게이지 3개 초과 금지

Specification

속성토큰/값비고
크기150×75 반원
호 두께inset 16px
각도--val × 1.8deg반원=180deg
값1.05rem · 650

비교

Insight 상단 품질 지표 실물에서 추출. Gauge vs Donut vs Progress — 좋음/나쁨 판정=Gauge, 구성비=Donut, 작업 진행=Progress Circle.