✅ 프로젝트를 진행할 때 스타일도구를 선정해야 한다.
기존에 진행했던 사이드 프로젝트에서는 styled-components를 사용했었다.
사용한 이유는 여러가지가 있지만
- 유니크한 클래스를 자동으로 생성한다.
- CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없다.
- 🌟참여하는 팀원들에게 가장 익숙하여 러닝커브 문제가 없다.
✅ 그럼 이번엔 뭘쓸건데?
기술을 학습 / 사용할 때 겁부터 먹고 시작하기 때문에 어렵게 느껴지는 것이다. 라는
개x 멘토님의 명언대로 가볍게 여러 기술을 사용해 본 경험이 나의 쫄보 마인드를 개선해 줄 거라는 생각이 들었다.
그래서 이번 프로젝트 스타일도구로 TailwindCSS를 써보기로 했는데 선택한 이유는
- 사용 경험이 없는 기술
- 파일을 왔다 갔다 움직이면서 마크업해야 하지 않음으로 시간낭비 줄일 수 있음
- 네이밍의 고통에서 벗어나기
-> CSS-in-JS 라이브러리도 결국 클래스명 네이밍이 변수명 네이밍으로 바뀌었을 뿐 네이밍에 고민해야 하는 시간은 존재한다.
✅ TailwindCSS 가 뭔데?
tailwind란
마크업에 직접적으로 모든 디자인을 구축할 수 있는 클래스들로 구성된 유틸리티 우선 CSS 프레임워크
📍 먼저 좀 더 짚고 넘어갈 내용은
1) 그럼 왜 Bootstap이 아니라 tailwind인가?
tailwind는 Bootstrap과 유사하다고 느낄 수 있지만
이미 스타일링된 클래스를 제공하는 Bootstrap은 UI 컴포넌트 라이브러리에 가깝지만 TailwindCSS는 스타일링을 사용자가 컨트롤 할 수 있기 때문에 자유도가 훨씬 높다.
2)인라인 스타일링과의 다른점은?
tailwind는 디자인 시스템을 구축할 수 있고, 반응형 디자인, hover 시 스타일링 등을 쉽게 다룰 수 있는 점에서 인라인 스타일과 차별점을 두고 있다.
✅ TailwindCSS 그럼 단점은 없는거야?
1) 미묘한 러닝커브
TailwindCSS 의 클래스 네이밍은 CSS를 다뤄본 사람이라면 쉽게 이해할 수 있다. 그렇지만 종종 공식문서에서 확인이 필요한 외우기 어려운(아리까리한) 애들이 있다.
(예를 들면 align-items: center => items-center 혹은 display: none → hidden)
간단하네? 라고 생각할 수 있지만 한 페이지 스타일링에 3~4개 클래스 네이밍만 찾아도 시간 소요가 꽤 크더라...
2) 가독성을 지키는거니 해치는거니
분명 사용전 읽어본 사용후기 블로그, 공식문서에서는 가독성이 좋아진다. 라는 글이 종종 있었는데
여러 스타일에, hover에 따른 동적 스타일링까지 포함하니 클래스명이 놀라울 정도로 길어진 경우도 있었다. 그래서 리팩토링을 통해
1) 클래스명을 변수로 분리해 가독성 문제를 해결한 적도 있고,
2) TailwindCSS에서 제공하는 @apply로 클래스를 분리해서 문제를 해결한 적도 있다.
하지만 이 방식들은 유틸리티 클래스의 장점을 무효화시킨다.
✅ 마치며 적는 글
😦 아직 여러명과 협업시 사용해 본적은 없지만,,,
개인으로 진행한 프로젝트에서 사용해본 경험으로는 만족도가 높은 라이브러리였으나
이게 과연 다인원 협업에서 효율적인가? 라는 궁금증은 여전했다.
그러다 카카오FE 기술 블로그에서 FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까? 라는 글을 읽게 되었다.
글을 요약하자면 대략 이정도 방법을 적용했다고 볼 수 있다.
- 1)커스텀 플러그인을 적극 사용하여 협업하기,
- 2)
Twin.Macro라이브러리를 활용하여tailwind와Emotion CSS를 함께 사용할 수 있는 방법을 제공 => 개발자가 상황에 따라 최적의 방법을 선택해 디자인 코드를 작성할 수 있도록 도와줌
가지고 있는 가장 문제가 되는 부분을 해결할 수 있는 라이브러리에 보조도구를 잘 활용한다면 협업 어려운거 아니겠구나 이래서 기술의사결정이 정말 중요하구나,,라는걸 느끼며 마무리
📚 Refernce
