LabHub

블로그

디자인 시스템·토큰 2025 완전 정복: Radix·shadcn/ui·Chakra·Tamagui·Park UI·Ark UI·DaisyUI 비교, W3C Design Tokens 표준, Figma Variables·Tokens Studio 연동, 컴포넌트 API 설계, 접근성, 한국 대기업 사례 — Season 6 Ep 2

2026-04-15 · 18 분 읽기 · #design-system#design-tokens#radix#shadcn-ui#chakra#tamagui#ark-ui#park-ui#daisyui#figma-variables#tokens-studio#w3c-design-tokens#accessibility

한국어English日本語

프롤로그 · 디자인 시스템은 CSS가 아니다

2020년경부터 모든 조직이 "디자인 시스템 구축 프로젝트"를 시작했다. 2025년 현재, 성공한 시스템과 실패한 시스템이 분명히 갈린다.

흔한 오해 3가지:

  1. "디자인 시스템 = 컴포넌트 라이브러리" (X)
  2. "디자인 시스템 = 디자인 팀의 일" (X)
  3. "디자인 시스템 = Figma 파일" (X)

진실:

디자인 시스템 = 토큰 + 컴포넌트 + 패턴 + 문서 + 거버넌스. 그리고 이걸 Figma·Code·Storybook에서 동일하게 표현하는 시스템.

2024-2025년은 Figma Variables와 W3C Design Tokens Community Group 표준이 자리잡으며 "Design-to-Code 연결이 드디어 실용화" 된 해였다. 이번 글은 그 지형도다.

1장 · 디자인 시스템의 5층 구조

성숙한 디자인 시스템은 5층 구조.

Layer 1: Primitive Tokens (원자 토큰)

Layer 2: Semantic Tokens (의미 토큰)

Layer 3: Component Tokens

Layer 4: Components (컴포넌트)

Layer 5: Patterns (패턴)

왜 3단계 토큰?

Primitive만 쓰면

Semantic을 거치면

2장 · 2025년 주요 컴포넌트 라이브러리 지형

(1) Radix UI (Primitives)

(2) shadcn/ui

(3) Chakra UI

(4) Tamagui

(5) Park UI (Cva기반)

(6) Ark UI

(7) DaisyUI

(8) Mantine

(9) HeroUI (구 NextUI)

(10) 엔터프라이즈: Ant Design, Material UI (MUI), Fluent UI

종합 비교표

라이브러리스타일접근성커스터마이징생태계학습
Radix PrimitivesHeadless★★★★★★★★★★★★★★중
shadcn/uiTailwind★★★★★★★★★★★★★★★낮
ChakraStyled★★★★★★★★★★★★낮
TamaguiStyled(cross)★★★★★★★★★★★중~높
Ark UIHeadless★★★★★★★★★★★★중
DaisyUIStyled(CSS)★★★★★★★★★★낮
MantineStyled★★★★★★★★★★★★낮
MUIStyled★★★★★★★★★★★중

3장 · Headless vs Styled — 무엇을 선택할까

Headless (Radix·Ark·React Aria)

Styled (Chakra·MUI·Ant·Mantine)

Hybrid (shadcn/ui·DaisyUI)

선택 기준

Headless가 맞는 경우

Styled가 맞는 경우

Hybrid(shadcn)가 맞는 경우

4장 · W3C Design Tokens 표준

2024-2025년 W3C Design Tokens Community Group(DTCG) 의 표준 포맷이 자리잡았다.

표준 포맷 (DTCG 2024)

{
  "color": {
    "brand": {
      "primary": {
        "$value": "#0066ff",
        "$type": "color",
        "$description": "Main brand color"
      }
    }
  }
}

핵심 특징

주요 Type

Figma Variables (2023-2024)

연동 도구

(1) Tokens Studio for Figma

(2) Specify

(3) Style Dictionary (Amazon)

(4) Supernova

실전 워크플로우

