데브허브 | DEVHUB | You're Using Shadcn/ui the WRONG Way (Here's How to Fix It)You're Using Shadcn/ui the WRONG Way (Here's How to Fix It)
- Shadcn/ui는 단순한 컴포넌트 라이브러리가 아니라, 개발자가 자신만의 컴포넌트 라이브러리를 구축하도록 돕는 도구입니다. 🛠️
- 대부분의 Shadcn/ui 사용자들이 기본 테마와 컴포넌트를 그대로 사용하여 웹사이트들이 획일적으로 보이는 문제가 있습니다. 🎨
- MUI와 달리 Shadcn/ui는 Radix UI 프리미티브를 기반으로 하며, 컴포넌트의 소스 코드를 직접 제공하여 개발자가 완전히 소유하고 수정할 수 있게 합니다. 🧑💻
- 전역 CSS 변수(
globals.css)를 통해 테마의 기본 스타일(예: border-radius, 색상)을 쉽게 변경하여 전체 웹사이트에 적용할 수 있습니다. 🌍
- OKLCH 색상 형식을 사용하여 색상을 정의하며, 이는 L(밝기), C(채도), H(색조) 세 가지 변수로 구성되어 HSL보다 직관적이고 더 나은 색상을 생성합니다. 🌈
tweak CN과 같은 외부 도구를 활용하면 색상뿐만 아니라 타이포그래피, 그림자, 간격 등 테마의 다양한 요소를 손쉽게 커스터마이징할 수 있습니다. ⚙️
- 컴포넌트 파일(
button.tsx 등)을 직접 수정하여 전역 스타일, 특정 variant에 대한 스타일, 심지어 새로운 variant나 size를 추가하는 등 세밀한 커스터마이징이 가능합니다. ✨
- Shadcn/ui는 Radix UI 위에 CSS를 추가하고 좋은 기본기를 제공하여, 개발자가 이를 바탕으로 독자적인 디자인 시스템을 구축할 수 있도록 설계되었습니다. 🏗️
- 획일적인 디자인을 피하고 진정으로 독창적인 웹사이트를 만들려면 테마와 컴포넌트의 기본 설정을 적극적으로 커스터마이징하는 것이 중요합니다. 🚀