AI 시대 디자인 시스템

한 줄 정의

AI 시대 디자인 시스템은 사람이 화면을 일일이 그리는 규칙집을 넘어, AI가 반복 생성해도 제품의 시각 언어와 사용감을 유지하게 하는 실행 가능한 맥락이자 에이전트 전용 행동 강령이다.

핵심 요지

AI가 코드를 빠르게 만들수록 제품 차별점은 구현 속도보다 시각 언어, 사용자 흐름, 판단 기준으로 이동한다.
디자인 시스템은 색상, 타이포그래피, spacing, icon style, component state를 정해 AI Slop을 줄인다.
DESIGN.md 운영 원칙처럼 agent-readable 형식으로 저장하면 AI가 디자인 의도를 매번 새로 추측하지 않아도 된다.
디자이너의 역할은 픽셀 생산자에서 시스템 설계자, workflow 설계자, 품질 판단자로 이동한다.
AI가 많이 쓰는 기본 컴포넌트 층(shadcn/ui 같은 code-first foundation)을 이해하지 못하면, 디자인 시스템 논의가 Figma 안에만 갇히기 쉽다.
행동주의적 에이전틱 디자인 시스템(BADS): 단순 스타일 가이드를 넘어 윤리(Ethics), 접근성(Accessibility), 기억(Memory)을 지닌 다단 레이어 아키텍처를 통해 AI 생성 UI의 일관성을 100%에 가깝게 강제한다.
가이드라인 지침과 미리 정의된 템플릿: AI가 엉뚱하게 요소를 바꾸거나 오작동하지 않도록 템플릿 수준에서 컴포넌트를 고정하고, 자체 디자인 시스템 토큰을 쓰도록 강제하는 오버라이드(override) 지시어를 포함한 plain-text 지침 파일(Instruction file)을 연계한다.
시스템으로서의 취향(Taste as a System) 관리: 단순 개별 결과물(output)을 넘어, Before/After 대조 캔버스를 통해 디자인 품질 근거를 체계적으로 입증하고 디자인 안목 리뷰(taste review) 세션을 운영해 제품 전체의 품질 기준(baseline)을 격상시킨다.
행동주의적 에이전틱 디자인 시스템(Behavioral Agentic Design System, BADS) 데모: https://behavioral-agentic-design-system.vercel.app/ (비밀번호: bads2026).
YAML 토큰 명칭 직접 참조: 마크다운 본문이 프론트매터의 토큰 변수명({ colors.white }, {base} 등)을 직접 역참조해야 AI 에이전트가 오차 없이 렌더링을 일치시킬 수 있다.
Figma 디자인 시스템과 AI 에이전트 간의 정합성을 유지하기 위해 컴포넌트의 설명(Description)에 반드시 해당 요소를 ‘사용하지 말아야 할 때(Negative constraints)‘를 포함시켜 기재하는 것이 오용 차단에 강력한 효용을 지닌다. (출처: raw/AI와 디자인 시스템 - 출판형 다듬기.md)
Brad Frost & Dominic Nguyen은 디자인 시스템이 개발자 문서가 아닌 기계를 위한 지시서(instructions for machines)로 진화하고 있음을 선언했다.
2026년 3월 5일 오픈 베타로 출시된 Figma Slots는 named slot 구조를 제공하여 detaching(컴포넌트 해제) 문제를 원천 차단한다.
Figma Variables 3계층(Primitives, Semantic tokens, Component tokens) 중 Semantic token 설계는 기계가 의도(intent)를 추론하게 만드는 비협상 필수 조건이다.
Uber는 2026년 3월 Figma Console MCP(southleft/figma-mcp)와 AI 에이전트를 연동해 24시간 동기화되고 몇 분 만에 완전한 component spec을 빌드하는 파이프라인을 공개했다.
디자인 시스템은 색상, 타이포그래피, spacing, icon style, component state를 정해 AI Slop을 줄인다.
DESIGN.md 운영 원칙처럼 agent-readable 형식으로 저장하면 AI가 디자인 의도를 매번 새로 추측하지 않아도 된다.

