마크업에 스타일을 직접 붙여 화면을 조립하는 CSS 프레임워크
HTML 태그에 클래스를 붙이는 순간 화면이 완성되는 과정을 경험해 봅니다. 별도의 CSS 파일을 작성하고 클래스 이름을 매칭할 필요가 없습니다. 이 도구는 유틸리티 클래스를 사용해 레이아웃과 스타일을 마크업 안에서 바로 제어할 수 있게 합니다.
마크업 중심의 스타일링
전통적인 CSS에서는 요소에 의미 있는 클래스 이름을 부여하고, 별도의 스타일 시트에서 규칙을 정의합니다. 이 프레임워크는 이러한 과정을 뒤집어, HTML 요소에 직접 기능을 나타내는 짧은 클래스 이름을 붙입니다. 정렬이나 간격, 색상 같은 스타일을 적용할 때 해당 기능을 설명하는 클래스를 바로 태그에 추가합니다. 이렇게 하면 스타일 적용 위치를 바로 확인하고, 불필요한 클래스를 쉽게 제거할 수 있습니다.
PostCSS 빌드 파이프라인 연동
이 도구는 PostCSS 빌드 파이프라인에서 동작하는 플러그인입니다. 개발자는 프로젝트 설정에서 필요한 유틸리티 클래스만 선택하고, 빌드 과정에서는 실제 사용된 클래스만 최종 CSS 파일에 포함되도록 처리합니다. TypeScript로 작성되어 있으며, PostCSS 생태계와 연동되어 기존 빌드 도구와 함께 사용할 수 있습니다. 이를 통해 최종 배포 파일의 크기를 줄이고, 사용하지 않는 스타일 코드가 포함되는 것을 방지합니다.
문서와 커뮤니티
전체 사용법은 공식 문서 사이트에서 확인할 수 있습니다. GitHub 저장소에서는 기여 가이드라인을 제공하며, 새로운 기능 제안이나 문제 해결을 위한 토론이 이루어집니다. 기여를 원한다면 풀 리퀘스트를 보내기 전에 기여 문서를 먼저 읽어야 합니다. 커뮤니티 채널을 통해 모범 사례나 기능 아이디어를 공유할 수도 있습니다.
적용 전 점검
이 방식은 HTML 파일에 클래스가 많이 쌓이는 것을 전제로 합니다. 기존 프로젝트에서 의미 중심의 클래스 네이밍 컨벤션을 엄격히 따르고 있다면, 팀 내 합의가 필요합니다. PostCSS 빌드 설정을 이해하고, 유틸리티 클래스를 필터링하는 설정 방법을 알아야 합니다.
