앱 디자인을 예쁘게 만드는 완벽 가이드

1

React UI 컴포넌트 라이브러리

최상위 추천 ★★★★★

shadcn/ui ★★★★★

모던하고 깔끔, 요즘 가장 인기 있는 UI 라이브러리. Tailwind + Radix 기반.

모든 프로젝트 Tailwind 기반

ui.shadcn.com

Material UI (MUI) ★★★★★

구글 Material Design, 컴포넌트가 가장 많고 커뮤니티 최대.

대규모 앱 구글 스타일

mui.com

Ant Design ★★★★★

엔터프라이즈급, 테이블/폼이 특히 강력. 관리자 페이지에 최적.

관리자 페이지 대시보드

ant.design

Chakra UI ★★★★★

쓰기 쉽고 접근성 우수. 직관적인 API로 빠르게 개발 가능.

빠른 개발 접근성

chakra-ui.com

Mantine ★★★★★

100개+ 컴포넌트, 유틸리티 훅 포함. 올인원 솔루션.

풀스택 앱 100+ 컴포넌트

mantine.dev

우수 추천 ★★★★

NextUI

아름다운 디자인, Next.js에 최적화된 UI 라이브러리.

Next.js

nextui.org

Radix UI

접근성 최고, 스타일을 100% 자유롭게 커스텀 가능.

커스텀 디자인

radix-ui.com

Headless UI

Tailwind 팀 공식. 스타일 자유도 100%.

Tailwind 공식

headlessui.com

DaisyUI

Tailwind 기반, 클래스 이름만으로 완성되는 UI.

빠른 프로토타입

daisyui.com

Flowbite

Tailwind 기반, 다양한 컴포넌트와 블록 제공.

Tailwind 프로젝트

flowbite.com

Tremor

대시보드/차트 전문 컴포넌트 라이브러리.

데이터 대시보드

tremor.so

React Aria (Adobe)

Adobe 제작. 접근성이 완벽한 기업용 컴포넌트.

접근성 완벽

react-spectrum.adobe.com

Park UI

shadcn 스타일 + Ark UI 기반의 모던 컴포넌트.

모던 앱

park-ui.com

2

CSS 프레임워크

프레임워크	설명	AI 궁합	추천도	사이트
Tailwind CSS	유틸리티 기반, AI와 궁합 최고	★★★★★	★★★★★	tailwindcss.com
Bootstrap 5	가장 오래되고 널리 쓰이는 프레임워크	★★★★	★★★★	getbootstrap.com
Bulma	가볍고 배우기 쉬운 CSS 프레임워크	★★★	★★★	bulma.io
Open Props	CSS 변수 기반 디자인 토큰	★★★	★★★	open-props.style

Tailwind CSS 핵심 포인트

클래스 이름만으로 스타일링 가능. AI(Cursor)에게 요청할 때 가장 효과적인 CSS 프레임워크.

<!-- 설치 -->
npm install tailwindcss

<!-- 예시: 그라디언트 카드 -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl shadow-lg p-6">
  <h2 class="text-white text-2xl font-bold">예쁜 카드</h2>
  <p class="text-white/80 mt-2">그라디언트 + 둥근 모서리 + 그림자</p>
</div>
        

3

아이콘 라이브러리

라이브러리	아이콘 수	스타일	사이트
Lucide Icons	1,400+	라인(깔끔)	lucide.dev
Heroicons	300+	라인/솔리드	heroicons.com
React Icons	40,000+	여러 팩 통합	react-icons.github.io
Phosphor Icons	7,000+	6가지 스타일	phosphoricons.com
Tabler Icons	4,600+	라인(섬세)	tabler.io/icons
Font Awesome	26,000+	라인/솔리드/브랜드	fontawesome.com
Iconify	200,000+	모든 아이콘 통합	iconify.design

4

애니메이션 라이브러리

Framer Motion

React 애니메이션 최고. 부드럽고 강력한 모션 라이브러리.

난이도: 중React 전용

framer.com/motion

GSAP

고급 애니메이션 엔진. 프로급 인터랙션 구현 가능.

난이도: 상범용

gsap.com

Lottie

JSON 기반 벡터 애니메이션. After Effects 연동.

난이도: 하벡터

lottiefiles.com

Animate.css

CSS만으로 간단한 애니메이션. 클래스 추가만 하면 끝.

난이도: 하CSS only

animate.style

AOS (Animate on Scroll)

