스타일 · Shadcn UI

Shadcn UI

Radix UI와 Tailwind를 기반으로 한, "복사해서 내 코드로 쓰는" UI 컴포넌트 모음입니다. 설치형 라이브러리와 달리 코드가 내 것이 되어 자유롭게 고칠 수 있어요.

한 줄로

Shadcn UI? 는 버튼·다이얼로그·셀렉트 같은 컴포넌트? 의 소스 코드를 내 프로젝트로 복사해 쓰는 방식입니다. 내부적으로 접근성 좋은 Radix UI와 Tailwind? 를 쓰고, 복사된 코드는 내 코드라서 마음대로 수정할 수 있어요.

Shadcn은 "가구 도면과 재료를 받아 직접 짜는 DIY"입니다. 완성품을 사는(설치형) 대신 도면을 받아 내 방에 맞게 다리 길이·색을 자유롭게 바꿔 만들 수 있어요. 대신 그 코드를 내가 관리합니다.
왜 / 어디에 쓰나
  • 완전한 자유 — 복사된 코드라 디자인·동작을 무엇이든 수정
  • 필요한 것만 — 컴포넌트를 하나씩 골라 추가(불필요한 무게 없음)
  • 접근성 — Radix UI 기반이라 키보드·스크린리더 대응이 기본
  • 이 프로젝트 — 프론트엔드가 Tailwind + Shadcn UI 로 화면 구성

어떻게 쓰나

CLI로 원하는 컴포넌트를 추가하면 코드 파일이 내 프로젝트에 복사됩니다. 그 뒤 import 해서 씁니다.

# 컴포넌트를 내 코드로 복사 (예: 버튼)
npx shadcn@latest add button

# → src/components/ui/button.tsx 파일이 생김 (내 코드!)
import { Button } from "@/components/ui/button"

function Toolbar() {
  return (
    <div className="flex gap-2">
      <Button variant="default">저장</Button>
      <Button variant="outline">취소</Button>
    </div>
  )
}

복사된 button.tsx 안의 클래스(variant 스타일 등)를 직접 열어 고치면, 그게 곧 내 디자인이 됩니다.

Ant Design과의 차이

핵심은 복사형 vs 설치형입니다.

구분Shadcn UI (복사형)Ant Design (설치형)
가져오는 법코드를 내 프로젝트로 복사npm install 후 import
코드 소유내 코드라 자유롭게 수정라이브러리 안에 숨어 있음
커스터마이즈코드를 직접 고쳐 무엇이든테마 옵션 범위 안에서
스타일 방식Tailwind 기반자체 스타일 시스템
적합디자인을 손에 쥐고 싶을 때업무 부품을 빠르게 채울 때
이 프로젝트와의 관계

이 프로젝트의 프론트엔드는 Shadcn UI 를 Tailwind 위에 얹어 화면을 만듭니다. 복사된 컴포넌트는 src/components/ui/ 에 모여 있어요. 실제 화면 구성은 웹앱 7장 UI 구성(07-ui) 에서 다룹니다.

다음 단계