💡 왼쪽 원문을 읽으면서 오른쪽에 따라 써보세요. Tab 키로 힌트를 받을 수 있습니다.

원문 렌더가 준비되기 전까지 텍스트 가이드로 표시합니다.

프롤로그 — 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

[ CSS 작성 방식 ]

┌──────────────┬──────────────┬───────────────┐

│ Utility-first│ CSS Modules │ CSS-in-JS │

│ (Tailwind) │ (Mantine 7) │ (build-time: │

│ (UnoCSS) │ (Pure CSS) │ Panda·VE) │

│ │ │ (runtime: │

│ │ │ Emotion· │

│ │ │ styled-comp) │

└──────────────┴──────────────┴───────────────┘

[ 컴포넌트 레이어 ]

┌──────────────┬──────────────┬───────────────┐

│ Unstyled │ Themed │ Opinionated │

│ Primitives │ Components │ Design System │

│ Radix · Ark │ shadcn/ui │ MUI · AntD · │

│ HeadlessUI │ HeroUI · │ Mantine · │

│ Bits · Melt │ DaisyUI │ Chakra v3 │

└──────────────┴──────────────┴───────────────┘

[ 빌드 파이프라인 ]

PostCSS · Lightning CSS · Vite · Turbopack

── 브라우저 ──

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

- **토큰 레이어** — 색 · 간격 · 타이포의 단일 소스. 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 — 스타일은 직접

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의 자리:

| 항목 | shadcn/ui | Mantine 7 |

|------|----------|-----------|

| 설치 방식 | 카피-페이스트 | npm 패키지 |

| 스타일 | Tailwind | CSS Modules |

| 커스터마이즈 | 소스 직접 수정 | 테마 객체 + className |

| 컴포넌트 수 | 50+ | 120+ |

| 폼 · 차트 등 통합 | 별도 라이브러리 | 1급 패키지 |

| RSC 호환 | 부분(클라이언트 컴포넌트 위주) | 부분(`'use client'` 필요) |

| 번들 영향 | 사용분만 | 트리쉐이킹 정상 |

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 예

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

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와 비교:

| 항목 | Tailwind v4 | UnoCSS |

|------|-------------|--------|

| 엔진 | Rust (Oxide) | TS, Vite 호환 |

| 빌드 속도 | 매우 빠름 | 매우 빠름 |

| 프리셋 | 단일 통합 | 모듈식 |

| 어트리뷰트 모드 | 없음 | `<div bg="blue-500" />` |

| 아이콘 | 별도 | preset에 통합 |

| 생태계 | 압도적 | 작지만 빠르게 성장 |

| Next.js 통합 | 1급 | Vite 위주, Next 플러그인 있음 |

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

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' },

})

// 사용

장점:

- **빌드타임 추출** — 런타임 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

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만 쓰는 프로젝트에 가장 맞는다.

**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**

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 공식](https://tailwindcss.com/)

- [Tailwind CSS v4.0 릴리스 노트](https://tailwindcss.com/blog/tailwindcss-v4)

- [Tailwind Plus (구 Tailwind UI)](https://tailwindcss.com/plus)

- [shadcn/ui 공식](https://ui.shadcn.com/)

- [Radix UI Primitives](https://www.radix-ui.com/primitives)

- [Radix Themes](https://www.radix-ui.com/themes)

- [Mantine 7 공식](https://mantine.dev/)

- [Chakra UI v3 공식](https://chakra-ui.com/)

- [HeadlessUI](https://headlessui.com/)

- [Ark UI 공식](https://ark-ui.com/)

- [Park UI 공식](https://park-ui.com/)

- [Open Props 공식](https://open-props.style/)

- [UnoCSS 공식](https://unocss.dev/)

- [Panda CSS 공식](https://panda-css.com/)

- [Vanilla Extract 공식](https://vanilla-extract.style/)

- [DaisyUI 공식](https://daisyui.com/)

- [Flowbite 공식](https://flowbite.com/)

- [HeroUI (구 NextUI)](https://www.heroui.com/)

- [MUI 공식](https://mui.com/)

- [Ant Design 공식](https://ant.design/)

- [Vuetify 공식](https://vuetifyjs.com/)

- [Quasar 공식](https://quasar.dev/)

- [Element Plus](https://element-plus.org/)

- [PrimeReact / PrimeNG / PrimeVue](https://primereact.org/)

- [Skeleton UI (Svelte)](https://www.skeleton.dev/)

- [Bits UI (Svelte)](https://www.bits-ui.com/)

- [Solid UI](https://www.solid-ui.com/)

- [Pico CSS](https://picocss.com/)

- [Bulma](https://bulma.io/)

- [Catppuccin](https://catppuccin.com/)

- [Rose Pine](https://rosepinetheme.com/)

- [Tokyo Night](https://github.com/enkia/tokyo-night-vscode-theme)

- [Modern CSS Reset (Andy Bell)](https://piccalil.li/blog/a-more-modern-css-reset/)

- [Lightning CSS](https://lightningcss.dev/)

- [Style Dictionary](https://amzn.github.io/style-dictionary/)

- [Tokens Studio](https://tokens.studio/)

- [Toss Frontend Library](https://github.com/toss/slash)

- [Yamada UI](https://yamada-ui.com/)

- [TDesign (Tencent)](https://tdesign.tencent.com/)

- [MDN — Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)

- [MDN — View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)

- [MDN — :has() selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)

- [oklch.com — 컬러 피커](https://oklch.com/)