카카오웹툰은 CSS를 어떻게 작성하고 있을까? | 카카오엔터테인먼트 FE 기술블로그
2023.02.20~2023.04.07 진행한 클론코딩 프로젝트에서, CSS때문에 협업에 어려움을 경험한 적이 있다.
특히 클래스 명이 충돌되는 것을 방지하기 위해 클래스 명을 더욱 세부적으로 작성하곤 했었다. 그러다보니 CSS의 양이 방대해지고, 공통된 컴포넌트에 대해서도 서로 다른 스타일이 정의되었으며, 어쩌다 클래스 명이 같아지거나 스타일이 상속되어버리는 경우 원인을 해결하려 한참을 헤맨 적이 있다.
이번 프로젝트에서는 좀 더 효율적으로 CSS를 작성하고 싶어 해당글을 정리해 보았다.
기존 css의 문제점
- class 명명 규칙 정해야함
- 모든 개발자가 여러 css 규칙을 기억해야 함
- css와 js가 분리되어 기능 변경에 따른 동기화 문제 발생
- 중복 제거를 위해 긴 클래스 이름을 사용하여 문서 사이즈가 커질 수 있음
- js의 상태값을 css와 공유하기 어려움
- css로드 순서 기억해야함
- css는 부모로부터 스타일을 상속하므로 하위 컴포넌트가 영향을 받음
1. CSS-in-JS
- 빌드 시점에 unique하게 변경되므로 명명 규칙 필요 X
- css가 컴포넌트 단위로 추상화 → 의존성 X
- 컴포넌트와 css가 동일한 파일 내에 있어 수정및 삭제 용이
- 문서의 볼륨 낮춰줌
- js 컴포넌트 상태를 css가 공유 가능
- css가 컴포넌트 별로 적용되므로 상속 문제 없음
2. CSS Module
next.js 에서 css module 지원
- 테마 등 공통영역, 일부 유틸리티 등은 css-in-js로 쉽게 해결 어려움
- 퍼블리셔가 따로 있다면 css-in-js방식이 불편할 수 있음
- css-in-js처럼 컴포넌트 단위로 추상화가 가능
- 복잡하고 인터랙션 비중이 큰 페이지에서 빠른 렌더링속도를 보여줌
3. Tailwind
- 빠르게 변화하는 디자인 적용
- 빌드 타임에 모두 생성되므로 동적 변수를 사용할 수 없음
- 애니메이션과 트랜지션에 사용 제약이 있음
요약
- 마크업과 js를 모두 작성하는 팀 →
css-in-js가 유용 - 규모있고 안정적인 서비스 구축 →
css module,tailwind유용 - 현재 환경과 목적에 따라 방식을 선택하는 것이 좋음
의견
현재 프로젝트에서 가장 큰 문제점은 제한적인 시간이라는 것이다.
렌트카 사업을 이벤트 스토밍을 통해 구체화해봤는데 생각보다 너무많은 서비스가 필요해서 현실적으로 기능구현에 제한이 있을 것 같다는 생각을 했다.
퍼블리시와 리액트 기능구현을 분리하여 생각한다면 css module이 효율적인 방법이 되겠으나, 현재 아무것도 없는 상태에서 6월 중순까지 프로젝트를 마무리하기위해서는 styled component가 최선의 선택인듯하다.
협업하는 동료분이 sass와 css module을 혼합하여 사용하고 싶다고 의견을 주셨는데, 이 부분에 대해서는 조금 더 고민해보고 결정을 내려야 할 것 같다.
가장 중요한건 "이 기술을 왜 사용했는가"를 판단하는 데 정확한 이유가 필요하다는 것이고,
두번째로 중요한건 이 판단을 하는데에 걸리는 시간이 길어져서는 안된다는 것이다.
내일까지는 개인공부하며 프로젝트 방향성에 대해 생각해보고, 화요일부터는 개발 규칙과 앞으로 진행할 스프린트에 대해서도 생각을 정리해 개발을 시작해야겠다.
