CSS 압축 사이트: 뭐가 지워지고 뭐가 남을까

CSS 압축(minify)은 코드의 의미를 바꾸지 않으면서 주석과 불필요한 공백·줄바꿈만 지워 파일 용량을 줄이는 작업입니다. 웹사이트 로딩 속도를 줄이려고 CSS 파일 용량을 줄이려는 사람이라면, 압축 시 정확히 무엇이 사라지고 무엇이 남는지가 가장 궁금한 지점일 겁니다. 이 글은 그 원리와, 화면에 뜨는 절감률(%) 숫자가 어떻게 계산되는지를 확인 가능한 사실로만 정리합니다.

요약 ① 주석과 불필요한 공백·줄바꿈은 삭제되지만, 문자열 안 공백과 calc() 연산자 앞뒤 공백은 그대로 보존됩니다. ② :hover 같은 의사 클래스와 @media·@keyframes 중첩 규칙은 선택자·속성을 구조적으로 나눠 인식하므로 압축해도 깨지지 않습니다. ③ 화면의 절감률(%)은 (1 - 압축 후 바이트 / 원본 바이트) × 100 으로 계산되어 표시됩니다.

왜 CSS 파일 용량이 문제가 되는가

오래 운영한 사이트일수록 CSS 파일에는 각 규칙을 설명하는 주석과, 가독성을 위한 들여쓰기·줄바꿈이 많이 쌓여 있습니다. 개발자가 코드를 읽고 고치기에는 이 형태가 편하지만, 브라우저가 스타일을 적용하는 데 이 여백과 주석이 필요한 것은 아닙니다.

방문자가 페이지를 열 때마다 이 주석과 공백까지 CSS 파일 안에 그대로 담겨 함께 전송됩니다. 파일에 불필요한 문자가 많을수록 다운로드해야 할 바이트 수가 늘어나고, 그만큼 CSS가 로드되는 데 걸리는 시간도 함께 늘어납니다.

문제는 이걸 손으로 직접 줄이려 할 때 생깁니다. 공백을 무작정 다 지우면 될 것 같지만, 실제로는 지워도 되는 공백과 지우면 안 되는 공백이 CSS 문법 안에 함께 섞여 있습니다.

압축 원리를 손으로 확인하는 방법

CSS 압축이 실제로 하는 일은 크게 두 갈래로 나뉩니다. 하나는 무조건 지워도 되는 부분이고, 다른 하나는 지우면 문법이나 의미가 바뀌는 부분입니다. 순서대로 확인하면 손으로도 같은 결과를 만들 수 있습니다.

지워도 되는 네 가지

1. 주석을 지웁니다. /* ... */로 감싸인 부분은 브라우저가 해석하지 않는 설명글이므로, 통째로 지워도 스타일에는 영향이 없습니다.

2. 규칙 사이 줄바꿈과 들여쓰기를 지웁니다. 중괄호 { } 앞뒤, 세미콜론 ; 뒤에 있는 줄바꿈·탭·연속 공백은 한 글자로 붙여도 브라우저가 해석하는 결과는 같습니다.

3. 블록 마지막 선언 뒤 세미콜론을 지웁니다. 세미콜론은 다음 선언과 구분하기 위한 것인데, 뒤에 선언 없이 바로 닫는 중괄호가 오면 없어도 문법상 문제가 없습니다.

4. 다음 세 가지는 그대로 둡니다. 문자열 리터럴(content:" "처럼 따옴표로 감싼 값) 안의 공백, calc() 연산자 앞뒤 공백, 선택자 안에서 뜻을 바꾸는 공백입니다.

공백을 지우면 안 되는 이유

calc() 안의 공백은 장식이 아니라 문법의 일부입니다. calc(100% - 80px)에서 - 앞뒤 공백을 지우면 calc(100%-80px)가 되는데, 이는 뺄셈 연산자가 아니라 다른 표현으로 해석되어 브라우저가 값 전체를 무시할 수 있습니다. 그래서 calc() 안의 공백은 압축 대상에서 제외해야 합니다.

선택자 안의 공백도 마찬가지로 뜻이 있습니다. .a .b는 .a 요소 안에 있는 .b 요소를 가리키는 자손 결합자이고, .a.b는 두 클래스를 동시에 가진 하나의 요소를 가리킵니다. 이 둘은 완전히 다른 선택자이므로, 선택자 안의 공백을 함부로 지우면 스타일이 적용되는 대상이 바뀝니다.

