AI에게 "예쁘게 만들어"라고 하면 보라색이 나온다.
"이 규칙대로 만들어"라고 하면 일관된 디자인이 나온다.
1편에서 AI가 만드는 디자인이 왜 다 비슷한지 해부했다. 해법의 첫 번째 단계는 놀라울 정도로 단순하다. 색상에 이름을 붙이는 것이다.
AI에게 "파란 버튼을 만들어"라고 하면, AI는 #3b82f6이든 #6366f1이든 그때그때 다른 값을 생성한다. 세션이 바뀌면 같은 "파란색"이 미묘하게 달라진다. 이것이 디자인 드리프트의 시작이다. 반면 "primary 색상으로 버튼을 만들어"라고 하고, primary가 --color-primary: #2563eb로 정의되어 있다면, 어떤 세션에서든 동일한 결과가 나온다.
왼쪽은 하드코딩이다. 색상값을 외우지 않는 한, 같은 색을 다시 쓸 수 없다. 오른쪽은 디자인 토큰이다. 이름이 있기 때문에 AI든 인간이든 같은 이름을 참조하면 같은 결과가 나온다. 디자인 토큰은 "디자인 결정의 단일 진실 소스(single source of truth)"다.
이 개념은 2025년 10월, W3C Design Tokens Community Group이 첫 번째 안정 버전(stable version)을 발표하면서 공식 표준이 되었다. 벤더 중립적 포맷으로, 어떤 도구에서든 동일한 디자인 결정을 공유할 수 있다. 하지만 이 표준을 몰라도 괜찮다. 가장 접근하기 쉬운 디자인 토큰은 이미 모든 브라우저가 지원하는 CSS 변수다.
6개의 변수로 전체 페이지의 색상 체계가 정의된다. AI에게 "accent 색상으로 강조해"라고 하면, #c43e2a가 아니라 var(--accent)를 사용한다. 색상이 바뀌어도 변수 하나만 수정하면 전체가 바뀐다. 이것이 디자인 토큰의 핵심이다.
CSS 변수는 어디서든 쓸 수 있지만, Tailwind CSS를 사용하는 프로젝트에서는 더 강력한 도구가 있다. Tailwind v4에서 도입된 @theme 디렉티브다. 이것은 CSS 파일 안에서 직접 디자인 토큰을 정의하는 기능이다. JavaScript 설정 파일(tailwind.config.js)이 더 이상 필요 없다.
@theme에 토큰을 정의하면 Tailwind가 자동으로 유틸리티 클래스를 생성한다. --color-primary를 정의하면 bg-primary, text-primary, border-primary가 즉시 사용 가능해진다. 동시에 브라우저가 CSS 변수로도 노출하므로, 인라인 스타일에서도 var(--color-primary)로 참조할 수 있다.
이것이 왜 중요한가. LLM은 Tailwind 코드를 다른 어떤 스타일링 방식보다 잘 생성한다. GitHub Copilot, Cursor, Claude 어디서든 Tailwind 유틸리티 클래스의 생성 정확도가 가장 높다. @theme으로 토큰을 정의해두면, AI가 생성하는 모든 코드가 자동으로 그 토큰을 참조한다. 디자인 일관성이 구조적으로 보장되는 것이다.
Tailwind를 사용하지 않는 프로젝트도 원리는 동일하다. :root에 CSS 변수를 정의하고, AI에게 "모든 색상은 CSS 변수를 사용할 것"이라고 지시하면 된다. 이 문서 자체가 그렇게 만들어졌다. Tailwind 없이, editorial-base.css의 8개 CSS 변수만으로 전체 디자인 시스템이 작동한다.
CSS 변수로 토큰을 정의했다. 그런데 AI가 그 변수를 사용하게 하려면 어떻게 해야 하는가? 매번 프롬프트에 "CSS 변수를 써"라고 반복하는 건 비효율적이고, 잊기 쉽다. 해법은 AI 규칙 파일이다. 프로젝트에 한 번 정의해두면, 모든 AI 세션에서 자동으로 참조되는 지시서다.
핵심은 이것이다. 어떤 도구를 쓰든, 프로젝트 루트에 디자인 규칙을 마크다운으로 기술하면 AI가 읽는다. Cursor를 쓰면 .cursor/rules/에, Claude Code를 쓰면 CLAUDE.md에, 둘 다 지원하려면 AGENTS.md에 넣으면 된다.
실전 예시를 보자. 이 editorial 프로젝트의 CLAUDE.md에는 다음과 같은 디자인 규칙이 들어 있다.
이 규칙이 CLAUDE.md에 존재하는 것만으로, Claude Code가 이 프로젝트의 모든 HTML을 생성할 때 자동으로 참조한다. "accent 색상을 써"라고 말하지 않아도 var(--accent)를 사용하고, "이모지 넣지 마"라고 말하지 않아도 이모지를 넣지 않는다. 프롬프트 반복이 사라지고, 일관성이 구조적으로 보장된다.
효과는 정량적으로 검증되었다. AI 규칙 파일을 사용하는 프로젝트에서 컨텍스트 전환이 40% 감소하고, 코드 일관성이 65% 향상되었다. 새 팀원이 프로젝트를 클론하는 즉시 동일한 AI 가이드라인이 적용된다는 점도 핵심 이점이다.
디자인 토큰과 AI 규칙 파일을 조합하면, 디자인 시스템의 레이어가 완성된다. 각 레이어가 무엇을 담당하는지 정리하면 이렇다.
--accent: #c43e2a. 브라우저가 직접 해석한다.
이 editorial 프로젝트가 좋은 사례다. CSS 변수 8개, editorial-base.css 하나, CLAUDE.md에 디자인 규칙과 스킬 시스템을 정의해둔 결과, 시리즈 6개 30편 이상의 콘텐츠가 동일한 디자인 언어로 생성되었다. Tailwind를 사용하지 않는 vanilla CSS 프로젝트에서도 토큰 + 규칙 파일만으로 일관성이 유지된다는 증거다.
디자인 토큰은 AI와 인간이
같은 디자인을 보장하는 계약서다.
규칙 파일의 Before/After를 보자. 동일한 프롬프트 "블로그 콘텐츠 페이지를 만들어"를 던졌을 때, 규칙 파일 유무에 따른 차이다.
#6366f1 하드코딩var(--accent) 참조차이는 명확하다. 규칙이 없으면 AI는 학습 데이터의 중앙값을 출력한다. 규칙이 있으면 규칙이 정의한 디자인을 출력한다. 디자인 토큰과 규칙 파일은 AI에게 "네 기본값 대신 이걸 써"라고 말하는 가장 효율적인 방법이다.
다음 편에서는 이 토큰과 규칙을 실제 프로젝트에 어떻게 적용하는지 다룬다. 참조 디자인을 수집하고, Figma MCP로 구조를 추출하고, AI에게 맥락으로 전달하는 워크플로우 전체를 시연한다.
CSS 변수 6개, 규칙 파일 1개. 그것만으로 AI가 만드는 모든 화면이 같은 언어를 말한다.