데브허브 | DEVHUB | 3 Big Mistakes When Using Shadcn (and how to fix them...)3 Big Mistakes When Using Shadcn (and how to fix them...)
- Shadcn의 기본 디자인은 깔끔하지만, 색상, 모양, 그림자, 폰트 등에서 개성이 부족하여 밋밋하게 느껴질 수 있습니다. 🎨
- 기본 테마는 색상만 변경하므로, TweakCN 같은 외부 리소스를 활용하여 Vercel, Neo-brutalism 등 다양한 스타일의 테마를 적용할 수 있습니다. 🖌️
- 테마 변경은 프로젝트의 루트 파일에 새로운 CSS 변수(색상, radius 등)를 복사-붙여넣기하는 방식으로 매우 간단하게 이루어집니다. ⚙️
- 자신만의 브랜드나 스타일에 맞게 Shadcn 컴포넌트를 커스터마이징하여 생동감을 불어넣는 것이 중요합니다. ✨
- Shadcn은 디자인 및 코드 레벨에서 특정 의견을 가지고 있지만, 이러한 의견이 기존 프로젝트의 다른 컴포넌트와 일관성이 없으면 혼란을 초래할 수 있습니다. 🧐
- 프로젝트 전체의 일관성을 위해 다크/라이트 모드 지원, 클래스명 전달 허용 여부, Shadcn 파일의 원자성 유지 여부,
cn 함수 사용 범위, 아이콘 라이브러리 선택 등 핵심 질문을 통해 시스템을 구축해야 합니다. 🏗️
- Shadcn 컴포넌트를 프로젝트의 기존 컴포넌트와 통합하여 모든 요소가 동일한 '의견'과 일관성을 갖도록 만드는 것이 목표입니다. 🤝
- 새로운 프로젝트에는 Shadcn이 매우 유용하지만, 기존 프로젝트의 경우 특정 기능이나 접근성 이점만 필요할 때 Shadcn 전체를 도입할 필요는 없습니다. 💡
- Shadcn은 Radix UI 위에 구축된 의견이 있는 레이어이므로, 스타일링 없이 핵심 기능과 접근성만 필요하다면 Radix UI를 직접 사용하는 것이 더 효율적일 수 있습니다. 🧱
- Radix UI는 Alert Dialog, Accordion, Menu Bar 등 다양한 컴포넌트의 원시적인 형태를 제공하며, 여기에 직접 스타일(Tailwind, CSS)을 적용할 수 있습니다. 🛠️
- Radix UI 외에 Base UI와 같은 대안도 있으며, 이는 미래의 Shadcn과 유사한 역할을 할 수 있는 깨끗하고 유망한 선택지입니다. 🚀