무료 UI 리소스 정리 (Bootstrap + Metronic)
1) 대시보드/레이아웃 템플릿 (Bootstrap 기반)
-
CoreUI Free (Bootstrap 5) – 컴포넌트 풍부, Vue 버전도 제공. 관리자형 레이아웃 뚝딱.
👉 coreui.io | GitHub -
AdminLTE (BS5) – 고전이지만 업데이트 계속, 위젯/차트/폼 예시 많음.
👉 AdminLTE.IO | GitHub -
SB Admin 2 – 심플한 스타터용. 빠르게 뼈대 잡을 때.
👉 startbootstrap.com | GitHub
메트로닉 레이아웃은 그대로 쓰고, 위 템플릿에서 “섹션/카드/테이블”만 부분 차용하면 개발 속도 확 올라갑니다.
2) Bootstrap UI 스니펫 (복붙형)
-
Bootsnipp – 네비/카드/폼 등 컴포넌트 조각.
👉 Bootsnipp.com -
Bootdey – 프로필, 코멘트, 타임라인 같은 완성형 블록 다수.
👉 bootdey.com -
Bootstrap 공식 예제/컴포넌트 문서 – 클래스 조합 참고 필수.
👉 getbootstrap.com -
Bootswatch – 부트스트랩 테마 교체 한 방(색감만 갈아끼우기).
👉 bootswatch.com | bootstrapcdn.com
3) 아이콘 (KeenIcons 대체로 깔끔)
-
Bootstrap Icons – 부트스트랩 톤앤매너에 찰떡, 2,000+ 아이콘.
👉 icons.getbootstrap.com | GitHub -
Lucide – Feather 확장판, 선형 아이콘. Vue 바인딩도 있음.
👉 Lucide | Vue Integration -
Heroicons – Tailwind 제작이지만 범용 SVG, Vue 래퍼도 존재.
👉 Heroicons | vue-hero-icons.netlify.app
4) 차트 (백오피스/통계 화면용)
-
Chart.js (MIT) – 캔버스 기반, 가벼움/문서 좋음.
👉 chartjs.org -
ApexCharts (커뮤니티 라이선스 무료) – 인터랙션 강하고 예제 풍부 (매출 200만달러 미만 조직은 무료).
👉 ApexCharts.js | GitHub
5) 일러스트/배경 (앱 느낌 살리기)
-
unDraw – 상업적 사용도 무료, 색상 커스터마이즈 쉬움.
👉 unDraw -
Haikei / GetWaves – SVG 블롭/웨이브 배경 자동 생성 → 히어로 섹션/헤더 분리자에 딱.
👉 haikei.app | getwaves.io
빠른 적용 팁 (Metronic + Vue + Bootstrap)
-
컴포넌트 수혈: Bootdey/Bootsnipp에서 필요한 섹션만 가져와 Metronic 카드/그리드 유틸 클래스로 래핑. (충돌나면 Metronic 유틸리티를 우선 사용)
👉 bootdey.com | Bootsnipp.com -
아이콘 통일: 프로젝트 전역에 bootstrap-icons 또는 lucide-vue-next 중 하나만 채택해 일관성 확보.
👉 Bootstrap Icons | Lucide -
차트 선택: 가벼움 = Chart.js, 상호작용/옵션 풍부 = ApexCharts. 관리화면이면 ApexCharts가 편한 경우가 많아요.
👉 chartjs.org | ApexCharts.js -
색감/톤: 당장 바꾸려면 Bootswatch로 테마 스와핑 → 이후 SCSS에서 Metronic 토큰만 살짝 커스텀.
👉 bootswatch.com -
앱 분위기: 헤더 아래 SVG 웨이브나 블롭 배경을 넣으면 모바일앱스러운 “섹션 구분”이 또렷해집니다.
👉 getwaves.io | haikei.app
