CSS 압축 도구이란?

CSS Minifier는 공백, 주석, 불필요한 구문을 제거하여 CSS 코드를 압축합니다. 파일이 작아질수록 다운로드가 빨라지고 PageSpeed 점수도 올라갑니다.

내부적으로는 CSSO 알고리즘이 동작하는데, 단순히 공백을 제거하는 수준을 넘어섭니다. 같은 선택자를 가진 인접 규칙을 합치고, 단축 표기에서 중복을 정리하며(margin: 10px 10px 10px 10px → margin: 10px), 더 이상 필요 없는 벤더 프리픽스를 빼고, 가능하면 여섯 자리 HEX 색을 세 자리로 줄여 줍니다.

사용 방법

1. 입력 영역에 CSS 코드를 붙여넣거나 .css 파일을 업로드하거나 URL에서 스타일시트를 바로 불러오세요.
2. 압축 버튼을 클릭하면 주석, 공백이 제거되고 값이 축약됩니다.
3. 압축된 결과를 복사하거나 .css 파일로 다운로드하세요. 표시된 압축률을 확인할 수 있습니다.

사용 시기

• 빌드 단계가 없는 정적 사이트에 운영용 스타일시트를 배포할 때.
• 두 버전의 CSS를 비교해 손으로 쓴 코드 안에 숨어 있는 중복을 확인할 때.
• Critical CSS를 HTML head에 인라인할 때 마지막 한 바이트까지 짜낼 때.

결과

주석과 서식이 포함된 24KB 스타일시트가 16KB로 압축됩니다. 33% 감소로 3G 환경에서 로딩 시간이 50ms 단축됩니다.

자주 묻는 질문

압축한 CSS는 원본과 다르게 렌더링되나요?

브라우저는 압축본과 정렬본을 동일하게 해석합니다. 캐스케이드, 우선순위, 계산된 스타일이 모두 같습니다. 달라지는 건 디스크와 네트워크 상의 파일 크기뿐입니다.

위에 gzip도 적용해야 하나요?

예. 압축 위에 gzip을 더하면 60-80%가 더 줄어듭니다. 대부분의 CDN은 gzip을 자동 적용합니다. 먼저 압축해 두는 것은 여전히 유용한데, gzip이 반복 패턴을 잘 압축하고 압축된 CSS에는 그런 패턴이 더 많기 때문입니다.

압축이 소스 맵을 망가뜨리나요?

이 도구는 빌드 그래프가 아닌 단일 CSS 문자열을 다루기 때문에 소스 맵을 생성하지 않습니다. 맵이 필요하다면 esbuild나 Vite 같은 번들러를 사용하세요. 이들은 압축 CSS와 함께 .css.map을 출력합니다.

압축한 파일에 공백이 일부 남아 있는 이유는?

CSS는 문자열 값 안, 선택자 사이(.a .b는 .a.b와 다릅니다), calc() 식 안의 공백을 의미상 보존합니다. 압축기는 의미상 필요 없는 공백만 제거하고 나머지는 그대로 둡니다.

커스텀 속성(CSS 변수)을 사용하는 CSS를 안전하게 압축할 수 있나요?

예. 커스텀 속성의 이름과 값은 그대로 유지되고, 압축기는 주변 형식만 정리합니다. --brand-color 같은 변수는 작성한 그대로 살아남아 var() 호출에서도 그대로 작동합니다.

관련 도구