CSS 프레임워크 & UI 라이브러리 2026 완벽 가이드 - Tailwind v4 · shadcn/ui · Radix UI · Mantine · Chakra · Open Props · UnoCSS · Panda CSS 심층 분석

프롤로그 — CSS는 더 이상 "단순한 스타일"이 아니다

2010년대에 CSS는 "디자인 시안을 픽셀로 옮기는 도구"였다. 2020년대 초, Tailwind가 그 정의를 "유틸리티의 조합"으로 바꿨다. 그리고 2026년, CSS는 다시 한번 모습을 바꿨다.

• Tailwind CSS v4.0(2025년 1월 정식 릴리스)이 Rust 기반 Oxide 엔진을 들고 나타나면서, 빌드 시간이 v3 대비 평균 100배 빨라졌다. CSS-first config(@theme 디렉티브), 네이티브 캐스케이드 레이어, oklch 색공간이 기본이 되었다.
• shadcn/ui는 npm 패키지가 아니라 CLI로 컴포넌트 소스를 복사해 오는 방식을 표준으로 만들었다. Radix UI 프리미티브 + Tailwind 클래스 = 내 코드. 2026년 React 생태계에서 가장 많이 쓰는 컴포넌트 라이브러리다.
• Chakra UI v3는 Ark UI 위에 다시 쓰여졌다. v2의 emotion 런타임 의존을 버리고, Panda CSS 빌드타임으로 옮겼다. RSC와 더 잘 맞는다.
• Mantine 7은 css-in-js를 버리고 CSS Modules + PostCSS로 회귀했다. "런타임 0" 이라는 키워드가 2026년 컴포넌트 라이브러리의 표어가 되었다.
• 네이티브 CSS는 더 이상 약하지 않다. 컨테이너 쿼리 · View Transitions API · 앵커 포지셔닝 · :has() 셀렉터 · @layer · color-mix() · oklch 모두 2026년 Baseline이다.

이 글은 그 풍경 전체를 한 호흡으로 정리한다. 처음 utility class 한 줄을 쓰는 코드부터, 디자인 토큰 · 접근성 프리미티브 · 빌드타임 CSS-in-JS · 멀티 프레임워크 UI 라이브러리까지. 그리고 그 사이에서 "어디서 어떤 도구를 쓸지" 결정하는 매트릭스까지.

1장 · 2026년의 CSS 풍경 — 한 장의 지도

먼저 그림 한 장. 도구를 알기 전에, 도구가 어디에 위치하는지부터 봐야 한다.

[ 디자인 토큰 / 변수 ]
  Open Props · CSS Variables · Tokens Studio
            |
            v
[ CSS 작성 방식 ]
  ┌──────────────┬──────────────┬───────────────┐
  │ Utility-first│ CSS Modules  │ CSS-in-JS     │
  │ (Tailwind)   │ (Mantine 7)  │ (build-time:  │
  │ (UnoCSS)     │ (Pure CSS)   │  Panda·VE)    │
  │              │              │ (runtime:     │
  │              │              │  Emotion·     │
  │              │              │  styled-comp) │
  └──────────────┴──────────────┴───────────────┘
            |
            v
[ 컴포넌트 레이어 ]
  ┌──────────────┬──────────────┬───────────────┐
  │ Unstyled     │ Themed       │ Opinionated   │
  │ Primitives   │ Components   │ Design System │
  │ Radix · Ark  │ shadcn/ui    │ MUI · AntD ·  │
  │ HeadlessUI   │ HeroUI ·     │ Mantine ·     │
  │ Bits · Melt  │ DaisyUI      │ Chakra v3     │
  └──────────────┴──────────────┴───────────────┘
            |
            v
[ 빌드 파이프라인 ]
  PostCSS · Lightning CSS · Vite · Turbopack
            |
            v
        ── 브라우저 ──

이 지도의 어디를 누가 책임지는가가 곧 스택 선택의 기준이 된다.

• 토큰 레이어 — 색 · 간격 · 타이포의 단일 소스. Open Props가 "프레임워크 없는 토큰"의 표준이 되었다.
• CSS 작성 방식 — 유틸리티(Tailwind), 스코프(CSS Modules), 컴파일타임(Panda · VE) 세 길.
• 컴포넌트 레이어 — 스타일 없는 프리미티브(Radix), 카피-페이스트(shadcn), 풀 디자인 시스템(MUI · AntD).
• 빌드 파이프라인 — Lightning CSS가 PostCSS를 빠르게 대체 중이다.

기억할 한 줄: "2026년 CSS 스택은 한 라이브러리가 아니라 네 개의 레이어다."

2장 · Tailwind CSS v4 — Oxide 엔진과 CSS-first 설정

숫자부터. Tailwind는 2026년 5월 기준 npm 주간 다운로드 2,400만 이상, GitHub 스타 85k 이상으로 utility-first CSS의 사실상 표준이다. v4.0(2025년 1월 정식 릴리스)이 무엇을 바꿨는지 한 줄로 요약하면 "Rust 엔진 · CSS-first 설정 · 네이티브 캐스케이드 레이어" 세 가지다.

가장 작은 설정. v3와 비교하면 단순함이 보인다.

/* app/globals.css — v4 식 설정 */
@import "tailwindcss";

@theme {
  --color-brand: oklch(0.7 0.15 250);
  --font-display: "Inter", sans-serif;
  --spacing-4-5: 1.125rem;
}

@layer components {
  .btn-brand {
    @apply rounded-md bg-brand px-4 py-2 text-white;
  }
}

