Tailwind: 스타일링 시간을 단축하는 CSS 프레임워크

Tailwind는 최근 웹 개발 분야에서 상당히 인기를 끌고 있는 차세대 CSS 프레임워크인데요. 워낙 호볼호가 많이 갈리다보니 개발자 커뮤니티에서 단골 논쟁거리가 되기도 합니다.

Tailwind에 대한 첫 번째 포스팅으로 이번 글에서는 Tailwind에 대한 기본 개념과 기존에 우리가 스타일링해온 방식과 비교해서 무엇이 다른지에 대해서 간략하게 알아보겟습니다.

Tailwind란?

Tailwind는 쉽게 말해 엄청나게 많은 유틸리티(utility) 클래스로 이루어진 CSS 프레임워크입니다. Tailwind가 제공하는 유틸리티 클래스들을 다양하게 조합하면 추가적인 CSS 코드 작성없이 단순히 HTML 요소의 class 속성에 설정해주는 것만으로도 스타일링이 가능하게 됩니다.

좀 더 기술적으로 들어가면 Tailwind는 PostCSS의 플러그인(plug-in)이기도 한데요. 이 부분에 대해서는 추후에 Tailwind를 설정하는 방법을 다루는 포스팅에서 자세히 다루면 좋을 것 같습니다.

여기서 유틸리티 클래스란 아래와 같이 딱 한 가지 일만 하는 매우 적은 양의 CSS 코드를 담고 있는 클래스를 뜻하는데요. 보통 유틸리티 클래스를 단독으로 쓰기 보다는 여러 개의 유틸리티 클래스를 함께 사용해야지 의미있는 스타일링을 할 수 있습니다.

.rounded {
  border-radius: 0.25rem;
}

.bg-red-500 {
  background-color: rgb(239 68 68);
}

