프론트엔드
카카오웹툰은 CSS를 어떻게 작성하고 있을까?
두줄요약
카카오웹툰은 CSS-in-JS와 CSS Module의 특성을 비교하고 라우팅 성능을 측정했습니다. CSS Module을 기반으로 Tailwind를 병행하되 동적 영역은 CSS Module로 보완했습니다.
문제 상황
- 이미지·영상·제스처 기반의 복잡한 카카오웹툰 화면에서 CSS 작성 방식의 성능·관리성 검토 필요
- CSS-in-JS의 개발 편의성과 런타임 스타일 처리 비용 간 균형 필요
선택 이유
- CSS Module의 컴포넌트 단위 스코프와 빌드 타임 CSS 생성 방식 채택
- 디자인 변경 대응과 공통 유틸리티 제공을 위해 Tailwind 병행
- 동적 표현 한계가 있는 영역은 CSS Module 유지
성능/운영 포인트
- Next.js 라우팅 환경과 CPU 6배 감속 조건에서 styled-components와 CSS Module 비교
- 렌더링·페인팅 시간은 유사하지만 스크립팅은 styled-components 483ms, CSS Module 265ms
- CSS-in-JS의 동적 CSS 변환 비용이 복잡한 화면의 로딩 성능에 미칠 가능성
주의할 점
- Tailwind의 rem 기본 단위, 빌드 타임 기반 동적 변수 제약, 애니메이션 확장 필요성
- 팀 규모·협업 방식·서비스 목적에 따른 CSS-in-JS, CSS Module, Tailwind 조합 선택
