안녕하세요, 디자인 엔지니어 올리브예요.

UI 컴포넌트, 처음부터 만들지 마세요: shadcn/ui · SmoothUI · Component Gallery

웹사이트나 작은 서비스를 만들다 보면 버튼, 모달, 탭, 드롭다운 같은 부품을 매번 새로 만들게 됩니다. 요즘은 이런 부품을 잘 만들어 둔 곳이 많아서 가져다 쓰기만 하면 됩니다. 이 글에서는 역할이 서로 다른 세 사이트를 소개합니다.

shadcn/ui: 기본 부품을 내 프로젝트에 복사해 넣는 곳
SmoothUI: 그 위에 애니메이션을 더한 부품을 받는 곳
The Component Gallery: 부품을 어떻게 설계할지 참고하는 곳

1. shadcn/ui: 설치하지 않고 복사하는 컴포넌트

사이트: https://ui.shadcn.com
GitHub: https://github.com/shadcn-ui/ui (MIT 라이선스, 스타 약 12만 5천 개)

shadcn/ui는 React용 UI 컴포넌트 모음입니다. 일반 라이브러리처럼 npm install로 설치하는 게 아니라, 명령어를 실행하면 컴포넌트 소스 코드가 내 프로젝트 폴더에 그대로 복사됩니다.

npx shadcn@latest add button

이렇게 하면 components/ui/button.tsx 파일이 생깁니다. 이제 이 파일은 내 코드라서 색이든 크기든 동작이든 직접 열어서 고치면 됩니다. 라이브러리의 테마 설정과 씨름할 필요가 없습니다.

내부적으로는 두 가지를 조합합니다.

Radix UI: 키보드 조작, 스크린리더 지원 같은 동작과 접근성을 맡습니다.
Tailwind CSS: 모양을 맡습니다.

이럴 때 좋아요

Next.js로 사이드 프로젝트나 관리자 화면을 빨리 만들고 싶을 때
기본 디자인은 깔끔하게 두고, 나중에 브랜드에 맞게 조금씩 바꾸고 싶을 때

알아둘 점

React와 Tailwind를 쓰는 프로젝트에 맞춰져 있습니다.
코드를 복사해 온 것이라 원본이 업데이트돼도 자동으로 반영되지 않습니다.

더 볼 곳: 컴포넌트 목록(https://ui.shadcn.com/docs/components), 완성 화면 예시(https://ui.shadcn.com/blocks), 테마 미리보기(https://ui.shadcn.com/themes)

2. SmoothUI: shadcn/ui에 애니메이션을 더하다

사이트: https://smoothui.dev
GitHub: https://github.com/educlopez/smoothui (MIT 라이선스)
만든 사람: Eduardo Calvo

shadcn/ui가 기본기에 충실하다면, SmoothUI는 움직임에 집중한 컴포넌트 모음입니다. Motion과 GSAP로 스프링처럼 부드럽게 움직이는 애니메이션이 들어 있고, 공식 사이트 기준으로 약 200개(198개)의 컴포넌트를 무료로 제공합니다.

가장 큰 장점은 shadcn/ui와 같은 방식으로 설치된다는 점입니다.

npx shadcn@latest add @smoothui/dynamic-island

아이폰의 다이내믹 아일랜드를 흉내 낸 Dynamic Island, 숫자가 굴러가듯 바뀌는 Number Flow, 애니메이션 탭과 토글 같은 컴포넌트가 있습니다. 히어로, 가격표, FAQ, 후기처럼 랜딩 페이지에 바로 쓰는 블록도 제공합니다.

이럴 때 좋아요

랜딩 페이지나 포트폴리오에 "만져 보고 싶은" 느낌을 주고 싶을 때
이미 shadcn/ui를 쓰고 있어서 같은 방식으로 섞어 쓰고 싶을 때

알아둘 점

React 19와 Tailwind CSS v4 기준으로 만들어져서, 오래된 프로젝트에는 맞지 않을 수 있습니다.
애니메이션을 과하게 넣으면 오히려 산만해집니다. 포인트가 되는 곳에만 쓰는 편이 좋습니다. (SmoothUI는 사용자가 '동작 줄이기' 설정을 켜 두면 이를 반영합니다.)

3. The Component Gallery: 코드가 아니라 "설계"를 참고하는 곳

사이트: https://component.gallery
만든 사람: Iain Bean

앞의 두 곳이 가져다 쓰는 코드라면, The Component Gallery는 참고 자료집입니다. 세계 여러 회사의 디자인 시스템에서 같은 종류의 컴포넌트를 모아 비교해 볼 수 있습니다.

컴포넌트 60종
디자인 시스템 95개 (Shopify Polaris, Elastic EUI, Red Hat 등)
예시 2,671개

예를 들어 Accordion(접었다 펴는 목록) 페이지에 들어가면, 여러 회사가 이 부품을 뭐라고 부르는지, 어떻게 생겼는지, 접근성은 어떻게 처리했는지를 한곳에서 볼 수 있습니다. 디자인 시스템 목록은 React, Web Components, Tailwind 같은 기술이나 코드 예시·접근성 문서 제공 여부로 걸러 볼 수 있습니다.

이럴 때 좋아요

"이 부품 이름이 뭐였지?"(Toast인지 Snackbar인지 등) 헷갈릴 때
내 컴포넌트를 만들거나 고치기 전에 다른 회사들은 어떻게 했는지 보고 싶을 때
기획자·디자이너와 부품 이름을 맞출 때

세 곳을 함께 쓰는 법

	shadcn/ui	SmoothUI	The Component Gallery
한 줄 요약	기본 부품	움직이는 부품	부품 설계 참고서
얻는 것	내 프로젝트에 복사되는 코드	내 프로젝트에 복사되는 코드	다른 회사 사례와 이름
가격	무료 (MIT)	무료 (MIT)	무료
기술 조건	React + Tailwind	React 19 + Tailwind v4	없음

추천하는 순서는 이렇습니다.

Component Gallery에서 만들 부품의 이름과 좋은 사례를 확인합니다.
shadcn/ui로 기본 뼈대를 깝니다.
강조하고 싶은 몇 군데에만 SmoothUI 컴포넌트를 섞습니다.

바퀴를 다시 만들 시간에 내 서비스만의 기능을 만드는 데 집중해 보세요.

이 글의 수치(컴포넌트 수, 스타 수 등)는 2026년 9월 30일 기준입니다.

오늘도 읽어 주셔서 고마워요. 다음 글에서 만나요!