DAISYUI 소개 | 스타일링 프레임워크

24년 CSS 프레임워크 분야에서 Tailwind의 뒤를 이어 2위를 차지한 오픈 소스 UI 컴포넌트 라이브러리

 

Tailwind를 기반으로 만들어져 호환도 가능하고 부트스트랩 스타일로 코딩할 수 있다는 장점이 있다

 

이전에도 이런 식으로 개발된 라이브러리가 여럿 있고 아직도 유료버전도 많이 있으나 무료버전으로도 유료버전 프레임워크들과 비교해도 괜찮은 기능을 지원해서 성공해 버렸다

 

https://risingstars.js.org/2024/en

 

한눈에 보는 HTML 코드

<button class="bg-indigo-600 px-4 py-3 text-center text-sm font-semibold inline-block text-white cursor-pointer uppercase transition duration-200 ease-in-out rounded-md hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 active:scale-95">
  Tailwind Button
</button>

 

개인적으로 Tailwind를 별로 안 좋아하는 게 버튼 하나 만들려면 이런 식으로 코드만 늘어나는 경우가 있어서 보기가 싫을 때가 많다

 

<button class="btn btn-primary">
  daisyUI Button
</button>

 

 

 

장점

쉬운 설치와 버튼, 폼, 알림, 모달과 같은 다양한 컴포넌트를 지원한다

 

Tailwind CSS와 호환가능하다

 

Bootstrap 사용자들의 러닝커브가 낮다

 

반응형 디자인, 다양한과 다양한 색상과 다크 테마들을 지원한다

 

 

 

단점

Tailwind CSS도 추가해야 하고 Daisy UI도 추가해야 하는 의존성 증가

 

많은 컴포넌트와 테마가 포함되어 필요하지 않은 스타이로가 컴포넌트가 번들에 포함되어 파일 크기 및 성능 이슈

 

특정 컴포넌트만 수정하려고 할 때 커스터마이징이 제한

 

특정 디자인 패턴을 강제해야 한다

 

 

감상

비슷한 프레임워크들을 많이 찾아보고 사용해보고 했는데

 

UI는 약간은 촌스럽다고도 생각해도 잘 다듬으면 괜찮아질 거 같아서 다음 개인 프로젝트에 사용할지 고민 중

 

pico.css가 괜찮아 보이긴 하는데 글자 크기가 너무 커서 이걸 조금 고쳐서 쓸지도 보고 있다..