본문으로 건너뛰기
Dot Design System
v0.3.1

Dot Brand Assets

승인된 Dot 그래픽, 캐릭터, 로고와 모션의 사용 경계를 정의합니다.

기준

이 문서와 assets/catalog.json에 있는 규칙과 파일만 제품 구현의 기준으로 사용한다. catalog에 없는 표현을 추측해 만들거나 기존 캐릭터를 편집하지 않는다. 새 에셋이 필요하면 승인된 파생본과 catalog 변경을 같은 버전에 포함한다.

캐릭터 규칙

  • 공식 body, 두 눈, 위성, 연결 관계와 Glow를 유지한다.
  • 2D는 최소 34px, 3D는 최소 100px로 표시한다.
  • 회전, 재색상, 비율 변경, 자동 trim, 새로운 표정·입·포즈 추가를 금지한다.
  • Gradient Glow는 #F33474 → #E738C0 → #8D3AFA → #1F28FF 순서를 유지한다.
  • Gradient가 배경과 충돌하거나 흑백 맥락이면 승인된 White treatment를 사용한다.
  • 캐릭터가 전달하는 의미가 주변 텍스트에 이미 있으면 빈 대체 텍스트를 사용한다.

로고와 제품 아이콘

assets/brand/dot-logo.svg는 승인 원본이며 dotLogoUrl의 public contract와 derivative provenance를 위해 그대로 유지한다. 작은 제품 시그니처인 DotIcondotIconUrl은 이 원본의 SHA-256을 고정한 192×233 lossless WebP derivative를 사용한다. derivative는 Lanczos3, effort 6, embedded sRGB ICC로 pnpm assets:dot-icon:rebuild를 통해서만 재생성하고 24KiB를 넘기지 않는다. 제품 UI에서는 원본 SVG를 직접 import하지 않는다.

활성 정적 에셋

정적 3D 캐릭터는 다음 catalog ID를 사용한다.

  • ai-dot.character.3d.gradient.base
  • ai-dot.character.3d.gradient.application-01
  • ai-dot.character.3d.gradient.application-02
  • ai-dot.character.3d.gradient.application-03
  • ai-dot.character.3d.white.base
  • ai-dot.character.3d.white.application-01
  • ai-dot.character.3d.white.application-02

각 에셋은 투명 square canvas를 유지한 512/1024/2048px AVIF·WebP로 제공한다. 제품 코드에서는 직접 경로를 조합하기보다 DotCharacter를 우선 사용한다.

모션 에셋

ID역할반복 조건
ai-dot.motion.2d.gradient.avatarAI DOT이 말하고 있는 맥락실제 발화나 안내가 진행되는 동안만
ai-dot.motion.2d.gradient.processingAI가 처리 중인 맥락생성·채점·분석이 진행되는 동안만

일반 네트워크 로딩에는 Skeleton이나 제품의 기본 spinner를 사용한다. DotMotion은 viewport 지연 로드와 모션 감소 fallback을 제공하지만, 진행 상태는 반드시 텍스트나 live region으로도 알려야 한다.

Renderer는 모션이 viewport에 진입한 뒤에만 동적으로 로드된다. Avatar 모션은 expression을 지원하는 표준 Lottie renderer가 필요하다. 엄격한 CSP에서 동적 코드 실행을 허용하지 않는 제품은 정책을 낮추지 말고 정적 fallback을 사용한다.

배포 Lottie의 embedded raster는 원본 ICC profile을 해석해 고정 sRGB profile로 변환하고 WebP 안에 그 profile을 포함한다. data URI asset은 u: "", e: 1로 저장해 표준 renderer가 별도 경로 결합 없이 직접 읽게 한다. 레이어, 키프레임, 좌표, timing, effect와 expression은 아래에 명시한 호환성 패치를 제외하고 변환 대상이 아니다.

assets/motion/manifest.json은 승인 원본의 파일명·SHA-256, raster별 예외, 변환 옵션, transform.compatibilityPatches, 비래스터 구조 fingerprint, 결과 SHA-256과 고정 toolchain을 기록한다. 원본 파일이나 개인 로컬 경로는 저장소에 포함하지 않는다. 브랜드 팀에서 승인 원본을 전달받아 재생성할 때에는 다음 명령을 사용한다.

사용 코드 · Bash
pnpm assets:motion:rebuild --source-dir <approved-source-directory>

원본 hash가 manifest와 다르거나 profile 없는 raster가 감사된 asset ID·hash 예외와 일치하지 않으면 변환은 실패한다. 이미 최적화한 derivative를 다시 입력해 손실 압축을 누적하는 것도 허용하지 않는다.

Avatar 승인 원본에는 trace layer 15, 17, 19의 position·rotation expression 여섯 개가 존재하지 않는 Body Outlines 3를 참조하는 export 결함이 있다. avatar-body-trace-path-v1 호환성 패치는 manifest에 고정된 원본 SHA-256과 여섯 expression의 대상·내용이 모두 일치할 때에만 이를 실제 Body Outlines 2 / Group 1 / Path 1 좌표계로 연결한다. position에는 group transform을 반영하고 rotation tangent에는 toWorldVec 변환을 적용해 trace glow가 실제 body path를 따르게 한다.

적용 결과는 Lottie JSON의 dotTransform.expressionPatches에 patch ID, 적용 개수, 입력·출력 expression SHA-256으로 기록한다. 선언되지 않은 reference, 예상과 다른 expression 또는 적용 개수 불일치는 fail closed한다. 생성된 Avatar와 Processing은 실제 lottie-web SVG renderer에서 data_failed, Lottie error와 runtime console error가 없는지 확인한 뒤 active로 배포한다.

격리와 미제공

ai-dot.character.3d.white.application-03은 visual-integrity 검사를 통과하지 못해 quarantined 상태다. 패키지에는 파일이 없으며 브랜드 팀의 재-export와 검수 전까지 사용하지 않는다.

catalog의 unavailableAssets는 존재를 추정할 수 있지만 배포 파일이 없는 항목이다. 비슷한 그림이나 모션을 임의 생성해 대체하지 않는다.

제품에서의 밀도

  • 로고: 제품 identity와 작은 브랜드 signature
  • 2D motion: 실제 AI 행위
  • 3D character: 온보딩, 넓은 empty state, 성취나 발행 완료처럼 드문 브랜드 순간
  • 일반 카드, 메뉴, 상태, primary action에는 캐릭터와 Glow를 반복하지 않는다.