Tailwind CSS 도입 후 1개월 회고

도입 배경

사내 어드민 프로젝트를 새로 시작하면서 CSS 방법론을 고민했다. 기존에는 Styled Components를 주로 사용했는데, 컴포넌트마다 스타일 코드가 길어지고 네이밍에 시간을 쓰는 게 비효율적이라 느꼈다.

초기 거부감

<div className="flex items-center justify-between px-4 py-2 bg-gray-100 rounded-lg">

처음엔 HTML이 지저분해 보였다. "이게 인라인 스타일이랑 뭐가 다르지?"라는 생각도 들었다. 하지만 일주일 정도 쓰니 패턴이 보이기 시작했다.

체감한 장점

1. 네이밍 고민 제로

더 이상 .userCardContainer인지 .user-card-wrapper인지 고민하지 않아도 됐다.

2. CSS 파일 크기 고정

purge 설정으로 실제 사용한 클래스만 번들에 포함된다. 프로젝트가 커져도 CSS 크기는 거의 일정했다.

3. 반응형 작업 속도

<div className="w-full md:w-1/2 lg:w-1/3">

미디어 쿼리를 별도로 작성할 필요가 없어 반응형 레이아웃 작업이 빨라졌다.

단점도 있었다

• 디자인 시스템이 없는 상태에서 색상/간격 값이 중구난방으로 사용됨
• tailwind.config.js에 커스텀 값을 추가하는 작업 필요
• 팀원들의 학습 곡선

결론

프로토타이핑이나 어드민처럼 빠른 개발이 필요한 프로젝트에는 확실히 유용했다. 다만 디자인 시스템을 먼저 정의하고 config에 반영하는 작업이 선행되어야 일관성을 유지할 수 있다는 걸 배웠다.

메인 서비스에도 적용할지는 팀 전체의 합의가 필요할 것 같다.