스크롤 시 나타나는 애니메이션. 랜딩 페이지에 최적.

난이도: 하스크롤

michalsnik.github.io/aos

Auto Animate

한 줄의 코드로 자동 애니메이션. 리스트 정렬 등에 최적.

난이도: 하자동

auto-animate.formkit.com

React Spring

물리 기반 자연스러운 스프링 애니메이션.

난이도: 중React

react-spring.dev

Motion One

초경량 웹 애니메이션 라이브러리.

난이도: 하경량

motion.dev

5

차트 / 데이터 시각화

라이브러리	설명	사이트
Recharts	React 차트, 쓰기 가장 쉬움	recharts.org
Chart.js	가벼운 범용 차트 라이브러리	chartjs.org
Nivo	아름다운 데이터 시각화 컴포넌트	nivo.rocks
Victory	React Native도 지원하는 차트	formidable.com
Visx	Airbnb의 D3 + React 차트 라이브러리	airbnb.io/visx
Apache ECharts	대규모 데이터 시각화에 강력	echarts.apache.org

6

기타 유용한 UI 도구

알림 / 토스트

라이브러리	설명
Sonner	가장 예쁜 토스트 알림 (shadcn 호환)
React Hot Toast	가볍고 커스텀 쉬운 토스트
Notistack	Material UI 호환 스택형 토스트

폼 / 입력

라이브러리	설명
React Hook Form	폼 관리 최고, 성능 우수
Zod	타입 안전 데이터 유효성 검사
React Select	고급 셀렉트 박스 (검색, 멀티 선택)
React DatePicker	예쁜 날짜 선택기

테이블 / 리스트

라이브러리	설명
TanStack Table	가장 강력한 테이블 (정렬, 필터, 페이지네이션)
AG Grid	엔터프라이즈급 데이터 그리드

미디어 / 파일

라이브러리	설명
Embla Carousel	부드러운 캐러셀/슬라이더
React Dropzone	파일 드래그앤드롭 업로드
React PDF	PDF 뷰어/생성
React Player	YouTube, Vimeo 등 비디오 플레이어
React Image Gallery	이미지 갤러리/라이트박스

레이아웃 / 네비게이션

라이브러리	설명
React Router	페이지 라우팅 (SPA 필수)
Swiper	터치 슬라이더/스와이프
React Grid Layout	드래그 가능한 그리드 레이아웃
React Resizable Panels	리사이즈 가능한 패널 분할

7

AI(Cursor)에게 디자인 잘 요청하는 방법

브랜드 스타일 참조하기

애플 스타일로 미니멀하게 만들어줘
노션처럼 깔끔한 UI로 만들어줘
스포티파이 느낌 다크 테마로 만들어줘
인스타그램처럼 그라디언트 활용해서 만들어줘
에어비앤비처럼 카드형 레이아웃으로 만들어줘
트위터(X)처럼 심플한 피드 UI로 만들어줘

디자인 트렌드 키워드 사용하기

글래스모피즘(유리 효과) 적용해줘
뉴모피즘(입체 느낌) 카드로 만들어줘
다크 모드 + 네온 포인트 컬러로 만들어줘
그라디언트 배경 + 부드러운 그림자 넣어줘
마이크로 인터랙션(호버 효과) 추가해줘
벤토 그리드(다양한 크기 카드 배치) 레이아웃으로 만들어줘
플로팅 액션 버튼 추가해줘
스켈레톤 로딩 UI 추가해줘

구체적 요청 예시

"shadcn/ui + Tailwind CSS로 대시보드 만들어줘.
 다크 모드 지원, 사이드바 네비게이션,
 카드형 통계 위젯, Recharts로 차트 포함"
        

"Framer Motion으로 페이지 전환 애니메이션 넣어줘.
 페이드인 + 슬라이드업 효과로"
        

가장 효과적인 방법: 참고 이미지 보여주기

1. 예쁜 디자인 스크린샷을 캡처한다
2. Cursor 채팅에 이미지를 붙여넣는다 (Ctrl+V)
3. "이런 느낌으로 만들어줘"라고 요청한다

8

디자인 영감 받는 사이트

Dribbble

디자인 영감 #1, UI/UX 작품 모음

AI로 UI 코드 생성 (Vercel)

9

컬러 / 폰트 / 디자인 토큰 도구

컬러 도구

Coolors

색상 팔레트 자동 생성기

Color Hunt

폰트 도구