React 프로젝트를 시작할 때 가장 먼저 부딪히는 결정 중 하나가 UI 컴포넌트 라이브러리 선택입니다. 2026년 현재, Material UI나 Ant Design 같은 "풀 스타일드" 라이브러리 대신 헤드리스(Headless) UI가 대세로 자리잡았습니다. 그 중심에 있는 세 가지 — shadcn/ui, Radix UI, Base UI를 번들 크기, 접근성, DX, 실전 활용 관점에서 깊이 비교해 보겠습니다.
한눈 결론 — 누가 읽어야 하나
| 상황 | 추천 |
|---|---|
| Tailwind 기반 빠른 프로토타이핑 | shadcn/ui |
| 엔터프라이즈 디자인 시스템 구축 | Radix UI |
| 복잡한 인터랙션 + 모던 TS API | Base UI |
| 접근성이 최우선 | Radix UI 또는 Base UI |
| React Server Components 중심 | shadcn/ui |
시간이 없다면 위 표만 참고하세요. 아래에서는 각 라이브러리의 철학, 아키텍처, 실전 트레이드오프를 깊이 파고듭니다.
세 라이브러리는 무엇이 다른가
먼저 핵심 차이를 이해해야 합니다. Radix UI는 완전히 스타일이 없는 "프리미티브(Primitive)" 라이브러리입니다. Dialog, Dropdown, Tooltip 같은 인터랙션 패턴만 제공하고, 스타일은 개발자가 100% 직접 입힙니다. Base UI도 같은 헤드리스 철학이지만 MUI 팀이 만들어 더 모던한 TypeScript API를 제공합니다. shadcn/ui는 Radix Primitives 위에 Tailwind CSS 스타일을 입혀 "복사-붙여넣기"로 쓸 수 있게 만든 컴포넌트 컬렉션입니다.
즉, 계층 구조로 보면 이렇습니다:
┌─────────────────────────────────────┐
│ shadcn/ui (스타일드) │ ← Tailwind + 프리셋 스타일
├─────────────────────────────────────┤
│ Radix Primitives / Base UI │ ← 헤드리스 인터랙션 레이어
├─────────────────────────────────────┤
│ React DOM │ ← 기반 런타임
└─────────────────────────────────────┘
2026년 2월부터 shadcn/ui는 Radix뿐 아니라 Base UI도 프리미티브 레이어로 지원하기 시작했습니다. 이 변화가 왜 중요한지는 뒤에서 다룹니다.
shadcn/ui — 2026년 React UI의 사실상 표준
핵심 특징
shadcn/ui의 가장 큰 차별점은 설치 방식입니다. npm 패키지를 설치하는 게 아니라, CLI로 컴포넌트 소스 코드를 프로젝트에 직접 복사합니다.
# 컴포넌트를 프로젝트에 복사
npx shadcn add button dialog dropdown-menu
# 복사된 파일 — 완전한 소스 코드 소유
src/components/ui/button.tsx
src/components/ui/dialog.tsx
src/components/ui/dropdown-menu.tsx
이 접근법의 장점은 버전 잠금이 없다는 것입니다. 라이브러리 업데이트로 인한 breaking change 걱정 없이, 필요한 부분만 자유롭게 수정할 수 있습니다.
2026년 주요 업데이트
2026년 들어 shadcn/ui는 공격적으로 진화했습니다:
| 시기 | 업데이트 |
|---|---|
| 2026.02 | Visual Builder 출시, Base UI 프리미티브 공식 지원 |
| 2026.03 | CLI v4 — --diff 플래그, AI 에이전트 통합 (shadcn/skills) |
| 2026.03 | "Luma" 스타일 프리셋 (macOS Tahoe 영감) |
| 2026.03 | shadcn apply — 기존 프로젝트에 프리셋 일괄 적용 |
특히 shadcn/skills는 AI 코딩 도구(Cursor, GitHub Copilot 등)와 연동되어, AI 에이전트가 shadcn 컴포넌트를 자동으로 생성·조합할 수 있게 합니다.
장점과 한계
장점: 빠른 개발 속도, 완전한 코드 소유권, React Server Components 퍼스트클래스 지원, 65,000+ GitHub 스타, Next.js/Vite/Astro/React Router 등 다양한 프레임워크 호환.
한계: Tailwind CSS 필수(다른 스타일링 접근법 사용 어려움), 수뿙 업데이트 필요(--diff 플래그로 완화), 컴포넌트 수정 후 레지스트리와 동기화 관리가 팀 단위에서 까다로울 수 있음.
Radix UI — 접근성의 골드 스탠다드
핵심 특징
Radix UI의 존재 이유는 명확합니다: WAI-ARIA 완전 준수 + 키보드 내비게이션 + 스크린 리더 최적화를 기본 제공하는 프리미티브. 스타일은 한 줄도 포함하지 않습니다.
import * as Dialog from '@radix-ui/react-dialog';
// 완전히 스타일이 없는 상태 — CSS는 100% 직접 작성
export function MyDialog() {
return (
<Dialog.Root>
<Dialog.Trigger>열기</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className="my-overlay" />
<Dialog.Content className="my-content">
<Dialog.Title>제목</Dialog.Title>
<Dialog.Description>내용</Dialog.Description>
<Dialog.Close>닫기</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
}
이 코드에는 스타일이 전혀 없지만, 포커스 트랩, ESC 키 닫기, 배경 클릭 닫기, 스크린 리더 라벨링이 모두 자동으로 동작합니다.
생태계 현황 (2026년 4월)
Radix UI는 월간 1.3억 npm 다운로드, 58만 개 이상의 웹사이트에서 사용 중입니다. 2025년 통합 패키지(radix-ui)가 출시되어 개별 패키지 관리의 번거로움이 줄었습니다.
다만 2025년 WorkOS에 인수된 이후 개발 속도가 다소 둔화되었다는 커뮤니티 피드백이 있습니다. 새로운 프리미티브(PasswordToggleField, OneTimePasswordField)가 프리뷰 단계에 있지만, Base UI의 빠른 업데이트와 비교하면 속도 차이가 느껴집니다.
장점과 한계
장점: 최고 수준의 접근성, 스타일링 자유도 100%, 검증된 프로덕션 실적(Vercel, Linear, CodeSandbox, Supabase), 트리 셉이킹으로 최소 번들 영향.
한계: 스타일링 작업이 온전히 개발자 몫, 학습 곡선이 가파름, WorkOS 인수 후 개발 속도 둔화 우려, 복잡한 컴포넌트(Combobox 등) 부재.
Base UI — MUI 팀의 모던 헤드리스
핵심 특징
Base UI는 Material UI(MUI)를 만든 팀이 2026년 2월 v1.0을 정식 출시한 헤드리스 컴포넌트 라이브러리입니다. Radix와 같은 헤드리스 철학이지만, 더 모던한 TypeScript API와 복잡한 인터랙션 컴포넌트가 차별점입니다.
import { Dialog } from '@base-ui-components/react/dialog';
// Base UI — Label 파트로 더 세밀한 접근성 제어
export function MyDialog() {
return (
<Dialog.Root>
<Dialog.Trigger>열기</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Backdrop />
<Dialog.Popup>
<Dialog.Title>제목</Dialog.Title>
<Dialog.Description>내용</Dialog.Description>
<Dialog.Close>닫기</Dialog.Close>
</Dialog.Popup>
</Dialog.Portal>
</Dialog.Root>
);
}
Radix와의 핵심 차이
API가 비슷해 보이지만 실제로는 중요한 차이가 있습니다:
| 비교 항목 | Radix UI | Base UI |
|---|---|---|
| Combobox/Autocomplete | ❌ 미지원 | ✅ 기본 제공 |
| 중첩 Dialog | 제한적 | ✅ 완전 지원 |
| 호버 트리거 메뉴 | ❌ | ✅ |
| TypeScript 타입 품질 | 양호 | 우수 (TS-first 설계) |
| 접근성 기준 | WAI-ARIA | WCAG 2.2 |
| 컴포넌트 수 | 30+ | 35 |
| 성숙도 | 3년+ | v1.0 (2026.02) |
Base UI가 Combobox와 Autocomplete를 기본 제공하는 것은 큰 차별점입니다. 검색 기능이 포함된 드롭다운은 거의 모든 SaaS 제품에서 필요하데, Radix에서는 직접 구현하거나 서드파티(cmdk 등)를 써야 합니다.
장점과 한계
장점: 모던 TypeScript-first API, Combobox/Autocomplete 등 복잡한 컴포넌트 기본 제공, MUI 팀의 장기 유지보수 보장, WCAG 2.2 준수, 활발한 2026 업데이트.
한계: 생태계가 아직 작음(v1.0 출시 2개월), 프로덕션 레퍼런스 부족, 커뮤니티 리소스와 서드파티 통합이 Radix에 비해 적음.
핵심 비교 — 숫자로 보는 차이
| 항목 | shadcn/ui | Radix UI | Base UI |
|---|---|---|---|
| 설치 방식 | 복사-붙여넣기 | npm install | npm install |
| 스타일링 | Tailwind CSS | 자유 (헤드리스) | 자유 (헤드리스) |
| 번들 크기 영향 | 20~50KB | 5~15KB | 5~15KB |
| 컴포넌트 수 | 50+ | 30+ | 35 |
| GitHub Stars | 65,000+ | 18,700+ | 신규 |
| RSC 지원 | 퍼스트클래스 | 호환 | 프레임워크 무관 |
| 학습 곡선 | 낮음~중간 | 중간~높음 | 중간 |
| 코드 소유권 | ✅ 완전 | ❌ 패키지 의존 | ❌ 패키지 의존 |
번들 크기 차이가 눈에 띕니다. shadcn/ui는 Tailwind CSS 유틸리티를 포함하기 때문에 헤드리스 라이브러리보다 크지만, MUI(100~200KB)나 Ant Design(200~250KB) 같은 풀 스타일드 라이브러리 대비 휨씬 가볍습니다. Tailwind CSS v4의 최적화 덕분에 실제 사용 시 번들 크기 격차는 더 줄어듭니다.
실전 선택 가이드
shadcn/ui를 선택해야 할 때
스타트업 MVP, SaaS 대시보드, 개인 프로젝트처럼 속도가 중요한 경우입니다. Next.js나 Astro와 조합하면 프로젝트 초기 셋업이 수 시간 안에 끝납니다. Vercel의 디자인 엔지니어 shadcn이 직접 만들었기 때문에 Vercel 배포 환경과의 궁합도 뛰어납니다.
다만 Tailwind를 사용하지 않는 프로젝트라면 shadcn/ui는 적합하지 않습니다. CSS Modules이나 styled-components를 쓰는 팀은 Radix나 Base UI가 더 나은 선택입니다.
Radix UI를 선택해야 할 때
대규모 엔터프라이즈 디자인 시스템을 구축할 때입니다. Linear, CodeSandbox, Supabase 같은 회사들이 Radix를 기반으로 자체 디자인 시스템을 만들었습니다. 스타일링에 대한 완전한 자유가 필요하고, 여러 제품 라인에 걸쳐 일관된 인터랙션 패턴을 유지해야 하는 상황에 적합합니다.
3년 이상의 프로덕션 검증도 강점입니다. 58만 개 이상의 웹사이트에서 사용 중이므로, 예상치 못한 엣지 케이스가 발견될 확률이 낮습니다.
Base UI를 선택해야 할 때
복잡한 인터랉션이 핵심인 B2B 제품에 최적입니다. Combobox, Autocomplete, 중첩 Dialog, 호버 트리거 메뉴 같은 고급 패턴이 기본 제공되므로 직접 구현하는 수고를 덜 수 있습니다.
MUI 팀의 UI 라이브러리 경혘이 API 설계에 녹아 있어, TypeScript 타입 추론이 Radix보다 우수하다는 평가를 받습니다. 다만 v1.0이 2026년 2월에 출시되었기 때문에 프로덕션 레퍼런스가 아직 부족한 점은 감안해야 합니다.
2026년 트렌드 — 헤드리스의 시대
2026년 현재, 헤드리스 UI 라이브러리 채택률이 스타일드 대안 대비 70% 성장했습니다. 이 변화를 이끄는 핵심 동력은 세 가지입니다:
1. React Server Components(RSC)의 확산. RSC는 클라이언트 번들을 최소화하는 것이 핵심인데, 헤드리스 라이브러리는 런타임 CSS가 없어 서버 컴포넌트와 자연스럽게 어울립니다. shadcn/ui의 RSC 퍼스트클래스 지원이 인기 비결 중 하나입니다.
2. AI 코딩 도구와의 시너지. Cursor 같은 AI 코딩 도구가 shadcn 컴포넌트를 생성할 때, 소스 코드가 프로젝트에 직접 있으면 수정이 휨씬 쉽습니다. shadcn/skills는 이 시너지를 공식적으로 지원합니다.
3. 디자인 시스템 성숙도. 기업들이 Material Design이나 Ant Design을 그대로 쓰는 대신, 자체 디자인 언어를 구축하는 추세가 강해졌습니다. 헤드리스 프리미티브 위에 자체 스타일을 입히는 것이 표준 접근법이 되었습니다.
FAQ
Q. shadcn/ui와 Radix UI를 함께 써야 하나요?
shadcn/ui가 이미 Radix Primitives를 내부적으로 사용합니다. shadcn/ui를 쓰면 자동으로 Radix의 접근성 혜택을 받는 것이므로, 별도로 Radix를 설치할 필요가 없습니다. 단, shadcn/ui에 포함되지 않은 Radix 프리미티브(ex. NavigationMenu)가 필요하면 추가로 설치할 수 있습니다.
Q. Material UI에서 마이그레이션하려면?
MUI에서 이동한다면 Base UI가 가장 자연스러운 경로입니다. 같은 팀이 만들었으므로 컴포넌트 구조와 API 패턴이 유사합니다. 그러나 스타일을 완전히 재작성해야 하는 것은 동일하므로, 팀 규모와 일蠕에 따라 shadcn/ui로 빠르게 전환하는 것도 고려해 볼 만합니다.
Q. Vue나 Svelte에서도 사용 가능한가요?
세 라이브러리 모두 기본적으로 React 전용입니다. Vue에는 Radix Vue(비공식 포트), shadcn-vue가 있고, Svelte에는 bits-ui(Radix 포트)가 있습니다. Base UI는 아직 React 외 프레임워크 지원이 없습니다.
추천 상황
| 프로젝트 유형 | 1순위 | 2순위 |
|---|---|---|
| 스타트업 MVP / SaaS | shadcn/ui | Base UI |
| 엔터프라이즈 디자인 시스템 | Radix UI | Base UI |
| B2B 대시보드 (복잡한 폼) | Base UI | shadcn/ui |
| 폨트폴리오 / 블로그 | shadcn/ui | Radix UI |
| 접근성 인증 필수 프로젝트 | Radix UI | Base UI |
| 기존 MUI 프로젝트 전환 | Base UI | shadcn/ui |
2026년 현재, 새 React 프로젝트를 시작한다면 shadcn/ui가 가장 안전한 기본 선택입니다. Tailwind CSS와의 완벽한 통합, RSC 지원, AI 도구 친화성, 그리고 65,000+ 스타의 커뮤니티가 뒷받침합니다. 하지만 프로젝트의 규모, 스타일링 전략, 팀의 기술 스택에 따라 Radix UI나 Base UI가 더 나은 선택일 수 있습니다. 위 가이드를 참고하여 프로젝트에 맞는 최적의 선택을 하시길 바랍니다.
댓글
댓글 쓰기