# AI 시대의 디자인 시스템 코스

> 이제는 사람이 아니라 AI 에이전트가 디자인 시스템을 해석하고 UI를 생성합니다. 토큰 3계층 아키텍처(W3C DTCG), 컴포넌트 명세, 내장 접근성(WCAG), 일관성·인터랙션 토큰, 거버넌스까지 AI가 정확하게 읽어낼 수 있는 명시적·구조화된 디자인 시스템을 4주 실행 경로로…

- Canonical: https://learning.reopt.ai/courses/design-systems
- Language: ko-KR
- HTML: https://learning.reopt.ai/courses/design-systems

---

[브랜드 전문지식](/tracks/brand-knowledge)

# AI 시대의 디자인 시스템

AI가 읽고 코드로 만드는 디자인 시스템

이제는 사람이 아니라 AI 에이전트가 디자인 시스템을 해석하고 UI를 생성합니다. 토큰 3계층 아키텍처(W3C DTCG), 컴포넌트 명세, 내장 접근성(WCAG), 일관성·인터랙션 토큰, 거버넌스까지 AI가 정확하게 읽어낼 수 있는 명시적·구조화된 디자인 시스템을 4주 실행 경로로 설계합니다.
중급 14레슨 587 XP 약 98분

출처 · 핸드북 · AI 시대의 디자인 시스템 · 원문 검토 2026-07-01
[학습 시작하기](/courses/design-systems/lessons/ds-l1-intro)

![브랜드와 마케팅 전략 학습을 표현한 일러스트](/images/home/track-brand-marketing.png)
0%

코스 진행률 15개 학습 단계 기준

## 이 코스를 마치면

- Primitive·Semantic·Component 3계층 토큰을 W3C DTCG 1.0 기준으로 설계할 수 있다
- 컴포넌트 명세(Props·상태·슬롯·접근성)를 단일 소스 데이터로 정의할 수 있다
- WCAG AA 대비·ARIA·키보드 패턴을 디자인 시스템에 기본값으로 내장할 수 있다
- 품질 게이트와 4주 실행 플레이북으로 AI 생성 UI의 일관성을 운영할 수 있다

1

## 1. 토큰 아키텍처 — 원자 단위부터

AI가 의도를 읽어내는 3계층 토큰 구조와 W3C DTCG 표준을 익힙니다.

- [AI가 읽는 디자인 시스템과 토큰 3계층 AI-First 4대 원칙과 Primitive·Semantic·Component 계층 개념 32 XP](/courses/design-systems/lessons/ds-l1-intro)
- [토큰 & DTCG 핵심 용어 3계층·네이밍·DTCG·파이프라인 용어를 카드로 굳히기 플래시카드 20 XP](/courses/design-systems/lessons/ds-l1-flash)
- [토큰 아키텍처 퀴즈 3계층 참조·네이밍·DTCG 점검 퀴즈 38 XP](/courses/design-systems/lessons/ds-l1-quiz)

2

## 2. 컴포넌트 명세 & 접근성

AI가 정확한 코드를 생성하도록 명세를 데이터화하고 접근성을 기본값으로 내장합니다.

- [컴포넌트 명세 — AI가 읽는 청사진 Props 스키마·상태 머신·슬롯 합성·Spec as Data 개념 33 XP](/courses/design-systems/lessons/ds-l2-spec)
- [접근성을 기본값으로 내장하기 ARIA 표준화·키보드 패턴·WCAG 대비·자동화 한계 개념 34 XP](/courses/design-systems/lessons/ds-l2-a11y)
- [명세 & 접근성 퀴즈 Props·단일 소스·WCAG 대비·아이콘 버튼 점검 퀴즈 40 XP](/courses/design-systems/lessons/ds-l2-quiz)

3

## 3. 일관성 & 인터랙션

그리드·스페이싱·모션을 토큰화해 AI 생성 UI의 품질을 일정하게 만듭니다.

- [일관성 — 제약이 만드는 품질 12컬럼 그리드·4px 스페이싱·반응형·일관성 점수 개념 31 XP](/courses/design-systems/lessons/ds-l3-consistency)
- [인터랙션 & 모션 토큰 상태 피드백·마이크로인터랙션·duration·easing·reduced-motion 개념 30 XP](/courses/design-systems/lessons/ds-l3-interaction)
- [실전: AI가 만든 UI 리뷰 AI 생성 컴포넌트를 디자인 시스템 기준으로 교정하기 시나리오 46 XP](/courses/design-systems/lessons/ds-l3-scenario)

4

## 4. 거버넌스 & 실행 플레이북

4주 실행 경로와 품질 게이트로 AI-First 디자인 시스템을 운영 가능한 상태로 만듭니다.

- [4주 실행 플레이북 & 거버넌스 Definition of Done·4주 경로·품질 게이트 6종·RACI 개념 33 XP](/courses/design-systems/lessons/ds-l4-playbook)
- [AI-First DS 운영 준비 체크리스트 토큰·명세·일관성·거버넌스 출시 전 점검 체크리스트 25 XP](/courses/design-systems/lessons/ds-l4-checklist)
- [거버넌스 & 실행 퀴즈 4주 경로·품질 게이트·RACI 점검 퀴즈 36 XP](/courses/design-systems/lessons/ds-l4-quiz)

5

## 5. 에이전틱 UI 품질 통제

생성형 UI와 에이전트가 디자인 시스템 경계 안에서 작업하게 만듭니다.

- [DESIGN.md에서 생성형 UI까지 AI가 읽는 미학·행동 계약과 에이전트 UI 프로토콜 개념 45 XP](/courses/design-systems/lessons/ds-l5-control)
- [워크북: AI UI 품질 계약 에이전트가 지켜야 할 디자인·접근성·행동 규칙 작성 워크북 60 XP](/courses/design-systems/lessons/ds-l5-contract)

## 최종 챌린지

코스 전체를 아우르는 종합 퀴즈로 마스터를 증명하세요.

- 최종 챌린지 · 디자인 시스템 마스터 토큰·명세·접근성·일관성·거버넌스를 아우르는 종합 퀴즈 레슨 완료 후 84 XP

---

에이전트용 사이트 안내: https://learning.reopt.ai/llms.txt · 사이트맵: https://learning.reopt.ai/sitemap.xml · 문의: https://learning.reopt.ai/contact