7onicDESIGN SYSTEM

TypingIndicator

TypingIndicator는 AI나 상대방이 입력 중임을 시각적으로 나타내는 애니메이션 컴포넌트입니다. Dots(바운드 점)와 Cursor(블링크 커서) 2가지 variant를 제공하며 채팅 UI와 AI 인터페이스에 최적화된 표시를 제공합니다.

2
Variants
3
Sizes
3
Colors
Pure
React

Playground

Preview
dotsdefaultmuted
Variant
Size
Color
Speed
Options
<TypingIndicator />

Variants

Dots
3개의 점이 순서대로 바운드하는 애니메이션, 채팅 버블에 최적
Chat
Cursor
텍스트 커서처럼 깜빡이는 블링크 애니메이션, AI 사고 중 표시에 최적
AI

Sizes

sm
Dot4px
Cursor2×14px
default
Dot6px
Cursor2.5×20px
lg
Dot8px
Cursor3×26px

Features

Color

3가지 컬러 옵션으로 다양한 배경과 테마에 대응합니다.

default
primary
muted
<TypingIndicator color="default" />
<TypingIndicator color="primary" />
<TypingIndicator color="muted" />

Speed

애니메이션 속도를 3단계로 조절할 수 있습니다. Dots variant에서만 지원됩니다.

slow
default
fast
<TypingIndicator speed="slow" />
<TypingIndicator speed="default" />
<TypingIndicator speed="fast" />

Label

showLabel prop을 활성화하면 애니메이션 옆에 라벨 텍스트를 표시합니다.

AI is typing...
<TypingIndicator showLabel label="AI is typing..." />

API

Component Structure

TypingIndicator— Pure React

단독 컴포넌트입니다. 서브 컴포넌트가 없습니다.

Props

variant"dots"
"dots" | "cursor"

애니메이션 스타일(dots: 바운드 점, cursor: 블링크 커서)

size"default"
"sm" | "default" | "lg"

사이즈

color"muted"
"default" | "primary" | "muted"

컬러(default: 전경색, primary: 브랜드 색상, muted: 서브틀 컬러)

speed"default"
"slow" | "default" | "fast"

애니메이션 속도(Dots variant 전용)

label"Typing"
string

접근성 라벨(aria-label) 및 showLabel 표시 텍스트

showLabelfalse
boolean

라벨 텍스트를 시각적으로 표시합니다

classNameundefined
string

추가 CSS 클래스

Anatomy

1
2
3
label
4
1
Container
Flex 컨테이너(role=status + aria-live)
2
Dot
바운드 점(×3)
3
Cursor
깜빡이는 커서
4
Label
선택적 라벨 텍스트

Best Practices

✓

권장

  • ✓채팅 UI에서 상대방 응답 대기 중에 표시합니다
  • ✓AI 응답 생성 중에는 Dots variant를 사용합니다
  • ✓showLabel로 스크린 리더를 위한 라벨을 보완합니다
✕

지양

  • ✕장시간 로딩에는 사용하지 않습니다. Spinner를 사용하세요
  • ✕페이지 전체 로딩에는 사용하지 않습니다. 채팅 UI 전용입니다
  • ✕백그라운드에서 애니메이션을 무한정 실행하지 않습니다

Accessibility

ARIA / WCAG

  • role="status" 자동 부여
  • aria-label="Typing" 기본값
  • label prop으로 커스텀 라벨
  • prefers-reduced-motion 지원됨