Shadcn/ui

이번 포스팅에서는 Shadcn/ui 라이브러리에 대해서 알아보겠습니다.

 

OverView

Material-Ui 는 유명한 UI 라이브러리라 다들 알고 있을 것 입니다. 근데 2024년부터 갑자기 인기가 급상승하는 라이브러리가 있는데,

그 라이브러리는 Shadcn/UI 입니다. 아래의 표를 참고해보면 shadcn/ui가 Material-ui의 인기를 넘은것을 볼 수 있는데, 왜 Shadcn/ui가 인기가 많아졌고, Material-ui와 비교해서 어떤것이 좋은지 장단점에 대해 알아보도록 하겠습니다.

[Shadcn-ui & Material-ui npm 트렌드]

 

MUI(Material-UI)

MUI(Material-UI)의 탄생 배경

2014년, 웹 애플리케이션 개발이 점점 더 복잡해지면서 효율적이고 일관된 사용자 인터페이스(UI)를 제공할 수 있는 도구에 대한 요구가 증가했습니다. MUI는 이러한 요구를 해결하기 위해 탄생했습니다.

2010년 초반, 일관성 부족(UI 컴포넌트가 프로젝트마다 다른 스타일과 동작), 디자인 시스템 부재(통합된 디자인이 없어 유지보수가 어렵고 비효율적) 등의 사항들을 개선하기 위해 고민하였고, 구글은 Google I/O 컴퍼런스에서 Material Design이라는 현대적이고 직관적인 UI/UX를 구축하기 위한 디자인 원칙과 통일된 사용자 경험을 제공하기 위해 디자인 표준화의 대한 가이드 라인을 제공하였습니다.

 

MUI(Material-UI)의 장점

일관성 있는 디자인
구글의 Material Design 가이드라인을 충실히 구현하여 직관적이고 깔끔한 UI를 제공합니다.

기본 제공 컴포넌트
버튼, 카드, 테이블, 모달 등 기본적인 컴포넌트가 일관된 스타일로 제공되어 시간 절약이 가능합니다.

테마와 스타일링
일관된 테마(색상, 타이포그래피, 간격 등)를 쉽게 설정할 수 있습니다.

풍부한 문서와 커뮤니티 지원
많이 사용하는 라이브로리로써, Github, Stack Overflow 등 자료가 많습니다.

빠른 프로토타이핑
준비된 컴포넌트와 테마를 사용하여 초기 UI를 빠르게 설계하고 프로토타이핑할 수 있습니다.

MUI(Material-UI)의 단점

번들 크기가 크다
MUI는 많은 기능과 컴포넌트를 포함하고 있어 초기 번들 크기가 상대적으로 큽니다 그러므로 성능과 속도가 중요한 곳에서는 불필요한 컴포넌트를 제외하거나 Tree Shaking을 적극적으로 활용해야 합니다.

학습 곡선
기본 스타일링은 간단하지만, 고도로 커스터마이징하려면 CSS-in-JS, 테마 설정 등에 대한 깊은 이해가 필요합니다.

제한적인 Material Design 스타일
기본적으로 Material Design에 기반을 두고 있어, 전혀 다른 스타일의 UI를 원하는 경우 추가적인 작업이 필요합니다.
Material Design을 따르지 않는 사용자 정의를 많이 추가하면 전체 UI의 일관성이 깨질 수 있습니다.

유지보수와 업데이트
MUI는 빠르게 발전하며 업데이트가 자주 이루어지는데, 이는 장점이지만, 오래된 프로젝트에서는 호환성 문제가 생길 수 있습니다.

특정 스타일 요구사항 충족의 어려움
매우 독창적이고 복잡한 UI를 만들고자 할 때는 MUI의 기본 스타일링과 충돌할 가능성이 있습니다.
의존성이 높아 스타일링과 컴포넌트를 MUI에 의존하다 보면 특정 상황에서 벗어날 때 제약이 발생할 수 있습니다.

 

MUI(Material-UI) 선택의 기준은 무엇인가요?

Mui를 선택하는 기준의 적합과 부적합에 대하여 설명드리겠습니다.

적합한 경우
빠른 프로토타이핑과 일관된 UI 설계가 필요한 프로젝트
MUI 디자인 가이드라인과 철학이 회사의 프로젝트와 이해 관계가 일치한다고 판단되는 경우
풍부한 문서와 커뮤니티를 활용하여, 빠르게 제작하는 경우

 

부적합한 경우
성능과 속도를 중요시 하는 경우, 번들 크기가 크기 때문에 부적합
MUI 디자인 가이드라인과 철학이랑 다른 새로운 디자인 시스템을 원하는 경우
독창적이고 복잡한 UI의 제작시 커스텀이 어려움

 

 

