CSS 압축은 브라우저가 파일을 해석하는 방식을 전혀 바꾸지 않은 채 파일 크기만 줄이는 작업입니다. 실제로 적용되는 스타일은 완전히 동일하게 유지되고, 사라지는 것은 오직 사람이 코드를 읽기 위해서만 존재했던 부분뿐입니다.
실제로 제거되는 것
압축 도구는 규칙 사이의 공백과 줄바꿈, /* ... */ 형식의 주석, 블록을 닫는 중괄호 직전의 마지막 세미콜론을 제거하고 0.5em → .5em처럼 값에 붙은 불필요한 0을 줄입니다. 이 과정 어디에도 실제 문자 내용 자체는 손대지 않습니다 — 오직 그 주위의 공백과 구두점만 다룹니다.
한글 CSS와 인코딩, @charset
content: "→" 같은 값이나 한글이 포함된 주석은 압축 과정을 거쳐도 문자 자체는 전혀 바뀌지 않습니다. 압축 도구는 공백과 주석, 구문만 다룰 뿐 텍스트의 바이트 인코딩에는 관여하지 않기 때문입니다. 주의할 부분은 여러 CSS 파일을 하나로 합치는 오래된 도구나 빌드 파이프라인이 UTF-8이 아닌 인코딩을 암묵적으로 가정하는 경우입니다. 한글이 포함된 CSS 파일은 UTF-8로 저장하고, 파일 맨 첫 줄에 주석보다도 먼저 @charset "UTF-8";을 명시적으로 선언해두는 것이 가장 안전합니다.
압축된 파일이 동일하게 동작하는 이유
브라우저의 CSS 파서는 토큰 사이의 공백과 줄바꿈을 완전히 무시합니다 — 이는 오직 사람이 코드를 읽기 편하게 하기 위해 존재할 뿐입니다. 따라서 이를 제거해도 계산된 스타일은 전혀 달라지지 않고, 파일만 더 간결해질 뿐입니다.
왜 필요한가
- 사이트를 프로덕션에 배포하기 전 CSS 파일 크기를 줄인다.
- 전송되는 데이터 양을 줄여 페이지 로딩 속도를 높인다.
- 소스 코드를 대충 살펴보는 것만으로 스타일 구조를 파악하기 어렵게 만든다.
초고속 인터넷 환경에서 압축이 의미 있는 이유
한국은 세계적으로도 손꼽히는 초고속 유선·무선 인터넷 환경을 갖추고 있어, CSS 파일에서 몇 킬로바이트를 줄인다고 해도 개별 사용자가 체감하는 로딩 속도 차이는 크지 않은 경우가 많습니다. 그럼에도 압축은 여전히 의미가 있는데, 트래픽이 많은 사이트에서는 요청 하나당 전송량이 줄어드는 것이 서버와 CDN의 대역폭 비용 절감으로 직접 이어지기 때문입니다. 사용자 체감 속도보다는 운영 비용 관점에서 효과가 나타나는 최적화라고 보면 이해하기 쉽습니다.