Design systems in the AI era
2. Component specifications & accessibility4 / 15

Component specifications — an AI-readable blueprint

Props schemas, state machines, slot composition, and Spec as Data

Concept 33 XP 7 min

컴포넌트 명세는 AI가 따라 읽는 컴포넌트 사용 청사진입니다. Props 스키마, 상태 모델, 합성 패턴을 분명히 정의해 두어야 AI가 올바른 코드를 생성합니다.

  • Props 스키마 — 타입·제약·기본값
  • 상태 모델 — 상태 머신으로 표현
  • 합성 패턴 — Compound Component와 슬롯
  • 접근성 — ARIA·키보드 규칙
  • 예시 — 기본/고급 코드 샘플

Props: 타입으로 의도 표현

상태 모델 — 상태 머신

가능한 상태와 전이 규칙을 상태 머신으로 정의하면 무효한 전이를 막을 수 있습니다. 예: idle → loading → success/error, error → loading(재시도), idle ↔ disabled.

슬롯 기반 합성

슬롯requiredallowedTypesmaxCount
headerfalseCard.Header1
contenttrueCard.Content1
footerfalseCard.Footer1
Card 슬롯 스키마 예시 — 필수/허용 타입/최대 개수를 데이터로 명시

Spec as Data