CSS 압축/정리

CSS 코드를 압축하거나 보기 좋게 정리합니다. 파일 크기를 줄이거나 가독성을 높일 수 있습니다.

들여쓰기
입력
출력

CSS 압축/정리 도구 가이드

CSS 압축(Minify)에 대해서

CSS 압축은 스타일시트에서 불필요한 공백, 줄바꿈, 주석, 중복 세미콜론 등을 제거하여 파일 크기를 줄이는 최적화 과정입니다. 브라우저는 공백이나 주석 없이도 CSS를 완벽하게 해석하기 때문에, 압축된 CSS는 기능적으로 동일하면서도 전송 용량이 크게 줄어듭니다. 반대로 CSS 정리(Beautify)는 한 줄로 뭉쳐진 코드를 적절한 들여쓰기와 줄바꿈으로 펼쳐서 사람이 읽기 편한 형태로 되돌리는 작업입니다. 개발 중에는 정리된 CSS로 작업하고, 배포할 때는 압축된 CSS를 사용하는 것이 웹 성능 최적화의 기본입니다. CSS 압축의 역사는 2000년대 중반 웹 성능에 대한 관심이 높아지면서 시작되었습니다. Yahoo의 YUI Compressor와 Google의 Closure Stylesheets가 초기 도구였으며, 이후 cssnano, clean-css, esbuild 같은 현대적인 도구들이 등장했습니다. 현재는 대부분의 프론트엔드 빌드 시스템에 CSS 압축이 기본 단계로 포함되어 있지만, 빌드 환경 없이 빠르게 CSS를 압축하거나 외부 CSS를 분석할 때는 이런 온라인 도구가 여전히 유용합니다.

파일 크기보다 중요한 것

압축으로 20~30%가 줄어들지만 체감 속도에 미치는 영향은 생각보다 작습니다. 서버가 gzip이나 brotli를 함께 적용하면 공백은 어차피 효율적으로 압축되기 때문입니다.

CSS가 페이지 속도에 진짜 영향을 주는 지점은 따로 있습니다. CSS는 렌더링 차단 리소스라 다 내려받고 해석하기 전까지 화면이 그려지지 않습니다. 그래서 파일을 줄이는 것보다 첫 화면에 필요한 스타일만 먼저 적용하고 나머지를 나중에 불러오는 것이 훨씬 효과적입니다. 쓰지 않는 규칙을 걷어내는 것도 압축보다 이득이 큽니다.

압축이 깨뜨리는 경우

대부분 안전하지만 주의할 지점이 있습니다.

  • CSS 핵 — 특정 브라우저만 인식하도록 일부러 문법을 어긋나게 쓴 코드가 있다면 압축 과정에서 제거될 수 있습니다.
  • 중요한 주석 — 라이선스 고지가 담긴 주석까지 사라지면 오픈소스 라이선스 위반이 될 수 있습니다.
  • 선택자 순서 — CSS는 나중에 선언된 규칙이 이깁니다. 규칙을 병합하는 과정에서 우선순위가 달라질 여지가 있으니 결과를 확인하세요.
  • 따옴표 제거 — url() 안의 따옴표가 빠질 때 경로에 특수문자가 있으면 문제가 됩니다.

원본을 관리하세요

압축된 CSS는 되돌릴 수 없습니다. 정렬해서 펼칠 수는 있어도 주석과 원래 줄 나눔은 복원되지 않습니다. 저장소에는 항상 원본을 커밋하고 압축본은 배포 산출물로 다루세요. 압축본을 직접 수정하기 시작하면 원본과 어긋나 관리가 불가능해집니다.

자주 묻는 질문

사용하지 않는 CSS는 어떻게 찾나요?

크롬 개발자 도구에서 Ctrl+Shift+P를 누르고 Show Coverage를 실행하면 미사용 비율이 나옵니다. 다만 모달이나 호버처럼 조건부로 나타나는 스타일도 미사용으로 잡히니 그대로 지우면 안 됩니다.

SCSS도 압축되나요?

먼저 일반 CSS로 컴파일해야 합니다. 변수나 중첩 문법이 남아 있으면 처리되지 않습니다.

코드가 서버로 전송되나요?

전송되지 않습니다. 압축이 브라우저 안에서 이루어집니다.

작동 원리

CSS 압축기는 입력된 CSS 코드를 문자 단위로 순회하면서 여러 단계의 처리를 수행합니다. 먼저 /* ... */ 형태의 주석 블록을 감지하여 제거합니다. 다음으로 줄바꿈, 탭, 연속 공백을 하나의 공백으로 축소하거나 완전히 삭제합니다. 셀렉터와 속성 사이, 중괄호 앞뒤, 세미콜론 뒤의 공백처럼 CSS 문법상 불필요한 공백도 제거 대상입니다. 예를 들어 .header { margin: 0; padding: 0; }는 .header{margin:0;padding:0}로 변환됩니다. 마지막 세미콜론 제거, 0px를 0으로 단축, 색상값 축약(#ffffff를 #fff) 같은 추가 최적화도 적용할 수 있습니다. 정리(Beautify) 모드에서는 반대로 중괄호, 세미콜론 등의 위치를 기준으로 줄바꿈과 들여쓰기를 삽입하여 코드의 계층 구조를 시각적으로 표현합니다.

함께 쓰면 좋은 도구

더 읽어볼 만한 글