Components
Transcript
통화·시뮬레이션의 실시간 자막입니다. 확정 발화와 진행 중 발화를 구분합니다.
고객어제 주문한 상품을 환불하고 싶어요.
AI네, 확인해 드리겠습니다. 주문번호를 말씀해 주시겠어요?
고객주문번호는 일이삼사
코드 보기
<div class="tn-ts">
<div class="ln"><span class="who">고객</span><span class="tx">확정 발화</span></div>
<div class="ln partial"><span class="who">고객</span><span class="tx">인식 중…</span></div>
</div>Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| 확정 | 검정 텍스트 — STT 최종 결과 | 주문번호를 확인했습니다. |
| 진행 중(partial) | muted 텍스트 + 깜빡이 커서 — 인식 중 | 주문번호는 일이삼 |
| 화자 라벨 | 고객=회색 / AI=파랑 uppercase | 고객 AI |
Guidelines
✓ Do
- 확정되면 partial → 확정 스타일로 즉시 교체
- 자동 스크롤은 사용자가 위로 올리면 멈춘다
- 화자 라벨 폭 고정 (자막 정렬 유지)
✕ Don't
- partial 텍스트를 지우면서 다시 쓰지 않는다 (자연 갱신)
- 말풍선(Chat Bubble)과 혼용 금지 — 통화는 Transcript, 채팅은 Bubble
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
화자 | 0.64rem / 700 / uppercase / 52px 우측정렬 | |
AI 라벨 | var(--primary) | |
partial | muted + ▍ 커서 |
비교
Transcript vs Chat Bubble — 음성 통화 자막은 Transcript, 텍스트 채팅은 Chat Bubble.