AI 시대의 디자인 시스템 2.0: 토큰, 컴포넌트, 그리고 AI가 이해하는 설계 언어

2024년부터 2025년 사이, 전 세계 주요 기술 회사들은 디자인 시스템의 근본적인 변화를 경험했습니다. 더 이상 디자인 시스템은 단순히 인간 설계자와 개발자 간의 공유 언어가 아닙니다. 이제 AI 모델들이 이해하고 해석할 수 있는 구조화된 데이터 형식이 되어야 합니다. Google, Figma, Adobe 같은 대형 기술 회사들이 적극적으로 추진 중인 '디자인 토큰' 기반의 차세대 디자인 시스템은, 인공지능 시대에 디자인 언어의 패러다임을 완전히 전환시키고 있습니다.

전통적인 디자인 시스템은 색상, 타이포그래피, 간격 규칙을 Figma 파일이나 문서화된 가이드라인으로 관리해왔습니다. 하지만 이러한 방식은 근본적인 한계가 있습니다. 첫째, 정보의 일관성을 유지하기 어렵고, 둘째 AI 도구가 이 정보를 자동으로 이해하고 적용하기 어렵습니다. 세 번째로, 디자인 결정의 의도와 컨텍스트가 손실되기 쉽습니다. 이런 문제들이 디자인 시스템 2.0으로의 전환을 촉발하게 되었습니다.

디자인 토큰: 구조화된 설계 원자 단위

디자인 토큰(Design Token)은 디자인 결정을 가장 원자적인 수준으로 분해하고 이를 구조화된 데이터로 표현하는 개념입니다. W3C 디자인 토큰 커뮤니티 그룹은 디자인 토큰을 '설계 결정의 재사용 가능한 단위로, 하드코딩된 값 대신 변수로 저장된 설계 선택사항'으로 정의했습니다.

예를 들어, 기존 방식에서는 '버튼의 배경색은 #007AFF'라고 문서화했습니다. 하지만 디자인 토큰 방식에서는 이를 다음과 같이 구조화합니다:

color.primary.interactive = {
light: #007AFF,
dark: #0A84FF,
highContrast: #0051D5
}

이러한 토큰 기반 구조는 여러 이점을 제공합니다. 첫째, AI 모델이 색상 선택의 의도를 이해할 수 있습니다 ('primary', 'interactive'라는 시맨틱). 둘째, 다크 모드나 고대비 모드 같은 변형을 체계적으로 관리할 수 있습니다. 셋째, Figma, Framer, Storybook 등 다양한 도구로 자동 동기화가 가능합니다. 전통적인 디자인 시스템 vs AI 친화적 토큰 기반 시스템 비교

시맨틱 토큰의 중요성과 다층 구조

디자인 토큰은 단순한 값 저장소가 아닙니다. 진정한 가치는 '시맨틱'에 있습니다. 시맨틱 토큰은 색상이나 크기 같은 기술적 값이 아니라, 그 토큰의 '의도'와 '용도'를 표현합니다.

Figma와 Tokens Studio의 협력으로 개발된 토큰 구조는 다음과 같은 다층 설계를 권장합니다:

