팀프로젝트에 shadcn/ui 도입하기

개요

 

팀 프로젝트를 진행하는 도중. 허접한 디자인을 더이상 두고 볼 수만은 없다는 판단이 들어 ui library를 써야겠다고 결정을 내렸다.

그렇다면 ui library는 정말 필요한가?

 

 

Creating a design system from scratch is such a waste of time, even for an enterprise-level org.

 

 

규모가 작은 회사에서나 쓰는 거 아니냐? 라는 한 유저의 댓글에 다른 유저의 대답. 엔터프라이즈급 회사에서도 굳이 라이브러리를 사용하지 않고 0부터 시작하는 것은 시간 낭비일 수 있다는 말.

디자이너도 없고, 5주라는 시간 내에 최대한 완성도 높은 UI를 만들어야 하는 우리의 프로젝트를 위해 라이브러리 사용은 필수적이라고 할 수 있다.

 

 

사실...

 

사실 팀원 분들은 처음에 라이브러리를 도입하는 것보다 직접 하나하나 구현해서 우리의 실력을 (포트폴리오에) 드러내는 것이 좋을 것 같다고 말씀하셔서 일단 라이브러리 없이 프로젝트를 진행하고 있었다. 그런데 진행하면 할수록 느껴지는 뭔가 아쉬움? 허접함이 있었다.
결국 라이브러리 사용에는 다같이 동의하게 되었는데, 문제는 어떤 라이브러리를 사용하느냐 하는 것이다.

 

 

저의 선택은요...

 

이전부터 익히 들어왔던 shadcn/ui. 이번에 꼭 사용을 해보고 싶었기 때문에 팀원들을 설득해야 하는 시간이 돌아왔다.

https://risingstars.js.org/2023/en
를 보면 알 수 있듯이, 2023년에 가장 인기가 많았던 프로젝트라고 한다. 2023년에 출시된 따끈따끈한 컴포넌트 라이브러리! 물론 오픈 소스다.

shadcn/ui는 radix-ui를 기반으로 하고 있다.

radix-ui

 

그렇다면 radix-ui는 어떤 라이브러리일까?

 

 

An open-source UI component library for building high-quality, accessible design systems and web apps.

 

 

높은 퀄리티의, 접근성을 만족하는 디자인 시스템을 만들기 위한 UI 컴포넌트 라이브러리.

https://www.radix-ui.com/primitives/docs/overview/introduction

• accessibility
  접근성. WAI-ARIA 디자인 패턴을 따른다. aria-label 등의 복잡하고 어려운 접근성 관련 사항들이 이미 적용되어 있다.
• customization
  스타일링이 되지 않은 상태의 컴포넌트이기 때문에 충분히 나만의 디자인 시스템을 만들 수 있다.
• developer experience
  쉽고 빠르게 사용할 수 있어 편리하다.

 

radix-ui는 headless ui 라이브러리이기 때문에 유연성이 있다.

 

그렇다면 headless란 뭘까?

 

 

component 기반 ui 라이브러리와 headless ui 라이브러리

• 컴포넌트 기반 ui 라이브러리 : 기능과 스타일이 정의되어 있음.
• headless ui : 스타일링은 없고 기능만 정의되어 있음.

 

 

shadcn/ui

 

shadcn/ui는 앞에서 언급한 radix ui와 tailwindcss를 사용하여 만들어진 재사용 가능한 컴포넌트들의 모음이다.
(우리 프로젝트는 이미 tailwind를 사용하고 있었기 때문에 딱이라고 할 수 있다.)
radix ui라는 headless ui library에 스타일링이 얹어진 라이브러리라고 이해하면 된다.

사용은 공식 문서를 보면 어렵지 않게 할 수 있다. 모든 코드가 내 프로젝트 디렉토리 안에 포함되기 때문에 원한다면 선택적으로 스타일링을 변경할 수도 있다.
vite에 shadcn install

 

 

마무리

MUI, 부트스트랩 등의 디자인 템플릿 사용도 고민했었으나,

• 프로젝트의 ui/ux 완성도는 높이면서
• 직접 디자인을 커스텀하고 싶고
• tailwindcss를 사용해야 한다.
  이 조건을 만족하는 방향으로 진행해야하기 때문에 shadcn/ui가 좋은 선택이 될 것 같다.

 

 

https://www.howdy-mj.me/design/headless-components
https://velog.io/@ckstn0777/shadcnui-를-이용한-공유-UI-컴포넌트-사용-경험#mui과-radix-ui-차이점-headless-ui
https://blog.bitsrc.io/enhance-your-dx-with-radix-a-customizable-and-a11y-friendly-react-component-library-91ddfcfef1c9