[CSS] Chakra UI → DaisyUI
Tailwind vs Chakra
초기 기술 스택을 선정할 때 빠른 공통 컴포넌트 개발을 위해 차크라 UI 를 사용하여 공통 컴포넌트를 개발하기로 했다.
하지만 피그마로 공통 컴포넌트를 선정하고 나니 차크라 UI 를 활용할 수 있는 컴포넌트가 몇 가지 없었다. 차크라 UI 가 지원하는 공통 컴포넌트 중 사용할 수 있는 것은 Button, Input 컴포넌트 정도였다.
뿐만 아니라 우리 팀은 Tailwind 를 메인 CSS 프레임워크로 사용하는 데 반해 차크라는 Emotion 을 기반으로 컴포넌트를 제공하고 있었다. 이에 따라 우리는 다음 두가지 선택길에 놓였다.
- Tailwind 를 버리고 Emotion + Chakra 를 사용할 것인가?
- Emotion 을 버리고 Tailwind 를 사용할 것인가?
Tailwind 의 승리
결론부터 말하자면 우리는 다음과 같은 이유로 Tailwind 를 메인 프레임워크로 쓰기로 했다.
- 간단한 공통 컴포넌트의 경우 Tailwind 를 사용하여 스타일링을 진행해도 무방할 정도로 Tailwind 는 빠른 스타일링을 도와주었다.
- 차크라에 어떤 ui 가 있는지 찾아가며 스타일을 주는 것보다 Tailwind 로 스타일링을 하는 시간이 더 빠를 것이라 판단했다.
- 이미 Emotion 으로 빌드된 컴포넌트에 Tailwind 로 추가 스타일을 주는 게 안티패턴이라는 생각이 들었다.
- 우리가 기획한 디자인과 비교했을 때 차크라가 제공해주지 않는 컴포넌트들이 많다.
🌼 Daisy UI
하지만 차크라 UI 가 주는 공통 컴포넌트의 편리함을 포기하기란 힘들었다. 우리는 대체해서 사용할 수 있는 컴포넌트가 없는지 찾아보다가,
Tailwind 로 만들어진 공통 컴포넌트인 Daisy UI 를 사용하기로 했다. 선정한 이유는 다음과 같다.
- Tailwind 를 기반으로 작성됨
- 클래스 이름으로 속성을 주는 편리함
- 우리가 디자인한 컴포넌트와 일치하는 컴포넌트들을 다수 제공 (채팅 ui, 별점 ui 등등)
Daisy UI 링크
daisyUI — Tailwind CSS Components
이렇게 Tailwind + Daisy UI 의 사용으로 막을 내리면 좋았을 테지만… 멘토님과 진행한 커피챗에서 놀라운 사실을 발견했다.
Emotion 을 Tailwind 랑 같이 쓴다고요?
멘토님께서 작성한 코드를 함께 보며 공부를 하던 와중 특이점이 눈에 들어왔다.
Q. 멘토님 혹시 Emotion 과 Tailwind 를 같이 사용하시나요?
A. 네, 같이 사용합니다!
CSS 프레임워크를 하나만 사용해야 한다는 생각을 가지고 있었던 나로선 충격적인 대답이었다. (팀원들도 그래보였다.)
해당 커피챗이 끝난 후 Tailwind 와 Emotion 을 함께 사용하는 것이 안티 패턴이 아니라는 멘토님 말씀에 따라 우리 팀은 한차례 더 회의를 거치게 되었다. Tailwind 와 Emotion 을 함께 사용할 것인지 말 것인지로.
Tailwind 그런데 이제 Emotion 을 곁들인
우리 팀은 회의를 거쳐 다음과 같은 이유로 두 프레임워크를 같이 사용하게 되었다.
- Tailwind 는 동적인 스타일 변화 코드를 작성하는 것이 불편하다.
- 복잡한 컴포넌트의 경우 Tailwind 의 클래스 이름이 길어지며 가독성이 떨어진다.
- react-calendar 라이브러리는 Emotion 을 사용해야 한다.
- Emotion 으로 Tailwind 를 대신하기엔 Tailwind 가 주는 편리성이 크다.
같이 써본 소감
Emotion 과 Tailwind 나름대로 단점과 장점을 모두 가지고 있었기에 우리 팀은 둘의 장점을 살릴 수 있도록 규칙을 세웠다.
- 복잡한 컴포넌트, 큰 레이아웃 구조를 잡는 데 이름이 필요한 경우 Emotion 을 사용한다.
- 간단한 컴포넌트, 가독성을 해치지 않는다면 빠른 개발을 위해 Tailwind 를 사용한다.
이렇게 기준을 세우고 코드를 작성하니 컴포넌트 작업마다 원하는 방식으로 CSS style 을 작성할 수 있어 좋았다.
Tailwind 과 Emotion 이 서로 부족한 부분을 서로 상충해준다고 느껴졌고, 결과적으로 이전 프로젝트에서 넘쳤던 Style 파일들을 따로 분리시키지 않아도 될 정도로 코드가 길지 않았다.
처음엔 두 프레임웤를 같이 사용하는 것이 모호하고 안티 패턴이란 생각에 사용하기 꺼려졌지만, 막상 사용해보니 편리했고 안티 패턴이란 개개인의 판단의 영역이라는 생각이 들었다.
