Components

Percent Bubble

퍼널 각 단계의 전환율을 알약 모양 배지로 표시합니다. 절대값(건수)과 상대값(%)을 함께 배치해 단계별 이탈을 한눈에 보여줍니다.

12.4K100%콜 인입
11.1K90%의도 파악
9.8K79%처리 진행
8.5K68%자동완결
위 미리보기는 이미지가 아니라 실제 코드입니다 — 눌러 보고, 올려 보세요.
코드 보기
<div class="tn-pstage">
  <span>12.4K</span>
  <span class="tn-pbubble">100%</span>
  <small>콜 인입</small>
</div>

Variants

이름설명미리보기
단독 배지다른 요소 없이 퍼센트만90%
절대값 병기건수 위 · 단계명 아래 3단 구성
9.8K79%처리 진행
hover 강조scale(1.1) + primary 배경 전환68%

Guidelines

✓ Do
  • 퍼널·단계형 흐름에서만 사용 (단일 KPI엔 mval 사용)
  • 값은 정수 % 하나만 (소수점 금지 — 배지 안이 좁음)
  • 앞 단계 대비 상대 비율로 이탈을 계산
✕ Don't
  • 배지 안에 아이콘·복수 숫자 삽입 금지
  • 4단계 초과 퍼널에서 남발하지 않는다 (가독성 저하)
  • 배경색을 값 크기에 따라 바꾸지 않는다 — 위치가 곧 진행도

Specification

속성토큰/값비고
padding3px 9px
radiusvar(--radius-pill)
font10px · 700
hoverscale(1.1) + primary

비교

Insight '콜 처리 퍼널' 실물에서 추출. Percent Bubble vs Gauge — 다단계 전환 흐름의 각 지점은 Percent Bubble, 하나의 현재 수준은 Gauge.