TOC
들어가며
Tailwind CSS 왜 써?
부제처럼, 저는 Tailwind CSS를 혐오하던 사람이었습니다. 과거에 bootstrap을 배우면서 이런 생각들이 들었거든요.
- tsx 코드에서 로직과 스타일이 너무 엮인다.
- 스타일 수정이 너무 어렵다. (유지보수가 너무 힘들다.)
Tailwind CSS 왜 안 써?
하지만, 이제 저는 토이 프로젝트를 할 때에는 tailwind css를 사용하고 있습니다. 초기 세팅이 간편하면서도 강력하거든요. 그렇지만 회사 코드는 다릅니다. 규모, 수명 등 초기 세팅이 간단하다고 쉽게 선택할 수 없죠.
글의 개요
이번 글은 제가 회사에서 새로운 프로젝트를 꾸리기 시작하는 현 시점에서, 어떤 스타일 라이브러리를 도입할지 고민하는 PoC, 그리고 그 결과로 Tailwind CSS를 선택하게 한 Tailwind CSS의 장단점의 자세한 내용을 담아보려 합니다.
Tailwind CSS의 분석
우선 Tailwind CSS의 장점과 단점에 대해 깊게 분석해보겠습니다. ChatGPT의 힘을 빌렸습니다.
장점
유틸리티 퍼스트 접근
- 유틸리티 클래스 중심으로 스타일을 작성 -> 컴포넌트 내부에서 직접 스타일 구성
효과: CSS 파일을 별도 관리 불필요, 스타일 중복 감소
빠른 스타일링과 개발 속도
- 빠른 스타일링 : CSS를 직접 작성하지 않고 미리 정의된 유틸리티 클래스를 조합
- 높은 생산성 : VSCode 확장 플러그인 + 자동 완성
불필요한 CSS 제거
- TreeShaking : 사용하지 않는 클래스 제거 -> 빌드 후 파일 크기 축소
- 장기적 이점 : 프로젝트 규모가 커질수록 성능 개선에 도움
모던 CSS 기능 지원
- 최신 기능 적극 지원 : CSS Grid, Flexbox, 다크 모드, 상태 기반 스타일링
생태계와 플러그인 지원
- 높은 확장성 : Tailwind Typography, Tailwind Forms 등
- 활발한 커뮤니티 : 다양한 템플릿과 구성 예제 조사 가능
디자인 일관성
- 일관된 디자인 : Tailwind의 기본 설정이나 커스텀 설정
- 유지보수 용이 : 테마 관리, 색상 팔레트, 공간 단위 등이 통일
SSR에 유리
- 런타임에서 스타일링을 생성하지 않고 빌드 시점에 생성
- 스타일이 인라인처럼 적용되어 빠른 렌더링 가능
- 미리 컴파일된 정적 CSS를 사용하므로 캐싱 전략에 좋음
단점
학습 곡선 극복
- 유틸리티 클래스 특성상 기존 CSS 방식과 다름
- 다양한 속성과 조합을 모두 기억하기 어려움
복잡한 CSS는 별도 구성
- 복잡한 애니메이션이나 상태 기반 유틸리티 클래스로 표현하기 어려움
- 별도의 전용 CSS 파일이나 커스텀 클래스를 작성해야 함
동적인 스타일 적용 불가
- 동적 스타일링을 위한 편리한 API 없음
- 런타임에 조건부 클래스나 style 속성을 활용해야 함
HTML/TSX가 복잡
- 클래스 조합이 많아지면 가독성과 유지보수성 저하
- 유틸리티 클래스 중심의 라이브러리의 고질적 문제
다른 스타일 라이브러리와의 비교
현재는 다양한 스타일 라이브러리들이 있습니다. 역사 깊은 PostCSS인 Sass/SCSS, 그리고 한 때, 신흥강자 CSS-in-JS의 시대를 이끈 styled-components를 거쳐 Emotion이 바톤을 넘겨받았고, SSR과 성능 최적화의 시대를 맞이하며 zero-runtime인 panda-css와 vanilla-extract 등도 등장했죠.
이런 스타일 라이브러리들과 Tailwind CSS를 비교해봤습니다.
Tailwind CSS vs SCSS
| 항목 | Tailwind CSS | SCSS |
|---|---|---|
| 스타일링 방식 | 유틸리티 클래스 기반 | 컴포넌트 중심, 구조적 스타일링 |
| 유지 보수 | 설정 파일을 통해 일관성 유지 | 전역 변수와 믹스인을 통해 일관성 유지 |
| 성능 | 사용하지 않는 클래스 제거로 최적화 | 필요 없는 스타일이 남아 파일 크기가 커질 수 있음 |
| 작성 속도 | 빠르게 조합하여 스타일링 가능 | 반복적인 스타일 작성 필요 |
| 학습 곡선 | 직관적이지만 클래스 조합이 생소할 수 있음 | CSS 기반으로 자연스럽게 익힐 수 있음 |
| 사용 사례 | 빠른 프로토타입 제작, 디자인 시스템 구축 | 구조화된 스타일 관리, 복잡한 스타일링 |
Tailwind CSS vs Emotion
| 항목 | Tailwind CSS | Emotion |
|---|---|---|
| 스타일링 방식 | 유틸리티 클래스 기반 | CSS-in-JS 기반 |
| 유지 보수 | 설정 파일로 일관성 유지 | 테마와 글로벌 스타일링으로 유지 가능 |
| 성능 | 미사용 CSS 제거로 성능 최적화 | 동적 스타일로 런타임 성능 저하 가능 |
| 작성 속도 | 빠르게 조합하여 스타일링 가능 | 스타일 객체를 직접 작성해야 함 |
| 학습 곡선 | Tailwind 클래스 익히기 필요 | JS 문법 기반이라 진입 장벽이 낮음 |
| 사용 사례 | 빠른 스타일링, 반응형 웹 구축 | 컴포넌트 단위 스타일링, 동적 스타일 필요 시 |
Tailwind CSS vs Zero-runtime CSS
Zero-runtime CSS-in-JS는 대표적으로 Panda CSS와 vanilla-extract가 있습니다. 이 둘은 모두 런타임 오버헤드가 없는 라이브러리입니다. 따라서, 런타임 오버헤드가 없는 Tailwind CSS와 비교해보겠습니다.
| 항목 | Tailwind CSS | Zero-runtime CSS-in-JS |
|---|---|---|
| 런타임 오버헤드 | 거의 없음 (빌드 시 PurgeCSS로 최적화) | 전혀 없음 (컴파일 시 완전히 제거) |
| 스타일 정의 방식 | 유틸리티 클래스 기반 | 함수형 스타일 정의 (TS 파일 내 작성) |
| 개발 속도 | 매우 빠름 (직관적 클래스 조합) | 초기 설정이 다소 복잡, 코드 작성은 간결 |
| 타입 안전성 | 낮음 (클래스명이 문자열로 관리됨) | 높음 (타입스크립트 지원, 함수형 스타일) |
| CSS 커스터마이징 | Tailwind 설정 파일을 통해 가능 | 변수 및 함수로 손쉽게 정의 가능 |
| 스타일 중복 및 관리 | 클래스가 많아지면 HTML/TSX가 복잡해질 수 있음 | 스타일이 논리적으로 모듈화되어 유지보수 용이 |
| 동적 스타일링 | 어려움 (조건부 클래스 적용) | 매우 유연 (변수와 상태를 이용한 동적 스타일 적용) |
| 생태계와 플러그인 | 풍부한 생태계와 다양한 플러그인 존재 | 상대적으로 생태계가 작고, 사용 예제가 적음 |
| 가독성 | HTML/TSX 코드가 복잡해질 수 있음 | 스타일과 논리가 결합되어 있어 컴포넌트 코드가 간결 |
Tailwind CSS와 AI 코드 생성
최근 MCP, 그리고 Figma와 Cursor의 연동 등 AI와 관련 생태계의 발전은 정말 빠릅니다. AI 친화적인 환경은 이후의 시대를 위해 반드시 고려할 수 밖에 없습니다.
요즘 생성형 AI나 Cursor 등에 코드 작성을 요청하면, 기본 스타일은 보통 Tailwind CSS로 작성해줍니다. 혹은, 여러 스타일 라이브러리를 사용하더라도, 코드 퀄리티가 Tailwind CSS가 월등히 좋죠. AI 친화적, 이것이 Tailwind CSS를 채택한 지배적인 이유입니다. Tailwind CSS가 왜 AI 코드 생성에 강점을 가지는지 이유를 알아봤습니다.
구조화된 규칙성
Tailwind CSS는 유틸리티 퍼스트 접근법을 사용하여 CSS를 작은 단위의 클래스들로 나눠서 제공합니다. 이러한 구조는 AI 모델이 학습하기에 매우 적합하다는 거죠.
- 명확하고 직관적인 클래스 이름 -> 패턴 인식 용이
- 규칙적인 클래스명(ex.
text-xl,bg-gray-500,p-4) -> 구조 파악 용이 - AI 모델이 이러한 규칙성을 학습 -> 다양한 조합을 유연하게 생성 가능
코드 자동 생성에 유리
AI 기반 코드 생성기 (예: GitHub Copilot, ChatGPT 등)는 직관적으로 이해할 수 있는 코드를 선호합니다.
- HTML 구조와 스타일을 한 곳에 표현 -> AI가 코드와 스타일을 동시 생성에 용이
- 구조가 단순 -> 코드 생성이 빠르고 직관적
- 기존 CSS-in-JS나 SCSS와 달리, 동적 변수나 중첩 구조가 없음 -> AI가 실수를 줄일 수 있음
커스터마이징과 유연성
기본 제공 유틸리티 외에도 설정 파일로 커스터마이징이 가능합니다.
- AI가 Tailwind 설정 파일을 분석 -> 프로젝트별로 최적화된 코드 생성 가능
- ex. 테마 색상이나 폰트 사이즈 학습 -> 일관성 있는 코드 제안 가능
디자인 시스템과의 궁합
Tailwind CSS는 디자인 시스템과의 통합이 매우 용이합니다.
- 유틸리티 클래스 -> 디자인 시스템을 컴포넌트에 자연스럽게 적용 가능
- AI가 디자인 시스템을 분석 -> Tailwind 클래스로 변환 -> 수준 높은 자동화
- AI가 디자인 파일(Figma 등)을 분석 -> Tailwind 코드로 변환 -> 수준 높은 자동화
요약
- AI 코드 생성의 핵심은 패턴 인식과 직관성 -> Tailwind CSS는 이를 쉽게 만족
- 방대한 데이터셋과 커스터마이징의 유연성 -> 프로젝트 맞춤형 코드 생성 가능
결론
장단점과 라이브러리 비교
분명 강력한 장점과 함께, 유틸리티 클래스 기반 특성상 단점도 분명해 보입니다. 하지만, 모든 성능과 생산성을 만족하는 라이브러리는 아직까지 없습니다. 취할 게 있다면, 잃을 게 있는 트레이드오프(Trade-Off)의 영역입니다.
그렇다면, 미래 시대를 위한 AI 친화성과 SSR 친화성을 모두 고려했을 때, Tailwind CSS가 최선의 선택이라고 보여졌고, 최종적으로 회사 프로젝트 구성에도 채택하게 되었습니다.
단점의 극복
하지만 단점이 분명한만큼, 이를 극복하기 위한 노력은 반드시 뒤따라야 할 것입니다.
학습 곡선의 극복처럼 개발자 개개인이 찾아보고 익숙해졌을 때 나아지는 것들은 제외하고 개발 생산성과 편의성, 가독성 및 유지보수성에 도움이 되는 방법들을 고민해봤습니다. 길어질 것 같아 다음 글에서 바로 이어서 다뤄보겠습니다.