MUI의 대하여 간략히 알아보았습니다. 그러면 갑작스럽게 인기가 많아진 Shadcn/UI는 무엇이며 왜 인기가 많아졌는지 알아보도록 하겠습니다.

 

 

Shadcn/ui

Shadcn/ui 의 탄생 배경

shadcn/ui는 React 기반의 UI 컴포넌트 모음집으로, Radix UI와 Tailwind CSS를 활용하여 재사용 가능한 컴포넌트를 제공합니다. 이 프로젝트는 Vercel의 디자인 엔지니어인 shadcn에 의해 개발되었으며, 기존 UI 라이브러리의 한계를 극복하고자 하는 목표에서 출발하였습니다.

 

기존 UI 라이브러리의 한계

제한된 커스터마이징
전통적인 UI 라이브러리는 패키지로 제공되어, 개발자가 원하는 대로 수정하기 어려운 경우가 많았습니다.

의존성 관리의 복잡성
패키지 의존성으로 인해 프로젝트의 번들 크기가 증가하고, 불필요한 코드가 포함되는 문제가 발생했습니다.

 

[Shadcn/UI 자세한 내용 영상 참고]

 

 

Radix UI

Radix Themes는 최소한의 구성으로 바로 작동하도록 설계된 사전 스타일이 적용된 구성 요소 라이브러리입니다.

 

 

그러면 Shadcn/Ui가 왜 인기가 급상승했는지에 대하여 아래의 장단점을 통해 알아보도록 하겠습니다.

Shadcn/ui 의 장점

컴포넌트 소유권의 제공
shadcn/ui는 컴포넌트를 패키지로 제공하지 않고, 개발자가 직접 복사하여 프로젝트에 포함시키는 방식을 채택하였습니다. 이를 통해 개발자는 컴포넌트의 코드에 대한 완전한 소유권을 가지며, 필요에 따라 자유롭게 수정하고 커스터마이징할 수 있습니다.

Tailwind CSS 기반
Tailwind CSS를 기반으로 작성되어 있어, 특정 요구사항에 맞게 스타일을 쉽게 변경할 수 있습니다.

Radix UI와 통합
Radix UI의 잘 설계된 구성 요소를 기반으로 하여, 안정적이고 신뢰성 높은 UI를 제공합니다.

빠른 렌더링
컴포넌트 소유권을 통해 코드가 직접 프로젝트에 통합되므로 불필요한 의존성이 제거되고 렌더링 성능이 개선됩니다.

경량화
패키지 의존성이 없기 때문에 불필요한 코드가 번들에 포함되지 않습니다.

개발 생산성 향상
사전 정의된 컴포넌트를 활용해 빠르게 화면을 구성할 수 있습니다.
기본적으로 제공되는 스타일과 기능이 강력해 추가적인 설정 없이도 사용 가능합니다.

Shadcn/ui 의 단점

업데이트의 어려움
shadcn/ui는 패키지가 아닌 복사된 코드로 제공되므로, 라이브러리의 업데이트나 버그 수정을 자동으로 적용받지 못합니다.

Radix UI와 Tailwind CSS 의존
Radix UI와 Tailwind CSS에 익숙하지 않은 개발자라면 새로운 개념을 배우는 데 시간이 필요합니다.
Radix UI의 설계에 맞춰 사용해야 하기 때문에, 기존 프로젝트의 구조나 스타일과 충돌이 발생할 수 있습니다.

복잡한 요구사항 충족 어려움
고도로 맞춤화된 UI 설계나 독특한 인터페이스 요구사항에는 추가적인 개발 작업이 필요합니다.

커뮤니티와 생태계의 비교적 작은 규모
MUI나 Ant Design 같은 대규모 라이브러리와 비교하면, 사용자 기반이나 추가적인 플러그인이 적은 편입니다.

 

 

Shadcn/ui 선택의 기준은 무엇인가요?

Shadcn/ui를 선택하는 기준의 적합과 부적합에 대하여 설명드리겠습니다.

적합한 경우
Tailwind CSS와 Radix UI를 이미 사용 중이거나 익숙한 경우
컴포넌트 코드에 대한 완전한 소유권과 커스터마이징 자유도가 필요한 경우
경량화된 번들 크기와 불필요한 의존성 제거가 중요한 프로젝트

 

부적합한 경우
패키지로 제공되는 자동 업데이트와 유지보수를 선호하는 경우
기존 프로젝트에서 Radix UI나 Tailwind CSS를 사용하지 않는 경우
빠르고 광범위한 기본 제공 컴포넌트를 원하는 경우(MUI, Ant Design 등 선호)

 

 

[Shadcn/UI 공식 문서]

Introduction

 

 

Shadcn/UI의 대하여 간략히 알아보았습니다.