1. Global Tokens: 모든 시스템에서 공유되는 기본 값 (예: #007AFF, 16px)
2. Alias Tokens: 기본 값에 대한 별칭 (예: primary, secondary, tertiary)
3. Component Tokens: 특정 컴포넌트에 맞춘 토큰 (예: button.primary.backgroundColor)
4. Semantic Tokens: 상황에 맞는 의도 기반 토큰 (예: interactive.success, feedback.warning)

이러한 다층 구조의 가치는 AI 모델이 '왜 이 색상을 선택했는가'를 이해할 수 있다는 점입니다. Google의 Material Design 3이 '다이나믹 컬러' 개념으로 전환한 것도 이와 같은 맥락입니다. Material Design 3에서는 사용자 시스템 색상을 기반으로 자동으로 색상 팔레트를 생성하는데, 이는 AI 기반 디자인 결정에 근접한 예시입니다.

컴포넌트 설계의 진화: 구성성과 확장성

AI 시대의 컴포넌트는 더 이상 정적인 설계 자산이 아닙니다. 이들은 명확한 인터페이스, 제약 조건, 그리고 조합 규칙을 가져야 합니다. Airbnb가 공개한 'Visx' 라이브러리나 Stripe의 컴포넌트 설계 철학은 이를 잘 보여줍니다.

컴포넌트 설계 시 고려해야 할 AI 친화적 특성은:

1. 명확한 Props 인터페이스: 각 컴포넌트가 어떤 입력을 받을 수 있으며, 각 입력의 목적은 무엇인지 명확히 정의
2. 상태 관리의 명시화: 컴포넌트의 가능한 상태(default, hover, active, disabled, loading 등)를 완전히 정의
3. 조합 규칙의 문서화: 어떤 컴포넌트들을 함께 사용할 수 있고, 그렇게 했을 때의 동작은 무엇인지 명확히
4. 접근성 메타데이터: ARIA 속성, 키보드 내비게이션, 스크린 리더 지원 등을 구조화된 데이터로 표현

IBM의 Carbon Design System이나 Atlassian의 Design System은 이러한 원칙들을 철저히 적용하고 있습니다. 특히 Carbon은 컴포넌트의 각 변형을 명시적으로 정의하고, 모든 상태에 대한 설계 가이드라인을 제공합니다.

AI 도구와의 생태계 통합

디자인 시스템 2.0의 가장 중요한 특징은 AI 도구와의 원활한 통합입니다. 현재 진행 중인 주요 움직임들을 살펴보면:

Figma의 Tokens 플러그인 및 오픈 토큰 형식: Figma는 W3C 표준을 따르는 공개 토큰 형식을 지원하기 시작했습니다. 이는 Figma 내부의 디자인 토큰이 다른 도구와 자동으로 동기화될 수 있다는 의미입니다. 예를 들어, Figma에서 색상 토큰을 수정하면, 연결된 코드베이스에서도 자동으로 업데이트됩니다.

GitHub의 Repository를 통한 버전 관리: 많은 기업들이 디자인 토큰을 Git 저장소에서 관리하기 시작했습니다. Spotify, Netflix 같은 회사들은 토큰을 코드처럼 버전 관리하고, CI/CD 파이프라인에 포함시킵니다. 이렇게 하면 디자인 변경의 영향을 코드 수준에서 추적할 수 있습니다.

AI 생성 도구와의 연동: Midjourney나 DALL-E 같은 생성형 AI는 아직 고도의 '톤 일관성'을 유지하며 생성하기 어렵습니다. 하지만 디자인 토큰으로 색상, 타이포그래피, 스타일을 체계화하면, 향후 이러한 도구들과 더욱 정교한 통합이 가능해집니다. Figma에서 공식 발표한 'Figma AI' 기능들도 토큰 기반 구조를 중심으로 설계되고 있습니다.

디자인 토큰의 다층 구조 (Global → Alias → Component → Semantic)

실무 사례: Stripe의 토큰 기반 설계 시스템

Stripe는 2024년 자신의 '설계 언어' 진화 과정을 공개했습니다. Stripe의 디자인 시스템은 수천 개의 상호작용하는 컴포넌트를 관리해야 합니다. 이를 위해 Stripe는 다음과 같은 접근을 취했습니다:

첫째, 모든 설계 결정을 '토큰'으로 표현했습니다. Stripe의 토큰 라이브러리는 공개 NPM 패키지로 배포되며, 버전별로 관리됩니다. 둘째, 각 토큰에 메타데이터를 추가했습니다. 예를 들어, 색상 토큰에는 WCAG 대비율, 사용 사례, 대체 색상 등의 정보가 포함됩니다. 셋째, 토큰 변경이 코드에 자동 반영되는 CI/CD 파이프라인을 구축했습니다.

Stripe의 이러한 접근은 결과적으로 디자인과 개발 간의 '일관성 유지 비용'을 70% 이상 감소시켰으며, AI 기반 코드 생성 도구(예: GitHub Copilot)가 Stripe 설계 언어를 더욱 정확히 따르도록 할 수 있게 했습니다.

AI 모델이 선호하는 토큰 포맷과 메타데이터

최근 AI 모델들의 학습 방식을 보면, 특정한 포맷의 데이터에서 더 나은 성능을 보입니다. OpenAI, Anthropic, Google의 AI 모델들이 가장 잘 이해하고 처리할 수 있는 토큰 포맷은:

1. JSON 포맷: 구조화된 데이터를 명확히 표현하고, 프로그래밍 언어들이 쉽게 파싱할 수 있습니다.
2. 명시적인 네이밍 컨벤션: camelCase, kebab-case, snake_case 중 하나를 일관되게 사용
3. 포괄적인 설명 텍스트: 단순 이름뿐 아니라 '왜 이 토큰이 필요한가'를 설명하는 description 필드
4. 연관성 메타데이터: 각 토큰이 어떤 컴포넌트, 어떤 상황에서 사용되는지 명시
5. 범주 분류: color, typography, spacing, shadow 같은 명확한 카테고리 분류

Vercel의 Tailwind CSS나 Framer의 디자인 토큰 시스템은 이런 AI 친화적 포맷을 이미 채택했습니다. 특히 Tailwind CSS의 'utility-first' 철학은 AI 모델이 클래스명으로부터 시각적 결과를 유추할 수 있도록 설계되었습니다.

문제점과 현재의 과제

물론 이 모든 것이 완벽하지는 않습니다. 현재 디자인 시스템 2.0 도입 과정에서 마주치는 주요 과제들은:

도구 간 호환성 문제: Figma, Sketch, Adobe XD 등 다양한 도구들이 토큰 포맷을 조금씩 다르게 해석합니다. 표준화가 진행 중이지만, 실무에서는 여전히 수동 작업이 필요합니다.

레거시 시스템과의 통합: 기존의 수년간 관리된 디자인 가이드라인을 토큰 기반 구조로 마이그레이션하는 것은 매우 복잡합니다. 많은 기업들이 이 과정에서 몇 개월에서 1년 이상의 시간을 소비합니다.

조직 문화의 변화: 디자이너들이 타이핑을 통한 직접 편집 대신 토큰 선택을 통한 간접 편집으로 전환하는 것은 업무 방식의 근본적인 변화입니다.

에디터 노트: AI 시대의 설계 전략

FRAMEOUT은 지난 2년간 수십 개 기업의 디자인 시스템 현대화 프로젝트를 지원했습니다. 우리의 관찰에 따르면, AI 시대에 성공하는 디자인 시스템은 다음과 같은 특징을 갖춥니다:

첫째, '점진적 마이그레이션'을 선택합니다. 기존 시스템을 완전히 버리고 처음부터 시작하는 대신, 새로운 컴포넌트부터 토큰 기반으로 설계하고, 기존 컴포넌트는 단계적으로 전환합니다.

둘째, '도구 선택보다는 원칙'을 우선시합니다. Figma든 Sketch든 어떤 도구를 선택하든, W3C 디자인 토큰 표준과 명확한 시맨틱 구조를 따릅니다. 도구는 변할 수 있지만, 원칙은 남아야 하기 때문입니다.

셋째, 'AI 도구 사용법'을 팀 내 필수 역량으로 정의합니다. 더 이상 디자인 시스템을 '문서'로 보지 않고, '자산'으로 봅니다. 이 자산을 AI 도구가 활용할 수 있도록 설계하고, 디자이너들은 AI 도구를 활용하는 방법을 배워야 합니다.

실행 가능한 다음 단계

만약 조직이 지금 디자인 시스템 2.0으로의 전환을 고려한다면, 다음과 같은 순서로 접근할 것을 권장합니다:

1단계: 토큰 인벤토리 만들기 - 현재 설계 시스템에서 사용되는 모든 색상, 타이포그래피, 간격 규칙 등을 나열합니다. 이는 JSON이나 CSV 형식으로도 충분합니다.

2단계: 시맨틱 레이어 추가 - 기술적 값 위에 시맨틱 이름을 부여합니다. 예: 'color.primary.interactive.light' = '#007AFF'

3단계: 도구 연결 - Tokens Studio 같은 플러그인을 사용하여 Figma와 코드를 연결합니다.

4단계: AI 도구 실험 - ChatGPT, Claude, 또는 GitHub Copilot 같은 AI 도구에 토큰 구조를 이해시키고, 코드 생성을 자동화합니다.

5단계: 지속적 개선 - 매월 토큰 사용 데이터를 분석하고, 불필요한 토큰은 제거하고, 누락된 토큰은 추가합니다.

Where AI Drives UX, FRAMEOUT