Figma Variables / Tokens Studio
         ↓ push
    GitHub (tokens/*.json)
         ↓ CI
    Style Dictionary
         ↓ build
[web.css, ios.swift, android.xml]
         ↓ publish
    NPM · CocoaPods · Maven

5장 · 컴포넌트 API 설계 원칙

라이브러리의 가치를 결정하는 것은 API 설계. 쓰기 좋으면 정착, 어려우면 외면.

5가지 원칙

(1) Composition over Props

(2) Controlled + Uncontrolled 둘 다

(3) asChild 패턴 (Radix)

(4) Polymorphic as prop (단, 타입 복잡)

(5) Variant 패턴

const button = cva('base-classes', {
  variants: {
    size: { sm: '...', md: '...', lg: '...' },
    variant: { primary: '...', ghost: '...' },
  },
});

나쁜 신호

6장 · Theming과 Dark Mode

2025년 표준 접근

  1. Semantic Tokens로 색 추상화 (surface, text, border)
  2. CSS Variables 기반 테마 런타임 전환
  3. prefers-color-scheme 미디어 쿼리 + 사용자 선택 저장
  4. SSR 깜빡임 방지: localStorage 값을 서버에서 읽거나 initial HTML에 클래스 삽입

구현 예 (shadcn/ui 기본)

'use client';
import { ThemeProvider } from 'next-themes';

export default function Root({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system">
      {children}
    </ThemeProvider>
  );
}

:root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; }
.dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; }

색의 세분화 (2024-2025)

7장 · 접근성(Accessibility) — 기본값 철학

"접근성은 추가 기능이 아니라 기본값이다."

WCAG 2.2 (2023) 핵심 변화

디자인 시스템 기본값

주요 도구

법적 요구

8장 · 모바일·크로스플랫폼 디자인 시스템

웹·모바일 공존 전략

(1) 분리 운영

(2) React Native 공유

(3) Flutter

2024-2025 트렌드

9장 · 한국 대기업 디자인 시스템 사례

토스 (TDS / Toss Design System)

네이버 (NAVER Design System, NaverNow)

카카오 (Kakao Design Language)

쿠팡 (Coupang Design System)

라인 (LINE Design System, LDS)

배달의민족 (Woowa Design System)

공통 패턴

10장 · 팀 규모별 도입 전략

1-3인 (솔로·초기 스타트업)

10-30인 (Series A-B)

50-200인 (Series C+)

200-1500인 (대기업)

공통 실패 패턴

11장 · 실전 · "shadcn으로 사내 디자인 시스템 시작하기" 90일

Day 1-14: 토큰 정의

Day 15-30: 기초 컴포넌트

Day 31-45: 패턴

Day 46-60: 거버넌스

Day 61-75: 접근성

Day 76-90: 확산·교육

12장 · 다음 글 예고 — Season 6 Ep 3: "AI-Native UI와 Generative UX"

디자인 시스템이 있으면 다음은 AI가 UI를 만드는 시대. Ep 3은 AI-native UI 패턴.

"AI가 응답을 생성하는 동안, 사용자는 무엇을 보는가?"

다음 글에서 만나자.

에필로그 · 체크리스트 12

  1. 디자인 시스템이 토큰·컴포넌트·패턴·문서·거버넌스 5층을 갖췄는가?
  2. Primitive + Semantic 토큰이 분리되어 있는가?
  3. Figma ↔ Code 동기화 파이프라인이 있는가?
  4. 컴포넌트가 Composition·Controlled·Variant 패턴을 일관되게 쓰는가?
  5. Dark Mode가 테마 토큰만 교체로 자동 전환되는가?
  6. 접근성(WCAG 2.2) 기본값이 내장되어 있는가?
  7. Storybook·문서 사이트가 최신 상태인가?
  8. DTCG 포맷으로 토큰이 저장되는가?
  9. 기여 가이드·리뷰 기준이 문서화되어 있는가?
  10. 기존 UI → 새 DS로 마이그레이션 계획이 있는가?
  11. 디자인 시스템이 실제 제품에 80%+ 사용되는가?
  12. 유지보수 담당이 명확한가?

"좋은 디자인 시스템은 보이지 않는다. 제품이 '당연히 이래야 한다'고 느껴지면, 시스템이 잘 작동하는 것이다."

— Season 6 Ep 2, Fin.

원문 보기: https://www.youngju.dev/blog/culture/2026-04-15-design-system-tokens-2025-complete-guide-radix-shadcn-chakra-tamagui-ark-tokens-studio-figma-variables-deep-dive-guide-2025

댓글

아직 댓글이 없습니다.

로그인하면 댓글을 쓸 수 있습니다