tailwind.config.js가 사라졌다. 모든 설정이 CSS 안에 @theme 디렉티브로 들어간다. JS 파일을 따로 두는 v3 방식도 호환 모드로 동작하지만, 새 프로젝트는 CSS-first가 권장이다.

Oxide 엔진의 효과는 숫자로 명확하다. Tailwind 팀 벤치마크 기준:

• 풀 빌드: v3 대비 3.5배 빠름
• 증분 빌드(점 하나만 바뀐 경우): v3 대비 100배 이상 빠름, 보통 5ms 이하
• 첫 빌드(파일 1만 개 스캔): v3의 1.5초 → v4의 0.1초

여기에 추가로:

• 자동 컨텐츠 검출 — content: [] 설정이 필요 없다. Tailwind가 직접 파일 트리를 스캔한다.
• CSS 변수로 모든 토큰 노출 — var(--color-blue-500) 식으로 런타임에 접근 가능.
• 컨테이너 쿼리 1급 지원 — @container, @sm:, @md: 같은 변종.
• @starting-style · 트랜지션 향상 — 새 CSS API들이 utility로 자연스럽게 들어왔다.

마이그레이션 비용은 작지 않다. npx @tailwindcss/upgrade가 대부분의 변환을 해 주지만, bg-opacity-50 식의 v3 패턴은 bg-blue-500/50 식의 슬래시 표기로 강제 변환되는 등 손이 가는 부분이 있다.

3장 · Tailwind UI / Tailwind Plus — 유료 컴포넌트의 무게

Tailwind 팀이 직접 만드는 유료 컴포넌트 컬렉션이 2025년 후반 "Tailwind UI"에서 **"Tailwind Plus"**로 리브랜딩되었다. 한 번 구입하면 평생 사용 가능한 라이선스 모델은 그대로다.

2026년 기준 구성:

• Tailwind Plus UI Blocks — 500개 이상의 마케팅 · 어플리케이션 · e커머스 블록 (이전 Tailwind UI)
• Tailwind Plus Templates — Spotlight · Studio · Pocket · Salient 등 Next.js · Astro 풀 템플릿
• Tailwind Plus UI Kit — Figma · Sketch · Adobe XD 디자인 키트
• Catalyst — React 컴포넌트 라이브러리 (코드 복사 방식, shadcn 스타일에 가까움)

shadcn/ui가 무료 · 오픈소스로 같은 영역을 점령하면서, Tailwind Plus는 "디자이너 시안 수준의 마감"과 "Tailwind 팀이 직접 만든 일관성" 두 가지로 차별화한다. 팀 단위로 시간을 아낄 수 있다면 가치는 분명하지만, 1인 개발자에게는 shadcn으로 충분한 경우가 많다.

4장 · shadcn/ui — 라이브러리가 아닌 카피-페이스트

shadcn/ui는 2026년 React 생태계에서 가장 중요한 컴포넌트 라이브러리다. 그런데 NPM에 패키지가 없다. 정확히는 shadcn CLI 패키지가 있지만, 컴포넌트 자체는 여러분의 프로젝트로 복사된다.

# 초기화 — components.json 생성
npx shadcn@latest init

# Button 컴포넌트 추가 — components/ui/button.tsx로 복사됨
npx shadcn@latest add button

# 한 번에 여러 개
npx shadcn@latest add dialog dropdown-menu tooltip

복사된 후의 button.tsx는 한 줄도 빠짐없이 여러분의 코드다. 디자인이 바뀌면 그 파일을 직접 수정한다. 의존성 업그레이드 같은 건 없다.

이 모델이 왜 이긴 것일까?

1. 버전 락이 없다 — 라이브러리가 업데이트되어도 깨질 일이 없다. 내 코드니까.
2. 커스터마이즈가 자유롭다 — Tailwind 클래스를 직접 수정하면 끝. 테마 오버라이드의 우회로가 필요 없다.
3. Tree-shaking이 완벽하다 — 안 쓴 컴포넌트는 프로젝트에 아예 없다.
4. 타입스크립트가 1급 시민 — 모든 컴포넌트가 TS로 작성되어 있고, 타입 추론이 완벽하다.
5. Radix UI 위에 있다 — 접근성 · 키보드 인터랙션 · ARIA가 모두 검증되어 있다.

라이선스는 MIT다. Radix UI 의존성도 MIT다. "AGPL 우려"는 잘못된 정보(과거 v0/Vercel 관련 혼동)였다. 상업 프로젝트에서 자유롭게 쓸 수 있다.

블록 카탈로그에 들어간 50개 이상의 풀 페이지 예제는 카드 그리드, 대시보드, 폼, 차트, 사이드바, 로그인 페이지 등을 포함한다. 이걸 그대로 가져와 텍스트만 바꿔도 90%의 어드민 페이지가 만들어진다.

5장 · Radix UI / Radix Themes 3 — 접근성 프리미티브의 표준

Radix UI는 두 갈래로 나뉜다.

• Radix Primitives — 스타일 없는 접근성 컴포넌트(@radix-ui/react-dialog, @radix-ui/react-dropdown-menu 등)
• Radix Themes — 스타일 입힌 컴포넌트 (2025년 12월 v3 릴리스)

shadcn/ui가 Primitives를 위에서 감싸는 형태로 쓰는 동안, Radix Themes 3는 "그냥 쓸 수 있는" 스타일된 컴포넌트를 제공한다. v3의 변경:

• CSS Variables 기반 테마 — 라디우스, 스케일, 컨트라스트를 런타임에 변경 가능.
• 다크모드 1급 지원 — <Theme appearance="dark"> 한 줄.
• 신규 컴포넌트 — Spinner, SegmentedControl, DataList, ColorPicker 등.
• 번들 크기 절감 — v2 대비 약 30% 감소.

