일관성있는 디자인을 위해 AI활용하기 (1/2)
기존 디자인시스템을 AI로 코드화하고 구조화하기
이전 포스팅에서 'AI 활용하여,디자인시스템 만들기'에 대한 이야기를 해보았다면.
이번 포스팅은 이미 잘 만들어져 있는 디자인시스템 기반으로 AI가 이해할 수 있는 디자인시스템으로 변환하는 이야기를 해보고, 다음 포스팅에서는 이를 활용하여 일관성 디자인을 뽑아내는 내용에 대한 이야기를 해보려고 한다.
순서를 정리해보자면, Figma 이미지 파일에서 시작해서, 기본이 되는 token(컬러, 폰트 등)들을 만들고, component(버튼, 카드 등)에 대한 정의를 한 후, pattern(리스트, 상세 등)에 대한 정의를 하는 것을 필수로 시작하는 것이 좋다.
그리고 claude.md를 통한 각각의 시스템 단위의 내용들을 통제하며 그림을 그려나가면 된다.
각 내용을 도식화 하면 아래와 같다.
Figma
↓
tokens / raw export
↓
components 정의
↓
patterns 정의
↓
CLAUDE.md로 통제
↓
Claude Code 사용
그리고 이를 수행하기 위한 폴더구조는 아래와 같이 구성해볼 수 있겠다.
/design-system
CLAUDE.md
/tokens
color.json
typography.json
...
/components
button.json
card.json
...
/patterns
list.json
form.json
...
/icons
icons.json
/svg
ic_arrow_right_24.svg
...
실습을 해보자.
우선 Google Material Design 3 디자인시스템을 기준으로 코드화를 진행해보자.
#1. 디자인 시스템 Figma파일 확인
아래 Material Design 3 링크로 들어가 구조를 살펴보자.
https://www.figma.com/community/file/1035203688168086460
들어가서 확인을 해보면 좌측 페이지 안에는 Style과 Component들로 구성되어 있다.
Color, Typography 뿐만 아니라, 터치 시 변경되는 Elevation, 기본 Shape등 다양한 Style들이 정리되어 있고, 상단 앱바, 하단 탭바, 버튼, 카드 등의 Component들로 다양하게 구성되어 있다.
#2. Claude에 기본구조 만들기
AI(claude)가 디자인시스템을 잘 이해하기 위해서 아래와 같이 기본구조를 먼저 만들어둘 필요가 있다.
우선 필요한 구조는 Node.js, Typescript, 그리고 Tailwind css.
클로드에게 우선 이렇게 이야기해보자.
지금부터 디자인 시스템을 코드화해서 만들려고해. Next.js 16, TypeScript, Tailwind CSS v4 기준으로 프로젝트 초기 세팅해주고, 디자인시스템을 위한 tokens, components, pattern, icons 폴더를 만들어줘.
위 3종 세트가 필요한 이유는 아래와 같다.
이렇게 세팅해두었을 때, 디자인 시스템을 위한 완벽한 초기세팅이 될 수 있다.
Node.js > 디자인 시스템은 '공통 컴포넌트'가 생명. Next.js의 파일 기반 라우팅과 컴포넌트 구조는 Claude가 "어디에 버튼이 있고, 어디에 레이아웃이 있는지"를 파악하는 지도를 제공함. 특히 App Router 구조는 디자인 시스템의 문서화(Storybook 같은 역할)를 프로젝트 내부에 구축하기에 매우 유리.
Typescript > Button에 size 속성이 sm, md, lg만 있다는 것을 코드로 명시(Interface)해두면, Claude가 엉뚱한 값을 입력하는 실수를 원천 봉쇄할 수 있음. 즉, AI에게 "이 가이드라인 밖으로는 나가지 마"라고 제약 사항을 주는 것과 같음 (일반 자바스크립트와 달리 명확한 가이드 제시)
Tailwind CSS > AI-Native 디자인 시스템의 핵심, AI(Claude)는 복잡한 JSON 객체보다 표준 CSS 변수 구조를 훨씬 더 정확하게 이해하고 추론합니다. 피그마의 디자인 토큰을 CSS 변수로 변환해두면, Claude가 별도의 학습 없이도 완벽하게 일치하는 코드를 뱉어낼 수 있다.
디자인 시스템은 리액트로 컴포넌트를 만들고, Next.js라는 튼튼한 뼈대 위에서 돌아가며, Tailwind CSS v4라는 최신 기술로 색칠을 하는 구조라 할 수 있다.
#3. 해당 Design System 토큰화 하기
여기서는 두 가지 케이스로 나누어 볼 수 있다.
1) 디자인 시스템 내 Variables가 체계적으로 잘 정리된 경우
Figma Plugin 중에는 Variables를 Token으로 바꿔주는 플러그인이 존재한다.
Figma > Action 메뉴에서 variables2json 플러그인을 찾아서 다운로드를 하도록 하자.
그리고 만들어진 json파일을 claude에 넣고, 아래와 같은 Prompt를 (한 방에) 넣어보자.
"첨부한 material3_variables.json 을 분석해서 디자인 시스템을 만들어줘.
- Tokens: JSON의 Schemes와 Palettes를 참조해 Tailwind v4 전용 CSS 변수 파일을 만들어줘.
- Components: JSON에 있는 M3/Button, M3/Sys 등의 토큰 값을 사용하는 React 컴포넌트들을 만들어줘. (파일에 없는 구조는 표준 M3 스펙을 따라줘.)
- Icons: /icons/svg 폴더는 일단 비워두되, 아이콘을 쉽게 불러올 수 있는 Icon.tsx 컴포넌트 구조만 잡아줘.
- 이 시스템을 Claude 너 스스로가 앞으로 어떻게 참조해야 할지 CLAUDE.md에 규칙을 정의해줘."
그럼 위에서 이야기한 것과 같이 와 같이 폴더를 만들어주고, 나머지 영역은 Figma 파일을 직접 선택하여 내용을 채워나갈 수 있다.
관련 내용은 아래 내용을 참고해서 이어 진행해보자.
2) 디자인 시스템의 Variables가 존재하지 않거나 체계적이지 않은 경우
이 경우 Variables를 다운로드받아 활용하기 어려울 수 있다.
그런 경우엔 Figma devmode로 진입하여 한땀한땀 section을 선택해서 클로드에 요청해보도록 하자.
Material Design3를 예를 들어보면, 만들어진 디자인시스템의 페이지로 들어가 typography section을 선택한 후, Devmode로 들어가면 오른쪽 패널에 MCP > [Copy example prompt]라는 버튼이 보인다.
이 버튼을 통해 해당 prompt를 복사하고, claude에 아래와 같이 요청한다.
tokens 폴더 안에 지금 넣은 내용기반으로 json파일을 만들어줘.
그럼 아래와 같이 claude code가 각각 디자인시스템 파일을 만들어준다.
이런 식으로 tokens와 components, 그리고 patterns까지 한땀한땀 채워나갈 수 있을 것이다.
마지막으로 icon의 경우 svg로 해당 파일들을 폴더 안에 넣어두고, json파일로 규칙을 설정해두도록 하자.
#4. Design 시스템 가이드 제공하기
이렇게 재료들을 모두 모아두었다면, 결국 필요한 것은 디자인시스템을 통제할 수 있는 가이드일 것이다.
해당 가이드를 하나씩 차근차근 정리해보자.
<claude.md>
다소 상세하게 만들어져 있긴 한데, 상황에 따라 아래 내용을 좀 더 단순화해서 사용해도 무방할 듯 하다.
(디자인 시스템 구조가 꼼꼼하게 만들어져 있지 않으면 workflow에서 madatory로 설정되어 있는 내용들을 따라가기 어려워질 수도 있어보임)
# Role
You are a design system–driven UI generator.
Your goal is to produce consistent, structured UI based strictly on the provided design system.
You must prioritize consistency over creativity.
---
# Core Rules (NON-NEGOTIABLE)
- Do NOT create arbitrary UI
- Do NOT invent new components, styles, or icons
- Always use provided design system files
---
# Design System Usage
You must use:
- Tokens from /foundations/tokens.json
- Typography from /foundations/typography.json
- Spacing from /foundations/spacing.json
- Components from /components
- Patterns from /patterns
- Icons from /icons/icons.json
---
# Workflow (MANDATORY)
You MUST follow this order when generating UI:
1. Select an appropriate pattern from /patterns
2. Identify required components from /components
3. Apply correct variants and slots
4. Apply typography and spacing
5. Apply icons
Do NOT skip steps.
Do NOT generate layout without a pattern.
---
# Pattern Rules
- Always start from a pattern
- Do NOT create layout from scratch
- Follow pattern structure as the base layout
If no suitable pattern exists:
- Suggest a new pattern instead of generating UI freely
---
# Component Rules
- Use only defined components
- Use only allowed variants
- Follow component usage and avoid rules
General constraints:
- Do not overuse primary actions
- Avoid unnecessary component combinations
---
# Style Rules
- Use only semantic typography (e.g., body-sm, heading-lg)
- Do NOT assign raw font values
- Use spacing tokens only (no arbitrary spacing)
- Maintain consistent layout rhythm
---
# Icon Rules
- Use only icons defined in /icons/icons.json
- Follow icon usage context
- Do NOT generate or substitute icons
---
# State Handling
Every UI must include consideration for:
- loading state
- empty state
- error state
Use predefined patterns for these states.
---
# Output Format
You must return structured output including:
1. Selected pattern
2. Layout structure
3. Components used
4. Variant selections
5. Tokens applied
6. Icons used
Avoid vague descriptions.
---
# When Requirements Are Unclear
- Ask for clarification OR
- Use the closest matching pattern
Do NOT guess or invent.
---
# Quality Criteria
The output must be:
- Consistent with the design system
- Structurally clear
- Reusable
- Not overly complex
Avoid:
- Over-design
- Visual noise
- Unnecessary variation
<icons.json>
icons.json파일은 아이콘 사용 시 가이드를 해주는 역할이라고 생각하면 되는데, 아래와 같은 형식기준으로 만들어달라고 claude에 요청하면 알아서 svg 아이콘들을 인식하고 매핑해준다.
{
"icons": [
{
"name": "arrow_right",
"file": "ic_arrow_right_24.svg",
"usage": ["navigation"]
}
]
}
여기까지 디자인시스템을 만들어보는 방법을 살펴보았다.
아직 미흡한 부분도 많고 중간중간 클로드 토큰이 모자라 짬짬이 테스트하느라 최종 UI를 뽑아보지는 못했다.
지금 만들어진 디자인시스템 기반으로 일관성을 지키는 디자인을 하는지에 대해서는 다음 글에 담아보도록 하겠다.
여기까지 오늘의 테스트 기록을 남겨둔다. :)
Reference
머티리얼 디자인 시스템: https://www.figma.com/community/file/1035203688168086460