고민🤔
공통 컴포넌트인 Button 구현하기 위해 Chakra UI 와 Tailwind 중에 어떤 것을 사용하는 것이 좋을지 고민되었다.
왜냐하면 props를 내려받는 방식에 있어 Tailwind CSS와 Chakra UI 사이에 큰 차이가 없기 때문이다. 두 라이브러리 모두 React 애플리케이션에서 props를 사용하여 스타일 및 구성 요소를 커스터마이즈 할 수 있다.
Chakra UI와 Tailwind CSS는 둘 다 인기 있는 CSS 프레임워크지만 각각의 선택은 프로젝트의 요구 사항 및 개발자의 기호에 따라 달라진다.
그래서 프로젝트의 요구사항 및 각각이 가지는 특징에 집중해보았다.
고려 사항
-
프로젝트 요구 사항:
-
Chakra UI: Chakra UI는 React 기반의 UI 라이브러리로, React 애플리케이션에 쉽게 통합할 수 있다. 특히 React 프로젝트를 개발하고 있고, 구성 요소의 재사용성과 일관성을 중시한다면 Chakra UI를 사용하는 것이 좋을 수 있다. Chakra UI는 React 생태계와의 높은 호환성을 가지고 있으며, 다양한 UI 구성 요소와 스타일링 옵션을 제공한다.
-
Tailwind CSS: Tailwind CSS는 CSS 프레임워크로, HTML, React, Vue.js, Angular 등 다양한 프로젝트에서 사용할 수 있다. 특히 HTML/CSS 중심의 프로젝트에서 유용하며, 클래스 기반 스타일링을 통해 빠르게 UI를 디자인할 수 있다. Tailwind CSS는 디자인 시스템을 직접 만들어야 할 때 유용할 수 있다.
-
-
개발자의 경험과 기호:
- 개발자의 선호도와 경험도 중요한 역할을 한다. 개발자가 Chakra UI 또는 Tailwind CSS 중 어떤 것을 더 잘 알고 있거나 편안하게 사용할 수 있는지 고려해야 한다.
-
UI 커스터마이징:
-
Chakra UI는 일반적으로 구성 요소의 커스터마이징이 상대적으로 쉽다. 내가 만든 Button 컴포넌트처럼, Chakra UI에서도 구성 요소의 props를 통해 스타일을 변경하고 재사용할 수 있다.
-
Tailwind CSS 역시 커스터마이징이 가능하지만, 클래스 기반 스타일링 방식을 사용하므로 조금 다른 방식으로 스타일을 적용해야 한다.
-
마지막으로, 프로젝트의 목표와 팀의 선호도에 따라 선택이 달라질 수 있다. 더 많은 제어와 디자인 시스템의 필요성이 있다면 Tailwind CSS를 고려할 수 있으며, React와의 통합이 중요하다면 Chakra UI를 선택할 수 있다.
프로젝트 요구사항 및 나의 상황
프로젝트
- 간단하게 퀴즈를 만들고 로그인 없이 퀴즈를 풀 수 있는 사용자 접근 친화적인 사이트
- 구현 기간: 2주
사이트 특징
- 통통 튀는 느낌의 가벼움과 깔끔한 UI
나의 상황
- Chakra UI, Tailwind CSS 모두 이번 프로젝트에서 처음 사용
결론
나의 상황과 프로젝트 특징, 구현 기간, 스코프를 고려했을 때 상대적으로 구현이 쉬운 Chakra UI를 사용하는 것이 낫다고 판단했다.
또한 사이트 특정상 디자인적으로 다양하게 구현하는 부분이 많지 않다. 물론 실력적으로 디자인 하나하나를 세세하게 구현하되 통일성 있게 만들기 어렵다는 생각이 들었다. 그래서 애플리케이션에 통합하기 용이하며, 일관된 디자인 시스템을 구축할 수 있는 Chakra UI를 사용하는 것이 지금 나의 상황과 프로젝트 요구사항에 맞다고 생각한다.
한줄 요약: Chakra UI 사용
정리
두 옵션은 모두 유효한 방법이지만 어떤 것을 선택할지는 프로젝트의 요구 사항과 개발자의 선호도에 따라 다를 수 있다.
Tailwind CSS는 HTML/CSS 중심의 프로젝트에 유용하며, 클래스 기반 스타일링을 선호하는 경우 적합할 수 있다.
Chakra UI는 React 애플리케이션에 통합하기 용이하며, 일관된 디자인 시스템을 구축하고자 하는 경우에 유용할 수 있다.
따라서 프로젝트의 특성과 개발자의 기호를 고려하여 선택하면 된다.
