13 / css-minifier
무료 온라인 도구
CSS 미니파이어
공백과 주석을 제거하여 CSS 파일 크기를 줄입니다.
압축된 CSS가 여기에 표시됩니다...
사용 방법
- 01
입력 패널에 CSS 코드를 붙여넣습니다.
- 02
'압축' 버튼을 클릭하여 공백, 주석, 불필요한 문자를 제거합니다.
- 03
압축된 CSS를 복사합니다.
소개
이 도구는 무엇인가요?
CSS 압축(미니파이케이션)은 CSS 소스 코드에서 불필요한 문자(공백, 주석, 불필요한 세미콜론)를 기능에 영향 없이 제거합니다. 더 작은 CSS 파일은 더 빠르게 로드되어 페이지 로딩 속도와 Core Web Vitals 점수를 향상시킵니다.
이 도구를 사용하는 이유
- -CSS 파일 크기를 최대 30~50% 줄여 페이지 로딩 속도 향상.
- -Lighthouse 성능 점수 개선.
- -빌드 도구 없이 즉각적인 브라우저 기반 압축.
- -코드가 브라우저를 벗어나지 않음.
주요 기능
- -주석 및 공백 제거.
- -모든 CSS 기능 유지.
- -원본 대비 압축 크기 비교 표시.
- -원클릭으로 압축된 출력 복사.
비교
CSS 압축: 전 vs 후
| 파일 유형 | 일반적인 크기 | 압축 후 | 절감 |
|---|---|---|---|
| 소규모 사이트 CSS | 15 KB | 9 KB | ~40% |
| 중간 규모 프레임워크 CSS | 80 KB | 52 KB | ~35% |
| 대용량 유틸리티 CSS(Tailwind) | 350 KB | 18 KB (퍼지 + 압축) | ~95% |
| 단일 컴포넌트 | 2 KB | 1.2 KB | ~40% |
모든 처리는 JavaScript를 사용하여 브라우저 내에서 완전히 실행됩니다. 파일, 텍스트, 데이터는 절대 서버로 전송되지 않습니다. 귀하의 데이터는 기기 내에만 존재합니다.
✦ 드래곤테일의 팁
Dragontail 사이트를 런칭할 때 처음 몇 번의 배포는 이런 도구로 CSS를 수동으로 압축했습니다. 그 습관 덕분에 처음부터 더 깔끔한 CSS를 작성하게 됐습니다. 불필요한 규칙이 줄고, 속성 이름만 반복하는 주석도 줄었습니다. 지금은 빌드 파이프라인이 자동으로 처리하지만, 빠른 실험이나 독립 파일 확인에는 여전히 브라우저 기반 미니파이어를 씁니다.
자주 묻는 질문
압축이 CSS를 망가뜨리나요?
아니요. 압축은 기능적이지 않은 문자만 제거합니다. CSS는 완전히 유효하고 정상 동작합니다.
개발 중에도 CSS를 압축해야 하나요?
아니요. 개발 시에는 읽기 쉬운 CSS를 유지하고, 프로덕션 빌드 과정에서 압축하세요.
코드가 서버로 전송되나요?
아니요. 모든 처리는 브라우저 내에서 로컬로 이루어집니다.