:hover 같은 의사 클래스나 @media·@keyframes 중첩 규칙이 압축 과정에서 깨지지 않는 이유도 같은 맥락입니다. 공백을 문자 단위로 훑어 지우는 방식이 아니라, 선택자와 속성·값을 구조적으로 나눠 인식한 뒤 각 부분에 맞는 규칙을 적용하기 때문입니다. 그래야 :hover 앞의 콜론이나 @media 조건 안의 공백을 실수로 건드리지 않습니다.

이 과정을 CSS 파일 전체에 대해 손으로 하나씩 확인하는 건 시간이 오래 걸리고, 위 예외 중 하나를 놓치기도 쉽습니다. 저희 도구로 확인하기.

직접 해보기 →

압축 시 헷갈리기 쉬운 것들

압축 결과를 보다가 흔히 헷갈리는 지점들을 정리하면 다음과 같습니다.

정렬(Beautify) 모드는 압축과 반대 방향입니다. 들여쓰기와 줄바꿈을 새로 넣어 규칙마다 보기 좋게 펼치는 것이므로, 결과 파일의 용량은 오히려 원본보다 커집니다. 그래서 절감률(%)은 압축 모드에서만 표시됩니다.

입력·출력 용량은 텍스트를 그대로 담은 데이터의 바이트 크기로 측정됩니다. 여러 바이트를 차지하는 한글 주석이 많이 포함된 CSS일수록, 같은 글자 수를 지워도 줄어드는 바이트 수는 더 커질 수 있습니다.

정리

• 압축은 CSS의 문법적 의미를 바꾸지 않고 주석과 불필요한 공백·줄바꿈, 블록 마지막 세미콜론만 지웁니다.
• 문자열 안 공백, calc() 연산자 앞뒤 공백, 선택자의 자손 결합자 공백은 지워지지 않고 그대로 남습니다.
• :hover, @media, @keyframes 같은 구조가 깨지지 않는 이유는 선택자·속성·값을 구조적으로 나눠 인식하기 때문입니다.
• 절감률(%)은 (1 - 압축 후 바이트 / 원본 바이트) × 100 으로 계산되며, 압축 모드에서만 표시됩니다.
• 정렬(Beautify)은 압축과 반대로 들여쓰기를 넣어 가독성을 높이는 모드입니다.

자주 묻는 질문

CSS를 압축하면 정확히 무엇이 사라지나요?

주석과, 규칙·선언 사이의 불필요한 줄바꿈·들여쓰기·연속 공백, 그리고 블록 마지막 선언 뒤의 세미콜론이 사라집니다. 반면 문자열 리터럴 안의 공백과 calc() 연산자 앞뒤 공백, 선택자 안에서 뜻을 가지는 공백은 그대로 남습니다.

:hover나 @media 같은 규칙도 압축하면 깨지나요?

깨지지 않습니다. 압축 과정은 CSS를 문자 그대로 훑어 공백만 지우는 방식이 아니라, 선택자·속성·값·중첩 규칙을 구조적으로 나눠 인식한 뒤 각 부분에 맞는 규칙을 적용합니다. @media·@supports·@keyframes 같은 중첩 블록과 @import·@charset 같은 한 줄 규칙도 이 구조를 따라 처리됩니다.

화면에 뜨는 절감률(%)은 어떻게 계산되나요?

입력한 원본 CSS와 압축된 결과 CSS 각각의 바이트 크기를 측정한 뒤, (1 - 압축 후 바이트 / 원본 바이트) × 100 을 계산해 반올림한 값입니다. 원본이 이미 압축에 가까운 형태였다면 절감률은 낮게, 주석과 공백이 많던 파일이라면 절감률은 높게 나옵니다.

어떤 CSS든 완벽하게 처리되나요?

기본적인 CSS 문법은 대부분 안전하게 처리되지만, 아주 특수하거나 비표준적인 문법에서는 결과가 예상과 다를 수 있습니다. 중요한 파일이라면 압축 후 실제 페이지에 적용해 스타일이 원본과 같은지 확인해보는 것이 안전합니다.