shadcn/ui

 

Theo가 소개한 다이어그램

shadcn이 얼마전 vercel팀에 Design Engineer로 합류했다는 소식이 들려왔습니다.

앞으로도 오픈 소스 커뮤니티를 위한 커스터마이징 가능한 UI 컴포넌트를 계속 만들어낼 것이라고 하며, 근시일 내 놀라운 무언가를 출시할 것만 같습니다.

 

현재 회사에서 활용중인 antd의 커스터마이징 어려움을 느낀 직후 이 프로젝트를 보고(당시 이 프로젝트는 완전 초기) Design System을 구축하는데 있어서 괜찮은 선택이지 않을까 생각했었는데, 발전되는 모습을 지켜보고 있자니 그때보다는 조금 더 기울어진 것 같습니다.

 

역사와 함께 알아보는 흐름

shadcn/ui는 눈에 띄지 않는 이름에도 지난 몇 달 동안 인기를 끌었습니다. 주요 이유로는 스스로를 라이브러리라고 부르기를 거부하기 때문인데요, 모든 Component는 복사/붙여넣기 방식이며, 종속성으로 패키징되거나 npm 패키지로 게시되지 않습니다.

 

이 접근 방식이 “코드에 대한 소유권과 제어권을 제공하여 구성 요소의 빌드 및 스타일을 결정할 수 있게 해준다“고 설명합니다.

 

이러한 접근 방식은 2012년 전 세계를 강타한 또 다른 UI 컴포넌트 세트를 떠올리게 합니다. 바로 부트스트랩입니다. (필요한 컴포넌트의 코드를 간단히 복사/붙여넣기할 수 있다는 점이 가장 큰 장점 중 하나였습니다)

 

부트스트랩은 사용자 정의 오버라이드가 어렵다는 이유와 사이트가 모두 똑같아 보인다는 문제로, 동적 스타일링과 더 나은 스타일 범위 지정이 가능한 CSS-in-JS 방식(mui, chakra-ui 등)이 등장과 함께 인기를 끌었죠.

 

하지만 React가 SPA에서 SSR과 RSC로 전환하기 시작하며 CSS-in-JS는 선호도가 떨어지기 시작했습니다.

 

이 지점에서 shadcn/ui가 등장합니다. 부트스트랩의 복사/붙여넣기 기능과 CSS-in-JS의 쉬운 커스터마이징 기능을 동시에 제공합니다.

 

shadcn/ui는 Tailwind CSS를 기반으로 구축되었기 때문에(잠시 주춤했던 Tailwind가 RSC등장과 함께 다시 인기를 끌었나요.. ㅎㅎ) 합리적인 기본값을 제공하여 필요에 맞게 사용자 정의를 쉽게 할 수 있고, 최신의 React와 훨씬 더 잘 어울린다고 평가받고 있습니다.

 

현재는 수천 명의 개발자가 shadcn/ui를 사용해 자신만의 UI 또는 본격적으로 컴포넌트 라이브러리를 구축하고 있습니다.

 

이제 vercel에서 풀타임으로 작업할 수 있게 되었으니 이 컴포넌트 라이브러리 컬렉션이 앞으로 어떤 방향으로 나아갈지 지켜보는 것은 재미있는 일일 것입니다.