compress CSS 압축·정리 도구 star

작동 방식

압축(Minify)은 기계 파서에는 필요 없지만 사람이 읽기 위해 존재하는 요소들을 모두 제거해 파일 크기를 줄입니다. 주석, 줄바꿈, 들여쓰기, 그리고 닫는 중괄호 직전의 마지막 세미콜론이 그 대상입니다. 이 중 어느 것도 브라우저가 스타일을 적용하는 방식에는 영향을 주지 않습니다 — 모든 규칙을 한 줄에, 공백 없이 담은 스타일시트는 보기 좋게 정리된 스타일시트와 완전히 동일하게 동작하며 단지 크기가 작고 다운로드가 더 빠를 뿐입니다. 이는 실제 운영 환경에서 중요한데, CSS는 다운로드되고 파싱될 때까지 페이지 렌더링을 막기 때문입니다. 따라서 파일에서 킬로바이트 단위를 줄이는 것만으로도 페이지 로딩 속도가 직접적으로 개선되며, 특히 느린 연결 환경에서 효과가 큽니다.

정리(Beautify)는 그 반대 작업이며 실제로는 훨씬 더 어렵습니다. 압축되었거나 지저분한 CSS를 받아 선언 하나당 한 줄, 규칙 하나당 한 블록, 콜론과 중괄호 주위의 일관된 공백을 적용해 다시 들여쓰기 합니다. 이는 일종의 역공학입니다. 원래의 서식 — 특히 주석 — 은 파일이 압축되는 순간 사라지기 때문입니다. 복원할 수 있는 것은 어떤 선택자가 어떤 선언들과 함께 있는지를 나타내는 구조적 서식뿐이며, 작성자가 원래 사용한 줄바꿈이나 메모는 복원할 수 없습니다. 예를 들어 .btn{color:red;padding:8px}는 .btn { } 안에 color: red;와 padding: 8px;가 각각 자신의 줄에 놓인, 제대로 들여쓰기 된 블록으로 바뀝니다.

알아두어야 할 사항

• 두 방향 모두 동작을 완전히 그대로 유지합니다. 선택자, 속성, 값, 캐스케이드 순서는 전혀 바뀌지 않습니다 — 오직 공백과 주석만 달라지므로 특정성과 상속은 처리 전후 완전히 동일하게 작동합니다.
• 이 도구는 PostCSS 같은 완전한 CSS 파서가 아니라 가벼운 정규식 기반 도구입니다. 표준 CSS는 올바르게 처리하지만, 따옴표 안에 실제 {, }, ; 문자가 그대로 포함된 값(실제로는 드물며, 대부분 자동 생성된 content: 값에서 나타남)은 완벽하게 서식이 적용되지 않을 수 있습니다.
• Sass/Less 문법은 처리되지 않습니다. 중첩, 변수, 믹스인은 그 자체로 유효한 CSS가 아니므로 컴파일되지 않고 대부분 그대로 통과합니다 — 이를 순수 CSS로 먼저 변환하려면 Sass나 Less 자체가 여전히 필요합니다.
• 주석은 압축 시 영구적으로 사라지는 유일한 요소입니다. 주석이 브라우저별 특수 처리나 "이건 지우지 마세요" 같은 경고를 담고 있다면 압축되지 않은 원본을 어딘가에 따로 보관해 두십시오 — 압축된 출력에는 이를 되돌릴 방법이 없습니다.

구체적인 비교: .card { border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }처럼 정리된 규칙은 .card{border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1)}로 압축됩니다 — 눈에 띄게 짧아지며, 수십 개의 규칙과 주석, 중첩된 미디어 쿼리가 포함된 전체 스타일시트에서는 이 절감 효과가 보통 원본 파일 크기의 20%에서 40% 사이에 이릅니다.