AI 요약
8년 전 CSS 구조화에 어려움을 겪던 저자는 테일윈드를 도입해 수많은 소규모 사이트를 제작했으나, 최근 일주일 동안 이를 다시 시맨틱 HTML과 바닐라 CSS 체제로 전환하는 실험을 진행했습니다. 이 과정에서 저자는 테일윈드가 제공하던 시스템(리셋 스타일, 컬러 팔레트, 폰트 스케일 등)을 모방하여 자신만의 CSS 구조를 설계하는 법을 익혔습니다. 특히 테일윈드의 'Preflight' 설정에서 약 200줄의 코드를 복사해 기본 리셋 CSS로 활용함으로써 box-sizing: border-box와 같은 익숙한 환경을 유지했습니다. 또한, CSS를 Vue나 React의 컴포넌트 개념과 유사하게 독립적인 파일로 분리하여 각 컴포넌트의 클래스가 서로 간섭하지 않도록 구성했습니다. 이를 통해 전체 코드의 약 80%를 차지하는 컴포넌트 스타일을 100줄 내외의 파일 단위로 관리하며 복잡성을 획기적으로 낮췄습니다. 결과적으로 테일윈드 없이도 체계적이고 즐거운 프론트엔드 개발이 가능하다는 점을 확인했습니다.
핵심 인사이트
- 저자는 8년 전부터 사용하던 테일윈드를 떠나 2026년 5월 기준 약 일주일간 바닐라 CSS로의 마이그레이션을 단행했습니다.
- 테일윈드의
tailwind.css파일 상단에서 약 200줄의 'Preflight' 스타일을 복사해 기본 리셋 설정으로 재사용했습니다. - CSS 관리의 약 80%를 차지하는 부분을 컴포넌트화하여 각 파일이 약 100줄 이내가 되도록 구조화했습니다.
box-sizing: border-box및line-height: 1.5와 같은 테일윈드의 기본 설정들을 바닐라 CSS 환경에도 그대로 이식하여 일관성을 유지했습니다.
주요 디테일
- 마이그레이션의 핵심은 테일윈드가 제공하던 시스템적 장점(컬러 팔레트, 폰트 스케일 등)을 유지하면서 시맨틱 HTML의 이점을 살리는 것입니다.
- 컴포넌트 스타일링 시 각 컴포넌트는 고유한 클래스를 가지며, 다른 컴포넌트의 CSS를 절대 오버라이드하지 않는 독립적인 구조를 원칙으로 세웠습니다.
- 파일 단위 분리를 통해 특정 기능을 수정할 때 전체 시스템이 아닌 해당 컴포넌트의 100여 줄 코드만 집중하면 되도록 인지 부하를 줄였습니다.
- 테일윈드의 유틸리티 클래스 대신 시맨틱한 클래스명을 사용하되, 테일윈드에서 학습한 디자인 시스템 원칙(Base spacing, Responsive design 등)을 적용했습니다.
- CSS 레이어(Cascade Layers)나 최신 CSS 작성 기법(2024년 방식 등)에 대한 블로그 포스트를 참고하여 구조적 두려움을 극복했습니다.
향후 전망
- 복잡한 유틸리티 클래스 위주의 개발에서 벗어나, 유지보수가 용이한 '컴포넌트 중심의 바닐라 CSS' 방식이 소규모 프로젝트에서 다시 주목받을 가능성이 있습니다.
- 프레임워크에 대한 의존도를 낮추고 브라우저 표준 기능과 디자인 시스템 원칙을 직접 구현하는 웹 개발 트렌드가 강화될 것으로 보입니다.