프론트엔드
FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?
두줄요약
디자인 시스템 구축 과정에서 Emotion CSS의 테마 의존성과 가독성 문제를 분석했습니다. Tailwind CSS와 Twin.Macro로 유틸리티, 반응형·다크 모드, 접근성 단위를 구성했습니다.
문제 상황
- 페이지 단위 UI 구현으로 유사 컴포넌트 중복과 변경 비용 증가
- 컬러·폰트 토큰의 공통 네이밍 부재로 일괄 수정 어려움
- Emotion CSS의 Theme 의존성, 보일러플레이트, 인라인 스타일 가독성 저하
해결 방법
- 디자인 시스템·아토믹 디자인 기반 공통 컴포넌트와 명명 체계 구축
- 유틸리티 중심 Tailwind CSS로 디자인 토큰 적용과 스타일 코드 압축
- Twin.Macro로 Tailwind 유틸리티와 Emotion CSS의 동적 스타일 결합
구조와 흐름
- 커스텀 플러그인으로 scrollbar-hide 등 반복적 복합 스타일 유틸리티화
- 의미가 명확한 반응형 중단점과 class 기반 다크 모드 제어
- px 값을 rem으로 변환하는 pxr 단위로 접근성 설정 대응
주의할 점
- Tailwind·Twin.Macro의 적합성은 디자인 시스템과 프로젝트 요구사항에 따라 상이
- 유틸리티 학습 비용과 직접 정의해야 하는 스타일·단위의 존재
