CSS 압축 도구란?

들여쓰기와 줄바꿈으로 정리된 CSS 코드에서, 브라우저가 스타일을 적용하는 데 필요 없는 공백과 주석을 걷어내 파일 크기를 줄이는 도구입니다. 이런 작업을 압축(minify, 미니파이)이라고 부릅니다. 스타일시트를 서버에 올리기 전에 한 번 압축해 두면 방문자에게 전송되는 데이터양이 줄어, 특히 모바일에서 페이지가 조금 더 빨리 뜹니다.

압축 과정에서 없어지는 것은 규칙 사이의 공백과 줄바꿈, 들여쓰기, 그리고 /* */로 감싼 주석입니다. 선택자와 속성값 같은 실제 내용은 그대로 두므로 스타일의 동작은 바뀌지 않고, 표기만 촘촘하게 압축됩니다. 반대로 읽기 좋게 다시 펴야 한다면 CSS 포맷터로 되돌릴 수 있습니다.

사용 방법

1. 편집기 영역에 압축할 CSS 코드를 붙여넣습니다.
2. 아래의 압축 버튼을 누르면 같은 편집기 안에서 코드가 압축된 결과로 바뀝니다.
3. 편집기 오른쪽 위의 복사 버튼으로 결과를 클립보드에 담아 사용합니다.

결과가 입력했던 편집기에 그대로 덮어써지므로, 압축 버튼을 누른 뒤에는 원래 코드로 되돌릴 수 없습니다. 배포용 사본을 만든다는 생각으로, 주석과 들여쓰기가 담긴 원본 파일은 반드시 따로 보관한 상태에서 사용하세요.

압축 전후 비교 예시

주석과 들여쓰기가 있는 CSS를 실제로 압축하면 다음과 같이 바뀝니다.

이 예시에서는 주석과 들여쓰기가 사라지고 #ffffff가 #fff로 짧아지면서 63자가 34자로, 약 46% 줄었습니다. 실제 감소율은 원본에 주석과 공백이 얼마나 많은지에 따라 달라지며, 정리가 잘 된 긴 스타일시트일수록 절감 폭이 커지는 편입니다.

자주 묻는 질문

압축하면 화면 스타일이 달라질 수도 있나요?

달라지지 않습니다. 압축은 공백과 주석만 없애고 색상값을 동일한 짧은 표기로 바꾸는 정도라, 브라우저가 해석하는 결과는 압축 전과 똑같습니다. 다만 안심을 위해 압축본을 실제 페이지에 한 번 적용해 보고 확인하는 습관은 도움이 됩니다.

압축한 CSS를 다시 원래대로 되돌릴 수 있나요?

들여쓰기는 CSS 포맷터로 다시 펼 수 있지만, 압축 때 삭제된 주석은 영구히 사라집니다. 그래서 압축본은 배포 전용으로만 쓰고, 수정 작업은 항상 주석이 남아 있는 원본 파일에서 하는 것이 원칙입니다.

붙여넣은 코드가 서버로 전송되나요?

아닙니다. 압축 처리는 접속하신 분의 브라우저 안에서 자바스크립트로 이루어지며, 입력한 CSS가 저희 서버로 올라가지 않습니다. 외부에 보내기 민감한 코드도 안심하고 사용하실 수 있습니다.

서버에서 gzip 압축을 쓰고 있는데도 필요한가요?

둘은 역할이 다릅니다. gzip은 전송 순간에만 데이터를 압축했다가 브라우저에서 다시 풀어내는 방식이고, 미니파이는 파일 자체에서 불필요한 글자를 없애는 방식입니다. 미니파이로 줄인 파일에 gzip을 함께 적용하면 효과가 겹쳐 적용되므로, 두 가지를 같이 쓰는 것이 일반적입니다.

근거: html-minifier(minifyCSS) 기반 브라우저 내 처리 · 마지막 검토: 2026년 7월 11일.