CSS 압축기

CSS 압축기 사용법

입력창에 원본 CSS를 붙여넣고 "압축"을 누르면 주석과 불필요한 공백, 줄바꿈이 제거된 한 줄짜리 결과가 나옵니다. 압축은 브라우저 안에서 즉시 처리되므로 스타일 코드가 서버로 전송되지 않고, 결과는 복사 버튼으로 바로 클립보드에 담아 style.min.css 같은 파일로 저장하면 됩니다. 처리 전후의 바이트 수를 함께 보여줘 얼마나 줄었는지 바로 확인할 수 있습니다.

무엇을 지우는가 - 압축 원리

이 도구는 CSS의 의미를 바꾸지 않는 문자만 골라 제거합니다. 구체적으로 /* ... */ 주석 전체, 규칙 사이와 선택자·속성 주변의 들여쓰기·줄바꿈·연속 공백, 그리고 마지막 속성 뒤에 붙은 불필요한 세미콜론을 없앱니다. 또한 : 이나 { , ; 처럼 콜론·중괄호·세미콜론 옆의 공백 한 칸도 줄여 a{color:red} 형태로 만듭니다. 반면 margin:0 auto의 값 사이 공백이나 폰트 이름의 띄어쓰기처럼 지우면 의미가 달라지는 공백은 그대로 둡니다. 색상값을 축약(#ffffff→#fff)하거나 속성을 재배열하는 고급 최적화는 하지 않으므로, 결과 CSS의 동작은 원본과 완전히 동일합니다.

이럴 때 씁니다

웹사이트를 배포하기 직전, 사람이 보기 좋게 들여쓰기해 둔 개발용 CSS를 실제 서비스에 올릴 때 씁니다. 공백과 주석은 브라우저 렌더링에 아무 역할을 하지 않으면서 파일 크기만 차지하므로, 이를 없애면 다운로드 용량과 첫 화면 로딩 시간이 줄어듭니다. 빌드 도구(webpack, Vite 등)를 쓰지 않는 단순 정적 사이트, 이메일 템플릿의 인라인 스타일, 워드프레스 커스텀 CSS 칸처럼 자동 압축 파이프라인이 없는 환경에서 특히 유용합니다.

압축 효과와 팁

주석과 들여쓰기가 많은 CSS일수록 감소 폭이 큽니다. 대략적인 가늠입니다.

압축본은 사람이 수정하기 어려우니 원본을 반드시 따로 보관하고, 실제 편집은 원본에서 한 뒤 다시 압축하세요. 서버에 Gzip/Brotli 전송 압축이 켜져 있으면 최종 전송량은 더 줄어드는데, 미니파이는 그 전 단계에서 텍스트 자체를 가볍게 해 두 방식을 함께 쓰면 효과가 겹칩니다.

자주 묻는 질문