완전히 기계 읽기 가능한 디자인 시스템
한 줄 정의
완전히 기계 읽기 가능한 디자인 시스템은 AI 에이전트가 코드를 작성할 때 디자인 시스템의 Foundations(기초 규칙)와 Component specs(컴포넌트 규격)를 맥락에 맞춰 올바르게 적용하도록 설계한 계층화된 맥락 시스템(layered context system)이다.
핵심 요지
- MCP의 한계 극복: 모델 컨텍스트 프로토콜(MCP)은 요청 기반(On-demand)으로 작동하여 컴포넌트 API 명세는 제공하지만, 간격 문법, 타이포그래피 계층 등 명시적으로 요청하지 않은 기초 지식(Foundations)은 누락되어 디자인 일관성 붕괴(Style drift)를 초래한다 출처.
- 점진적 맥락 공개(Progressive Context Disclosure): 디자인 규격을 단일
DESIGN.md파일에 밀어 넣는 대단위 주입 방식은 토큰 과부하를 일으키므로, 지식 레이어를 다단으로 분절하고 이를 색인하는 단 하나의 스킬(SKILL.md)을 두어 에이전트가 상황에 맞는 레이어를 순차적으로 로드하게 한다. - 검증(Validation)과 학습(Training)의 분리: MCP가 현재 컴포넌트의 사실관계를 검증(Card, Button, props 반환 등)한다면, 컨텍스트 플러그인은 에이전트에게 디자인 시스템 표준과 미학적 판단(Judgment)을 가르친다.
- 실제 제품 데이터 기반 증거 설계: Indeed 디자인 시스템 팀은 14개 실서비스 코드베이스를 대상으로 Sourcegraph MCP 감사를 실행하여 6개 간격 토큰과 4개 글로벌 레이아웃 패턴을 도출하고 이를 공간적 리듬(Spatial Rhythm)과 구성 레시피(Composition Recipes) 레이어의 토대로 삼았다.
상세
1. 6개 지식 레이어 구성
- Foundations: 기초 토큰, 스타일 제약 (타이포그래피 스케일, 테두리 둥글기 등)
- Spatial rhythm: 간격 규칙, 공간 구성 (화면 여백 배치, 내부 간격 토큰 규격)
- Composition recipes: 컴포넌트 조립법, 기본 구성 방식 (테두리 두께 및 정렬 방향 등)
- Implementation: 실제 구현 가이드 (React 등 프론트엔드 프레임워크 코드 템플릿)
- Quality and taste: 브랜드 본연의 감각, 금지 규정 (사용이 금지된 스타일 패턴)
- MCP definitions: 실시간 API 컴포넌트 명세 호출
2. 작업 상황별 로딩 흐름
AI 클라이언트(예: Anthropic Claude Code, Cursor)는 작업 상황에 따라 다음과 같이 로딩 흐름을 분기하여 토큰 낭비를 차단하고 일관성을 유지한다.
.tsx/.ts파일이 열려 있을 때: Foundations 항상 주입- 코드를 검토하거나 구성할 때: Quality and taste 주입
- 직접 소스 코드를 생성/수정할 때: Implementation 주입
- 컴포넌트를 조립할 때: Composition recipes 주입
- 미세한 여백과 간격을 조율할 때: Spatial rhythm 주입
- 개별 컴포넌트 규격에 대한 명확한 질문 시: 실시간 디자인 시스템 MCP 호출
3. 이식성 및 패키징 (Claude Code vs Cursor 디렉토리 구조)
양 클라이언트가 플러그인 폴더를 파싱하는 방식이 다르기 때문에, 호환 가능한 영역(skills/<skill>/SKILL.md, agents/*.md, references/)을 공유하도록 결합하여 하나의 동일 플러그인이 두 환경 모두에서 매끄럽게 구동되도록 설계한다.
Anthropic / Claude Code Cursor
─────────────────────── ───────────────────────
plugin/ cursor/
├── plugin.json ├── .cursor-plugin/
├── .mcp.json │ └── plugin.json
├── README.md ├── README.md
├── agents/ ├── agents/
├── assets/ ├── references/
├── references/ ├── rules/
│ └── foundations/ │ └── foundations/
└── skills/ ├── mcp.json
└── skills/4. 아키텍처 경계 분리 (3개 경량 플러그인의 연합)
디자인 시스템 플러그인이 모든 컨텍스트를 담아 무거워지는 것을 방지하기 위해 다음 두 레이어는 의도적으로 글로벌 플러그인에서 제외하고 별도 플러그인으로 격리한다.
- 글로벌 디자인 시스템 플러그인: 모든 제품 화면에 공통으로 적용되는 보편적인 기초 기준(Foundations, Spacing 등)에만 집중한다.
- 레시피 플러그인 (Recipe Layer): 에러 표시가 있는 폼, 빈 화면(Empty State), 검색 및 필터링 패턴 등 비즈니스 서비스 맥락이 섞인 UX 레시피북을 관리한다.
- 버티컬 플러그인 (Vertical Layers): 구직자용, 기업용, 수익화 화면 등 특정 도메인 특화 UX 패턴을 격리하여 사업부별 고유 컨벤션을 유지한다.
- 결과: 하나의 무거운 플러그인이 아닌, 세 개의 가벼운 플러그인이 연합하여 단일 LLM 컨텍스트를 완성하는 마이크로 서비스식 아키텍처를 지향한다.
예시
1. Indeed의 디자인 시스템 규모 및 감사 지표
Indeed의 디자인 시스템은 구직자 및 고용주 플랫폼 전반에서 2,000명이 넘는 R&D 디자이너와 엔지니어가 사용하고 있다. 디자인 시스템 팀은 14개 실서비스 코드베이스를 대상으로 Sourcegraph MCP 감사를 실행하여, 총 1,697개 파일에서 6,147건의 간격 토큰 사용 사례를 분석했다. 이를 통해 디자이너의 주관적 추측을 배제한 6개 핵심 간격 토큰과 4개 글로벌 레시피를 도출했다.
2. Keith Weston 디자이너의 프로토타입 감사 및 발견된 결함
프로토타입 샘플을 감사한 결과, 에이전트가 다음과 같은 유형의 주요 결함을 발생시키는 사각지대를 발견했다.
- 정의된 스케일을 따르지 않은 타이포그래피 계층 구조 붕괴
- 화면(surfaces) 전반에 걸쳐 미세하게 다르고 일관성 없는 텍스트 간격
- 엉뚱한 화면이나 요소에 잘못 적용된 컬러 토큰
- 아이콘 컨벤션을 어기고 아이콘 자리에 배치된 이모지
3. 캘리브레이션 테스트를 통한 디자인 가이드라인 튜닝
플러그인 구동 테스트 시 가상 화면에서 활성화된 카드(Active cards)의 왼쪽 테두리 강조선(Left-border accent)이 지속적으로 렌더링되는 문제가 발생했다. 원인을 분석한 결과, 해당 스타일은 디자인 시스템상으로 이미 수년 전에 폐기(deprecated)되었으나 사내 공식 가이드라인 문서에 권장 사항으로 잔존해 있었고, LLM은 이를 문자 그대로 신뢰하여 렌더링한 것이었다. 즉시 원본 문서를 수정하고 플러그인의 quality.md에 명확한 금지 규정을 보완한 결과 다음 테스트에서는 의도대로 강조선이 사라졌다.
충돌
- 단일
DESIGN.md주입 vs 점진적 컨텍스트 제공: Stitch나 Lovable 같은 단순 AI 도구는 단 하나의DESIGN.md파일을 통째로 읽어 스타일을 정의하는 단일 주입형 디자인 컨텍스트를 선호하지만, 대규모 엔터프라이즈 환경에서는 토큰 비용 낭비 및 지식의 과밀로 인한 모델 혼란이 발생하므로 점진적 컨텍스트 제공 플러그인 구조가 우세하다.