shadcn/ui로 만든 CMS가 있나요? 네 — UnfoldCMS
출처: Dev.to
📝 원본은 unfoldcms.com에 게시된 글이며, DEV 커뮤니티를 위해 재게시했습니다. (제가 UnfoldCMS를 개발하고 있습니다.)
“shadcn/ui 로 만든 CMS가 있나요?” 라고 검색하면 관리 템플릿, GitHub 스타, Reddit 스레드 등 같은 질문을 하는 글들을 찾을 수 있습니다. 상위 10개 안에는 실제 CMS가 없습니다. 그래서 저희가 직접 만들었습니다 — 51개의 shadcn/ui 컴포넌트, 205개의 관리 페이지, 하나의 코드베이스에서 만든 세 가지 테마. 이 글은 그 질문에 대한 직접적인 답변이자 “shadcn-native CMS”가 실제 운영 환경에서 의미하는 바를 보여주는 투어입니다.
TL;DR: 네 — UnfoldCMS는 shadcn/ui(Laravel 12 + React 19 + Inertia 2 + Tailwind v4) 위에 완전히 구축된 CMS입니다. 관리 화면은 51개의 실제 shadcn 컴포넌트를 사용합니다 — 래핑된 추상화가 아니며, 벤더가 만든 위젯 세트도 아닙니다. 원하는 컴포넌트를 shadcn을 사용하듯 포크해서 수정할 수 있습니다. 아래에서는 왜 다른 사람이 먼저 내놓지 못했는지, 관리 화면은 어떤 모습인지, 그리고 솔직한 트레이드오프를 설명합니다.
네. UnfoldCMS는 전체 관리 화면이 shadcn/ui 위에 구축된 최초의 프로덕션 CMS입니다. 템플릿도, 관리 스타터도 아니라, 콘텐츠 모델링, 에디터, 미디어 라이브러리, REST + GraphQL API, 역할 기반 접근 제어, 마케팅 사이트까지 모두 동일한 51개 컴포넌트 디자인 시스템을 공유하는 완전한 CMS입니다.
Google에서 “shadcn CMS”를 검색하면 대부분 다음 세 가지 중 하나입니다.
- 대시보드 템플릿 (콘텐츠 모델, API, 에디터 없음)
- 몇 개의 관리 화면만 보여주는 데모 레포 (실제 제품 없음)
- 처음부터 만드는 튜토리얼 (완성하면 절반짜리 CMS가 됨)
실제 CMS가 되려면 다음이 모두 필요합니다: 콘텐츠 스키마, 안정적인 API, 미디어 파이프라인, 검색 인덱스, 스케줄링, 초안, 리다이렉트, 사이트맵, RBAC, 그리고 사용자를 방해하지 않는 에디터. 이 모든 것을 shadcn에 연결하고 포크 가능하게 유지하는 것이 아직 완성되지 않은 부분이었습니다.
우리가 “UnfoldCMS는 shadcn/ui 위에 구축됐다”고 말할 때는 문자 그대로 shadcn 철학을 의미합니다: 컴포넌트 코드를 직접 소유한다는 뜻이죠. @unfoldcms/ui 같은 벤더 추상화 레이어가 없습니다. 관리 화면의 Button, DataTable, Sidebar, Dialog, Command, Toast 등은 모두 resources/js/components/ui/ 안에 표준 shadcn 파일 형태로 존재합니다. 하나를 포크해서 오후에 관리 화면을 다시 만들 수 있습니다.
다른 CMS 관리 화면과 비교해 보면 이 점이 명확해집니다.
| CMS | 관리 화면 구축 방식 | 관리 화면 커스터마이징? |
|---|---|---|
| WordPress | jQuery + PHP 템플릿 | CSS만 오버라이드, 나머지는 직접 싸워야 함 |
| Strapi | React + 커스텀 디자인 시스템 | 플러그인 API만 제공 |
| Payload | React + 커스텀 디자인 시스템 | 컴포넌트 교체 설정으로 오버라이드 |
| Directus | Vue + Vuetify | 테마 훅 제공 |
| Sanity | React + 커스텀 Studio | Studio 스키마만 커스터마이징 가능 |
| UnfoldCMS | shadcn/ui + Tailwind v4 | .tsx 파일을 직접 편집 |
위 표에 있는 모든 관리 화면은 각각 고유한 컴포넌트 어휘를 사용합니다. UnfoldCMS는 shadcn-ui.com에서 코드를 복사해 본 적이 있다면 이미 익숙한 어휘를 그대로 제공합니다.
우리는 51개의 shadcn 컴포넌트를 스크린샷용으로 가져온 것이 아니라 실제로 사용했습니다. 각각이 어디에 쓰였는지 살펴보세요.
DataTable+ColumnHeader+Pagination→ Posts, Media, Users, Settings 리스트Sidebar+NavigationMenu→ 205개 관리 페이지 전반에 걸친 좌측 고정 레일Command+Popover→ 전역 ⌘K 검색, 포스트·페이지·설정·플러그인 전부를 한 번에 점프Dialog+AlertDialog+Drawer→ 확인 흐름, 미디어 선택기, 슬라이드‑인 에디터Form+Input+Textarea+Select+Combobox+Calendar+DatePicker→ 기대하는 모든 CMS 폼 + 테헤란 시간 기준 발행일 스케줄러Tabs+Accordion+Card→ 포스트 에디터의 SEO / Media / Schedule 패널Toast+Sonner→ 저장 확인, 업로드 진행, 오류 보고Avatar+Badge+Tooltip+ContextMenu+DropdownMenu+Sheet→ 모든 밀집 리스트 아이템 인터랙션
대부분 “shadcn admin template” 레포는 이 부분을 건너뜁니다. 205개의 페이지에서 실제 데이터와 함께 모든 컴포넌트를 연결하는 작업이 바로 디자인 시스템의 빈틈을 드러내는 지점이며, 그 빈틈을 메우는 데 1년 이상의 엔지니어링 작업이 필요합니다. 이것이 “우리는 shadcn을 쓴다”와 “shadcn 위에 CMS를 출시했다”를 구분 짓는 핵심입니다.
Tailwind v4에서 테마를 바꾸는 방법은 CSS 변수를 바꾸는 것과 동일합니다. UnfoldCMS는 하나의 코드베이스에서 세 가지 테마를 제공합니다 — 기본 파란색(#2563EB), 퍼플, 그리고 부드러운 퍼플(#938DE5). 루트 요소에 data-theme 속성 하나만 지정하면 전환됩니다.
[data-theme="default"] { --primary: oklch(0.546 0.245 262.881); }
[data-theme="purple"] { --primary: oklch(0.488 0.243 264.376); }
[data-theme="soft"] { --primary: oklch(0.611 0.137 297.4); }그게 전부입니다. 모든 shadcn 컴포넌트는 --primary(및 나머지 토큰 세트)를 읽어들이므로, 네 번째 테마를 추가하려면 CSS 블록 하나만 만들면 됩니다. 브랜드와 일치하도록 관리 화면을 맞추고 싶은 고객은 전체 관리 화면을 포크할 필요 없이 네 개의 CSS 변수만 수정하면 됩니다.
전체 토큰 시스템과 Tailwind v4의 새로운 @theme 디렉티브가 어떻게 연결되는지는 Tailwind v4 + shadcn/ui: Building a Themeable CMS 를 참고하세요.
왜 지금까지 다른 사람이 만들지 못했을까? 세 가지 이유
- shadcn/ui가 아직 새로워서 “대규모 프로덕션” 사례가 충분히 쌓여 있지 않았습니다. 2023년 말에 1.0이 출시됐고, 실제로 1년짜리 CMS를 만들 수 있을 정도로 성숙해지기엔 2026년이 되어서야 가능했죠. 창출 윈도우가 작았습니다.
- 2024‑2025년 React‑CMS 시장은 대부분 Payload, Strapi, Sanity 생태계에 집중돼 있었습니다. 이들 팀은 이미 자체 컴포넌트 시스템에 투자했기 때문에 shadcn으로 전환하면 1년 치 UI 작업을 모두 포기해야 했습니다.
- shadcn 생태계는 템플릿을 장려합니다. 스타터‑키트 마켓플레이스에 올라가는 모든 shadcn 대시보드는 템플릿에 불과합니다. 템플릿 → 실제 CMS 로 전환하려면 콘텐츠 모델링, 스케줄링, RBAC, 미디어, API, 사이트맵, 초안, 리다이렉트 등 전혀 다른 범위의 작업이 필요합니다. 대부분 팀은 “관리 화면이 보인다” 정도에서 멈추고, 나머지를 완성하는 데 1년이 걸린다는 사실에 부딪히게 됩니다.
우리는 shadcn을 실제 CMS에 적용하고 싶었지만 아직 구현된 사례가 없었다는 이유로 UnfoldCMS를 시작했습니다. 12개월 뒤 현재 서비스가 운영 중이며, shadcn 기반 관리 화면이 왜 중요한지에 대한 전체 분석은 The CMS Built on shadcn/ui: Why It Matters 에서 확인할 수 있습니다.
UnfoldCMS가 shadcn‑native라는 것이 헤드라인입니다. 홈페이지에 넣지 않은 세부 사항
- 컴포넌트 수는 계속 증가합니다. shadcn은 매달 약 1개의 새로운 컴포넌트를 추가합니다. CMS를 최신 상태와 맞추는 작업은 지속적인 로드맵에 기록됩니다.
- React를 알아야 합니다. WordPress는 비개발자도 “Edit”만 클릭하면 오타를 고칠 수 있지만, UnfoldCMS도 마찬가지로 .tsx 파일을 직접 편집해야 관리 화면을 확장할 수 있습니다. PHP 전용 팀이라면 마찰이 있을 수 있습니다.