Components

Segment Bar

전체 소요시간·비용을 구간별로 수평 막대에 분해해 보여줍니다. 지연 구간 분해·비용 breakdown처럼 '어디에 얼마나 쓰였는지'를 말합니다.

STT TTFT

110ms

LLM TTFT

280ms

TTS TTFB

240ms

위 미리보기는 이미지가 아니라 실제 코드입니다 — 눌러 보고, 올려 보세요.

코드 보기

<div class="tn-seg-bar-row">
  <span class="tn-seg-bar-label">STT TTFT</span>
  <div class="tn-seg-bar-track"><i class="tn-seg-bar-fill" style="width:34%"></i></div>
  <span class="tn-seg-bar-val">110ms</span>
</div>

Variants

이름	설명	미리보기
기본	레이블 + 트랙 + 값 3열 정렬	LLM TTFT 280ms
강조 구간	최종·병목 구간만 primary 색	TTS TTFB 240ms
퍼센트 값	ms 대신 % 단위로 교체	네트워크 12%

Guidelines

✓ Do

구간은 3~4개 이내로 압축
가장 느린/비싼 구간만 강조색
값 단위(ms·₩·%)를 항상 명시

✕ Don't

트랙 안에 눈금선을 그리지 않는다 (값 텍스트로 충분)
구간마다 임의 색을 남발하지 않는다 — 강조는 1개 구간만
세로 stacked bar와 혼용하지 않는다

Specification

속성	토큰/값	비고
`트랙 높이`	`20px`
`레이블 폭`	`78px 고정`
`radius`	`5px`
`값 폭`	`52px 우측 정렬`

비교

Insight '지연 구간 분해' 실물에서 추출. Segment Bar vs Bar Chart — 한 전체를 구간별로 나눈 breakdown은 Segment Bar, 여러 기간의 값 비교는 Bar Chart.