← 뒤로

shadcn/ui vs daisyUI: Tailwind 기반 UI 라이브러리 비교

2025년 11월 2일

프로젝트에 UI 라이브러리를 선택할 때마다 고민이 됩니다. 특히 Tailwind CSS를 사용한다면 shadcn/ui와 daisyUI 중 어떤 것을 선택해야 할지 많이 고민하게 되는데요. 두 라이브러리를 실제로 사용해보면서 느낀 점들을 공유해보려고 합니다.

가장 큰 차이는 두 도구의 접근 방식입니다.

daisyUI: 전통적인 컴포넌트 라이브러리

npm install daisyui

daisyUI는 npm 패키지로 설치되는 전통적인 라이브러리입니다. node_modules에 설치되고, 클래스 이름만으로 스타일링된 컴포넌트를 사용할 수 있습니다.

// daisyUI 사용 예시
<button className="btn btn-primary">클릭</button>
<div className="card bg-base-100 shadow-xl">
  <div className="card-body">
    <h2 className="card-title">카드 제목</h2>
    <p>카드 내용</p>
  </div>
</div>

shadcn/ui: 복사-붙여넣기 방식

npx shadcn@latest add button

shadcn/ui는 라이브러리가 아닙니다. CLI를 통해 컴포넌트 코드를 프로젝트에 직접 복사합니다. 설치 후에는 components/ui 폴더에 실제 소스 코드가 들어갑니다.

// shadcn/ui 사용 예시
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

<Button>클릭</Button>
<Card>
  <CardHeader>
    <CardTitle>카드 제목</CardTitle>
  </CardHeader>
  <CardContent>
    <p>카드 내용</p>
  </CardContent>
</Card>

Tailwind 버전 호환성 이슈

현재(2025년 11월) Tailwind CSS는 v4까지 출시되었는데, 각 라이브러리의 대응 상황이 다릅니다.

현재 상황

  • Tailwind v4: 완전히 재작성, 5배 빠른 빌드 속도

  • create-next-app: 기본적으로 Tailwind v4 설치

  • shadcn/ui latest: Tailwind v3만 지원

  • shadcn/ui canary: Tailwind v4 + React 19 지원

  • daisyUI: v3 기반 (v4 마이그레이션 준비 중)

실제 설치

# Next.js 프로젝트 생성 (Tailwind v4가 설치됨)
npx create-next-app@latest my-app

# 이렇게 하면 에러 발생!
npx shadcn@latest init

# canary 버전을 사용해야 함
npx shadcn@canary init
npx shadcn@canary add button

# 혹은 v3와 설치를 해야 함
npm install tailwindcss@3
npx shadcn@latest init

npm install daisyui
# tailwind.config.js에 플러그인 추가

장단점 비교

shadcn/ui

장점

  • 완전한 코드 소유권 - 컴포넌트가 내 프로젝트 안에 있음

  • 자유로운 커스터마이징 - 필요한 대로 코드 수정 가능

  • TypeScript 완벽 지원

  • Radix UI 기반으로 접근성 우수

  • 번들 크기 최적화 - 사용하는 컴포넌트만 포함

  • 의존성 업데이트 걱정 없음

단점

  • 초기 설정이 복잡함

  • 컴포넌트 업데이트가 수동 작업

  • 디자인 일관성 유지가 개발자 몫

  • React/Next.js 환경 필수

  • 학습 곡선이 다소 있음

daisyUI

장점

  • 즉시 사용 가능 - 클래스만 추가하면 됨

  • 프레임워크 독립적 (React, Vue, Svelte 모두 사용 가능)

  • 테마 시스템이 강력함 (30+ 내장 테마)

  • 디자인 일관성 자동 보장

  • 러닝 커브가 낮음

  • 빠른 프로토타이핑에 최적

단점

  • 커스터마이징 제한적

  • 번들 크기가 큰 편 (사용하지 않는 컴포넌트도 포함)

  • 의존성 업데이트 필요

  • Tailwind 설정 파일 수정 필요

  • 고유한 클래스 명명 규칙 학습 필요

성능 비교

번들 크기

  • shadcn/ui: 사용한 컴포넌트만 포함 (트리 쉐이킹 우수)

  • daisyUI: 전체 라이브러리 포함 (약 2.4KB gzipped)

빌드 시간

  • shadcn/ui: 컴포넌트가 소스 코드에 있어 일반 빌드와 동일

  • daisyUI: Tailwind 플러그인으로 인한 약간의 오버헤드

런타임 성능

두 라이브러리 모두 런타임 JavaScript가 거의 없어 성능 차이는 미미합니다.

개인적인 추천

실제 프로젝트 경험을 바탕으로 한 추천입니다:

shadcn/ui을 선택시 고려할 사항은 만약:

  • React/Next.js 프로젝트

  • 3개월 이상의 장기 프로젝트

  • 디자인 커스터마이징이 중요

  • 코드 품질과 유지보수가 우선순위

daisyUI 선택시:

  • 1-2주 안에 MVP 필요

  • 프레임워크가 정해지지 않음

  • 디자인 리소스가 부족

  • 테마 기능이 필요

결론

"어느 것이 더 나은가?"라는 질문에는 정답이 없습니다. 프로젝트의 요구사항, 팀의 역량, 시간적 제약 등을 종합적으로 고려해야 합니다.

개인적으로는 새로운 프로젝트를 시작할 때 shadcn/ui를 선호합니다. 초기 설정은 조금 복잡하지만, 장기적으로 유지보수와 커스터마이징에서 얻는 이점이 크기 때문입니다. 하지만 해커톤이나 빠른 프로토타입이 필요할 때는 주저 없이 daisyUI를 사용합니다. 감사합니다

참고 자료