Tailwind CSS: 파일크기와 최적화

감자전·2024년 12월 22일
tailwindCSS
1

💡

Tailwind CSS를 공부하다 보면 "CSS 파일 크기가 커질 수 있다"는 이야기를 듣기도 하고, 반대로 "최적화가 잘 된다"는 이야기를 접하기도 합니다. 어떤게 맞는 걸까요?

최근 공식 문서에서는 ‘Tailwind CSS는 놀라울 정도로 성능에 중점을 두고 있으며 프로젝트에서 실제로 사용하는 CSS만 생성하여 가능한 가장 작은 CSS 파일을 생성하는 것을 목표로 합니다.’라는 언급이 있습니다.

*Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project.

어떤게 맞는 걸까요? 당연히 공식문서가 더 신뢰할 만한 자료입니다. 하지만 구글링을 통해 다른 자료들을 찾아보면 CSS 파일의 크기가 커질 수 있다고 언급하고 있는 자료를 어렵지 않게 볼 수 있습니다. 이 차이는 Tailwind CSS의 최적화 전략이 바뀐 과정과 관련이 있습니다. Tailwind CSS의 최적화 전략이 어떻게 바뀌어 왔는지 알아보겠습니다.

Tailwind CSS 3.0 미만: 최적화를 위한 별도 작업 필요

초기 Tailwind CSS(3.0 미만 버전)는 사용하지 않는 유틸리티 클래스를 제거하는 기능이 내장되어 있지 않았습니다. 이로 인해 프로덕션 환경에서 최적화된 CSS 파일을 생성하려면 별도의 작업이 필요했습니다.

대표적으로 PurgeCSS를 사용하거나, tailwind.config.js 파일에서 수동으로 JIT(Just-in-Time) 모드를 활성화하여 실제로 사용되지 않는 CSS를 찾아 제거해야 했습니다. 이런 과정이 없다면, 프로젝트에서 사용하지 않는 유틸리티 클래스까지 모두 포함된 상태로 거대한 CSS 파일이 생성되었지요.

PurgeCSS란?
HTML, JS 등의 파일에서 사용된 CSS 선택자와 일치하는지 확인하고, CSS 파일에서 사용하지 않는 선택자를 제거하여 파일 크기를 줄이고 성능을 향상시키는 JavaScript 라이브러리 입니다.

JIT(Just-in-Time) 엔진이란?
기존의 Tailwind CSS에서는 미리 정의된 모든 유틸리티 클래스가 CSS 파일에 포함됩니다. 프로젝트에서 사용할 클래스만 선택하더라도, 실제 사용하지 않는 많은 스타일이 함께 포함되어 번들 크기가 커질 수 있습니다. JIT 모드는 이 문제를 해결하기 위해 빌드 중에 HTML, JavaScript, JSX 등에서 발견된 Tailwind 유틸리티 클래스만 추적하여, 필요한 클래스만 즉석에서 CSS 파일에 추가해 코드에서 실제로 사용하는 유틸리티 클래스만 CSS로 생성합니다.

Tailwind CSS 3.0 이상: 기본 내장된 JIT 엔진

Tailwind CSS 3.0 버전부터는 이전 버전에서 필요했던 번거로운 최적화 작업이 대폭 간소화되었습니다.

이 버전에서는 JIT(Just-in-Time) 엔진이 기본적으로 내장되어 있으며, 별도의 설정 없이도 활성화됩니다. JIT 엔진은 빌드 과정에서 프로젝트에서 실제로 사용된 Tailwind CSS 유틸리티 클래스만 추적하여, 해당 클래스만 포함된 CSS 파일을 생성합니다. 이를 통해 사용하지 않는 유틸리티 클래스는 자동으로 제거되고, 결과적으로 가볍고 최적화된 CSS 파일이 생성됩니다.

기본 내장된 JIT 엔진의 작동 방식
JIT 모드는 HTML, JavaScript, JSX 등 코드에서 사용된 Tailwind CSS 유틸리티 클래스를 실시간으로 감지합니다. 그리고 감지된 클래스만 즉석에서 CSS 파일에 포함시키므로, 필요 없는 스타일은 포함되지 않습니다. 이 방식은 최적화된 CSS 파일을 생성하면서도 빠른 개발 경험을 제공합니다.

결론적으로, TailwindCSS 3.0 미만의 버전을 사용하는 경우, PurgeCSS를 사용하지 않거나 JIT 모드를 수동으로 활성화하지 않았다면 CSS 파일 크기가 커질 수 있다는 점에서, "TailwindCSS를 사용하면 CSS 파일 크기가 커질 수 있다"는 내용은 틀린 이야기가 아닙니다. 당시 상황에서는 충분히 맞는 말이었기 때문입니다.

