안녕하세요, 여의도에 서식 중인 몽글c입니다.
오늘은 🤖 AI시대, 🎨 디자인시스템의 변화에 대한 이야기를 해보고자 합니다.
생성과 변형의 AI 시대, 디자인 시스템의 중요성은 역설적으로 그 어느 때보다 커지고 있습니다.
그 이유는 무엇일까요?
지난 뉴스레터(7호)에서 언급했듯, AI는 ‘발산(Divergence)'을 증폭시키는 확성기 역할을 합니다. 잘 설계된 프롬프트를 통해 페르소나를 부여하고, 에이전트를 만들어 아이디어를 쏟아냅니다. 창발적인 결과물을 얻기 위해 아이디어 스케치와 와이어프레임을 순식간에 그려내기도 하죠.
하지만 '수렴(Convergence)'의 단계는 어떨까요? 무한히 뻗어 나가는 아이디어를 실무 레벨의 완결성 있는 프로덕트로 바꾸기 위해서는, 뒤섞인 시안이 아닌 '압도적인 일관성'이 필요합니다. 그리고 그 일관성을 강제하는 장치가 바로 디자인 시스템이며, 오늘은 그 이야기를 해보려고 합니다.
AI 시대에는 아이디어를 제품화하기 위해서 'AI가 이해할 수 있는 디자인 시스템'이 반드시 필요합니다. 그렇지 않으면 AI는 일관성보다는 '그럴싸한 아름다운 이미지' 들을 쏟아낼 것이고, 결국 회사 입장에서는 아이디어가 풍부한 이미지지들이긴 하지만, 활용할 수 없는, 드리블(Dribbble)이나 핀터레스트(Pinterest)용 이미지들만 양산하게 될 것입니다.
기계가 이해할 수 있는 디자인 시스템
따라서 지금까지의 디자인 시스템이 '인간 디자이너'를 위한 가이드였다면, 이제는 'AI 에이전트가 해석하기 좋은 언어'로 체질 개선이 필요합니다. 디자인 시스템의 Variable에 정의된 폰트, 컬러, 아이콘 등의 패턴을 AI가 학습하기 쉽게 구조화하는 것이 핵심입니다.
기계가 이해할 수 있는 시스템을 만들기 위해, 구축 전 고민해야 할 3가지 핵심 요소를 우선 정리해보고 디자인 시스템 구축시 사용해볼 만한 AI도구들도 함께 소개해보도록 하겠습니다.
#1. 네이밍 규칙(Naming Convention)
AI에게는 축약어보다 '맥락이 담긴 풀네임'이 훨씬 유리합니다. AI가 직관적으로 용도를 파악할 수 있게 규칙을 점검하세요.
#2. 구조적 계층 정의 (Hierarchy)
기존 시스템과는 다르게 AI가 경로를 찾기 쉽도록 전체 시스템의 위계를 정의해주세요. 디자인 시스템은 Token에서 시작해 Component와 Pattern 등으로 이어지는 계층 구조를 가져야 합니다.전체 시스템은 아래와 같은 경로 구조로 설계하여 AI가 데이터 간의 상관관계를 명확히 파악하게 합니다.
tokens/ (The DNA)
- Primitive Tokens: color.json, size.json 등. 가장 기초적인 값(Raw value)을 정의합니다. (예: blue-500: #007AFF)
- Semantic Tokens: brand-primary.json, text-critical.json 등. 의미와 역할에 기반한 별칭(Alias)을 정의합니다. AI는 이 계층을 통해 디자인의 '의도'를 파악합니다.
components/ (The Atoms)
- button.json, card.json, input.json 등.
- 세부 속성이 토큰을 참조($tokens.color.brand-primary)하도록 구성합니다. AI가 컴포넌트의 스타일을 변경할 때 직접적인 수치 대신 토큰을 수정하도록 유도합니다.
patterns/ (The Molecules & Organisms)
- list.json, form-group.json, navigation.json 등.
- 여러 컴포넌트가 결합된 상태를 정의하며, 레이아웃의 규칙과 데이터 배치 패턴을 AI에게 학습시키는 기준이 됩니다.
assets/ (The Resources)
- icons/, illustrations/ 등.
- 그래픽 리소스를 메타데이터와 함께 관리하여 AI가 상황에 맞는 적절한 시각 요소를 호출할 수 있게 합니다.
#3. 가장 중요한 DESIGN_SYSTEM.md 파일
이 파일은 AI 에이전트가 디자인 결정을 내릴 때 참조하는 '최상위 원칙'입니다. AI가 창의성이라는 명목으로 규칙을 깨지 않도록 엄격한 페르소나와 규칙을 설정해야 합니다.
[필수 포함 프롬프트 구조 예]
- Role & Core Rules: "너는 디자인 시스템 기반의 UI 생성기다. 창의성보다 일관성을 우선하며, 임의의 UI나 스타일을 절대 생성하지 마라."
- Workflow (MANDATORY): "UI 생성 시 반드시 **[의도 파악 → 패턴 선택 → 컴포넌트 식별 → 토큰 및 아이콘 적용]**의 순서를 지켜라. 패턴 없이 레이아웃을 생성하지 말아라."
- Style & State Rules: "의미가 부여된 시맨틱 토큰(e.g. body-sm)만 사용하고, 로딩(Loading)·에러(Error)·결과 없음(Empty) 상태에 대한 패턴을 반드시 포함하라."
- When Unclear: "요구사항이 불명확할 경우 추측하지 말고 질문하거나, 가장 유사한 패턴을 제안하라."
디자인 시스템 구축 시 참고할만한 AI 도구들
지금까지 디자인시스템을 구축하기 전에 반드시 알아두어야 할 요소들에 대해서 살펴보았습니다. 이번에는 디자인 시스템을 만드는데 활용해볼만한 AI도구들에 대해 소개를 해보도록 할게요.
하루가 다르게 변화가 있는 지금의 AI시대에 다양한 시행착오들을 거쳐서 소개드리는 만큼 이 글을 읽으시는 분들의 시간을 아껴드릴 수 있을거라 생각합니다.
#1. Google Stitch
https://stitch.withgoogle.com/
Google Stitch는 최근 업데이트를 통해 design.md 파일을 별도로 제공하기 시작했습니다. 기존 서비스의 디자인 시스템을 참고하거나, 초안이 없는 상태에서 일관성을 확보할 때 훌륭한 선택지입니다. 스크린샷을 첨부하고 프롬프트를 넣어 디자인 가이드를 즉시 추출해 보세요. (우측 Design System 메뉴명을 선택해 확인 가능합니다)
#2. Claude Design
등장한지 얼마 안되었지만 클로드라 믿고 갈 수 있을 것 같은 느낌적느낌.
Claude Design 페이지에 들어가 우측패널 상단에 design system 탭을 통해 접근가능합니다.
다양한 방법들이 있지만, 클로드 디자인의 경우 피그마에 만들어져 있는 디자인시스템을 fig파일로 다운로드 후 클로드 디자인에 업로드가 가능합니다.
사실 Figma 내 디자인시스템을 토큰화 하고 컴포넌트, 패턴화를 하는 것 자체가 번거로운 일일텐데, 클로드 디자인을 통해서 많은 부분 자동화를 해둘 수 있다고 생각합니다.
하지만 fig 디자인파일을 업로드해둔 후 재확인을 해보면, 여전히 기존 디자인 시스템에서 놓치는 영역들이 존재합니다. 다시 이야기하면, Figma 내 요소를 토큰화하고 컴포넌트화하는 과정을 자동화해주지만, 여전히 코드화 과정에서 누락되는 영역이 있으므로 꼼꼼한 사후 검수가 필요해보입니다. (예: 시스템 상 100개 이상의 아이콘이 존재하는데, 실제로 인식된 아이콘들은 몇 개 되지 않은 경우도 존재)
#3. Claude Code
이미 디자인 시스템이 잘 구조화가 되어있다면 Claude Code가 가장 확실한 방법입니다. Figma의 Variables를 JSON으로 변환해주는 플러그인(variables2json)과 함께 사용하면 시너지가 극대화됩니다.
클로드 코드에 디자인 시스템 구성을 위한 테스트 프롬프트를 아래와 같이 입력해보자.
(우선 다운로드한 variables.json파일을 claude code에 첨부 필요)
첨부한 variables.json을 분석해서 디자인 시스템을 만들어줘. 업로드한 JSON의 Schemes를 참조해 Tailwind v4 CSS 변수를 만들고, 이를 사용하는 React 컴포넌트 구조를 잡아줘. 이 시스템을 네가 앞으로 어떻게 참조해야 할지 CLAUDE.md에 규칙을 정의해줘.
마치며: 디자인 시스템, AI 시대를 가동하는 가장 강력한 ‘핵심 엔진’
결국 AI 시대의 디자인 시스템은 단순히 디자인 가이드를 모아놓은 문서를 넘어, 전체 프로덕트 프로세스를 근본적으로 바꾸고 생산성을 폭발시키는 가장 강력한 핵심 엔진이 됩니다. 이 엔진이 정교하게 설계되어야만 AI는 비로소 '그럴싸한 이미지'를 만드는 단계를 넘어, 실제 디자인 실무에서 즉시 투입 가능한 '프로덕트'를 만들어낼 수 있습니다.
성공적으로 엔진을 사용하기 위해 우리가 준비해야 할 세 가지 부품은 명확합니다.
- 시맨틱한 네이밍: AI가 디자인의 맥락과 용도를 즉각적으로 파악하게 합니다.
- 계층 구조: 데이터 간의 상관관계를 정의해 AI가 시스템의 위계를 이해하게 합니다.
- 프롬프트 가이드(md): AI가 창의성이라는 명목으로 규칙을 깨지 않도록 제어하는 최상위 프로토콜입니다.
이 세 가지가 맞물려 돌아갈 때, 디자인 시스템은 단순한 라이브러리를 넘어 프로덕트 생산의 출발점이 됩니다. 화려한 시안 한 장보다 견고한 시스템이 훨씬 더 큰 파괴력을 발휘하는 시대입니다. 지금 바로 여러분의 피그마 변수와 토큰을 '기계가 이해할 수 있는 언어'로 재배치하여, AI라는 강력한 엔진으로 활용해보시기 바랍니다.
📮 다음 호 예고
[13호] 0→1 서비스에서 오픈보다 운영이 더 중요한 이유
새로운 서비스를 만들 때는 보통 ‘오픈’ 자체가 가장 큰 목표가 됩니다. 하지만 실제로는 오픈 이후부터 더 많은 문제가 시작되곤 합니다. 기능은 열렸지만 운영은 불안정하고, 서비스는 시작됐지만 구조는 아직 버티지 못하는 상태 말입니다.다음 글에서는 왜 0→1 서비스에서 오픈보다 운영이 더 중요해지는지, 그리고 PM이 무엇부터 구조화해야 하는지 이야기해보려 합니다.
✉️ 다음 호가 궁금하신 분들은 아래 [구독하기] 버튼을 눌러주세요. 🙂
의견을 남겨주세요