상세

1. BADS (Behavioral Agentic Design System) 10단계 아키텍처

기존 피그마 파일이나 tokens.json 단선 구조를 넘어, 에이전트가 상황에 따라 ‘디자인 의사결정’을 내릴 수 있도록 아래와 같은 10대 레이어 스택을 제공한다.

Brand & Voice: 브랜드 정체성, 마이크로카피 은행, 실시간 튜닝 가능한 톤앤매너 프레임워크.
Ethics: 투명성, 형평성, 프라이버시 우선, 명시적 동의 유도, 다크 패턴 방지의 5대 강령 및 기계 독해용 의사결정 트리.
Foundation Tokens: 8px 기본 단위를 바탕으로 한 간격, 서체 스케일 등 기초 물리 값.
Semantic Tokens: 다크모드 등 유연한 테마 변환을 돕는 의미론적 토큰명 매핑.
Components: 36개의 핵심 UI 프라이머리 컴포넌트(Primitives) 레지스트리.
Patterns: 모달 vs 드로어, 스피너 vs 스켈레톤 등 매번 반복되는 UI 쟁점용 의사결정 나무 구조.
Agent Interface: 에이전트가 디자인 콘텍스트에 쉽게 접근하고 API 명세를 조회하는 MCP 인터페이스.
Documentation: plain-text 마크다운 기반으로 AI와 디자이너가 동시 가독할 수 있는 문서 체계.
Enforcement (검증 엔진): 스토리북 테스트 커버리지, axe-core 연동 CI/CD 웹 접근성 전수 검사 등 실시간 가드레일.
Automation (가동 자동화): 24시간 타임라인 스케일에 기반한 서캐디안 자동 운영 파이프라인.

2. 디자인 윤리 (Ethics) 및 9대 다크 패턴 금지

5대 강령: 투명성(Transparency), 형평성(Equity), 프라이버시 우선(Privacy-First), 명시적 동의 유도(Consent-Driven), 다크 패턴 방지(Anti-Dark-Patterns)를 시스템 뼈대에 심어 에이전트가 윤리적 UI를 자율 판별하게 한다.
9대 다크 패턴 금지: 사용자를 부끄럽게 만들어 행동을 강제하는 confirmshame, 허위 정보로 조바심을 조장하는 manufactured urgency, 마케팅 수신동의 체크박스의 디폴트 선택, 구독 해지 버튼 은폐 마찰 등 사용자를 기만하는 9가지 패턴을 정의하고 감사 단계에서 원천 차단한다.

3. 웹 접근성 (Accessibility) WCAG 2.2 AAA 하한선 강제

AAA 등급 요건: 텍스트 대비 명도 최소 7:1 보장, 마우스/터치 타겟 최소 44x44px 공간 확보, 최소 폰트 14px 제한, 포커스 링 강제 부착, 미디어 모션 축소 반응형 제어.
5대 인지/신체적 페르소나 설정: 시각(Vision), 청각(Hearing), 운동성(Motor), 인지 능력(Cognitive), 상황적 일시 제약(Situational) 차원을 명세하여 기획 첫 단계부터 접근성을 고려하는 ‘Accessible by construction’ 체력을 확보한다.

4. 자가 피드백 루프 (Learning Loops)를 통한 노후화 방지

디자인 시스템이 Rotting(부패)되는 것을 방지하기 위해 에이전트의 작업 이력을 반영하는 3개 원장 시스템을 가동한다.

비평 기록 원장 (Critique ledger): 제3의 외부 검증 에이전트가 뱉어낸 모든 비주얼 비평 지적 사항들을 모아 취약성을 진단한다.
배포 이력 원장 (Recipe ledger): 최종 승인(Ship)과 반려(Bounce) 이력을 분석해 검증 코드를 보완한다.
교정 일지 (Corrections log): 인간 리뷰어에 의해 반려당했던 모든 비주얼 디자인 이력을 축적하여, 동일 오류가 2회 반복 누적 시 자동 린트(Lint) 규칙으로 승격하여 가동 정지 명령을 내리지 못하게 제어한다.
기타 루프: 월간 자가 진단(Monthly loops), 분기별 리셋(Quarterly loops), 복수 저장소에서 공통 발생하는 결함을 패치하는 크로스 포크 집계(Cross-fork aggregator).

