CSS 압축기 — 무료 브라우저 기반 CSS 압축 도구

한국의 프론트엔드 팀은 CSS 압축을 필수 프로덕션 단계로 다루는데, Google Lighthouse 성능 감사가 비압축 스타일시트에 감점하기 때문입니다. 네이버, 카카오, 토스 같은 서비스를 기반으로 한 Next.js나 Remix 마케팅 사이트는 주석, 들여쓰기, 장황한 16진수 형식을 제거하면 보통 20~40%를 절감하며, 이는 Largest Contentful Paint 점수를 주황에서 녹색으로 이동시키기에 충분합니다. AWS, NHN Cloud, KT Cloud로 배포하는 팀은 CI 단계에서 같은 단계를 베이크하고 커밋 전 이 도구로 같은 바이트 수를 확인합니다.

CSS 압축 작동 방식

압축기는 상태 인식 토크나이저로 스타일시트를 순회하며, 보호 영역(문자열 리터럴과 url() 값)과 축소·제거가 안전한 편집 가능한 공백을 구별합니다.

문자열과 URL 보호. 다른 변환보다 먼저 토크나이저는 모든 따옴표 문자열("…" 또는 '…')과 모든 url(…) 인수를 식별하고 그대로 보존합니다. 이후 처리는 이 바이트에 절대 접근하지 않으므로, 공백이 포함된 background-image URL이나 구두점이 있는 content 속성이 정확하게 유지됩니다.
주석 제거. 토글이 켜져 있으면 /* … */ 블록이 제거됩니다. 라이선스 주석 토글도 켜져 있으면 /*! … */ 블록은 유지되어 MIT, Apache, BSD 라이선스 헤더가 출력에 남습니다.
공백 축소. 스페이스, 탭, 줄바꿈의 모든 연속이 하나의 스페이스로 줄어들고, CSS 구조 문자 {, }, ;, :, , 주변의 공백이 완전히 제거됩니다. 선택자와 값 목록은 브라우저 파서가 읽는 방식과 동일하게 재배치됩니다.
값 최적화. 선택적 처리가 16진수 색상 코드를 소문자로 변환하고, 6자리 16진수 채널을 3자리 단축형으로 축소(#aabbcc → #abc)하며, 0값에서 치수 단위를 제거(0px → 0)합니다. 0 단위 제거는 단위가 중요한 transform() 호출 내부의 값은 건너뜁니다.
바이트 절약 보고. 원본과 압축된 텍스트 모두 new TextEncoder().encode(…).byteLength로 측정됩니다 — CDN이나 HTTP 서버가 실제 회선에서 보는 것과 동일한 UTF-8 바이트 수입니다. 메트릭 표시줄은 원본 크기, 압축 후 크기, 절약된 바이트, 절약 비율을 보여줍니다.

CSS를 압축하는 이유

렌더 차단 로드 단축. 브라우저는 CSS 파싱이 완료될 때까지 단 한 픽셀도 그리지 않습니다. 스타일시트를 30% 줄이면 그 차단 시간이 짧아지고, First Contentful Paint가 향상되며, Lighthouse 성능 점수에 직접 반영됩니다.
CDN 출구 비용 절감. CloudFront, Cloudflare, Fastly는 기가바이트당 출구 비용을 청구합니다. 매 페이지 뷰마다 전송되는 스타일시트에서 20%를 줄이면 월 수백만 뷰가 넘을 때 실제 청구서에 나타납니다.
더 작은 임베드와 이메일 CSS. 트랜잭션 이메일 템플릿은 CSS를 인라인으로 포함하며 모든 여분의 바이트가 Gmail의 102 KB 클립 임계값에 가까워집니다. 인라인 처리 전에 압축하면 메시지가 한도 내에 유지됩니다.
빌드 도구 의존성 없음. 일회성 작업, 빌드 파이프라인 없는 레거시 저장소, 에어갭 환경에서는 항상 Node 툴체인을 설치할 여유가 있는 것은 아닙니다. PostCSS, cssnano, 또는 다른 것을 설치하지 않고도 여기서 실행할 수 있습니다.

주요 활용 사례

CSS 압축은 거의 모든 프론트엔드 빌드 파이프라인의 마지막과 바이트 수가 중요한 여러 런타임 컨텍스트에서 등장합니다.

프로덕션 빌드 파이프라인: Webpack, Vite, Rollup, Parcel은 모두 프로덕션 모드 기본값으로 CSS 압축 단계를 포함합니다. 커밋 전 여기서 실행하면 전체 빌드 없이 출력을 검증할 수 있습니다.
<style> 태그에 CSS 임베드: 중요 CSS를 HTML 문서에 인라인으로 삽입하는 서버 렌더링 프레임워크는 독립형 스타일시트와 동일한 바이트 절감 혜택을 받으며, 인라인 CSS가 작아지면 Time to First Byte도 줄어듭니다.
트랜잭션 및 마케팅 이메일: 이메일 HTML은 모든 CSS를 인라인으로 포함하므로 스타일시트의 모든 킬로바이트가 총 메시지 크기에 더해집니다. 인라인 처리 전에 압축하면 메시지가 ESP 크기 한도 내에 유지됩니다.

실제 예시

두 칸 들여쓰기, 선택자 사이의 빈 줄, 상단에 라이선스 주석 블록, #FFFFFF 같은 장황한 16진수 색상과 margin: 0px 같은 0이 포함된 1 KB 규칙 세트를 붙여넣으세요. 모든 옵션을 켜면 출력이 약 600바이트로 줄어듭니다 — 40% 절감 — 렌더링된 페이지는 소스와 바이트 동일하게 보입니다.

압축하면 CSS 동작이 바뀌나요?

기본 토글 사용 시에는 그렇지 않습니다. 압축기는 CSS 파서가 이미 버리는 바이트만 제거합니다 — 공백, 주석, 선택적 마지막 세미콜론 — 그리고 단위가 중요한 transform() 내부는 건너뜁니다. 모든 선택자, 속성, 값이 유지됩니다.

SCSS나 LESS에서도 작동하나요?

일반 CSS로 컴파일한 후에만 가능합니다. SCSS와 LESS 구문(변수, 중첩, 믹스인, & 부모 선택자)은 유효한 CSS가 아니며 압축기가 이를 손상시킵니다. 전처리기 소스를 먼저 컴파일한 다음 컴파일된 출력을 여기에 붙여넣으세요.

라이선스 주석이 왜 제거되나요?

얼마나 절감할 수 있나요?

직접 작성한 CSS는 보통 15~35% 줄어듭니다. 주석이 많거나 깊게 들여쓰여진 파일에 색상 리터럴이 많으면 40%에 달할 수 있습니다. Sass나 CSS-in-JS에서 컴파일된 출력은 이미 부분적으로 압축되어 있어 보통 5~15% 절감합니다.

브라우저 탭에서 CSS 압축을 실행하면 Node 툴체인을 완전히 건너뜁니다. 위에 스타일시트를 붙여넣고 얼마나 공격적으로 처리할지 옵션을 토글한 뒤 출력을 복사하거나 .min.css로 다운로드하세요. 업로드 없음, 계정 없음, 벤더 라이브러리 없음.

CSS 압축 _

// 관련 도구