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

핵심 요약

카카오엔터테인먼트의 카카오웹툰은 CSS 작성 방식의 성능과 협업 이슈를 다양한 기술(CSS-in-JS, CSS Module, Tailwind)로 비교 분석하고 최적의 조합을 제시했습니다.

주요 경험

• 대규모 인터랙션 페이지에서 CSS-in-JS, CSS Module, Tailwind의 성능 및 빌드 특성을 비교했습니다(약 2배 차이 확인).
• Tailwind 도입은 디자인 시스템 확장과 번들 관리에 도움을 주나 rem 기반 단위와 애니메이션 제약 같은 단점도 확인했습니다.
• 소규모 팀은 CSS-in-JS로 빠르게 시작하되, 서비스 규모가 커지면 CSS Module이나 Tailwind 같은 유틸리티 CSS의 병행이 효율적임을 경험했습니다.

얻은 인사이트

• 디자인 시스템과 개발 프로세스의 균형이 중요합니다.
• 목적과 환경에 따라 기술을 선택하고 필요 시 병행 사용이 바람직합니다.
• 대규모 페이지에서는 CSS Module과 유틸리티 CSS의 조합이 개발성과 성능의 균형을 잘 맞춘다는 점을 확인했습니다.