WIZ Design Operating System

하나의 기준으로 설계하고,
코드로 증명한다

WIZ Design System은 WIZON · WIZ-FLOW Next · WIZ-GOV AI · WIZ-DOCS가 공유하는 제품 설계 운영체계입니다. 모든 UI는 Token → Component → Pattern → Product 순서로 만들어집니다.

  1. 01Clarity명료함이 장식보다 먼저다
  2. 02Consistency같은 문제는 같은 방식으로 푼다
  3. 03Simplicity필요한 것만 만든다
  4. 04Accessibility모두가 쓸 수 있어야 완성이다
  5. 05Scalability제품군 전체로 확장된다
  6. 06AI FirstAI 협업 경험을 기본으로 설계한다

문서

문서는 14개 섹션으로 구성되며, 버전별 변경 이력은 체인지로그에서 확인할 수 있습니다.

  1. 소개Introduction철학 · 원칙 · 비전 · 브랜드 스토리 · AI Collaboration OS본문 제공
  2. 파운데이션FoundationsColor · Typography · Spacing · Radius · Shadow · Elevation · Motion본문 제공
  3. 디자인 토큰Design Tokens토큰 정의 + 실코드 연결 — 토큰 표는 JSON SSOT에서 자동 생성본문 제공
  4. 브랜드 아이덴티티Brand Identity마스터 브랜드 · 로고 시스템 · 앱 아이콘 · 파비콘 · Do & Don't본문 제공
  5. 아이코노그래피Iconography원칙 · 스트로크 · 그리드 · 코너 · Filled/Outlined · 앱 아이콘 규칙본문 제공
  6. 컴포넌트Components30+ 컴포넌트 — 라이브 데모 + Props 표 + a11y + 토큰 매핑본문 제공
  7. 레이아웃 시스템Layout System12컬럼 그리드 · 브레이크포인트 · 컨테이너 · 사이드바/대시보드 레이아웃본문 제공
  8. 패턴PatternsLogin · Dashboard · AI Chat · AI Workspace · Workspace 5축 패턴본문 제공
  9. 접근성Accessibility대비 · 키보드 · 스크린리더 · 포커스 링 · Reduced Motion · 색약 지원본문 제공
  10. 모션 디자인Motion DesignHover/Focus · 전환 · 로딩 · 스켈레톤 · AI Thinking 애니메이션본문 제공
  11. 다크 모드Dark Mode테마 토큰 · 서피스 규칙 · 대비 규칙 · 시멘틱 컬러본문 제공
  12. AI 가이드라인AI GuidelinesAI State Model 9종 · Multi-Agent UX · Prompt/Copilot/RAG UX본문 제공
  13. 개발자 리소스DeveloperFlutter · Dart · HTML/CSS · 토큰 · Theme Provider · Component API본문 제공
  14. 리소스ResourcesFigma · 아이콘 · 템플릿 · 다운로드 · 체인지로그본문 제공
  15. 체인지로그Changelog버전별 변경 이력 — 플랫폼 릴리스 라벨 · 패키지 SemVer · Keep a Changelog본문 제공