Components
Chat Bubble
상담 시뮬레이션·테스트의 대화 단위입니다. 사용자는 검정, 에이전트는 회색입니다.
어제 주문한 상품을 환불하고 싶어요.
네, 확인해 드리겠습니다. 주문번호를 말씀해 주시겠어요?
코드 보기
<div class="tn-bub user">고객 발화</div>
<div class="tn-bub agent">에이전트 응답</div>
<div class="tn-typing"><i></i><i></i><i></i></div>Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| user | 검정 반전 · 우측 정렬 · 우하단 4px | 환불하고 싶어요 |
| agent | muted 배경 · 좌측 정렬 · 좌하단 4px | 확인해 드리겠습니다 |
| typing | 점 3개 바운스 — 응답 생성 중 |
Guidelines
✓ Do
- 말풍선 최대폭 78% 유지
- 연속 발화는 간격만 좁힌다 (꼬리 반복 X)
- 타임스탬프는 그룹 단위로만
✕ Don't
- 에이전트 버블에 파랑 배경 금지 (파랑은 인터랙션 전용)
- 아바타를 매 버블마다 붙이지 않는다
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
radius | 14px / 꼬리쪽 4px | |
user | --foreground 반전 | |
agent | --muted |
비교
Chat Bubble vs Callout — 대화 흐름이면 Bubble, 시스템 안내면 Callout.