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

간단 소개

카카오웹툰의 CSS 작성 방법론과 CSS-in-JS, CSS Module, tailwind 적용 사례 및 성능 비교 분석.

AI Summary

CSS 방법론의 진화
- 초기 CSS는 간단하지만 복잡한 페이지에서 어려움 발생, 다양한 작성 방법 등장
- CSS-in-JS는 CSS 작성의 어려움을 해결하고자 등장, Global namespace 문제 해결
- CSS Module은 CSS 재사용성을 높이기 위해 Next.js에 도입, 기존 CSS 방식과 병행 사용
CSS-in-JS vs CSS Module 성능 비교
- styled-components와 CSS Module로 동일 페이지 구현 후 성능 측정
- Scripting에서 CSS Module이 styled-components보다 빠른 성능 보임
- CSS-in-JS는 CSS 코드 변환 과정 필요, 동적 CSS 추가 시 성능 저하 가능성 존재
카카오웹툰의 CSS 적용 사례
- CSS Module로 시작, 디자이너 협업 및 디자인 시스템 구축의 필요성 증가
- 테일윈드(tailwind)를 도입하여 유틸리티 코드 활용 및 번들 크기 최소화
- 테일윈드의 한계 보완을 위해 CSS Module과 병행 사용, 상황에 맞는 기술 선택