디자인 시스템을 LLM에 노출하세요
1. 왜 LLM은 디자인 시스템을 자꾸 깨뜨릴까
AI 코딩 에이전트는 처음엔 꽤 그럴듯한 UI를 만들어내지만, 세션이 반복될수록 디자인이 조금씩 어긋납니다.
- 이유는 LLM이 디자인 시스템을 “이해”한다기보다 매번 그럴듯한 값을 추측하기 때문입니다.
- 카드 패딩은 16px, 다른 곳은 12px
- 링크 컬러는 비슷하지만 다른 블루
- 버튼 radius도 화면마다 조금씩 다름
- 하나하나는 크게 틀려 보이지 않지만, 수백 개의 작은 추측이 쌓이면 결과물은 점점 “묘하게 다른 제품”처럼 보입니다.
- 더 큰 문제는 새 세션이 시작될 때마다 이전 판단을 기억하지 못한다는 점입니다.
2. 해결책은 “LLM이 읽을 수 있는 디자인 시스템”
핵심은 AI에게 자유롭게 추측하게 두지 않고, 매번 참고할 수 있는 닫힌 규칙 세트를 제공하는 것입니다.
- 원문은 이를 세 가지 레이어로 정리합니다.
- Spec files: 컴포넌트 사용법, 상태, 예외, 패턴을 구조화한 마크다운 문서
- Closed token layer: 색상, 간격, 타이포그래피, radius 등을 `tokens.css` 변수로만 사용하게 하는 구조
- Audit script: AI가 하드코딩 값을 쓰면 CI에서 잡아내는 검사 스크립트
- 즉, AI가 “어떤 파란색을 쓸까?”를 고민하게 하는 대신 `var(--color-link)`를 찾아 쓰게 만드는 방식입니다.
3. 실무 적용은 6단계로 진행됩니다
이 방식은 거창한 재설계라기보다, 기존 프로젝트를 LLM 친화적으로 정리하는 작업에 가깝습니다.
- 먼저 CSS/SCSS 파일에서 하드코딩된 색상, 간격, 폰트 크기, radius 등을 모두 스캔합니다.
- 그다음 `tokens.css`를 만들고, 상위 디자인 시스템 토큰 → 프로젝트 alias → 실제 컴포넌트 사용으로 이어지는 3단계 구조를 만듭니다.
- `specs/` 폴더에는 foundations, tokens, components, patterns 문서를 나눠 작성합니다.
- `token-audit.js` 같은 검사 스크립트를 연결해 raw value가 들어오면 실패하도록 만듭니다.
- 마지막으로 `CLAUDE.md`나 `.cursorrules`에 “UI 코드를 수정하기 전 관련 spec을 읽고, tokens.css만 사용하고, 커밋 전 audit을 통과하라”는 지침을 넣습니다.
4. 좋은 디자인 시스템은 이제 사람만 읽지 않습니다
원문에서 흥미로운 지점은 디자인 시스템을 더 이상 사람용 문서나 Figma 라이브러리로만 보지 않는다는 점입니다.
- AI 시대의 디자인 시스템은 컴포넌트 라이브러리이자, 모델이 매 세션 참조하는 실행 규격이 됩니다.
- 문서가 빠져 있으면 LLM은 추측하고, 추측이 많아지면 제품의 시각적 일관성은 무너집니다.
- 반대로 spec, token, audit이 연결되면 1번째 AI 세션과 10번째 AI 세션의 결과물이 같은 품질을 유지할 수 있습니다.
