카카오웹툰, CSS-in-JS 대신 CSS Module과 Tailwind 적용한 이유

카카오웹툰은 복잡한 인터랙션과 이미지 중심의 서비스 특성을 고려해 CSS 작성 방식을 CSS-in-JS에서 CSS Module 및 Tailwind CSS로 변경했습니다. 초기에는 개발 효율성을 위해 CSS-in-JS를 도입했으나, 렌더링 성능 저하와 퍼블리셔와의 협업 비효율 문제를 해결하기 위해 전략을 수정했습니다.

성능 비교 및 최적화

Next.js 기반 페이지에서 styled-components와 CSS Module을 각각 구현하여 라우팅 시 성능을 측정했습니다(CPU 6x 감속 환경). 그 결과 Rendering과 Painting 시간은 유사했으나, Scripting 시간은 styled-components(483ms) 대비 CSS Module(265ms)에서 약 2배 가까운 성능 차이를 보였습니다. CSS-in-JS는 런타임에 CSS 코드를 변환하는 과정이 필요하지만, CSS Module은 빌드 타임에 완성된 CSS 파일을 생성하므로 구문 분석 오버헤드가 적기 때문입니다.

Tailwind CSS 도입 및 한계

CSS Module 사용 중에도 디자인 시스템 부재 시 유틸리티 코드 관리의 번거로움과 스타일 분류의 모호성이 발생했습니다. 이에 따라 최근 Tailwind CSS를 도입했습니다. Tailwind는 Bootstrap의 확장성 문제를 해결하고, 사용하지 않는 클래스를 제거하여 번들 크기를 최소화하며, 디자이너와의 협업 효율을 높입니다. 다만, 동적 변수 사용 불가, px 단위 기본값 변경 필요, 복잡한 애니메이션 처리의 제약 등이 있어 카카오웹툰은 Tailwind로 해결되지 않는 부분은 여전히 CSS Module을 병행하여 사용하고 있습니다.

결론

소규모 팀이나 빠른 프로토타이핑에는 CSS-in-JS가 유용할 수 있으나, 규모가 크고 성능이 중요한 서비스에는 CSS Module이나 유틸리티 CSS(Tailwind)를 추천합니다. 기술 선택은 서비스의 목적과 현재 환경에 따라 유연하게 결정해야 합니다.