React UI 개발을 위한 필수 정리
1. CSS Framework
CSS Framework는 CSS를 직접 작성하는 시간을 줄여주고, 빠르게 UI를 만들 수 있도록 도와주는 라이브러리입니다.
(1) Tailwind CSS ⭐⭐⭐⭐⭐ (가장 추천)
특징
Utility First 방식
클래스로 스타일 작성
반응형 제작이 쉬움
React와 궁합이 가장 좋음
실무 사용률 매우 높음
예시
<button className="bg-blue-500 text-white px-5 py-2 rounded-lg">
버튼
</button>
공식 사이트
https://tailwindcss.com
(2) Bootstrap
설치
npm install bootstrap
사용
import "bootstrap/dist/css/bootstrap.min.css";
장점
배우기 쉬움
컴포넌트가 많음
빠르게 화면 제작 가능
(3) Material UI (MUI)
설치
npm install @mui/material @emotion/react @emotion/styled
장점
Google Material Design
컴포넌트가 매우 많음
관리자 페이지 제작에 많이 사용
공식
https://mui.com
(4) Ant Design
설치
npm install antd
장점
기업용 프로젝트
관리자 페이지
테이블 기능이 강력
(5) Chakra UI
설치
npm install @chakra-ui/react
장점
React 전용
코드가 직관적
배우기 쉬움
2. 아이콘 라이브러리
Lucide React ⭐⭐⭐⭐⭐
설치
npm add lucide-react
사용
import { Search } from "lucide-react";
function App() {
return <Search />;
}
자주 사용하는 아이콘
import {
Search,
Heart,
Menu,
Home,
User,
Bell,
Settings,
ShoppingCart,
Camera,
Phone,
Mail,
MapPin
} from "lucide-react";
React Icons
설치
npm install react-icons
사용
import { FaGithub } from "react-icons/fa";
<FaGithub />
여러 아이콘을 한 번에 사용할 수 있습니다.
FontAwesome
Bootstrap Icons
HeroIcons
Remix Icons
3. UI 디자인 참고 사이트
실무에서는 코딩보다 디자인 레퍼런스 찾는 시간이 더 많을 때도 있습니다.
Pinterest ⭐⭐⭐⭐⭐
https://kr.pinterest.com
검색 추천
music ui
dashboard ui
golf website
restaurant ui
login page
landing page
portfolio website
minimal ui
glassmorphism
dark ui
card ui
travel website
ecommerce ui
Dribbble ⭐⭐⭐⭐⭐
https://dribbble.com
검색
dashboard
golf
banking
movie app
finance
admin panel
Behance
https://www.behance.net
검색
web design
mobile ui
ux
Figma Community
https://www.figma.com/community
무료 UI를 다운로드할 수 있습니다.
검색
Dashboard
Mobile
Landing
Restaurant
Golf
4. 이미지 사이트
Unsplash
https://unsplash.com
무료 고화질 사진
Pexels
https://www.pexels.com
무료 이미지 + 영상
Pixabay
https://pixabay.com
무료 사진
무료 벡터
무료 영상
5. 일러스트 사이트
Storyset
https://storyset.com
애니메이션 일러스트 제공
Icons8
https://icons8.com
아이콘
일러스트
사진
unDraw
https://undraw.co
무료 SVG 일러스트
6. 컬러 사이트
Coolors
https://coolors.co
Adobe Color
https://color.adobe.com
7. 폰트
Google Fonts
https://fonts.google.com
Pretendard
https://pretendard.kr
8. 실무에서 가장 많이 사용하는 조합
React
↓
Vite
↓
TailwindCSS
↓
Lucide React
↓
React Router
↓
Axios
↓
Framer Motion
9. 포트폴리오 제작 순서
1. Pinterest
↓
2. Dribbble
↓
3. Figma에서 와이어프레임 제작
↓
4. React 프로젝트 생성
npm create vite@latest
↓
5. Tailwind 설치
↓
6. Lucide 설치
npm add lucide-react
↓
7. 컴포넌트 분리
Header
Hero
Section
Footer
↓
8. GitHub 업로드
↓
9. Vercel 배포
10. React 공부 추천 순서
JSX
Props
State (useState)
Event
map()
useEffect
React Router
Axios(API 호출)
Tailwind CSS
반응형
컴포넌트 설계
Git & GitHub
Vercel 배포
현재 수준에서 추천
지금은 JSX, Props, Tailwind를 배우고 있는 단계이므로, 다음으로는 useState → 이벤트 처리 → map() → React Router를 학습하는 것이 자연스러운 순서입니다. 이 순서대로 익히면 간단한 웹사이트를 혼자 제작할 수 있는 기반을 갖추게 됩니다.
1. CSS Framework
CSS Framework는 CSS를 직접 작성하는 시간을 줄여주고, 빠르게 UI를 만들 수 있도록 도와주는 라이브러리입니다.
(1) Tailwind CSS ⭐⭐⭐⭐⭐ (가장 추천)
특징
Utility First 방식
클래스로 스타일 작성
반응형 제작이 쉬움
React와 궁합이 가장 좋음
실무 사용률 매우 높음
예시
<button className="bg-blue-500 text-white px-5 py-2 rounded-lg">
버튼
</button>
공식 사이트
https://tailwindcss.com
(2) Bootstrap
설치
npm install bootstrap
사용
import "bootstrap/dist/css/bootstrap.min.css";
장점
배우기 쉬움
컴포넌트가 많음
빠르게 화면 제작 가능
(3) Material UI (MUI)
설치
npm install @mui/material @emotion/react @emotion/styled
장점
Google Material Design
컴포넌트가 매우 많음
관리자 페이지 제작에 많이 사용
공식
https://mui.com
(4) Ant Design
설치
npm install antd
장점
기업용 프로젝트
관리자 페이지
테이블 기능이 강력
(5) Chakra UI
설치
npm install @chakra-ui/react
장점
React 전용
코드가 직관적
배우기 쉬움
2. 아이콘 라이브러리
Lucide React ⭐⭐⭐⭐⭐
설치
npm add lucide-react
사용
import { Search } from "lucide-react";
function App() {
return <Search />;
}
자주 사용하는 아이콘
import {
Search,
Heart,
Menu,
Home,
User,
Bell,
Settings,
ShoppingCart,
Camera,
Phone,
Mail,
MapPin
} from "lucide-react";
React Icons
설치
npm install react-icons
사용
import { FaGithub } from "react-icons/fa";
<FaGithub />
여러 아이콘을 한 번에 사용할 수 있습니다.
FontAwesome
Bootstrap Icons
HeroIcons
Remix Icons
3. UI 디자인 참고 사이트
실무에서는 코딩보다 디자인 레퍼런스 찾는 시간이 더 많을 때도 있습니다.
Pinterest ⭐⭐⭐⭐⭐
https://kr.pinterest.com
검색 추천
music ui
dashboard ui
golf website
restaurant ui
login page
landing page
portfolio website
minimal ui
glassmorphism
dark ui
card ui
travel website
ecommerce ui
Dribbble ⭐⭐⭐⭐⭐
https://dribbble.com
검색
dashboard
golf
banking
movie app
finance
admin panel
Behance
https://www.behance.net
검색
web design
mobile ui
ux
Figma Community
https://www.figma.com/community
무료 UI를 다운로드할 수 있습니다.
검색
Dashboard
Mobile
Landing
Restaurant
Golf
4. 이미지 사이트
Unsplash
https://unsplash.com
무료 고화질 사진
Pexels
https://www.pexels.com
무료 이미지 + 영상
Pixabay
https://pixabay.com
무료 사진
무료 벡터
무료 영상
5. 일러스트 사이트
Storyset
https://storyset.com
애니메이션 일러스트 제공
Icons8
https://icons8.com
아이콘
일러스트
사진
unDraw
https://undraw.co
무료 SVG 일러스트
6. 컬러 사이트
Coolors
https://coolors.co
Adobe Color
https://color.adobe.com
7. 폰트
Google Fonts
https://fonts.google.com
Pretendard
https://pretendard.kr
8. 실무에서 가장 많이 사용하는 조합
React
↓
Vite
↓
TailwindCSS
↓
Lucide React
↓
React Router
↓
Axios
↓
Framer Motion
9. 포트폴리오 제작 순서
1. Pinterest
↓
2. Dribbble
↓
3. Figma에서 와이어프레임 제작
↓
4. React 프로젝트 생성
npm create vite@latest
↓
5. Tailwind 설치
↓
6. Lucide 설치
npm add lucide-react
↓
7. 컴포넌트 분리
Header
Hero
Section
Footer
↓
8. GitHub 업로드
↓
9. Vercel 배포
10. React 공부 추천 순서
JSX
Props
State (useState)
Event
map()
useEffect
React Router
Axios(API 호출)
Tailwind CSS
반응형
컴포넌트 설계
Git & GitHub
Vercel 배포
현재 수준에서 추천
지금은 JSX, Props, Tailwind를 배우고 있는 단계이므로, 다음으로는 useState → 이벤트 처리 → map() → React Router를 학습하는 것이 자연스러운 순서입니다. 이 순서대로 익히면 간단한 웹사이트를 혼자 제작할 수 있는 기반을 갖추게 됩니다.
#React UI 개발을 위한 필수 정리