shadcn/ui와 v0로 알아보는 역사와 흐름

shadcn이 vercel팀에 Design Engineer로 합류하며 근시일 내 놀라운 무언가를 출시하겠다 말한대로 얼마전 v0를 공개하며 많은 사람들을 놀라게 했습니다. 앞으로도 오픈 소스 커뮤니티를 위한 커스터마이징 가능한 UI 컴포넌트를 계속 만들어낼 것이라고 하니 많은 기대가 됩니다. - 역사와 함께 알아보는 흐름 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 또는 본격적으로 컴포넌트 라이브러리를 구축하고 있습니다. 이제 shadcn이 vercel에서 풀타임으로 작업할 수 있게 되었으니 이 컴포넌트 라이브러리 컬렉션이 앞으로 어떤 방향으로 나아갈지 지켜보는 것은 재미있는 일일 것입니다. - v0 https://v0.dev shadcn/ui https://ui.shadcn.com