최근 프론트엔드 생태계에는 UI 컴포넌트를 빠르고 효율적으로 관리할 수 있는 라이브러리에 대한 관심이 증가하고 있습니다.
그러다보니 프론트엔드를 하시는 분들은 Headless UI, Radix UI를 들어보셨을 것이라고 생각합니다.
특히, 확장성과 커스터마이징의 필요성이 높아지면서 shadcn/ui와 같은 새로운 접근 방식의 UI 시스템이 주목 받고 있습니다.
1. shadcn/ui란?
shadcn/ui란 vercel 안에 있는 shadcn이 만든 UI 입니다.
또, Radix ui와 Tailwind css를 기반으로 하는 Component Collection입니다.
이 shadcn/ui가 관심을 받은 이유 중 하나가 바로 이 Component Collection이라고 합니다.
그 이유는 Component Library라고 불리는 라이브러리들은 번들된 소스 코드를 패키지 매니저를 통해서 다운로드 하고
의존성에 추가가 됩니다. 그 예시로 package.json에 들어가보면 알 수 있습니다.
하지만 기존 Component Libarary로 불리던 것을 Collection이라는 단어로 바꾼 이유에는 번들되지 않은 코드를
의존성 추가 없이 복붙해서 사용할 수 있다는 점 입니다.
즉 정리를 해보자면, 일반적인 라이브러리는 사전에 정의된 컴포넌트를 포함하며, 프로젝트에 의존성으로 추가됩니다.
이 과정에서 컴포넌트는 프로젝트 코드와 결합되어 번들 사이즈를 증가시킬 수 있습니다.
그러나 shadcn/ui는 번들되지 않은 개별 컴포넌트를 복사해 사용하는 방식을 채택하여 불필요한 코드를 줄이고 프로젝트의 성능을 최적화할 수 있습니다.
그래서 기존 Library라고 칭하는 진짜 라이브러리들과는 달리 더욱 가볍고 부담없이 사용할 수 있기에 관심을 받은 것 같습니다.
2. 장점은?
그렇다면 이렇게 Collection이라고 지칭하여 그만한 장점도 같이 가져왔을까에 대해 알아보았는데
이 shadcn/ui를 사용하기 위해서는 npm 설치 없이 npx 명령어를 사용하거나 아니면 따로 공식문서에서 코드를 가져가면 됩니다.
컴포넌트 설치를 의존성으로 하지 않는다는 건 솔직히 불편할 수도 있을 것 이라고 볼 수 있을 것 같습니다.
하지만 이 부분에서는 확실한 장점이 있습니다.
결국 설치를 하지 않고 설치 혹은 사이트에서 가져온다는 것은 사용자가 따로 커스터 마이징 하기가 쉽고,
만약 기존처럼 라이브러리로 이 shadcn/ui를 제공하였다면 라이브러리의 특성을 그대로 따온채로 불필요한 코드도 늘어서
불필요한 번들 사이즈도 늘어날 것 입니다.
예를 들어, 전통적인 라이브러리에서는 필요하지 않은 컴포넌트가 프로젝트에 포함되어 번들 사이즈를 증가시키는 문제가 자주 발생합니다. 하지만 shadcn/ui는 필요한 컴포넌트만 가져오기 때문에 이러한 문제가 없습니다.
이는 특히 대규모 프로젝트에서 성능 최적화에 큰 도움이 됩니다.
또한, 기본적으로 Tailwind CSS를 기반으로 하기 때문에, 이미 Tailwind를 사용 중이라면 디자인 시스템과의 통합도 수월합니다.
3. 어떻게 사용하나?
- 초기 세팅 같은 부분은 각자의 환경이 다르기 때문에 공식문서를 따로 찾아보며 하는 것을 추천드립니다. -
초기 설정을 마친 후, npx shadcn-ui@latest add 예시 컴포넌트 로 공식 문서를 찾아보며 원하는 컴포넌트를 사용합니다.
위 사진 밖에도 다양한 컴포넌트들이 존재하고 사용하기 쉽게 되어있다
여기서 만약 Sidebar을 사용하고 싶다면, npx shadcn@latest add sidebar 이런식으로 사용하면 됩니다.
공식문서 자체에서 global.css를 어떤식으로 하면 더 좋은지 제공해주고,
배치 구조 자체도 최적의 상태를 추천해주기 때문에 공식문서를 보고, 자신의 상황에 맞게 구조를 짜서
shadcn/ui를 사용하는 것이 좋을 것 입니다.
4. 느낀점
shadcn/ui를 알아보면서 느낀점이 상당히 많습니다.
컴포넌트를 따로 shadcn 딴에서 분리시켜서 버튼, 사이드바만 따로 복붙하거나 다운로드해서 사용하는 시스템을 어떻게 생각했는지 너무 신기하고 좋은 아이디어 인 것 같습니다.
이 글 이전에도 라이브러리 관련해서 글을 작성하였는데 라이브러리를 도입할때 많은 생각을 가지고 신중하게 도입해야한다는 글을 작성하였는데, 이런 컬렉션 형태이면 불필요한 코드도 없을 뿐더러 가볍게 필요한 부분만 사용할 수 있으면 언제든지 도입해도 상관없지 않을까 라는 생각이 듭니다.
현업같은 경우에는 내부적으로 회사에 맞춰진 디자인과 컴포넌트가 존재 할 것인데 초기 세팅같은 경우에는 shadcn/ui로 하는것도 나쁘지 않다고 생각이 들었습니다.