Primitives 단독으로 쓸 때의 장점은 명확하다. 키보드 트랩, 포커스 관리, ARIA 역할, 화면 낭독기 호환을 직접 구현하지 않아도 된다. Dialog 하나만 봐도 onOpenChange, modal, defaultOpen, 포커스 트랩, 스크롤 락이 모두 들어 있다. 이걸 처음부터 짠다는 건 한 달짜리 일이다.

// Radix Primitives — 스타일은 직접
import * as Dialog from '@radix-ui/react-dialog'

<Dialog.Root>
  <Dialog.Trigger asChild>
    <button className="bg-blue-500 text-white px-4 py-2 rounded">열기</button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay className="fixed inset-0 bg-black/50" />
    <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg">
      <Dialog.Title>제목</Dialog.Title>
      <Dialog.Description>설명</Dialog.Description>
      <Dialog.Close>닫기</Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

6장 · Mantine 7 — 풀스택 React UI의 한 축

Mantine은 2022년 v5에서 emotion 기반이었다가, v7에서 CSS Modules + PostCSS로 완전히 옮겼다. 2026년 5월 기준 v7.13이 안정 버전이고, 런타임 CSS-in-JS는 완전히 사라졌다.

핵심 가치:

• 120개 이상의 컴포넌트 — Button, Input부터 RichTextEditor, Carousel, DataTable, Spotlight까지.
• @mantine/hooks — 70개 이상의 유틸리티 훅. useDisclosure, useDebouncedValue, useIntersection 등.
• @mantine/form — 강력한 폼 라이브러리. Zod · Yup 통합.
• @mantine/notifications — 토스트 알림 시스템.
• @mantine/modals — 모달 매니저(useState 보일러플레이트 없이 호출).
• @mantine/dates — 날짜 피커, 캘린더.
• @mantine/charts — Recharts 기반 차트 컴포넌트.

shadcn/ui와 비교했을 때 Mantine의 자리:

Mantine은 "필요한 모든 게 한 박스에 있어야 한다"고 생각하는 팀에 맞는다. shadcn은 "기본 블록만 있고 나머지는 직접 짜겠다"는 팀에 맞는다.

7장 · Chakra UI v3 — Ark UI 위에 다시 쓴 라이브러리

Chakra UI는 2024년 말 v3로 큰 리팩터를 단행했다. 가장 큰 변화는:

• Ark UI 위에 컴포넌트 재구축 — 멀티 프레임워크(React · Solid · Vue)에서 동일한 동작 보장.
• Panda CSS 빌드타임으로 스타일 이동 — emotion 런타임 의존 제거.
• 레시피(recipe) 시스템 — 변종(variant)을 타입 안전하게 정의.
• JSX 패턴 — <Stack>, <Grid>, <Wrap> 같은 레이아웃 컴포넌트가 1급.

// Chakra UI v3 — Snippet 예
import { Button, HStack } from '@chakra-ui/react'

<HStack gap="4">
  <Button variant="solid" colorPalette="teal">제출</Button>
  <Button variant="outline">취소</Button>
</HStack>

v2 → v3 마이그레이션은 큰 일이다. colorScheme → colorPalette, theme 객체 구조 변경, Provider 변경 등 거의 모든 컴포넌트 호출이 영향을 받는다. v2의 큰 코드베이스를 가진 팀은 단계적 마이그레이션 가이드를 따라야 한다.

2026년 시점에서 Chakra v3의 자리는 "Mantine과 비슷한 풀 라이브러리, 단 Panda CSS · Ark UI 통합으로 멀티 프레임워크 미래를 열어두고 있는 선택"이다.

8장 · HeadlessUI 2 · Ark UI · Park UI — 프리미티브의 다극화

Radix UI 한 곳에서 끝나지 않는다.

HeadlessUI 2(Tailwind Labs)

• Tailwind 팀 직제작, Tailwind 스타일에 가장 자연스럽게 어울린다.
• React · Vue 지원.
• v2에서 anchor positioning, render prop 개선.
• Radix보다 컴포넌트 수가 적다(Combobox, Dialog, Disclosure, Listbox, Menu, Popover, Switch, Tabs).
• Tailwind만 쓴다면 Radix보다 가볍게 선택할 수 있다.

Ark UI

• Zag.js(상태머신) 위의 멀티 프레임워크 프리미티브 — React · Vue · Solid 한 코드베이스.
• Chakra 팀(Segun Adebayo) 작품.
• 컴포넌트 수가 50개를 넘어 Radix보다 넓다.
• "프레임워크에 묶이지 않은 컴포넌트 로직"을 추구한다면 1순위.

Park UI

• Ark UI 위의 디자인 시스템 — Panda CSS와 통합.
• shadcn처럼 카피-페이스트 모델.
• "Ark UI + Panda CSS + 디자인 토큰"의 통합 경험.

Bits UI · Melt UI(Svelte)

• Svelte 생태계의 Radix 대응.
• Melt UI가 로우레벨 빌더, Bits UI가 그 위에 컴포넌트 API를 얹은 형태.

9장 · Open Props — 프레임워크 없는 토큰

Adam Argyle(Chrome DevRel)이 만든 Open Props는 "모든 CSS 변수가 미리 정의된 토큰 라이브러리"다. 한 줄 import로 전체 디자인 시스템에 쓸 수 있는 변수가 들어온다.

@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";

.card {
  padding: var(--size-4);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: var(--font-size-2);
}

