CSS 압축기 & 포맷터

이 도구는 무엇인가요?

CSS 압축기는 렌더링 결과는 그대로 유지하면서 스타일시트를 최대한 작게 다시 씁니다. 주석과 공백을 제거하고, 안전한 범위 내에서 색상 값과 0 단위를 줄이며, 중복된 규칙을 병합하고, 불필요한 세미콜론을 없앱니다.

이 도구는 정규식 대신 실제로 스타일시트를 AST로 파싱하는 CSS 최적화 엔진인 clean-css를 기반으로 합니다. 그래서 단순한 압축기들이 자주 망가뜨리는 까다로운 케이스, 즉 CSS 커스텀 속성(--main-color: ...), 문자열 안의 내용, 복잡한 셀렉터와 미디어 쿼리를 모두 안전하게 처리할 수 있습니다.

왜 사용해야 할까요?

• 정규식이 아닌 AST 기반 압축(clean-css)이라 커스텀 속성, 문자열, 중첩된 미디어 쿼리에서도 안전합니다.
• 레벨 2 최적화가 규칙을 병합·단순화해 단순 공백 제거보다 더 큰 용량 절감 효과를 줍니다.
• 몇 바이트를 얼마나 절약했는지 정확한 수치와 퍼센트로 확인할 수 있습니다.
• 포맷 모드는 압축된 스타일시트를 일관된 들여쓰기의 읽기 쉬운 CSS로 되돌립니다.
• 100% 로컬 처리라서 아직 공개하지 않은 스타일이 브라우저 밖으로 나가지 않습니다.

사용 방법

1. 입력창에 CSS를 붙여넣거나, "예제 불러오기"를 눌러 커스텀 속성과 미디어 쿼리가 포함된 샘플을 확인해보세요.
2. "압축"을 클릭해 용량을 줄이거나, "포맷"을 클릭해 2칸 들여쓰기로 보기 좋게 정리하세요.
3. 박스 아래 메시지를 확인하세요. 압축 모드에서는 줄어든 용량이 표시되고, 잘못된 CSS라면 깨진 결과물 대신 명확한 오류 메시지가 뜹니다.
4. "복사" 버튼을 눌러 결과물을 가져가세요.

예시

입력

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

결과

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

커스텀 속성, 미디어 쿼리, 캐스케이드 순서는 모두 그대로 유지되고 공백, 주석, 불필요한 문자만 제거됩니다.

실무 팁

• 압축은 개발 중이 아니라 빌드·배포 시점에 하세요. 읽기 쉬운 원본을 계속 수정하고, 배포용 버전은 이 도구나 빌드 파이프라인이 만들도록 두는 게 좋습니다.
• 프로덕션에서 페이지 모양이 달라 보이는 원인을 찾고 있다면, 먼저 압축된 CSS를 포맷 모드로 되돌리면 원본과의 차이를 훨씬 쉽게 비교할 수 있습니다.
• 커스텀 속성은 압축 과정에서 그대로 살아남기 때문에 --spacing, --color-* 같은 디자인 토큰 기반 스타일시트도 안심하고 이 도구에 돌릴 수 있습니다.
• 배포 전에 파일을 각각 관리하는 프로젝트라면 아래의 HTML, JS 압축기와 함께 사용해보세요.

실제 작업 흐름에서의 쓰임새

스타일시트는 기본적으로 렌더링을 막는(render-blocking) 리소스이기 때문에 CSS 압축은 투자 대비 효과가 큰 편입니다. 스타일시트에서 줄이는 한 바이트 한 바이트가 특히 느린 네트워크 환경에서 첫 화면 표시 속도를 조금씩 앞당겨줍니다. 이미지 최적화만큼 큰 효과는 아니지만, 빌드 단계에 한번 연결해두면 사실상 공짜로 얻는 이득입니다.

반대로 포맷 방향은 다른 상황에서 유용합니다. 경쟁사나 레거시 프로덕션 사이트가 압축된 형태로 배포한 스타일시트를 뜯어보면서, 오버라이드나 리디자인을 하기 전에 구조를 파악할 때 씁니다.

→ HTML 압축기 · JS 압축기

이럴 때 사용하세요

• 정적 사이트나 랜딩 페이지를 배포하기 전에 스타일시트 용량 줄이기.
• 실제 서비스 중인 사이트에서 가져온 압축 CSS 파일을 다시 포맷해서 구조 살펴보기.
• 디자인 툴에서 내보낸, 주석과 공백이 과도하게 많은 CSS 정리하기.
• 직접 작성한 CSS 조각이 문법적으로 문제없이 파싱되는지 빠르게 확인하기 — 잘못된 CSS는 명확한 오류로 바로 드러납니다.

자주 묻는 질문