Tailwind CSS에서 바닐라 CSS로 전환, CSS 기술 가치 재평가...개발자들이 CSS 구조화 학습으로 돌아가는 이유

[한국정보기술신문] 웹 개발자 줄리아 에반스가 Tailwind CSS에서 바닐라 CSS로 마이그레이션했다. 그녀가 Tailwind를 떠난 이유는 도구의 한계를 느꼈기 때문이다. 최근 버전의 Tailwind는 빌드 시스템이 필수가 됐고, 프로젝트 파일 크기도 문제였다. 그녀의 프로젝트에 포함된 Tailwind 파일은 2.8메가바이트였고 압축해도 270킬로바이트나 됐다.

Tailwind를 사용하면서 느낀 가장 큰 문제는 창의적인 CSS 솔루션을 구현할 수 없다는 점이었다. Tailwind 프레임워크는 미리 정의된 방식만 허용하기 때문에 특이한 디자인 요구사항을 충족시키기 어렵다. 또한 프로젝트가 바닐라 CSS와 Tailwind를 혼합하면서 유지보수가 복잡해졌다. 점차 CSS 기술에 대한 자신감이 생기면서 프레임워크의 필요성을 의문시하게 됐다.

에반스는 아홉 가지 핵심 시스템으로 CSS를 구조화했다. 첫째, Tailwind의 preflight 스타일을 재사용해 일관성을 유지했다. 둘째, 각 컴포넌트에 고유한 클래스를 부여해 컴포넌트 간 간섭을 방지했다. 셋째, 색상 팔레트를 CSS 변수로 중앙화했다. 넷째, 글꼴 크기도 미리 정의된 변수를 사용했다. 다섯째, 최소한의 유틸리티 클래스만 유지했다.

여섯째, 기본 스타일은 의도적으로 작게 유지했다. 일곱째, 여백 관리는 레이아웃 컴포넌트가 담당하도록 설계했다. 여덟째, CSS Grid를 활용한 유연한 반응형 디자인으로 미디어 쿼리를 최소화했다. 아홉째, esbuild를 사용해 Native CSS 가져오기와 중첩을 활용했다.

에반스는 철학적 이유도 강조했다. Tailwind는 CSS 전문성의 가치를 깎아내린다고 생각한다. CSS는 근본적인 웹 기술인데, 프레임워크에 의존하다 보면 진정한 기술 습득이 이루어지지 않는다. 개발자로서 자신이 사용하는 기술을 완전히 이해하는 것이 중요하다고 판단했다.

흥미롭게도 Native CSS의 발전이 이런 전환을 가능하게 했다. CSS 변수, CSS 중첩, CSS 그리드 같은 최신 기능들이 구조화된 접근 방식을 강력하게 지원한다. 개발자들은 더 이상 복잡한 프레임워크 없이도 현대적이고 유지보수 가능한 스타일시트를 작성할 수 있다. 이는 CSS 커뮤니티 전체의 기술 수준이 향상됐음을 의미한다.