@media (prefers-color-scheme: dark) {
  /* 자동 다크모드 — Open Props normalize가 처리 */
}

장점:

• 프레임워크 무관 — Tailwind와도, CSS Modules와도, vanilla CSS와도 같이 쓴다.
• 잘 설계된 단계 — 색상 18색 × 12단계, 크기 0-15, 라디우스 1-5, 그림자 1-6, 글꼴 크기 00-8 등 일관된 스케일.
• 다크모드 자동화 — normalize.css가 prefers-color-scheme을 처리.
• 점진적 채택 — 일부 토큰만 골라 써도 된다.

2026년 Open Props는 두 가지 갈래로 나뉘어 있다.

• Open Props (CSS) — 원본. CSS 변수 묶음.
• Open Props for Tailwind — Tailwind v4 @theme로 임포트 가능한 변종.

작은 사이트, 라이브러리 데모, 토큰만 빌려오고 싶은 큰 프로젝트에 모두 적합하다.

10장 · UnoCSS — 즉시 온디맨드 아토믹 CSS

UnoCSS는 Anthony Fu(Vue · Vite 코어 멤버)가 만든 아토믹 CSS 엔진이다. 2026년 5월 기준 v0.65가 안정 버전이고, Vue · React · Svelte · Solid 어디서나 동작한다.

핵심 컨셉:

• 프리셋(preset) 기반 — Tailwind 호환, Wind, UnoCSS 기본, attributify, icons 등.
• 즉시 빌드 — JIT보다 빠른 온디맨드 생성.
• icons preset — i-mdi-home 한 클래스로 100k+ 아이콘을 인라인 SVG로.
• inspector 도구 — 어떤 클래스가 어떤 CSS를 만드는지 시각화.

// uno.config.ts
import { defineConfig, presetUno, presetIcons, presetAttributify } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),       // bg="blue-500" 같은 attributify 모드
    presetIcons({ scale: 1.2 }), // i-mdi-home, i-tabler-user 등
  ],
  theme: {
    colors: { brand: '#0ea5e9' },
  },
})

Tailwind v4와 비교:

Vite · Astro · Nuxt 프로젝트에서 UnoCSS가 더 자연스러울 때가 많다. Next.js 13+이면 Tailwind v4가 더 편하다.

11장 · Panda CSS — 빌드타임 CSS-in-JS의 모범

Panda CSS는 Chakra UI 팀이 만든 빌드타임 CSS-in-JS 라이브러리다. emotion · styled-components 같은 런타임 CSS-in-JS의 단점(번들 크기, RSC 비호환)을 해결하면서, 타입 안전한 토큰 · 레시피 · 패턴을 유지한다.

// panda.config.ts
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{ts,tsx}'],
  theme: {
    tokens: {
      colors: {
        brand: { value: 'oklch(0.7 0.15 250)' },
      },
    },
    recipes: {
      button: {
        base: { px: '4', py: '2', rounded: 'md' },
        variants: {
          variant: {
            solid: { bg: 'brand', color: 'white' },
            outline: { borderWidth: '1px', borderColor: 'brand' },
          },
        },
      },
    },
  },
})

// 사용
import { css } from '../styled-system/css'
import { button } from '../styled-system/recipes'

<button className={button({ variant: 'solid' })}>제출</button>
<div className={css({ bg: 'red.500', p: '4' })}>박스</div>

장점:

• 빌드타임 추출 — 런타임 0. 번들에 emotion이 안 들어간다.
• 타입 안전 — 토큰 · 레시피 · 변종이 모두 자동 생성된 타입으로 보호된다.
• JSX 패턴 — <Stack>, <Grid> 같은 레이아웃 컴포넌트.
• 다국적 프레임워크 — React · Solid · Vue · Preact · Qwik · Astro · Vue.

Chakra UI v3가 Panda 위에 올라와 있다는 것이 가장 큰 검증이다.

12장 · Vanilla Extract — TypeScript CSS의 또 다른 길

Vanilla Extract는 Seek 팀이 만든 타입스크립트로 작성하는 CSS다. .css.ts 파일에 TypeScript로 CSS 객체를 쓰면, 빌드 시점에 정적 CSS 파일이 추출된다.

// button.css.ts
import { style, styleVariants } from '@vanilla-extract/css'

export const base = style({
  padding: '0.5rem 1rem',
  borderRadius: '0.375rem',
})

export const variants = styleVariants({
  solid: { background: 'blue', color: 'white' },
  outline: { border: '1px solid blue', color: 'blue' },
})

장점:

• 런타임 0 — 빌드 결과는 정적 CSS.
• CSS-in-JS의 타입 안전성 — 토큰 · 클래스명 자동 추론.
• RSC 완벽 호환 — 클라이언트 번들에 라이브러리 코드가 안 들어간다.
• Stitches식 variants API — recipe() 헬퍼가 별도 패키지로.

Panda CSS와 비교했을 때 Vanilla Extract는 "더 작고, 더 명시적이며, 디자인 시스템보다 컴포넌트 스타일에 집중"한다. Panda는 디자인 토큰 · 레시피 · 프리셋이 1급이고, VE는 그게 별도 패키지(Sprinkles, Recipes)다.

13장 · CSS-in-JS의 황혼 — Emotion · styled-components · Stitches

2020-2023년에 React 생태계의 절반 이상이 썼던 emotion · styled-components가 2026년에는 빠르게 줄어들고 있다. 이유는 세 가지다.

