LabHub

블로그

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

2026-05-16 · 46 분 읽기 · #css-frameworks#tailwind#shadcn-ui#radix-ui#mantine#chakra-ui#open-props#unocss#panda-css#css-in-js

한국어English日本語

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

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

이 글은 그 풍경 전체를 한 호흡으로 정리한다. 처음 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
        ── 브라우저 ──

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

기억할 한 줄: "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 팀 벤치마크 기준:

여기에 추가로:

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

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

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

2026년 기준 구성:

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는 두 갈래로 나뉜다.

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

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는 완전히 사라졌다.

핵심 가치:

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

항목shadcn/uiMantine 7
설치 방식카피-페이스트npm 패키지
스타일TailwindCSS Modules
커스터마이즈소스 직접 수정테마 객체 + className
컴포넌트 수50+120+
폼 · 차트 등 통합별도 라이브러리1급 패키지
RSC 호환부분(클라이언트 컴포넌트 위주)부분('use client' 필요)
번들 영향사용분만트리쉐이킹 정상

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

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

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

// 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)

Ark UI

Park UI

Bits UI · Melt UI(Svelte)

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가 처리 */
}

장점:

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

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

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

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

핵심 컨셉:

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

항목Tailwind v4UnoCSS
엔진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
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>

장점:

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

장점:

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 코드베이스의 마이그레이션 경로:

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

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

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

DaisyUI

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

Flowbite

HeroUI (구 NextUI v2)

NextUI v1

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) 통합이 핵심 변화다.

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

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

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

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

v5(2022년 말)의 큰 변화:

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

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

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

React만 있는 게 아니다.

Vue

Svelte

Solid

프레임워크 무관

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

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

Pico CSS

Bulma

Pure CSS

Tachyons

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

미니멀 사이트, 콘텐츠 사이트, 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 팀)

PostCSS

Sass · LESS · Stylus

CSS Modules

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

  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)

Style Dictionary(Amazon)

Open Props

색 스킴 · 테마 컬렉션

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

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

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

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

한국

일본

중국

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

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

전체를 한 표로:

시나리오CSS 작성컴포넌트토큰
1인 SaaS (Next 15)Tailwind v4shadcn/uiTailwind 내장
어드민 대시보드Tailwind v4Mantine 7 또는 AntD 5Mantine 토큰 또는 AntD
컨슈머 모바일 웹Tailwind v4shadcn 또는 HeroUIOpen Props 일부
엔터프라이즈 ReactMUI v6 또는 AntD 5내장MUI 테마
마케팅 사이트Tailwind v4Tailwind Plus 또는 FlowbiteTailwind 내장
Vue 3 SPAUnoCSS 또는 TailwindVuetify 3 · PrimeVue · Element PlusVuetify · PrimeVue
Astro 콘텐츠 사이트UnoCSS 또는 Pico(필요 시) shadcn-astroOpen Props
Svelte 앱Tailwind 또는 UnoCSSSkeleton UI 또는 Bits UISkeleton 테마
Solid 앱Tailwind 또는 UnoCSSSolid UI(shadcn-스타일)직접
디자인 시스템 빌드Panda CSS 또는 VERadix · Ark UITokens Studio + Open Props
기존 emotion 마이그레이션Panda CSSChakra v3Chakra 토큰
디자이너 손에 맡길 부분Tailwind v4Tailwind PlusFigma + Tokens Studio

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

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

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

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

참고 / References

댓글

아직 댓글이 없습니다.

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