CSS 입력
축소된 출력
복사됨!
CSS 압축기 (Minifier)
CSS 붙여넣고 한 번 누르면 주석·공백이 사라진 압축본이 나와요. 절약률도 같이 표시.
쓰는 법
- 왼쪽 패널에 CSS 붙여넣기.
- 'CSS 압축' 버튼 클릭.
- 오른쪽에 압축된 결과가 뜨고, 아래에 원본 크기 / 압축 후 크기 / 절약률이 표시돼요.
- '결과 복사' 누르면 클립보드로 바로 들어갑니다.
예시
입력:
/* 메인 컬러 */
.button {
background: #3b82f6;
padding: 12px 24px;
}
출력 (32% 절약):
.button{background:#3b82f6;padding:12px 24px}CSS 용량 줄여서 페이지 속도 높이기
개발 단계에선 주석도 넣고 들여쓰기도 깔끔하게 하는데, 실서비스 올라갈 땐 그게 전부 다운로드 용량이에요. 주석, 공백, 줄바꿈, 마지막 세미콜론 같은 브라우저가 안 읽어도 되는 문자를 싹 빼버리면 20~40% 정도 줄어들고, 그만큼 페이지 로딩이 빨라져서 Core Web Vitals 점수도 좋아집니다.
모든 처리는 브라우저에서 돌아가니까 사내 CSS 붙여넣어도 서버로 안 나가요.
여기 쓰면 편한 점
- 파일 용량이 줄어서 페이지 첫 로딩이 빨라져요. LCP, FCP 지표 개선에 직접 영향 있어요.
- 원본/압축 크기, 절약 비율이 숫자로 나와서 '진짜 줄었네' 확인 가능.
- 주석(
/* ... */)은 전부 제거돼서 개발용 메모가 프로덕션에 실수로 안 나가요. - 원클릭 복사로 바로 배포 파일에 붙여 넣을 수 있어요.
- CSS는 브라우저 밖으로 안 나갑니다. 서버 전송 없음.
다른 Minifier랑 비교
| 항목 | 사장나라 | cssnano | cssminifier.com |
|---|---|---|---|
| 동작 방식 | 브라우저 | Node.js CLI | 서버 측 |
| 설치 | 없음 | npm 설치 필요 | 없음 |
| 크기 비교 표시 | 있음 | CLI 출력 | 있음 |
| 광고 | 거의 없음 | 해당 없음 | 많음 |
자주 묻는 질문
압축하면 CSS가 깨지지 않나요?
화면에 영향 주는 문자는 안 건드려요. 주석, 불필요한 공백, 줄바꿈, 닫는 괄호 바로 앞 세미콜론처럼 브라우저가 어차피 무시하는 것만 제거합니다. 렌더링 결과는 그대로예요.
얼마나 줄어들어요?
원본 스타일에 따라 보통 15~40% 정도 줄어듭니다. 주석이랑 들여쓰기 많은 코드는 40% 이상도 나오고, 이미 한번 압축된 CSS는 5% 정도밖에 안 줄 수 있어요.
CSS 변수(--var)는 잘 처리되나요?
네, --primary-color나 var(--primary-color) 같은 커스텀 속성은 그대로 유지되고, 주변 공백만 제거됩니다.
SCSS나 LESS도 압축되나요?
표준 CSS 기준으로 만들어진 도구예요. SCSS, LESS는 먼저 CSS로 컴파일한 다음 여기 넣으시는 게 맞습니다. 프리프로세서 문법은 부분적으로만 처리되거든요.
CSS가 서버로 올라가요?
아니요. 전부 브라우저 안에서 JavaScript로 처리됩니다. 사내 스타일시트 붙여넣으셔도 외부로 안 나가요.