1. React Server Components 비호환 — emotion이 클라이언트 컴포넌트로 강제하고, 직렬화에 어색한 패턴을 만든다.
2. 번들 크기 — emotion 11이 약 13KB(gzip), styled-components 6이 약 12KB. 작은 사이트에는 부담.
3. 빌드타임 CSS-in-JS의 성숙 — Panda · Vanilla Extract · Linaria가 같은 DX를 런타임 0으로 제공.

Stitches는 2023년 이후 사실상 유지보수가 멈췄다. styled-components는 2024년 "deprecated" 선언은 아니지만, 새 프로젝트에 권장하지 않는다는 코어 팀 메시지가 나왔다.

기존 emotion · styled-components 코드베이스의 마이그레이션 경로:

• emotion + Chakra v2 → Panda CSS + Chakra v3
• styled-components 일반 → Tailwind / CSS Modules / Panda
• Stitches → Vanilla Extract / Panda (variants API가 가장 가깝다)

새 프로젝트라면 2026년에 runtime CSS-in-JS를 선택할 이유는 거의 없다.

14장 · DaisyUI · Flowbite · HeroUI · NextUI — Tailwind 위의 컴포넌트

Tailwind는 utility-only지만, 그 위에 "이름 있는 컴포넌트"를 얹는 라이브러리가 셋 갈래로 자라고 있다.

DaisyUI

• Tailwind 플러그인. 클래스 이름이 의미 기반(btn, card, modal).
• 30개 이상의 빌트인 테마. 다크모드는 한 줄.
• 컴포넌트가 클래스 조합 매크로. JS · React 종속 없음.
• HTML/CSS만 쓰는 프로젝트에 가장 맞는다.

<button class="btn btn-primary">제출</button>
<div class="card bg-base-100 shadow-xl">...</div>

Flowbite

• Tailwind 위의 React · Vue · Svelte 컴포넌트.
• 마케팅 페이지 블록이 많다.
• 무료 + 프로 버전(블록 추가).

HeroUI (구 NextUI v2)

• NextUI가 2025년 HeroUI로 리브랜딩.
• semantically-named React UI — <Button color="primary" variant="solid"> 식.
• Tailwind v4 호환 모드 있음, 내부 스타일은 vanilla CSS로 빠지고 있음.

NextUI v1

• 유지보수 사실상 종료. HeroUI로의 이전 권장.

shadcn/ui가 "카피-페이스트"라면, HeroUI는 "패키지 import"다. 디자인은 양쪽 다 모던하고, 선택은 "내 코드로 가지고 싶은가 vs 라이브러리 통제권을 라이브러리에게 맡길 것인가"의 차이다.

15장 · MUI v6 · Material UI · Joy UI — Material 디자인의 진영

MUI v6(2024년 11월)이 메인 라인이다. Material Design 3(Material You) 부분 지원, CSS variables 모드, Pigment CSS(자체 빌드타임 CSS-in-JS) 통합이 핵심 변화다.

• @mui/material — Material Design 컴포넌트.
• @mui/joy — Material 디자인에서 벗어난 모던 alt. 더 가벼움, CSS variables 기반.
• @mui/x — DataGrid, Date Pickers, Charts, Tree View 등 Pro/Premium 유료 컴포넌트.

2026년 MUI의 자리는 "엔터프라이즈 React UI의 검증된 선택"이다. 약점은:

• 번들 크기 큼(@mui/material ~ 280KB minified, 80KB gzip).
• emotion 런타임 의존(Pigment CSS로 이전 중이지만 진행형).
• 디자인이 "Material 같다" — 브랜드 정체성이 강한 사이트에는 흔히 안 어울린다.

엔터프라이즈 · 어드민 대시보드 · 사내 도구에서 여전히 강하지만, 새 컨슈머 프로덕트에는 shadcn · HeroUI · Mantine이 더 자주 선택된다.

16장 · Ant Design 5 — 중국 발 React UI의 표준

Ant Design은 Alibaba 발 React UI 라이브러리다. 중국 시장에서는 사실상 표준이며, 글로벌에서도 엔터프라이즈 어드민에서 자주 쓰인다.

v5(2022년 말)의 큰 변화:

• CSS-in-JS — emotion → 자체 cssinjs 라이브러리. v6 로드맵에 빌드타임화 논의 중.
• 디자인 토큰 — 토큰 기반 테마 커스터마이즈.
• 글로벌 다크모드 — algorithm: theme.darkAlgorithm.
• Pro Components — @ant-design/pro-components로 어드민 패턴(LayoutPro, TableForm 등) 별도 제공.

장점은 컴포넌트 수와 어드민 시나리오 적합성이다. Form, Table, Tree, Transfer, Mentions, DatePicker.RangePicker 같은 복잡한 컴포넌트가 박스에서 작동한다. 그런데:

• 디자인이 강한 "Ant Design 같음"을 풍긴다. 브랜드 사이트에 그대로 쓰면 어색.
• 번들 크기 크다.
• i18n · 로케일은 한국어 · 일본어 모두 지원.

대형 어드민 패널 빌드에서 가장 빠른 길이 될 때가 있다.

17장 · Vue · Svelte · Solid 진영 — 멀티 프레임워크 풍경

React만 있는 게 아니다.

Vue

• Vuetify 3 — Material Design Vue, 2026년 가장 큰 Vue UI.
• Quasar 2 — Vue 크로스 플랫폼 — 웹 · 모바일(Cordova/Capacitor) · 데스크톱(Electron · Tauri) 한 코드.
• Element Plus — Element UI Vue 3 포팅. 중국 발 어드민 강자.
• PrimeVue — PrimeFaces 가족. 컴포넌트 수 많고, 테마가 풍부.
• Naive UI — TS-first 모던 Vue UI.

