핵심 요약
카카오엔터테인먼트의 FE 개발그룹이 Tailwind CSS와 Twin.Macro를 도입해 디자인 코드의 침범을 최소화하고, 커스텀 플러그인 및 다해상도·다크모드 대응을 통해 개발 생산성과 일관성을 높인 사례를 공유합니다.
주요 특징
- Tailwind CSS의 유틸리티 기반 스타일링 도입으로 기능 코드에 디자인 코드가 침범하지 않도록 함
- Twin.Macro를 활용해 Tailwind 유틯리티와 Emotion CSS를 함께 사용 가능, 가변 값도 쉽게 주입
- 커스텀 플러그인(예: scrollbar-hide)으로 한 줄 유틸리티를 추가해 반복 작업 축소
- 다해상도 대응을 위한 커스텀 브레이크포인트(mobile, foldable, tablet, under-foldable, under-tablet, under-mobile) 정의 및 활용
- pxr 단위를 도입해 디자인의 px 값을 rem으로 치환하는 방식으로 접근성 개선
- darkMode를 class로 제어하는 Tailwind 설정으로 다크모드 관리 용이
- 중단점 뒤에 괄호를 사용해 여러 유틸리티에 한 번에 적용하는 사용법 등 실무 적용 예시 제시
적용 고려사항
- Twin.Macro 도입으로 css 배열과 Tailwind 유틸리티를 함께 사용하고, 가변 값은 css 속성으로 주입 가능
- 커스텀 플러그인 작성 시 plugin 함수 활용 및 tailwind.config.js의 plugins에 추가(API 예시: scrollbar-hide)
- 다해상도 브레이크포인트 정의 및 사용하는 법(예: tablet:overflow-hidden, tablet:(overflow-hidden bg-black))
- pxr 단위 확장을 위한 spacing 설정 추가 및 rem 기반 크기 적용 방식 도입
- OS 다크모드 의존 대신 컬러 모드 제어를 위한 클래스 기반 설정 적용(darkMode: 'class')