5. 서캐디안 디자인 시스템 (Circadian Design Systems) 24시간 운영

인간의 시간별 에너지 변화에 맞춰 에이전트의 권한과 스케일을 유연히 제어하는 5대 타임라인을 갖춘다.

야간 당직 (Night Shift): 새벽 4시 백그라운드 타이머 기상. 접근성 진단, 픽셀 디프 검사, 5대 테마 리서치를 실행하고 기계적 오류 수정용 Draft PR을 생성한 뒤 슬랙 아침 종합 보고서를 전송한다.
모닝 싱크 (Morning Sync): 출근한 디자이너가 슬랙 요약을 보고 자동 패치 draft PR을 일괄 머지(Merge)하거나 반려한다.
주간 협업 (Collaborative Build): 주간 업무 시간대. BADS의 모든 안전벨트와 10대 레이어 가드레일 작동 속에 디자이너와 페어 바이브 코딩 협업을 진행한다.
오후 비평 (Async Review): 해가 질 무렵, 스토리북 테스트 케이스와 기술 트레이드오프 리포트를 생성하여 커밋한다.
저녁 복원 (Recovery): 대화 콘텍스트 데이터를 깔끔하게 아카이빙해 둔다.

6. 실무 기업의 AI 디자인 시스템 운용 패턴

Atlassian의 컴포넌트 가드레일 전략:
- 미리 정의된 템플릿 (Pre-coded templates): AI가 핵심 요소를 엉뚱하게 바꾸거나 무너뜨리지 못하도록 페이지 상의 중요 요소를 코드로 고정하고, 해석의 여지가 있는 나머지 영역에만 AI가 작동하도록 가이드를 제공한다.
- 지침 파일 (Instruction file)과 오버라이드(override) 지시어: plain-text 마크다운 문서에 디자인 컴포넌트, 변수, 토큰 사용 가이드를 작성한다. 예컨대 CSS 프레임워크(Tailwind 등)를 쓰되 특정 영역에선 오직 자체 시스템 컴포넌트만 사용하도록 강제하는 오버라이드 지시어를 주입하여 AI의 임의 수정을 차단한다.
- 프롬프트 레시피: 다크 모드 전환 스위치처럼 반복되는 제품별 UI 사양들을 템플릿화한 프롬프트 레시피를 만들어 프롬프트 입력 시 복사하여 신속히 재사용한다.
- 캘리브레이션 (Calibration): 기존의 정형화된 컴포넌트와 화면을 입력해 AI가 올바르게 인식하는지 보정하고 학습시킴으로써, 스크린샷-코드 변환(screenshot-to-code)의 신뢰도를 비약적으로 향상시킨다.
Tesco의 Figma MCP 연동 플러그인:
- Cursor(바이브 코딩)와 Figma MCP 서버를 활용하여 자체 Figma 플러그인을 구축한다. 이를 통해 실제 운영 웹사이트의 라이브 데이터(이미지, 제품 설명, 평점 등)를 UI 컴포넌트에 실시간 긁어와 자동 정렬 및 입력함으로써, 목업이 아닌 고도로 사실적인 디자인 품질을 보장한다.
Anthropic의 30줄 CSS 미학 선언문:
- AI Slop 방지를 위한 수렴 거부: Inter, Roboto, Arial, Space Grotesk 등 일반적인 폰트 선택 및 흰 배경 위 보라색 그라데이션 같은 진부한 SaaS 미학의 사용을 절대 금지(Forbidden List)한다.
- 극단적 미학 명세: Brutally minimal, Maximalist chaos, Retro-futuristic, Editorial/magazine 등 11가지 시각 미학 방향 중 하나를 명확히 선언하고, gradient meshes, noise textures, layered transparencies 등의 디테일 질감을 적극 수용하여 ‘평균적 AI Slop’을 차단한다.

