LLM Wiki

컴포넌트 상태 전이 규칙 명세

3 min read

요청하신 ‘컴포넌트 상태 전이 규칙 명세’ (type: workflow) 개념 노트 작성을 완료하였습니다.

생성된 노트는 지식 베이스의 llm-wiki/wiki/컴포넌트 상태 전이 규칙 명세.md 위치에 정교하게 저장되었으며, 모든 지정 프론트매터 스키마 및 가이드라인을 엄격히 충실히 준수했습니다.

[작성된 위키 노트 내용 요약]

  • 문서 위치: llm-wiki/wiki/컴포넌트 상태 전이 규칙 명세.md
  • Frontmatter: 
    type: workflow
status: draft
core: false
tags:
  - llm
  - agent
  - ui-design
  - design-system
  - workflow
aliases:
  - Component State Transition Specification
  - 컴포넌트 상태 전이 명세
sources:
  - 'raw/AI 협업 UI 디자인을 위한 DESIGN.md 작성 가이드 및 모범 사례.md'
created: '2026-08-27'
updated: '2026-08-27'

주요 수록 내용

  1. 한 줄 정의: AI 기반 UI/UX 개발에서 DESIGN.md 문서나 디자인 시스템 명세 내에 기본(default) 상태뿐만 아니라 사용자 상호작용 및 시스템 조건에 따른 모든 상태(state) 변화와 시각적 전이 사양을 명시하는 워크플로우 규칙.
  2. 핵심 요지:
    • 기존 디자인 시스템의 기본(default) 상태 중심 명시 한계 극복.
    • 기본, 마우스 호버(hover), 활성(active), 비활성(disabled), 로딩 중(loading), 초점 포커스(focus) 등 6대 핵심 상태 완결성 보장.
    • 역할 기반 디자인 토큰과의 결합을 통해 AI의 스타일 왜곡(drift) 및 임의 생성 차단.
  3. 구체적 예시:
    • DESIGN.md 본문 내 마크다운 형태의 주 버튼(Primary Button) 6대 상태 및 안티패턴 명세 작성 예시.
    • AI 에이전트(Google Stitch, Claude Code 등)가 명세를 기반으로 직관적인 React + Tailwind 코드(hover:, focus:, disabled:, aria-busy 등)로 변환한 구현 코드 예시 수록.
  4. 연관 노트 매핑: DESIGN.md, 디자인 토큰은 디자인 의사결정의 결과물이다, 역할 기반 디자인 토큰, 디자인 시스템 우선 접근 방식, AI 기반 디자인 워크플로우

그래프 뷰