DotIcon

목적

DotIcon은 내비게이션, 앱 전환점, 작은 브랜드 서명처럼 제한된 공간에서 Dot의 제품 정체성을 표시한다. 승인된 작은 WebP derivative를 사용하므로 소비 제품이 원본 자산 경로나 렌더링 방식을 다시 결정하지 않아도 된다.

선택 기준

• 사이드바 헤더, 앱 선택기, 작은 제품 식별 영역에 사용한다.
• 의미 있는 행동 아이콘이나 상태 아이콘으로 사용하지 않는다.
• 큰 브랜드 소개에는 정적 캐릭터나 승인된 로고 사용을 검토한다.
• 일반 콘텐츠 카드마다 장식처럼 반복하지 않는다.

구조

• 바깥 span이 정렬, 크기, 모서리와 선택적 frame을 담당한다.
• 내부 이미지는 장식 이미지로 처리되며 접근성 트리에서 제외된다.
• 이미지 비율은 컴포넌트가 보존한다.

변형과 크기

• framed={false}가 기본이다.
• framed는 중립 배경과 분리해야 할 때만 사용한다.
• className은 배치와 반응형 표현을 조정할 수 있지만 내부 자산을 잘라내거나 왜곡하는 데 사용하지 않는다.

상태와 동작

• 자체 상호작용 상태는 없다.
• 링크나 버튼 안에 배치하면 상위 요소가 hover, focus, disabled 상태를 소유한다.
• 로딩이나 상태 표시에 사용하지 않는다.

콘텐츠

• 컴포넌트 자체에는 텍스트가 없다.
• 제품 이름이 필요하면 인접한 실제 텍스트로 제공한다.
• 아이콘만 있는 내비게이션 trigger라면 상위 링크나 버튼에 접근 가능한 이름을 제공한다.

접근성

• 내부 이미지는 alt=""와 aria-hidden으로 장식 처리된다.
• DotIcon만으로 링크나 버튼의 이름을 대신할 수 없다.
• 선택 상태, 알림, 오류를 DotIcon의 frame이나 색상만으로 표현하지 않는다.
• 상호작용 컨테이너는 40×40px 이상의 조작 영역과 focus-visible을 제공한다.

좁은 화면과 긴 콘텐츠

• 아이콘은 shrink-0으로 비율을 유지한다. 인접한 제품 이름이 길면 텍스트 영역이 줄어들거나 줄바꿈되어야 한다.
• 좁은 화면에서 제품 이름을 숨기더라도 상위 상호작용 요소의 접근 가능한 이름은 유지한다.
• 크기를 임의로 과도하게 축소하지 않고 제공된 세 단계 중 하나를 사용한다.

공개 API

공개 타입은 DotIconProps, DotIconSize다.

예제

import { DotIcon } from '@classum/dot-design-system/ui';

export function ProductIdentity() {
  return (
    <div className="flex items-center gap-3">
      <DotIcon size="md" framed />
      <div>
        <p className="text-sm font-semibold">AI 운영 도구</p>
        <p className="text-xs text-ink-subtle">작업 현황과 검토 항목을 관리해요.</p>
      </div>
    </div>
  );
}

피해야 할 사용

• 삭제, 검색, 설정 같은 기능 아이콘으로 사용
• 모든 카드와 행에 반복해 브랜드 밀도를 높이는 사용
• 내부 <img> 스타일을 덮어 자산을 찌그러뜨리는 사용
• DotIcon만 배치하고 상호작용 요소의 이름을 생략
• 로딩 spinner나 상태 점을 대신하는 사용

관련 항목

• DotCharacter
• DotTheme
• Dot 브랜드 모션