Svelte

• Skeleton UI — Svelte + Tailwind 풀 디자인 시스템.
• Bits UI / Melt UI — Svelte의 Radix 대응.
• shadcn-svelte — shadcn/ui의 Svelte 포팅.

Solid

• Solid UI — shadcn-스타일 카피 페이스트 컴포넌트. Kobalte 위에 있다.
• Kobalte — Solid의 Radix 대응. Ark UI와 동등.

프레임워크 무관

• PrimeReact · PrimeNG · PrimeVue · PrimeFlex — PrimeTek의 동일 디자인을 React · Angular · Vue로.
• Yamada UI — 일본 개발자가 만든 React UI 라이브러리. Chakra · Mantine과 비슷한 영역.

18장 · 클래식 · 미니멀 · 클래스리스 CSS

모든 프로젝트가 Tailwind + 무거운 컴포넌트를 필요로 하지 않는다.

Pico CSS

• 클래스리스 — <button>, <input>만 써도 예쁘게 나옴.
• 10KB(gzip) 이하.
• 다크모드 자동.
• 문서 · 블로그 · 작은 사이트에 즉시 효과.

Bulma

• 순수 CSS — JS · React 의존 없음.
• 클래스 기반 컴포넌트(.button, .card, .notification).
• 2026년에도 활발히 유지.

Pure CSS

• Yahoo 출신, 4KB 정도의 미니멀 컴포넌트 모음.
• 거의 클래식 라이브러리 — 안정적.

Tachyons

• Tailwind 이전의 atomic CSS — pa3 ba br3 b--silver.
• Tailwind v4가 사실상 흡수했지만, 작은 코드베이스에서 여전히 보임.

Modern CSS Reset · sanitize.css · normalize.css · the new "Open Props" reset

• Reset 라이브러리는 2026년에도 살아있다.
• Tailwind는 자체 preflight로 갈음, vanilla CSS 프로젝트에는 modern-css-reset(Andy Bell)이 표준에 가깝다.

미니멀 사이트, 콘텐츠 사이트, 1주짜리 프로토타입에 적합하다. "Tailwind까지 안 가도 되는" 영역이 분명히 있다.

19장 · 2026 네이티브 CSS — 프레임워크 없이 가능해진 것들

2026년 5월 기준 Baseline에 들어간(또는 거의 들어간) 네이티브 CSS 기능들:

1. 컨테이너 쿼리

.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card-content { display: grid; grid-template-columns: 1fr 2fr; }
}

미디어 쿼리는 뷰포트 기반, 컨테이너 쿼리는 부모 컨테이너 기반. 사이드바 · 카드 · 위젯에 결정적이다.

2. View Transitions API

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

document.startViewTransition(() => updateDOM())

페이지/뷰 전환을 CSS 애니메이션으로. Next.js 15, Astro 5, Nuxt 4가 모두 내장 지원.

3. :has() 셀렉터

/* 자식이 .error를 가진 form만 */
form:has(.error) { border-color: red; }

CSS의 첫 "부모 셀렉터". 자바스크립트 없이 가능한 패턴이 확 늘었다.

4. CSS Nesting

.card {
  padding: 1rem;
  & .title { font-weight: bold; }
  &:hover { background: oklch(0.95 0.02 250); }
}

Sass가 필요 없는 첫 번째 큰 이유. Tailwind v4가 내부적으로 이걸 활용한다.

5. Cascade Layers (@layer)

@layer reset, base, components, utilities;

@layer components { .btn { ... } }
@layer utilities { .text-red { ... } }

특이성(specificity) 전쟁의 종료. Tailwind v4가 1급 시민으로 채택.

6. color-mix() · oklch

:root { --brand: oklch(0.7 0.15 250); }

.btn { background: var(--brand); }
.btn:hover { background: color-mix(in oklch, var(--brand) 80%, white); }

oklch는 인지적 균일성(perceptual uniformity)이 sRGB보다 훨씬 좋다. Tailwind v4가 기본 색공간으로 채택.

7. Anchor Positioning

.tooltip {
  position-anchor: --my-button;
  position-area: top span-all;
}

JS 없이 Floating UI 대응. Chrome 125+ 지원, Firefox/Safari가 따라오는 중.

8. Popover API

<button popovertarget="my-popover">열기</button>
<div id="my-popover" popover>...</div>

JS 없이 모달 · 팝오버 · 메뉴. 키보드 트랩 · ESC · 백드롭 자동.

이 기능들 덕분에 "프레임워크 없이 짜는 CSS"의 영역이 다시 살아났다. 작은 사이트는 Tailwind + 모던 CSS만으로 충분히 풍부하다.

20장 · 빌드 도구 — PostCSS · Lightning CSS · Sass의 자리

CSS는 여전히 빌드된다. 2026년의 빌드 파이프라인:

Lightning CSS(Devon Govett, Parcel 팀)

• Rust로 쓴 CSS 파서 · 트랜스폼 · 미니파이.
• esbuild · Vite · Turbopack · Parcel 4가 내장 또는 옵션으로 채택.
• PostCSS보다 10-100배 빠름.
• 자동 vendor prefix, 네스팅 트랜스파일, 미니파이 모두 포함.
• Tailwind v4가 내부에서 활용.

PostCSS

• 여전히 광범위하게 쓰이지만, 새 프로젝트는 Lightning CSS 직접 사용이 많다.
• Autoprefixer · postcss-preset-env가 핵심 플러그인.

Sass · LESS · Stylus

