사내 프로젝트에서 그동안 css만 사용하다

새로 들어오신 시니어 개발자 사수님이 적극 권장하신 tailwindCSS를 도입하게 되었다.

이제 사용한 지 어느덧 2개월 정도 지났는데 어떠한 점이 프로젝트에 영향을 주었는 지 글을 남겨본다.

tailwindCSS는 무엇인가?

It is a CSS framework that aims for Utility-First.

사용자들에게 미리 셋팅된 유틸리티 클래스 형식 을 제공하는 CSS 프레임워크다.

Pure CSS와 다른 게 뭐야?

기본 CSS를 활용했을 때

  <h1 class="text-blue">여기 엘리먼트 구간은 파란색 글자를 갖고 있습니다.</h1>

  .text-blue {
    color: #0067a3
  }

tailwindCSS를 활용했을 때

  <h1 class="text-blue-600/100">여기 엘리먼트 구간은 파란색 글자를 갖고 있습니다.</h1>

위 CSS와 tailwindCSS를 비교했을 때 확실히 작업 과정이 더 간결해진 것을 한 눈에 파악할 수 있다.

물론 #0067a3 같은 상세 컬러를 맞춰야 할 경우 tailwindcss의 커스텀 설정할 수 있어,

해당 컬러가 자주 유용하게 쓸 경우 커스텀 셋팅을 할 수 있다.

유틸리티 클래스 작동 원리

tailwindCSS의 작동 원리에 대해 알고 싶다면, 먼저 PostCSS 에 대해 알고 있어야 한다.

PostCSS는 javascript 플러그인을 사용하여 CSS 문법을 변환시키는 tool이다.

다시 말해 PostCSS는 새로운 마크업 언어가 아닌 css 신기술들을 자동 변환 하여 사용할 수 있도록 지원해주는 플러그인에 불과하다.

그러므로 tailwindCSS 와 같은 유틸리티 형태로 제공하는 기술들을 css 문법으로 해석해주는 동작 원리를 갖고 있다.

덕분에 어떤 점이 편안해졌나요?

Class Name 더이상 고민할 필요가 없어요!

내 주관적 기준으로는 더이상 CSS Class Name을 고민해줄 필요가 없어져 매우 편리해졌다.

한 동안 클린 코드 책을 읽은 이후 작성하는 변수들 마다 내 자식들 이름 지어주는 것 마냥 항상 고민에 빠졌다.

CSS Class Name 조차 특별한 이름을 지어줘야 하는 귀찮음으로 인해 작업 속도 향상에 큰 걸림돌이 였지만,

tailwindCSS 도입 후 CSS 작업에 속도가 향상 되었다.

뜻 밖에 Client 코드 구조의 좋은 철학을 갖게 되었어요!

항상 나의 코드는 jsx 문법의 특성상 하나의 컴포넌트 안에 client-data와 server-data를 가공해주는 코드와

View(HTML + CSS) 코드가 뭉쳐 스파게티 코드가 되어 있었다.

그러나 tailwindCSS를 도입하며 HTML 엘리먼트가 더 복잡해져 더이상 코드를 작성 못할 정도로 정리 정돈이 필요해진 시점이 다가왔다.

위와 같은 구조 형태로 서버에서 데이터 받아오는 구간(Fetch) , 서버에서 받아온 데이터 or 뷰에게 적용해야할 클라이언트 데이터 가공(Modify) , 오직 html, css 코드만 관리하는 구간(view)

즉, Fetch - Modify - View 구간을 명확하게 나누는데 tailwindCSS 프레임워크가 구조화를 구축하는데 큰 영감을 주었다.

유지 관리와 디자인 변경에도 큰 걱정이 없어요!

보통 프로젝트에서 디자이너가 Figma에 지정한 main color와 font-size를 셋팅 후 프론트엔드 개발자와 공유를 한다.

간혹 버전 별 리뷰마다 뜻 밖의 디자인 피드백으로 긴급 변경이 일어나는 경우가 있다.(실제로 이번 버전 별 리뷰마다 디자인 변경사항을 4번씩이나 겪었다…)

디자인이 변경되어 구간마다 추적할 필요 없이 사전에 디자이너가 셋팅한 컬러들을 확인하여

tailwind.config 설정 파일에 커스텀 class name을 셋팅만 하면 관리하기 매우 편리 해진다.

또한 css 파일들이 최소화 되어 프로젝트 폴더가 깔끔해진다.(이건 정말 주관적인 생각 입니다. ^^*)

다른 개발자와 CSS 코드 리뷰 하기에 좋고 CSS rule을 정하는데도 명확해졌어요!

프로젝트 작업을 하다보면 다른 개발자가 작성한 CSS class name 직접 하나씩 파악해서 이해 해야하는 상황과

다른 개발자들 간 CSS 사용 규칙을 정해야 하는 일이 있다.

특히 개발자들이 많은 프로젝트 혹은 회사에 아직 개발자들이 많지 않아 CSS 코드 작성 규칙을 정하기에 애매할 때

tailwindCSS는 class names 작성법을 알아서 방향을 잡게 해준다.

단점도 있을 거 아니야?

간혹 몇몇 사람들은 tailwindcss의 러닝 커버 및 지저분해지는 HTML 엘리먼트가 문제라고 지적을 한다.

여기에 관해 반대의 견해를 밝히고 싶다.

1. 러닝 커버

Pure CSS만 코드 짜다 보면 tailwindCSS 개발팀들이 정한 class name을 적응하는데 불편함이 있을 수 있다.

그러나 이건 단순 불편함일 뿐이지 러닝 커버가 존재한다고 주장하기에는 모순이다.

왜냐하면 많은 프론트엔드 개발자들이 상태 관리 라이브러리 Redux, 웹 프레임워크 React, svelte 같은 기술을 적용하는데 많은 시간이 걸리고

어려움을 겪을텐데 이런게 러닝 커버이지 tailwindCSS는 위와 같은 기술에 비해 전혀 어려움이 없다.

또한 tailwindCSS 공식 사이트 documents에 접속하면 css 속성들을 어떻게 적용할 수 있는 지 상세하게 안내해준다.

2. 지저분해진 html 엘리먼트

한마디로 반박 요약을 할 수 있다.

View 구간을 명확히 나누면 지저분하지도 않고 간혹 복잡한 HTML 엘리먼트가 발생하여도 런타임 에러 같은 버그가 props에 문제가 없는 이상 다버그가 전혀 발생할 일이 없다.(버그 추적에 더욱!!)

이럴 때 단점이 있지.

인터랙티브 UI 및 특정 UI에 대해 상세한 CSS 속성 을 설정해줄 필요가 있을 때 큰 난관이 있을 수도 있다.

tailwindcss documents에도 설명해주지 않아 해당 특성에 대해 계속 검색 하다 많은 시간을 소비하게 되는데

그럴 경우엔 Pure CSS를 그대로 적용해주는게 더 현명한 거 같다.

또한 기존 CSS에 대한 지식을 잊을 수가 있어 웹 개발에 입문한 지 얼마 안된 사람들에게는 아직 비추천이다.

일단 Pure CSS를 사용해보고 귀찮음을 슬슬 느낄 시점이 다가올 때 쯤 tailwindCSS를 사용하다 보면 편리함을 크게 느낄 수가 있다.