개요

앱의 외모를 한 곳에 모아 이름 붙인 것이 테마다. shadcn/ui는 그 테마를 다루는 도구다.

아래 버튼을 눌러보면 이 덱이 무슨 이야기를 할지 한 번에 드러난다. HTML은 한 글자도 바뀌지 않는다. 바뀌는 것은 이름에 매달린 값뿐이다.

shadcn 기본Material 3Radix Colors사내 DSdark← 눌러보세요

로그인

계정으로 계속하기

이메일

비밀번호

계속취소

저장취소더보기NewBeta

개요설정멤버

이 하나가 되면 나머지가 전부 따라온다 — 다크 모드, 브랜드 교체, 팀 전체의 일관성. 안 되면 디자인을 바꿀 때마다 파일 200개를 찾아 고치게 된다.

첫 장부터 읽기

이 덱은 무엇인가

shadcn/ui를 “컴포넌트 복사해 쓰는 도구”가 아니라 “테마를 관리하는 방식”으로 설명한다.

• 새로 나오는 말은 처음 등장할 때 풀 이름과 “왜 필요한지”를 먼저 준다
• 실무에서 거의 안 만나는 곁가지는 의도적으로 뺐다 (0장에 뺀 목록이 있다)
• 각 장 첫머리에 그 장의 새 용어 상자, 끝에 요약이 있다

Next.js 16 · React 19 · Tailwind CSS 4 · shadcn CLI 4.x 기준이다.

구성 — 테마를 리소스별로 쪼갠다

1. 0~1장준비

   • 0. 이 덱을 읽는 법 · 기본 용어 다섯 개
   • 1. shadcn/ui란 — 설치하지 않는 컴포넌트
2. 2~3장테마라는 그릇

   테마 = 리소스 목록 — 이 덱의 중심

   • 2. 테마 = 리소스 목록
   • 3. 테마가 놓이는 자리 — 설치와 파일 구조
3. 4~8장리소스 하나씩

   앱의 외모를 다섯 리소스로 쪼개 이름을 붙인다

   • 4. 색 — 짝으로 관리한다
   • 5. 형태 — 둥글기 · 간격 · 테두리 · 그림자
   • 6. 글자 — 크기 스케일과 한글
   • 7. 컴포넌트 — 결정이 담긴 코드
   • 8. 아이콘 · 폰트
4. 9~11장테마 다루기

   리소스 한 벌을 두 벌로, 그리고 팀의 자산으로

   • 9. 테마 두 벌 — 다크 모드
   • 10. 내 테마 만들기
   • 11. 테마를 팀에 배포하기
5. 12~13장마무리

   • 12. 용어 사전
   • 13. 마무리 — 한 장 요약

읽는 법

용어 상자

각 장 첫머리의 회색 상자가 그 장에서 처음 나오는 말이다. 모르는 단어가 나왔는데 상자에 없다면 12장 용어 사전에 있다.

표시 약속

:::tip 상자는 꼭 기억할 원칙, :::caution 상자는 실제로 자주 겪는 함정이다.

가장 중요한 세 장

2장 테마 = 리소스 목록 · 4장 색 리소스 · 10장 내 테마 만들기. 급하면 이 셋만 읽어도 된다.

곁가지는 뺐다

“이런 것도 있다” 수준의 기능은 한 줄로만 적고 넘어간다. 빠진 목록은 0장에 정리해 뒀다.

프론트엔드 덱과의 관계

프론트엔드 덱에도 shadcn/ui 장이 있다. 그쪽은 Next.js · Tailwind · shadcn/ui 세 도구를 한 흐름으로 훑고, 이 덱은 shadcn/ui 하나를 테마 관점으로 깊게 판다. 겹치는 곳은 이쪽이 더 자세하다.

Tailwind CSS 자체(유틸리티 클래스가 무엇인지, @theme이 무엇인지)를 아직 모른다면 프론트엔드 10장을 먼저 보고 오는 편이 빠르다.

0. 시작하기 전에이 덱이 전제하는 것, 기본 용어 다섯 개, 그리고 일부러 빼놓은 것들.