Dot 브랜드 모션

목적

DotMotion은 2D Dot이 실제 제품 처리에 참여하고 있음을 보여준다. 모션은 장식이나 막연한 기다림이 아니라 현재 시스템이 무엇을 하는지 설명하고, 답변이 이어지는 맥락을 사용자와 연결한다.

현재 package는 두 개의 승인된 2D motion만 제공한다.

• avatar: Dot이 실제 답변이나 안내를 전달하는 동안
• processing: 데이터를 탐색하거나 답변을 생성하는 동안

정적 2D character variant는 제공하지 않는다. reduced motion, 로딩, 실패 상태에서는 fallback 또는 기본 정적 logo가 표시된다. 넓고 드문 브랜드 맥락에는 DotCharacter의 정적 3D 자산을 사용한다.

선택 기준

Avatar

• 답변 텍스트가 현재 생성되어 순차적으로 표시되는 동안
• 음성 또는 대화형 안내가 실제로 진행되는 동안
• Dot이 발화 주체임이 사용자 판단에 도움이 될 때

답변이 끝났거나 단순 프로필 표시만 필요하면 반복하지 않는다.

Processing

• 데이터 탐색, 분석, 생성, 채점처럼 실제 AI 처리가 진행되는 동안
• 사용자가 기다리는 이유와 처리 대상을 텍스트로 함께 설명할 수 있을 때

일반 API 요청, 짧은 저장, 화면 전환에는 Skeleton이나 일반 progress 표현을 사용한다.

구조

DotMotion은 고정된 크기의 root, 준비된 animation DOM과 상태별 fallback으로 구성된다. runtime과 asset은 화면 가까이에서 필요할 때 로드되며, 제품은 모션 옆에 현재 처리 대상을 설명하는 텍스트와 필요한 행동을 별도로 구성한다.

• root는 상태 텍스트나 결과 영역을 대신하지 않는다.
• animation과 fallback은 같은 공간을 차지해 준비 전후 layout shift를 만들지 않는다.
• animation asset URL을 직접 렌더하지 않고 컴포넌트가 소유한 loading·failure·reduced-motion 경로를 사용한다.

변형과 크기

• avatar는 실제 답변 중인 발화 주체를 나타낸다.

• processing은 데이터 탐색 또는 답변 생성이 실제 진행 중임을 나타낸다.

• 2D Dot의 body, 위성 요소, 연결 구조, Glow, 지정 색과 형태를 변경하지 않는다.

• 내부 JSON, expression, layer, timing, 색을 제품에서 수정하지 않는다.

• size의 최소 렌더 값은 34px이다. 더 작게 전달해도 34px로 보정된다.

• 형태를 crop, stretch, recolor하지 않는다.

• 임의의 새 motion variant를 비슷하게 만들어 package API처럼 사용하지 않는다.

상태와 동작

DotMotion의 lifecycle:

1. lazy=true면 viewport 120px 근처에 올 때까지 animation runtime을 불러오지 않는다.
2. runtime과 asset이 준비되는 동안 fallback을 표시한다.
3. animation DOM이 준비되면 motion을 표시하고 onReady를 호출한다.
4. 로드 실패 시 fallback을 유지한다.
5. reduced-motion 설정에서는 runtime을 실행하지 않고 fallback을 보여준다.

• loop=true, autoplay=true가 기본이다.
• 실제 처리 lifecycle과 animation lifecycle을 연결한다. 처리 완료 후에도 무한 반복하지 않는다.
• autoplay=false를 사용해도 외부 재생 control API는 제공되지 않으므로 특별한 통합 근거 없이 바꾸지 않는다.
• 보안 정책상 animation을 실행할 수 없으면 정책을 완화하지 말고 fallback을 유지한다.

콘텐츠

모션 옆에는 현재 작업을 구체적으로 설명한다.

• 답변을 만들고 있어요보다 가능하면 학습 기록에서 다음 질문을 찾고 있어요처럼 대상을 말한다.
• 실제로 측정할 수 없는 완료 시간이나 진행률을 꾸며내지 않는다.
• 오래 걸릴 수 있으면 화면을 떠나도 되는지, 완료 후 어디에서 확인하는지 알려준다.
• 실패하면 motion을 멈추고 원인과 재시도 행동으로 전환한다.

접근성

• 의미가 장식적이고 인접한 status text가 있으면 ariaLabel을 생략한다. 컴포넌트가 aria-hidden으로 처리된다.
• 모션 자체가 독립적으로 의미를 전달해야 하면 ariaLabel을 제공해 role="img"로 노출한다.
• 처리 상태는 모션만으로 전달하지 않는다. role="status", aria-live 또는 명시적인 텍스트를 제품에서 제공한다.
• reduced motion에서도 같은 상태와 다음 행동을 이해할 수 있어야 한다.
• 반복 모션이 읽기와 조작을 방해하면 처리 영역 밖으로 시각적 위계를 낮춘다.

좁은 화면과 긴 콘텐츠

• motion 때문에 처리 설명이나 취소·이동 행동이 화면 밖으로 밀리지 않게 한다.
• 34px 미만으로 축소하지 않는다. 공간이 부족하면 인접한 텍스트 status만 유지한다.
• 긴 처리 설명은 모션 옆 한 줄에 압축하지 말고 아래로 자연스럽게 배치한다.
• 넓은 화면에서도 motion을 대형 브랜드 animation처럼 확대하지 않는다.

공개 API

DotMotion은 @classum/dot-design-system/motion에서 가져온다. DotMotionProps는 children을 제외한 React.HTMLAttributes<HTMLDivElement>를 확장한다.

같은 entry에서 DotMotionVariant, dotMotionAssets도 공개되지만 제품은 URL을 직접 렌더하지 않고 DotMotion을 사용해야 lazy loading, 실패와 reduced-motion fallback을 유지할 수 있다.

예제

import { DotMotion } from '@classum/dot-design-system/motion';

export function AnswerProgress() {
  return (
    <div className="flex items-center gap-3" role="status" aria-live="polite">
      <DotMotion variant="processing" size={64} />
      <p className="text-sm text-ink-default">학습 기록을 살펴보고 다음 질문을 만들고 있어요.</p>
    </div>
  );
}

답변이 실제로 전달되는 동안에는 다음처럼 사용한다.

import { DotMotion } from '@classum/dot-design-system/motion';

export function AnswerAvatar() {
  return <DotMotion variant="avatar" size={48} ariaLabel="Dot이 답변하고 있어요" loop />;
}

피해야 할 사용

• 일반 네트워크 요청과 짧은 저장에 Processing 사용
• 답변이 끝난 뒤에도 Avatar를 계속 반복
• 모션만 보여주고 처리 대상과 상태 텍스트 생략
• 내부 asset URL이나 JSON을 직접 불러 fallback 계약을 우회
• 34px 미만으로 축소하거나 형태·색·timing 수정
• reduced-motion 사용자를 위해 보안·접근성 설정을 우회
• 장식 목적으로 여러 motion을 한 화면에 동시 배치

관련 항목

• DotCharacter
• DotTheme
• 비동기 작업
• 로딩·빈 상태·오류