| 라이브러리 | 설명 | 사이트 | 추천 용도 |
|---|---|---|---|
| shadcn/ui 인기 | 모던하고 깔끔, 요즘 가장 인기 | ui.shadcn.com | 모든 프로젝트 |
| Material UI (MUI) | 구글 디자인, 컴포넌트 가장 많음 | mui.com | 대규모 앱 |
| Ant Design | 엔터프라이즈급, 테이블/폼 강력 | ant.design | 관리자 페이지, 대시보드 |
| Chakra UI | 쓰기 쉽고 접근성 우수 | chakra-ui.com | 빠른 개발 |
| Mantine | 100개+ 컴포넌트, 훅 포함 | mantine.dev | 풀스택 앱 |
| NextUI | 아름다운 디자인, Next.js 최적화 | nextui.org | Next.js 프로젝트 |
| Radix UI | 접근성 최고, 스타일 커스텀 자유 | radix-ui.com | 커스텀 디자인 |
| Headless UI | Tailwind 공식, 스타일 자유도 높음 | headlessui.com | Tailwind 프로젝트 |
| DaisyUI | Tailwind 기반, 클래스만으로 UI | daisyui.com | 빠른 프로토타입 |
| Flowbite | Tailwind 기반, 다양한 컴포넌트 | flowbite.com | Tailwind 프로젝트 |
| Tremor | 대시보드/차트 전문 | tremor.so | 데이터 대시보드 |
| React Aria (Adobe) | 접근성 완벽, 기업용 | react-spectrum.adobe.com | 접근성 중요한 앱 |
| Park UI | shadcn 스타일 + Ark UI 기반 | park-ui.com | 모던 앱 |
| 프레임워크 | 설명 | 추천도 |
|---|---|---|
| Tailwind CSS 추천 | 유틸리티 기반, AI와 궁합 최고 | ★★★★★ |
| Bootstrap 5 | 가장 오래된 인기 프레임워크 | ★★★★ |
| Bulma | 가볍고 배우기 쉬움 | ★★★ |
| Open Props | CSS 변수 기반 디자인 토큰 | ★★★ |
| 라이브러리 | 아이콘 수 | 사이트 |
|---|---|---|
| Lucide Icons | 1,400+ | lucide.dev |
| Heroicons | 300+ | heroicons.com |
| React Icons 통합팩 | 40,000+ | react-icons.github.io |
| Phosphor Icons | 7,000+ | phosphoricons.com |
| Tabler Icons | 4,600+ | tabler.io/icons |
| Font Awesome | 26,000+ | fontawesome.com |
| 라이브러리 | 설명 | 사이트 |
|---|---|---|
| Framer Motion 추천 | React 애니메이션 최고 | framer.com/motion |
| GSAP | 강력한 고급 애니메이션 | gsap.com |
| Lottie | JSON 기반 벡터 애니메이션 | lottiefiles.com |
| Animate.css | CSS만으로 간단한 애니메이션 | animate.style |
| AOS | 스크롤 애니메이션 | michalsnik.github.io/aos |
| Auto Animate | 한 줄로 자동 애니메이션 | auto-animate.formkit.com |
| 라이브러리 | 설명 | 사이트 |
|---|---|---|
| Recharts React | React 차트, 쓰기 쉬움 | recharts.org |
| Chart.js | 가벼운 범용 차트 | chartjs.org |
| Nivo | 아름다운 데이터 시각화 | nivo.rocks |
| Victory | React Native도 지원 | formidable.com/open-source/victory |
| Visx | Airbnb의 D3 + React | airbnb.io/visx |
| 도구 | 설명 |
|---|---|
| React Hot Toast | 예쁜 알림 토스트 |
| Sonner | 더 예쁜 토스트 (shadcn 호환) |
| React Hook Form | 폼 관리 최고 |
| Zod | 데이터 유효성 검사 |
| TanStack Table | 강력한 테이블 |
| Embla Carousel | 부드러운 캐러셀/슬라이더 |
| React Dropzone | 파일 드래그앤드롭 업로드 |
| React PDF | PDF 뷰어/생성 |
참고 이미지를 보여주는 것이 가장 효과적입니다!
원하는 디자인의 스크린샷을 캡처해서 Cursor 채팅창에 붙여넣고,
"이런 느낌으로 만들어줘"라고 하면 텍스트 설명보다 훨씬 정확하게 원하는 결과물을 얻을 수 있습니다.
| 사이트 | 설명 | URL |
|---|---|---|
| Dribbble 필수 | 디자인 영감 최고 | dribbble.com |
| Behance | Adobe 디자인 커뮤니티 | behance.net |
| Awwwards | 수상작 웹사이트 모음 | awwwards.com |
| Mobbin | 모바일 앱 UI 패턴 | mobbin.com |
| One Page Love | 원페이지 디자인 모음 | onepagelove.com |
| Screenlane | 앱 UI 스크린 모음 | screenlane.com |
| v0.dev AI | AI로 UI 생성 (Vercel) | v0.dev |
| ui.shadcn.com | shadcn 컴포넌트 예시 | ui.shadcn.com |
| Tailwind UI | Tailwind 공식 템플릿 | tailwindui.com |