7. 시스템으로서의 취향 (Taste as a System) 구축

시각적 결과물(output)은 AI가 무한히 양산할 수 있으므로, 디자인 시스템은 단순 컴포넌트 가이드를 넘어 ‘취향과 안목의 통제소’가 되어야 한다.

Before/After 대조 캔버스: 초기 서비스 흐름(flows)과 최종 설계안을 나란히 배치하고, 최종안이 우수한 설계 및 시각적 판단의 상세 근거를 디자인 시스템 내에 이력으로 보존한다.
디자인 안목 리뷰 (Taste Review): 디자인 시스템팀 주도로 월 1회 외부 트렌드를 스캔하고 릴리스 직전 다듬어야 할 품질 하한선을 상향하는 안목 리뷰 세션을 구축한다.

8. 피그마 토큰 매핑 및 검토 게이트 (Figma Token Mapping & Approval Gates)

피그마 변수(Variables) 3단계 구조:
- Primitives (원시 토큰): hex값, 간격 스케일, 기본 폰트 사이즈 등 기초 물리 값 (blue/500 = #3B8BD4, space/4 = 16px). 직접 사용을 피하기 위해 properties panel에서 숨겨두고 상위 토큰이 참조하게 한다.
- Semantic Tokens (의도 토큰) [필수]: 색상이나 간격이 쓰이는 ‘의도와 목적’을 정의한다 (color/interactive/default, color/interactive/hover, color/interactive/disabled).
- Component Tokens (컴포넌트 토큰): 개별 컴포넌트 단위의 변수 매핑 (button/background/default -> color/interactive/default).
검토 게이트 체크리스트 (Approval Gate Checklist):
- Figma Token Validation: Primitives의 직접 노출 여부를 검증하고, 모든 컴포넌트 색상이 Semantic Token으로 올바르게 매핑되어 있는가?
- PascalCase Component Name: 피그마와 코드베이스의 이름이 ProductCard와 같이 PascalCase로 정확히 일치하여 Code Connect 매핑이 유효한가?
- Component Properties Align: 피그마 variants 이름(variant, size, state 등)이 코드 props와 대소문자까지 동일하게 설정되었는가?
- Zero Detaching (Slots Check): 컴포넌트가 임의로 깨지지(detached) 않았으며, named slot 분홍색 테두리 내에 정상적으로 drop 되었는가?
- Auto Layout Coverage: 모든 컴포넌트 프레임이 Hug, Fill, Fixed 등의 의도적인 크기 제어와 variables spacing을 통해 Flexbox CSS로 무리 없이 매핑되는가?
- WCAG 2.2 AAA Contrast: 대비율 7:1 이상 보장, 터치 타겟 44x44px 이상 확보, 폰트 14px 하한선이 지켜졌는가?

BADS 10단계 아키텍처의 Layer 1 ‘지식 근거(Research Ledger)’

단순히 디자인 명세만 두지 않고, 사용자 리서치, 경쟁사 분석 등 사전 조사 파일들을 템플릿 형태로 저장한다. 이 템플릿에는 출처(Provenance), 표본 크기(Sample size), 최신성, 지식의 신뢰 등급(Confidence level), 리서치의 한계와 공백 영역을 의무적으로 기재해야 한다. 에이전트는 뇌피셜이 아닌 이 레저에 근거하여 UI를 설계하며, 근거가 부족하면 Flag 경고를 날려 인간의 개입을 촉구한다.

접근성(WCAG 2.2 AAA & 3.0 Gold) 및 고정 스트레스 페르소나

BADS는 WCAG 2.2 AAA 등급(텍스트 대비 7:1, 터치타겟 44x44px, 최소 폰트 14px 등)을 기본으로 강제하며, 차세대 표준인 WCAG 3.0의 Gold 등급에 대응한다. CI/CD 빌드 시 axe-core 연동 접근성 감사 스크립트 6개가 매번 동작한다.
프로젝트에는 **‘시각 장애 스크린 리더 사용자’**와 **‘마우스 없는 키보드 조작 사용자’**라는 2명의 고정 스트레스 테스트 페르소나가 배정되어 에이전트가 가상 런타임에서 UI 접근성 위배를 선제 검증한다.

AI 에이전트의 디자인 탐색 4단계 및 안티 디폴트 차단

디자인적 탐색(Research): 관련 화면 시안을 수집하고 설계 이유를 아키텍처적으로 비평.
레퍼런스 대조(Reference): Mobbin MCP 도구를 연동하여 실제 프로덕션 앱 3~4개를 교차 대조.
다각도 방향성 스케치(Direction sketches): 3~5가지 대안 구조 아이디어와 트레이드오프 작성.
인간 승인 획득(Wait for sign-off): 인간 디자이너의 최종 승인이 떨어지기 전까지 코드 작성 락(Lock) 유지.

안티 디폴트(Anti-defaults) 차단 목록: 왼쪽 1열 사이드바 고정, 카드 3개 배치, 그라데이션 남용, shadcn 날것 배포 등 뻔한 UI 슬롭을 차단하고, 채택 시 구체적 사유 작성을 의무화한다.

컴포넌트 7단계 제작 파이프라인과 트리아지

Intake & Triage, Plan, Approval, Generate, Verify, Iterate, Commit of 7단계를 밟는다. 특히 1단계 트리아지 시 신규 UI를 **Bucket A(재사용), Bucket B(스타일 변주), Bucket C(조합 컴포넌트), Bucket D(완전 신규 제작)**로 분류하며, Bucket D는 인간 리더의 수동 승인이 기상해야만 가동된다.
완료 게이트에서는 SVG 폰트 누락 등 9대 휴먼 장애 요소를 담은 수동 체크리스트(Definition of done)를 통과하고, 소스/테스트/쇼케이스가 단일 커밋으로 묶여 형상 관리되어야 한다.

9. Claude Code 전용 Figma 스킬 2종 및 감사 가이드라인

전용 스킬 2종 (Figma Skills):
- apply-design-system: 로컬 머신에 내려받아 에이전트에 등록하며, 기존 Figma 원시 레이아웃을 공식 DS 컴포넌트 라이브러리에 연결. (GitHub: edenspiekermann/Skills/tree/main/skills/apply-design-system)
- audit-design-system: 현재 Figma 캔버스의 컴포넌트와 스타일이 마스터 DS 명세에서 얼마나 어긋나 작동하는지 visual drift 차이를 자동 점검 및 진단.
동기화 및 2차 검증: Figma API 및 /schedule 명령을 결합하여 일일 1회 동기화를 보장하는 스키마를 구성(Design System Sync Agent). 잦은 실시간 동기화는 토큰 낭비와 호출 제한을 초래하므로, 일일 배치 스냅샷을 생성해 CLAUDE.md, 토큰 JSON, 컴포넌트 룰을 갱신하고 변경 로그(Added/Updated/Deprecated)를 자동으로 저장소에 커밋한다.

기계 가독형 피그마 설계 원칙

Figma Slots 기능 (2026년 3월 5일 출시): 컴포넌트 내 분홍색 테두리로 표시되는 general/named slot을 활용해 UI를 조립(assembling, not creating)하도록 강제한다. 이는 컴포넌트를 분해(detaching)해 에이전트의 추론 구조를 깨뜨리는 행위를 차단한다.
Figma Variables 3계층: primitives(물리값 hex), semantic tokens(interactive/default 등 intent 지향), component tokens(선택)로 나누어 설계한다. Semantic tokens은 downstream의 손상 없이 브랜드 테마 전환을 지원한다.
컴포넌트-코드 매핑 (Code Connect): PascalCase로 작성된 컴포넌트명과 description(오용 차단용 constraint 기술 필수)을 바탕으로 코드베이스와 1:1 매핑을 확보해야 에이전트의 헛생성(hallucination)을 막을 수 있다.
Figma Auto Layout: Flexbox 및 Grid 기반으로 요소를 의도적으로 정렬하고 variables spacing을 강제하여, Figma MCP가 즉각적으로 유효한 CSS 코드를 출력하게 유도한다.

9. 추가적인 실무 기업 AI 디자인 시스템 운용 사례

Meta (실행의 자동화 및 플레이북): Llama 모델을 기반으로 자체 AI 워크플로 지침과 플레이북을 문서화하여 내부 표준을 수립했다. 기획자(PM)가 Cursor 및 Claude 등을 활용해 직접 개념 검증을 위한 코드를 바이브 코딩으로 구현한 뒤 개발자에게 넘겨주는 등 제품 소유자(Product Owner)로서의 역량이 극대화되었다. 단, 사용자 리서치 및 UX 전략 수립은 여전히 사람이 중심이 되는 수작업을 유지한다.
Faire (Fairey AI 챗봇을 이용한 UX 리서치): 사내 AI 챗봇 ‘Fairey’를 구축하여 지난 6개월간의 지원 티켓 내역 등 대규모 고객 문의 데이터로부터 사용자의 불편함을 빠르게 수집 및 UX 리서치를 대행한다. 또한 고객 인터뷰 녹취 데이터를 프롬프트 템플릿 양식에 맞춰 보안 탑재된 ChatGPT에 입력하여 깔끔한 요약 콘텐츠로 빠르게 정제한다.

예시

Oooff 웹앱 POC 사례: 여행 계획 웹앱 Oooff를 설계할 때, 디자인 의도(Reasoning Layer)를 주입한 DESIGN.md를 활용해 에이전트가 hex 코드나 padding 규칙을 임의로 날조하지 않고 100% 일치도로 컴포넌트를 빌드하게 만들었다.
컴포넌트 트리아지 파이프라인: 신규 UI 생성이 요청되면 에이전트가 자율적으로 4가지 버킷 중 하나로 분류(Triage)한다.
- Bucket A (재사용): 기존 것 호출 후 종료.
- Bucket B (스타일 변주): Size props 등 variants 추가.
- Bucket C (조합 컴포넌트): 기본 Primitives 조립 후 독립 폴더에 안착.
- Bucket D (완전 신규): 디자이너 사수의 수동 승인 후 코드 생성 작동.
서캐디안 디자인 시스템 5대 타임라인: 24시간 시계(Clock) 타이머에 맞춰 에이전트 권한을 제어.
- 새벽 4시(Night Shift): 백그라운드 접근성/디프 진단, 5대 리서치 로테이션, 드래프트 PR 생성 및 슬랙 보고서 전송.
- 아침 9시(Morning Sync): 디자이너가 슬랙 요약을 보고 자동 패치 draft PR을 일괄 머지(Merge)하거나 반려한다.
- 주간(Collaborative Build): 10대 레이어 가드레일 기반 인간-AI 페어 코딩.
- 오후(Async Review): 스토리북 테스트 케이스 및 아키텍처 리포트 커밋.
- 저녁(Recovery): 대화 콘텍스트 아카이빙.

디자인 시스템 3대 감사(Audit) 점검 사항

Figma 파일을 AI에 인풋으로 주기 전 수동 또는 자동 감사 에이전트를 돌려 아래 3가지를 정리해야 디자인 오염을 예방할 수 있다:

하드코딩된 값: 원시 hex 코드나 일탈된 padding 값이 인라인으로 박힌 요소를 제거하고 토큰 변수로 치환.
중복 컴포넌트: 동일 기능인데 여러 레이어로 파편화된 심볼 병합.
컴포넌트 오용: 예제 목업이나 샌드박스 영역에서 컴포넌트 규칙과 어긋나게 사용된 흔적 정리.

Uber의 Figma Console MCP 적용 사례

Figma Console MCP (southleft/figma-mcp): AI 에이전트가 Figma API 및 Storybook MCP를 통해 디자인 의도를 읽어들여 100% 일치하는 UI 코드를 생성한다. 하루 1회 배치 스냅샷 동기화로 토큰 낭비와 호출 제한을 예방하는 스키마를 구성한다.

충돌

현재 확인된 충돌 없음.

LLM Wiki

탐색기