• Sass는 살아남았다. 변수 · 믹스인 · 함수가 CSS 변수 · CSS 함수로 충분해지면서 신규 프로젝트 채택은 줄었지만, 큰 디자인 시스템 코드베이스(Material · Bootstrap)에서 여전히 1급 시민.
• LESS는 Ant Design · 일부 엔터프라이즈에서 살아 있음.
• Stylus는 사실상 사용 정지.

CSS Modules

• 표준 CSS의 스코프 솔루션으로 부활. Mantine 7, Next.js 15가 1급 지원.
• .module.css 파일이 자동으로 해시된 클래스명을 만든다.

새 프로젝트의 권장 파이프라인:

1. Vite · Next 15 · Astro 5 (Lightning CSS 내장)
2. Tailwind v4 (Oxide 엔진, Lightning CSS 활용)
3. 컴포넌트 단위 CSS Modules 또는 Panda CSS
4. Sass는 큰 디자인 시스템이 이미 있을 때만

21장 · 디자인 시스템 · 토큰 · Catppuccin · Rose Pine · Tokyo Night

색 팔레트 · 토큰은 라이브러리에 묶이지 않는다.

Tokens Studio(전 Figma Tokens)

• Figma 플러그인 — 디자인 토큰을 Figma에서 정의, JSON으로 export.
• Style Dictionary로 CSS · Tailwind · iOS · Android 형식으로 변환.

Style Dictionary(Amazon)

• 토큰 변환 표준 도구. JSON 한 곳에서 모든 플랫폼으로.

Open Props

• 위 9장 참고. "이미 잘 짠 토큰 묶음"을 그대로.

색 스킴 · 테마 컬렉션

개발자 도구에서 시작했지만 웹 디자인에도 풍성히 쓰이는 모던 스킴들:

• Catppuccin — 4가지 톤(Latte · Frappé · Macchiato · Mocha) — VS Code · iTerm · 웹 등 어디서나.
• Rose Pine — 부드러운 클래식 톤(Main · Moon · Dawn).
• Tokyo Night — 도쿄의 야경에서 영감 받은 다크.
• Gruvbox, Nord, Dracula, Solarized — 클래식.

이 스킴들은 각자 CSS 변수, Tailwind 플러그인, Figma 파일을 함께 배포한다. "내가 좋아하는 톤 한 줄 import"로 디자인 시스템의 색 부분을 끝낼 수 있다.

22장 · 지역 UI 라이브러리 — Toss · VARCO · Yamada

지역 발 React UI 라이브러리가 2024-2026년에 두드러졌다.

한국

• Toss UI 라이브러리 — @toss/use-funnel, @toss/react, @toss/utils 등. 컴포넌트 라이브러리라기보다 React 유틸리티 모음. 토스의 프로덕션에서 검증된 패턴.
• NCsoft VARCO 디자인 시스템 — 게임 · 엔터테인먼트 UX 특화. 공개 부분은 일부이지만, 다크 게임 UI에 적합한 토큰.

일본

• Yamada UI — 일본 개발자가 만든 React UI. Chakra · Mantine과 비슷하지만 한층 가벼움, 다크모드 토큰이 잘 짜여있음.
• Ariakit — Diego Haz(브라질이지만 일본 엔지니어 커뮤니티에서 인기) — Radix 대안.

중국

• Ant Design — 이미 16장.
• TDesign(Tencent) — Material/Ant 사이의 모던 톤.
• Arco Design(ByteDance) — 디자인 도구 · 비즈니스 사이트에 강함.
• Semi Design(Douyin) — 모던 톤, RTL 지원.

지역 라이브러리의 강점은 i18n · 로케일 · 폰트(한자 · 한글 · 가나)의 디테일이 처음부터 들어 있다는 것이다.

23장 · 선택 매트릭스 — 어떤 조합이 누구에게 맞는가

전체를 한 표로:

"한 가지 정답"은 없다. 그러나 2026년 5월의 가장 흔한 "디폴트 안전 선택"은 다음이다.

• 컨슈머 웹 — Next 15 + Tailwind v4 + shadcn/ui + Radix UI.
• 대시보드 — Next 15 + Tailwind v4 + Mantine 7 또는 shadcn + 일부 데이터 컴포넌트.
• 엔터프라이즈 — React 18+ + MUI v6 또는 AntD 5.

24장 · 안티패턴 12가지

1. Tailwind v4와 emotion을 같이 쓰기. 런타임 의존이 한 줄도 더 들어갈 이유가 없다. v3에서 v4로 옮길 때 emotion부터 빼라.
2. shadcn 컴포넌트 파일을 "절대 수정하지 않기로" 결정하기. 그 모델 전체가 수정 가능을 전제로 한다. 디자인이 바뀌면 그 파일을 수정하면 끝이다.
3. Radix Primitives를 쓰면서 키보드 접근성 직접 다시 구현하기. Radix가 이미 잘 짜 놨다. asChild, onOpenChange, 포커스 트랩을 그대로 활용하라.
4. Mantine 7을 v6 처럼 emotion으로 쓰기 시도. v7은 CSS Modules다. 마이그레이션 가이드를 따라 className 패턴으로 옮겨라.
5. Chakra v2 코드를 v3로 자동 변환 가능하다고 가정. 거의 모든 컴포넌트 호출이 영향을 받는다. 점진적 마이그레이션 전략을 짜라.
6. MUI를 마케팅 사이트에 그대로 쓰기. 디자인이 "Material 같음"을 풍긴다. 브랜드 사이트라면 Tailwind + shadcn이 거의 항상 낫다.
7. AntD를 i18n 없이 영어 프로젝트에 쓰기. ConfigProvider locale 설정을 안 하면 "ko_KR" 같은 기본값이 묻어 들어간다.
8. DaisyUI 테마를 30개 다 활성화. 번들에 다 들어간다. 사용하는 2-3개만.
9. Open Props를 부분 import 한 뒤 다른 토큰 라이브러리와 섞기. 변수 이름 충돌이 골치다. 하나의 토큰 소스를 정하라.
10. UnoCSS와 Tailwind를 한 프로젝트에서 동시에 사용. 클래스 충돌 · 우선순위 충돌이 잦다. 하나만.
11. Sass의 변수와 CSS 변수를 섞어 쓰기. Sass 변수는 빌드 타임에 사라지고, CSS 변수는 런타임이다. 다크모드 같은 동적 케이스는 항상 CSS 변수.
12. !important로 Tailwind를 이긴다고 생각하기. Tailwind v4의 @layer utilities가 이미 적절한 캐스케이드를 보장한다. !important 대신 @layer 위치를 조정하라.

