<디자인시스템 컴포넌트 UI 라이브러리 가장 진화된 버전 shadcn/u

버튼, Input, DatePicker 등 자주 쓰는 UI 전용 컴포넌트들이 있습니다. 익숙하지만, 이걸 처음부터 Tailwind 등을 사용해 맨땅부터 다시 컴포넌트를 다 만들기에는 작업량이 너무 방대합니다. 처음에는 UI정도라 도전을 해보지만 키입력과 겉은 상호작용도 중요하니까요. 만약 a11y처럼 접근성까지 고려한다면 너무 큰 작업이 되겠네요.

그래서 우리는 남들이 잘 만들어둔 전통적인 디자인 시스템인 MUI, Ant Design, Chakra 등을 사용했습니다. 이들 컴포넌트 구성은 탄탄하지만, 단점은 그들의 디자인을 따라야만 합니다. 그래서 디자인을 고쳐보고자 하지믄 이미 개성을 갖춘 디자인 시스템의 스타일링을 커스텀하는 건 여간 고된 일이 아니죠. 또한 그들이 만들어주지 않는 컴포넌트가 기획에서 요구되면 커스텀을 할수 없는 걸 커스텀하기 위한 고생은 아주 아찔합니다😅

기본기능만 제공하고 스타일링과 커스텀은 우리가 직접 하면 어떨까요? 그래서 Radix와 같이 기본적인 컴포넌트의 골격만 제공하고, 스타일링을 직접 하는 방식은 훨씬 더 좋은 발상이었습니다. headless의 탄생이죠. 그러나 필요한 모든 스타일링을 전부 다 처음부터하는 것은 당장은 활용하기 어려운 점이 있습니다.

shadcn/ui는 흥미로운 해법을 제시합니다. Radix의 headless 기능을 기반으로, 기본적인 구조에 깔끔하지만 개성 없는 디자인을 제공합니다.(개성없다 했지만 엄청 이쁩니다)

여기에 Tailwind를 활용한 스타일링 레이어를 통해 디자인 시스템을 구축하고, Tailwind 설정을 조정하여 개성 있는 디자인 시스템을 점진적으로 구축할 수 있습니다.

커스텀 컴포넌트를 만들기 어려운 단점은 어떻게 극복했을까요? npm 패키지가 아닌 copy-paste 방식으로 컴포넌트 코드를 직접 제공하여, TypeScript의 완벽한 타입 지원과 함께 원하는 부분을 얼마든지 커스터마이징할 수 있도록 했습니다.

디자인 시스템과 UI컴포넌트에 범주에사 가장 핫한 점진적인 디자인 시스템을 만들기 위해 고민하고 멋진 해법을 제시한 shadcn/ui에 대한 좋은 글이 있어 공유합니다.

https://siosio3103.medium.com/shadcn-ui-%EC%9D%98-%ED%95%B4%EB%B6%80-ebd469c34614

ps: 이 글은 Korean FE Article 뉴스레터를 통해 알게 되었습니다 🙂