디자인 아틀라스
EN
✧ AI 인터페이스

타이핑 인디케이터

Typing indicator

응답이 아직 시작되지 않았을 때, 상대가 "입력 중"임을 알리는 통통 튀는 점 세 개.

다른 이름: Three dotsWaiting indicator
···
html
<div class="chat"><div class="bubble" id="b"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div></div>
css
.chat{width:min(260px,90%)}
.bubble{display:inline-flex;gap:5px;align-items:center;padding:12px 16px;border-radius:14px;border-bottom-left-radius:4px;
  background:var(--surface);border:1px solid var(--line)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:bounce 1.2s ease-in-out infinite}
.dot:nth-child(2){animation-delay:.15s}
.dot:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

메신저에서 빌려온 관용구입니다. 채팅 UI에서 오래 학습된 신호라 별도 설명 없이도 "곧 뭔가 온다"는 뜻으로 읽힙니다. LLM 채팅에서는 첫 토큰이 오기 전, 요청을 서버가 접수하고 모델이 생성을 시작하기까지의 공백을 메우는 역할을 합니다.

스트리밍 응답과는 순서가 다릅니다 — 타이핑 인디케이터는 "아직 텍스트가 하나도 없는" 상태의 자리표시자이고, 첫 토큰이 도착하는 순간 점을 걷어내고 스트리밍 텍스트로 교체합니다. 이 전환이 매끄럽지 않으면(점이 사라지고 빈 화면이 잠깐 보이는 등) 오히려 멈춘 것처럼 느껴지니, 점과 텍스트 사이에 레이아웃이 튀지 않도록 같은 말풍선 안에서 바로 이어 붙이는 게 좋습니다.

몇 초 이상 점만 계속 떠 있으면 사용자는 멈췄다고 의심하기 시작합니다. 그 지점부터는 "생각 중" 같은 문구나 진행 단계를 보여주는 thinking-indicator·agent-status로 넘어가는 편이 낫습니다.

언제 쓰나

첫 토큰이 오기까지 보통 1~3초 이내로 짧을 때 씁니다. 그보다 오래 걸리는 작업(도구 호출, 파일 분석)이라면 무엇을 하고 있는지 보여주는 편이 신뢰를 더 줍니다.