CSS 압축기

CSS 압축기는 CSS에서 불필요한 문자를 제거하고, 압축 전후의 문자 수와 함께 압축된 스타일시트를 반환하는 무료 도구입니다.

CSS를 압축하면 무엇이 달라지나요?

CSS 압축은 브라우저에 필요하지 않은 서식을 제거해 스타일시트의 문자 수를 줄입니다. 일반적으로 들여쓰기, 줄바꿈, 주석, 문장 부호 주변의 생략 가능한 공백이 제거됩니다.

브라우저에는 CSS 규칙, 선택자, 선언 값이 그대로 전달됩니다. 의도한 시각적 결과는 달라지지 않아야 하며, 브라우저로 전송되는 파일은 더 작아집니다. CSS 스타일시트를 압축했을 때 얻는 실질적인 효과는 원본 파일, HTTP 압축, 브라우저 캐싱에 따라 달라집니다. 이미 잘 압축된 스타일시트라면 실제 전송 바이트는 조금만 줄어들 수 있습니다.

배포 전 CSS를 정리하거나, 지나치게 큰 서드파티 CSS를 살펴보거나, 개발용 서식이 파일 크기에 얼마나 영향을 주는지 확인할 때 유용합니다. 다만 사용하지 않는 선택자를 제거하거나, 같은 규칙을 합치거나, 선언을 다시 작성하는 최적화와는 다릅니다. 이 도구는 그러한 광범위한 최적화 작업을 수행하지 않습니다.

CSS 압축기는 어떻게 사용하나요?

스타일시트를 CSS 입력란에 붙여넣고 도구를 실행하세요. 그런 다음 압축된 CSS 결과를 해당 빌드 또는 배포 작업에 복사하면 됩니다. 읽기 쉬운 원본 CSS 파일은 보관하고, 압축본으로 영구 교체하지 마세요.

1. 사이트나 애플리케이션에서 사용하는 원본 CSS를 준비하세요.
2. 압축하기 전에 CSS가 올바르게 파싱되는지 확인하세요.
3. CSS 입력란에 붙여넣고 도구를 실행하세요.
4. CSS 문자 수와 압축된 CSS 문자 수를 비교하세요.
5. 반응형 상태, 인쇄 스타일, 대화형 구성 요소를 포함해 스테이징 페이지에서 결과를 테스트하세요.

CSS 압축은 서버에서 처리됩니다. 제출한 CSS는 HTTPS를 통해 서버로 전송되며 저장되지 않습니다. 스타일시트에 기밀 URL, 내부 호스트 이름 또는 그 밖의 민감한 정보가 들어 있다면 서버에서 처리하는 도구로 전송하는 것이 조직의 정보 취급 정책에 맞는지 검토하세요.

결과는 어떻게 확인하나요?

결과에는 변환된 CSS와 두 가지 문자 수가 표시되므로 출력 내용을 살펴보고 얼마나 줄었는지 바로 확인할 수 있습니다. CSS 문자 수는 제출한 텍스트의 길이이고, 압축된 CSS 문자 수는 압축 후의 길이입니다.

문자 수는 멀티바이트 문자를 인식하는 길이 함수로 계산됩니다. 따라서 네트워크에서 실제로 전송되는 크기를 정확히 예측하는 값으로 봐서는 안 됩니다. UTF-8 문자는 1바이트보다 클 수 있으며, Brotli 또는 gzip 압축을 적용하면 HTTP로 전송되는 크기가 크게 달라질 수 있습니다.

이 도구에는 별도의 유효성 검사 결과나 오류 입력란이 표시되지 않습니다. 따라서 CSS 검사기로 사용해서는 안 됩니다. 짝이 맞지 않는 중괄호, 누락된 콜론, 닫히지 않은 문자열, 잘못된 주석, 유효하지 않은 중첩 같은 일반적인 문제는 브라우저 개발자 도구, 린터 또는 표준을 지원하는 검사기로 확인해야 합니다. 유효하지 않은 CSS도 겉보기에는 깔끔하게 압축될 수 있지만 의도대로 작동하지 않을 수 있습니다.

간단한 CSS 압축 예시

일반적인 CSS 압축은 규칙 자체를 유지하면서 서식만 제거합니다.

CSS

p { color: red; }

압축된 CSS

p{color:red}

이 예시에서 읽기 쉬운 입력은 17자이고 압축된 형태는 12자입니다. 따옴표로 묶인 문자열 안의 공백과 문장 부호는 값의 일부이므로 그대로 유지해야 합니다.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

압축된 CSS