.bg-blue-500 {
  background-color: rgb(59 130 246);
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.font-bold {
  font-weight: 700;
}

.text-white {
  color: rgb(255 255 255);
}

.hover\:bg-blue-600:hover {
  background-color: rgb(37 99 235);
}

.hover\:bg-red-600:hover {
  background-color: rgb(220 38 38);
}

따라서 Tailwind를 사용할 때는 보통 class 속성에 여러 유틸리티 클래스를 나열하게 됩니다. 예를 들어 위에 있는 유틸리티 클래스를 조합해서 다음과 같이 Bootstrap과 유사한 Primary 버튼과 Danger 버큰을 만들 수 있습니다.

<button
  class="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-600"
>
  Primary
</button>

<button
  class="rounded bg-red-500 px-4 py-2 font-bold text-white hover:bg-red-600"
>
  Danger
</button>

어떤가요? 굉장히 강력하죠!

이렇게 Tailwind를 사용하면 미리 정의된 유틸리티 클래스를 자유롭게 조합하여 HTML 파일을 벗어나지 않고 빠르고 쉽게 스타일링을 할 수 있습니다. 이를 통해 웹 개발을 할 때 CSS 스타일링에 소비하는 시간과 노력을 크게 줄일 수 있으며 개발자들을 클래스 작명에 대한 스트레스로 부터 해방시켜 줍니다.

하지만 그의 대한 댓가로 물론 Tailwind에서 제공하는 유틸리티 클래스의 작명 관행에 대해서 어느 정도는 숙지하고 있어야 하겠지요?

기존 CSS 프레임워크랑 비교

사실 유틸리티 클래스는 완전히 새로운 개념은 아니며 Bootstrap과 같은 기존에 많이 사용되던 CSS 프레임워크에서도 float-right와 같은 유틸리티 클래스를 제공해왔습니다.

큰 차이점이라면 Tailwind에서는 완전히 유틸리티 클래스를 중심으로 설계되어 있는 반면에, 기존의 CSS 라이브러에서는 button이나 card와 같은 컴포넌트 수준의 클래스가 주가 되고, 유틸리티 클래스를 보조적인 도구로 활용됩니다.

Bootstrap이나 Material과 같은 기존에 많이 사용되던 CSS 프레임워크를 써보신 분이라면 Tailwind를 사용할 때 너무 많은 클래스가 필요하다는 인상을 받게 되는데요. 예를 들어, 위에서 Tailwind로 구현한 버튼을 대신 Bootstrap을 썼더라면 각 버튼에 2개의 클래스로 충분했을테니까요.

<button class="btn btn-primary">Primary</button>

<button class="btn btn-danger">Danger</button>

분명 더 많은 클래스를 사용하고 배워야 한다는 부분이 Tailwind의 단점으로 느껴지기는 하지만 이를 통해서 Tailwind는 기존에 CSS 프레임워크에서는 보기 힘들었던 엄청난 유연성과 확장성을 제공하게 되는데요. 예를 들어, Tailwind의 유틸리티 클래스들을 살짝 다르게 조합하면 Material과 비슷한 버튼도 어렵지 않게 스타일할 수 있으니까요.

Bootstrap이나 Material과 같은 전통적인 CSS 프레임워크를 사용한 웹사이트는 아무리 사용자화를 해도 쉽게 티가 나는 경우가 많은데요. 반면에 Tailwind는 아예 처음부터 자유롭게 확장과 사용자화가 가능하도록 설계되어 있으며 다양한 플러그인을 제공하고 때문에 개성있는 웹사이트를 만드는데 유리합니다.

CSS 인라인 스타일과 비교

Tailwind에서 제시하는 스타일링 방식이 CSS에서 기존에 인라인(inline) 방식으로 스타일링하는 것과 크게 다르지 않다고 생각할 수 있는데요.

예를 들어 Tailwind의 유틸리티 클래스를 사용해서 다음과 같이 작성할 코드를,

<button class="rounded bg-blue-500 px-4 py-2">Primary</button>

코드가 다소 길어지기는 해도 인라인 CSS를 이용해서도 충분히 작성할 수도 있을 것입니다.

<button
  style="border-radius: 0.25rem; background-color: rgb(59 130 246); padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; "
>
  Primary
</button>

하지만 CSS 인라인 스타일링에는 간과하기 쉬운 치명적인 제약사항이 좀 있는데요.

첫 번째로 :hover, :focus와 같은 의사 클래스(pseudo class)를 쓸 수 없으며, ::before, ::after와 같은 의사 요소(pseudo element)를 쑬 수 없습니다. 두 번째, 미디어 쿼리를 사용할 수 없어서 반응형(responsive) 디자인을 구현할 수 없습니다.

뿐만 아니라 Tailwind의 유틸리티 클래스는 여러 HTML 요소에 걸쳐서 공유되는 반면에, 인라인 CSS는 하나의 HTML 요소에서만 국한되므로 클라이언트가 내려받아야하는 CSS 코드의 양을 최소화하는데 불리합니다.

Tailwind과 관련된 논쟁

트위터와 같이 개발자들이 많이 사용하는 SNS를 보면 Tailwind를 좋아하는 부류와 싫어하는 부류 간에 끊없이 이어지는 논쟁을 어렵지 않게 접할 수 있는데요.

보통 Tailwind를 좋아하는 개발자들은 개발 생생성 측면에서 Tailwind가 효율적이고 빠르게 디자인을 구현할 수 있도록 도와준다는 점을 강조합니다. 또한 스타일을 변경하거나 수정하기도 쉬워서 유지 보수성 측면에서도 Tailwind가 우수하다고 말합니다.

반면에 Tailwind를 싫어하는 개발자들은 유틸리티 클래스를 과도하게 사용하는 것이 코드의 가독성을 떨어뜨리고, 대규모 프로젝트에서는 오히려 유지 보수성을 떨어뜨린다는 점을 지적합니다.

그런데 부정적인 의견들은 주로 Tailwind를 많이 써보시지 않은 분들로 부터 나온다는 것 같습니다. 실제로 Tailwind를 실제로 써보신 분들 중에서는 기존의 스타일링 방식으로 다시는 돌아가지 못할 것 같다고 말씀하시는 분들도 보게 되거든요.

또 다른 재미있는 논쟁 거리는 CSS를 제대로 학습하지 않은 상태에서 Tailwind에 지나치게 의존하게 되면 CSS 바보가 될 수 있다는 건데요. 어느 정도 일리가 있는 말이지만 Tailwind를 공부하면서 CSS에 대해서 더 많이 배우게 되었다고 하시는 분들도 많아서 이것도 케바케있는 것 같습니다.

따라서 Tailwind를 활용한 개발을 고민 중이라면, 이러한 논쟁들에 너무 휘둘리지 말고 자신의 프로젝트에 적합한 도구인지 따져보는 것이 중요하겠습니다. 좋든 싫든 Tailwind가 주류 CSS 프레임워크로 자리 잡아가고 있는 것 만큼은 분명하기 때문에 개인적으로는 섣불리 비판적으로 보기 전에 우선 Tailwind를 어느정도 경험해보는 것도 나쁘지 않을 것 같다는 생각이 듭니다.

마치면서

본 포스팅이 Tailwind에 대한 이해도를 높이고 오해를 줄이는데 도움이 되었기를 바랍니다. 다음 포스팅부터는 Tailwind를 어떻게 사용하는지에 대해서 좀 더 구체적으로 다뤄보도록 하겠습니다.

Tailwind에 관련 포스팅은 Tailwind 태그를 통해서 쉽게 만나보세요!