카카오웹툰은 CSS를 어떻게 작성하고 있을까?

간단 소개

카카오웹툰의 CSS 작성 방식 변화와 CSS-in-JS, CSS Module, Tailwind CSS의 특징 및 성능 비교 분석.

AI Summary

CSS 작성 방식의 진화
- 초기 CSS는 간단했지만 복잡한 페이지에서 어려움 발생, 다양한 작성 방법 등장.
- CSS-in-JS는 Global namespace, Dependencies 등의 문제 해결을 제시했으나 작업자 효율성에 치중.
- Next.js는 CSS Module을 기본 지원하며, 기존 CSS 방식과 새로운 기술의 병행 사용 추세.
CSS Module과 성능 비교
- CSS-in-JS(styled-components)와 CSS Module의 성능 비교 결과, Scripting에서 2배 가까운 성능 차이 발생.
- CSS-in-JS는 CSS 코드 변환 과정으로 인해 CSS Module보다 느릴 수 있음.
Tailwind CSS 도입과 한계
- 카카오웹툰은 CSS Module에서 Tailwind CSS로 전환, 디자인 시스템 구축 및 번들 크기 감소 효과.
- Tailwind CSS는 rem 단위 기반, 동적 변수 사용 제한, 애니메이션 제약 등의 단점 존재, CSS Module과 병행 사용.