.notice,.warning{color:#c00;margin:0 1rem}

모든 공백을 무조건 삭제하면 안전하지 않습니다. 공백은 하위 선택자 결합자를 나타낼 수 있으며, calc() 같은 함수의 산술 연산자는 문법상 공백이 필요합니다. 문자열, 데이터 URL, 이스케이프된 식별자, 사용자 지정 속성 값도 구문을 고려해 처리해야 합니다.

악센트가 있는 문자와 비라틴 문자도 문자열에 포함될 수 있으며, CSS 식별자 규칙을 충족하면 선택자에도 사용할 수 있습니다. 숫자, 소수점, 백분율, 단위는 장식용 텍스트가 아니라 구문의 일부이므로 선언의 의미를 이해하지 않고 단순히 줄여서는 안 됩니다. 빈 스타일시트에는 압축할 CSS가 없습니다. 스타일시트가 매우 크다면 온라인 입력란에 복사하는 방식보다 빌드 과정에서 압축기를 사용하는 편이 일반적으로 반복 실행과 감사에 더 편리합니다.

CSS 압축이 불필요한 경우는 언제인가요?

파일이 이미 압축되어 있거나 간결한 프로덕션용 자산으로 생성됐다면 대개 다시 압축할 필요가 없습니다. CSS를 두 번째로 압축해도 거의 또는 전혀 줄어들지 않을 수 있으며, 릴리스 과정에 변환 단계만 하나 더 추가됩니다.

• 브라우저나 빌드 시스템만 읽을 CSS라면 보기 좋게 다시 정리한 뒤 재압축하지 마세요.
• 사용하지 않는 프레임워크 규칙이나 중복 선언을 제거하는 작업을 압축으로 대신하지 마세요.
• 문자 수 감소만으로 렌더링 차단 요청, 캐시 문제, 느린 글꼴 로딩을 찾아낼 수 있다고 기대하지 마세요.
• 특히 선택자 우선순위, 캐스케이드 레이어, 미디어 쿼리를 디버깅해야 한다면 서식이 유지된 원본을 버리지 마세요.

CSS를 자동으로 번들링한다면 모든 릴리스에 같은 설정이 적용되도록 해당 파이프라인에서 압축기를 사용하세요. 관련 자산을 수동으로 배포할 때는 HTML 미니파이어와 JS 압축기를 사용해 각 파일 형식에 동일한 작업을 적용할 수 있습니다.

자주 묻는 질문

CSS를 압축하면 선택자 우선순위가 바뀌나요?

올바르게 압축하면 선택자의 구성 요소와 순서가 그대로 유지되므로 선택자 우선순위는 바뀌지 않습니다. 다만 원본에 이스케이프, 최신 의사 클래스 또는 오래된 압축기가 이해하지 못할 수 있는 자동 생성 구문이 있다면 복잡한 선택자를 주의 깊게 비교하세요.

CSS 사용자 지정 속성도 압축할 수 있나요?

사용자 지정 속성도 압축할 수 있지만, 나중에 var()로 치환할 때 필요한 토큰과 공백이 값에 유지될 수 있습니다. 눈에 보이는 모든 공백을 생략할 수 있다고 가정하지 말고, 계산식, 대체 값 또는 삽입된 문자열이 포함된 선언을 프로젝트에서 지원하는 브라우저로 테스트하세요.

이 도구는 소스 맵도 생성하나요?

소스 맵 결과는 제공되지 않습니다. 프로덕션 환경에서 압축된 CSS를 Sass, Less 또는 다른 원본에 대응시켜 디버깅해야 한다면 원래 파일 구조를 알고 있는 컴파일러나 번들러에서 압축 파일과 소스 맵을 함께 생성하세요.

라이선스 주석도 결과에 남나요?

CSS 주석이 유지된다고 가정하지 마세요. 종속성 라이선스에 따라 배포 코드에 고지문을 포함해야 한다면 고지문을 별도로 보관하거나 릴리스 전에 생성된 결과를 확인하세요.

압축하면 잘못된 CSS도 고칠 수 있나요?

아니요. 압축은 불필요한 문자를 제거할 뿐, 유효하지 않은 선택자, 지원되지 않는 속성, 누락된 자산 또는 잘못된 캐스케이드를 고치지 않습니다. 먼저 원본에서 파싱 경고와 시각적 문제를 해결하세요.

배포 전 확인 사항

압축 결과를 별도의 프로덕션용 자산으로 저장하고 URL과 따옴표로 묶인 내용이 그대로인지 확인하세요. 브라우저 콘솔을 연 상태로 스테이징 페이지에서 불러오세요. 좁고 넓은 뷰포트 크기에서 대표 페이지를 비교한 다음, 서버가 예상한 콘텐츠 유형, 캐싱 정책, HTTP 압축을 적용하는지 확인하세요.