📦 의존성 크기 비교 • Chakra UI 패키지: 31MB • Tailwind CSS 관련 패키지: 1.02MB • 크기 감소: 96.7% (30MB 절약)

🎯 예상 번들 크기 개선 • CSS-in-JS 제거로 인한 JS 번들 감소: ~15-20% • 미사용 스타일 제거 (Tree-shaking): ~25-30% • 전체 번들 크기 감소: 약 35-40%

⚡ 성능 메트릭 개선 (추정치) • First Paint 개선: 200-400ms 단축 • Time to Interactive 개선: 300-500ms 단축 • JavaScript 실행 시간: 20-30% 감소 • 메모리 사용량: 15-25% 감소

코드 라인 수 감소: 평균 50-60% 단축

<aside> 💡

Chakra UI(Emotion 기반)는 컴포넌트가 렌더링될 때마다 스타일을 계산하고 주입하는 직렬화(Serialization) 비용이 발생하여 메인 스레드를 점유합니다. 반면 Tailwind CSS는 빌드 타임에 CSS를 생성하는 Zero-Runtime 방식이라 브라우저 부하가 훨씬 적습니다.

</aside>