디자인 아틀라스텍스트를 다루는 작업(터미널 명령 실행, AI 응답 생성) 중임을 알리는 비확정적 표시로, 단순한 점이나 스피너보다 "지금 텍스트를 만들어내고 있다"는 맥락을 더 구체적으로 전달합니다. 실제로 텍스트가 스트리밍되는 중이라면(채팅 UI의 ai-ux 항목 typing-indicator 참고) 이 연출을 흉내내지 말고 실제 도착한 글자를 그대로 붙여나가는 게 낫습니다 — 가짜 타이핑 뒤에 진짜 응답을 통째로 붙이면 사용자가 속았다고 느낍니다.
너비가 0에서 전체 텍스트 길이까지 늘어나는 요소에 overflow: hidden을 걸고, animation-timing-function을 steps(글자 수)로 줘서 부드러운 확장이 아니라 한 글자씩 "뚝뚝" 끊어지는 타자기 효과를 만듭니다. 텍스트 뒤에 붙인 블록 요소에 별도로 opacity를 깜빡이는 애니메이션을 줘서 커서를 표현하고, 타이핑 애니메이션이 끝난 뒤 잠시 멈췄다가 처음부터 반복합니다.
전체 화면을 가리는 긴 로딩에는 스켈레톤이 낫고, 200ms 이내로 끝날 대기라면 생략하세요. role="status"·aria-live="polite"를 감싸는 요소에 주되, 타이핑되는 문구 자체가 "불러오는 중" 같은 안내 텍스트라면 스크린리더에 그대로 읽혀도 괜찮습니다. prefers-reduced-motion에서는 타자기 효과 대신 문구 전체를 한 번에 보여주고 커서 깜빡임만 유지하거나 완전히 정적으로 둘 수 있습니다.