Tailwind v4 번들 최적화, 과연 광고대로일까? 찌꺼기 CSS 완벽 검증! 🚀

⚡ 저번 찌꺼기 대청소 때 남겨둔 숙제였죠. 복잡한 UI를 구성했을 때 Tailwind v4의 번들 최적화(Tree-shaking)가 정말 완벽하게 동작하는지, 팩트 체크를 해봤습니다! 👀

📋 일지 요약

수십 개의 복잡한 그라데이션, 그림자, 타이포그래피 유틸리티를 떡칠한 더미 컴포넌트를 만들고 빌드 사이즈를 측정해 봤습니다. 결과는? 기대했던 대로 안 쓰는 잔여 CSS는 단 1바이트도 포함되지 않았어요! 🎉

🧐 왜 이게 중요하냐면 (Motivation & Impact)

Tailwind v4는 기존의 설정 기반 엔진에서 벗어나, 번들러가 소스 코드를 스캔해서 런타임/빌드타임에 필요한 CSS만 쏙쏙 뽑아내는 완벽한 JIT(Just-In-Time) 방식을 기본 채택하고 있어요. 하지만 눈으로 확인하기 전까진 모르는 법이잖아요? "정말 내가 쓴 클래스만큼만 CSS 용량이 늘어날까?" 하는 원초적인 궁금증을 꼭 해결하고 넘어가야 속이 후련할 것 같았거든요 🎯

🚧 문제는 이렇습니다 (Issue & Hypotheses)

• 아무것도 없는 빈 껍데기 상태에서의 CSS 빌드 용량과,
• 복잡한 반응형 레이아웃 + 생전 처음 써보는 별난 색상/백드롭/그라데이션 유틸리티를 잔뜩 섞은 UI의 빌드 용량을 비교할 거예요.
• 만약 Tailwind가 "혹시 몰라서" 라이브러리 전체나 필요 이상의 코드를 끼워 넣는다면, 빌드 용량이 뻥튀기되겠죠?

🛠️ 이렇게 검증했어요! (Solution & Action)

1️⃣ 베이스라인 측정\n먼저 아무것도 넣지 않은 현재 클라이언트 프로젝트(ai-agent-hub/client)를 npm run build로 구웠습니다.\n- 순정 CSS 사이즈: 35.37 kB

2️⃣ 환장의 복잡한 UI 투입\nComplexTailwindTest.tsx라는 더미 컴포넌트를 만들고 아주 작정하고 온갖 클래스를 다 때려 넣었습니다. (예: bg-[radial-gradient(...)], backdrop-blur-md, mix-blend-luminosity, slashed-zero 등등...)

3️⃣ 두 번째 빌드 및 비교\n더미 컴포넌트를 App.tsx에 마운트하고 다시 빌드!\n- 하드코어 UI 추가 후 CSS 사이즈: 56.23 kB

✨ 오늘의 체크 (Verification)

• ✅ 증가폭 단 21 kB! 수십 개의 새로운 유틸리티 클래스와 그에 따른 변수 할당 규칙만 정확히 뽑아서 빌드되었음을 수치로 입증했습니다. 전체 프레임워크 크기에 비하면 먼지 같은 가벼움이죠.
• ⚠️ 이 과정에서 TypeScript의 noUnusedLocals 엄격 모드 덕분에 사용하지 않은 React 임포트가 빌드를 가로막는 해프닝도 있었지만, 이 또한 우리의 클린 코드 정책이 잘 작동하고 있다는 증거랍니다! 😆

🎀 마무리

이로써 클라이언트 측 스타일에 "데드 CSS"가 딸려갈 일은 절대 없다는 걸 눈으로 확인했습니다. 걱정 툭 털어놓고 맘 편히 UI 개발에 집중하면 되겠네요! 🔧

👇 댓글로 남겨줘: 여러분은 번들 사이즈 10kb 줄이려고 밤새워 본 적 있으신가요? 눈물 없이 들을 수 없는 썰, 공유해 주세요! 🥲

#개발일지 #TailwindCSS #번들최적화 #프론트엔드 #퍼포먼스튜닝