shadcn/ui, 맞는 사람과 안 맞는 사람

npm install이 아니라 복사해서 쓰라고?

처음 shadcn/ui를 접했을 때 좀 의아했다. 보통 UI 라이브러리는 npm으로 설치해서 import하는 건데, 이건 컴포넌트 코드를 내 프로젝트로 복사해 넣는 방식이다. npx shadcn@latest add button 치면 내 components/ui/ 폴더에 Button 컴포넌트 소스 코드가 생긴다.

"이게 왜 좋다는 거지?" 싶었는데, 써보니까 이해됐다.

커스터마이징이 자유롭다는 게 핵심

MUI나 Ant Design 같은 라이브러리를 커스터마이징하려면 테마 시스템을 이해해야 하고, override할 스타일을 찾아야 하고, 가끔은 !important까지 써야 한다. 이 과정이 생각보다 시간을 많이 잡아먹는다.

shadcn/ui는 소스 코드가 내 프로젝트에 있으니까 그냥 코드를 직접 고치면 된다. padding을 바꾸고 싶으면 Tailwind 클래스를 수정하면 끝이다. 이 자유도가 디자이너와 협업할 때 특히 빛났다.

(사실 그냥 멋있어 보여서 쓰기 시작한 것도 있다.)

첫 번째 프로젝트: 잘 맞았다

스타트업 어드민 대시보드를 만들 때 shadcn/ui를 썼다. 디자인 시스템이 없었고, 빠르게 만들어야 했다. 기본 컴포넌트(Button, Input, Dialog, Table)를 가져다 쓰고 색상만 브랜드에 맞게 바꿨다.

2주 만에 20개 페이지를 만들었다. Radix UI 기반이라 접근성도 기본으로 챙겨져 있었고, 디자이너한테 "이거 어디서 가져온 거예요? 깔끔하네요"라는 말까지 들었다.

두 번째 프로젝트: 안 맞았다

팀원이 7명인 프로젝트에서 또 shadcn/ui를 도입했다. 여기서 문제가 생겼다. 컴포넌트가 내 프로젝트에 있으니까 각자 다르게 수정한다. A가 Button 스타일을 바꾸면 B가 만든 페이지에서 깨진다. 코드 리뷰에서 "이 Button 수정이 다른 페이지에 영향 주는 거 확인했어요?" 같은 논의가 매주 벌어졌다.

결국 "shadcn/ui 컴포넌트는 한 사람만 수정한다"는 규칙을 만들었는데, 그러면 npm 패키지 쓰는 것과 뭐가 다른 건지 모르겠더라.

업데이트 관리의 고통

npm 패키지면 버전 올리면 끝이다. shadcn/ui는 업데이트가 나와도 수동으로 diffing해서 반영해야 한다. 내가 커스터마이징한 부분은 유지하면서 버그 픽스만 가져와야 하는데, 이게 생각보다 귀찮다.

3개월 동안 업데이트를 안 했더니 나중에 한 번에 반영하려니까 충돌이 8곳에서 났다. 결국 포기하고 새로 add한 다음에 커스텀 코드를 다시 적용했다. 2시간이 날아갔다.

맞는 사람, 안 맞는 사람

개인 프로젝트나 소규모 팀(1-3명)에서, 디자인 커스터마이징을 자주 해야 하고, Tailwind CSS에 익숙하면 shadcn/ui가 잘 맞다.

팀이 크거나, 디자인 시스템이 이미 있거나, 컴포넌트 업데이트를 자주 받아야 하면 일반적인 UI 라이브러리가 낫다.

결국 도구의 철학이 내 상황과 맞는지가 중요하다. shadcn/ui의 "소유권은 당신에게" 철학이 자유가 될 수도, 짐이 될 수도 있다.