하지만 TailwindCSS 3.0 이상에서는 이러한 문제가 해결되었습니다. 최신 버전은 JIT 엔진이 기본적으로 내장되어, 별도의 설정 없이도 빌드 시 사용되지 않는 유틸리티 클래스를 자동으로 제거해줍니다. 따라서 최신 버전을 사용하는 경우에는 CSS 파일 크기 증가를 걱정할 필요가 없으며, 최적화 작업도 별도로 신경 쓰지 않아도 됩니다.

요약

  • 파일이 커진다는 내용은 TailwindCSS 3.0 미만의 버전에서는 맞는 말입니다.
  • 3.0 이상 버전에서는 JIT 엔진 덕분에 별도 설정 없이도 최적화가 자동으로 이루어집니다.

HTML 파일 크기도 커진다던데?

❓

CSS가 번들링 시 최적화되는 방식에 대해서는 이해했지만, 여러 글에서 TailwindCSS의 단점 중 하나로 HTML 파일의 크기가 커진다고 언급된 것을 본 적이 있습니다. 이 부분은 왜 그런 걸까요?

예시1) 기존의 스타일 작성법

<div class="card-body">
  <h1 class="card-title pricing-card-title">$29 <span class="text-muted">/ mo</span></h1>
  <ul class="list-unstyled">
    <li>30 users</li>
    <li>15 GB</li>
  </ul>
  <button type="button" class="btn btn-primary">Buy</button>
</div>

예시2) Tailwind CSS를 이용한 스타일 작성법

<div class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4 border border-gray-500">
  <h1 class="text-lg leading-6 font-medium text-gray-900">$20 <span class="text-sm">/ mo</span></h1>
  <ul class="mt-6 space-y-4">
    <li class="flex space-x-3 text-sm text-gray-500">30 users</li>
    <li class="flex space-x-3 text-sm text-gray-500">15 GB</li>
  </ul>
  <button type="button" class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">
  Buy</button>
</div>

위의 두 예시를 비교해 보면, Tailwind CSS를 사용할 경우 HTML 요소에 다수의 유틸리티 클래스가 추가되면서 파일의 글자 수가 늘어나는 것을 알 수 있습니다. 이로 인해 압축 전 기준으로 HTML 파일 크기가 약 20% 정도 증가할 수 있습니다.

그러나 서버에서 브라우저로 HTML 파일을 전송할 때 압축(Gzip, Brotli 등)이 이루어지기 때문에 실제 사용자에게는 체감될 정도로 큰 영향을 미치지 않습니다.

서버 전송 단계에서의 파일 압축
Gzip이나 Brotli 압축은 파일 내에서 반복되는 패턴을 인식하고, 이를 압축하는 방식으로 작동합니다. 예를 들어, 동일한 문자열이 여러 번 나오면 해당 문자열을 하나의 패턴으로 인식하고 압축하여 파일 크기를 줄입니다.

결론

Tailwind CSS는 유틸리티 클래스 기반의 스타일링 방식으로 HTML 파일의 크기가 약간 커질 수는 있지만, 최신 버전에서는 JIT(Just-in-Time) 엔진을 통해 사용하지 않는 CSS를 자동으로 제거하며 최적화된 파일 크기를 제공합니다. 또한, 서버 전송 과정에서 Gzip이나 Brotli와 같은 압축 기술을 활용하기 때문에 사용자에게 체감될 정도의 성능 저하는 거의 없습니다.

반면에, CSS 모듈이나 Styled Components 같은 방식은 컴포넌트별로 스타일을 작성하기 때문에, 스타일링이 복잡해질수록 CSS 파일 크기가 증가할 수 있는 단점이 있습니다. 따라서 어떤 스타일링 방식이 더 "효율적"이라고 단정 짓기보다는, 프로젝트의 규모와 요구 사항에 따라 적합한 방식을 선택하는 것이 중요합니다.

결국 스타일링 도구는 개발자의 생산성과 유지보수성, 그리고 프로젝트의 특성에 얼마나 잘 맞는지가 핵심입니다. Tailwind CSS는 그중 하나의 선택지일 뿐이니, 프로젝트의 필요에 따라 적절히 활용하시면 됩니다.

profile
감자전
노릇노릇한 프론트엔드 감자전
이전 포스트

Algorithm: 해시(Hash)

다음 포스트

React: 컴포넌트 최적화 (작성중)

0개의 댓글

관련 채용 정보