25장 · 체크리스트 — 새 프로젝트 시작 시 14가지

1. CSS 작성 방식 결정 — Tailwind v4 · CSS Modules · Panda · UnoCSS 중 하나.
2. 컴포넌트 레이어 결정 — Unstyled(Radix) · Themed(shadcn) · Full(Mantine · MUI · AntD).
3. 토큰 소스 결정 — Tailwind 내장 · Open Props · Tokens Studio + Style Dictionary.
4. 다크모드 전략 — prefers-color-scheme 자동 vs 토글.
5. 컨테이너 쿼리 활용 — 카드 · 사이드바에 적용.
6. @layer 구조 정의 — reset, base, components, utilities 같은 순서.
7. CSS-in-JS는 런타임 0인가 — Panda · Vanilla Extract · Linaria.
8. 번들 분석 — next bundle-analyzer 등으로 CSS 라이브러리 크기 확인.
9. 접근성 검증 — axe-core, Lighthouse, Storybook a11y addon.
10. i18n · RTL 고려 — dir="rtl" 처리 — Tailwind v4의 logical properties 활용.
11. View Transitions API 통합 — 라우트 변경 애니메이션.
12. color-mix() · oklch로 색 시스템 짜기 — sRGB 대신.
13. 에지 케이스의 폼 컴포넌트 — Combobox · DatePicker · MultiSelect 등. 직접 짜지 말고 라이브러리.
14. CI에 시각 회귀 테스트 추가 — Chromatic · Percy · Playwright 시각 비교.

26장 · 마무리 — CSS는 다시 흥미진진해졌다

2020년대 초의 풍경은 "Tailwind를 쓸 것인가 styled-components를 쓸 것인가"의 두 진영 싸움이었다. 2026년은 다르다.

• 네이티브 CSS가 충분히 강해졌다 — 컨테이너 쿼리, :has(), @layer, View Transitions, color-mix.
• Tailwind v4가 "정답 같은 utility-first 표준"의 자리를 굳혔다.
• shadcn/ui가 "라이브러리 == npm 패키지"라는 등식을 깼다.
• Radix · Ark UI가 "접근성 프리미티브"의 표준을 만들었다.
• Panda · Vanilla Extract가 "빌드타임 CSS-in-JS"의 길을 닦았다.
• runtime CSS-in-JS는 황혼을 맞았다.
• 지역 라이브러리(Toss · Yamada · TDesign)가 글로벌 다양성을 높였다.

이 모든 도구의 공통점은 한 가지다. "CSS를 쓰는 사람이 더 적은 결정을 직접 내리고, 더 많은 결정을 도구에 맡길 수 있게 되었다." 토큰을 어디에 둘지, 다크모드를 어떻게 토글할지, 접근성을 누가 책임질지, 어느 레이어에서 무엇이 이길지 — 2026년의 도구들은 이 모든 질문에 합리적인 디폴트를 준다.

"프레임워크는 답이 아니라 좋은 디폴트다. 좋은 디폴트가 많아진 시대에, 우리는 더 위에서 디자인을 결정할 수 있게 되었다."

다음 글 후보: CSS Anchor Positioning 실전 — JS 없이 Floating UI 대체, View Transitions API 완벽 가이드 — Next 15 · Astro 5에서, 디자인 토큰 파이프라인 만들기 — Figma → Style Dictionary → Tailwind v4.

— CSS 프레임워크 & UI 라이브러리 2026, 끝.

참고 / References

• Tailwind CSS 공식
• Tailwind CSS v4.0 릴리스 노트
• Tailwind Plus (구 Tailwind UI)
• shadcn/ui 공식
• Radix UI Primitives
• Radix Themes
• Mantine 7 공식
• Chakra UI v3 공식
• HeadlessUI
• Ark UI 공식
• Park UI 공식
• Open Props 공식
• UnoCSS 공식
• Panda CSS 공식
• Vanilla Extract 공식
• DaisyUI 공식
• Flowbite 공식
• HeroUI (구 NextUI)
• MUI 공식
• Ant Design 공식
• Vuetify 공식
• Quasar 공식
• Element Plus
• PrimeReact / PrimeNG / PrimeVue
• Skeleton UI (Svelte)
• Bits UI (Svelte)
• Solid UI
• Pico CSS
• Bulma
• Catppuccin
• Rose Pine
• Tokyo Night
• Modern CSS Reset (Andy Bell)
• Lightning CSS
• Style Dictionary
• Tokens Studio
• Toss Frontend Library
• Yamada UI
• TDesign (Tencent)
• MDN — Container Queries
• MDN — View Transitions API
• MDN — :has() selector
• oklch.com — 컬러 피커