카카오웹툰은 CSS를 어떻게 작성하고 있을까?
프론트엔드
카카오웹툰은 CSS를 어떻게 작성하고 있을까?
두줄요약
카카오웹툰 같은 복잡한 서비스에서 CSS-in-JS와 CSS Module의 특성을 비교했습니다. 개발 협업 방식과 런타임 파싱 비용을 고려한 성능 측정 방법을 소개합니다.
구조와 흐름
- 카카오웹툰처럼 이미지·영상·제스처 인터랙션이 많은 서비스에서 CSS 작성 방식의 성능·관리성 검토
- 전통적 CSS, CSS-in-JS, Utility-First 등 다양한 CSS 작성 방식 비교 맥락
- Next.js의 CSS Module 기본 지원과 기존 CSS·디자인 시스템 재사용 수요
선택 이유
- CSS-in-JS의 유니크 클래스, 컴포넌트 스코프, 상태값 공유를 통한 전역 네임스페이스·의존성·상속 문제 완화
- CSS Module의 컴포넌트 단위 추상화와 기존 HTML·CSS 기반 협업 용이성
- 카카오웹툰의 복잡한 화면 특성에 맞춘 기술 선택 필요성
트레이드오프
- CSS-in-JS의 개발 효율성 대비 페이지 로딩 시 JavaScript 기반 CSS 구문 분석 부담
- CSS Module의 빌드 타임 CSS 파일 변환에 따른 추가 구문 분석 감소
- 페이지 단위 마크업 작업과 컴포넌트 단위 프론트엔드 작업 간 재구성·커뮤니케이션 비용
성능/운영 포인트
- styled-components와 CSS Module의 동일 페이지 구현 후 라우팅 구간 성능 측정
- 첫 로딩 번들 영향 배제를 위한 첫 페이지→두 번째 페이지 전환 시간 기준
- Chrome Performance 탭과 CPU 6배 감속 환경 활용
