CSS & JavaScript 압축기
CSS와 JavaScript 코드 압축
최종 수정:
도구 소개
CSS / JavaScript 미니파이어는 주석, 공백, 불필요한 토큰을 제거해 프로덕션용으로 소스 파일 크기를 줄여줍니다. 번들이 작을수록 전송과 파싱이 빠르고 CDN 비용도 줄어듭니다. 현대 빌드 파이프라인이 자동으로 처리하지만 인라인 스니펫, 이메일용 스타일, 번들러를 거치지 않는 작은 스크립트에는 빠른 웹 미니파이어가 유용합니다.
사용 방법
- 상단에서 CSS 또는 JavaScript 모드를 선택합니다.
- 입력 패널에 소스 코드를 붙여넣습니다.
- Minify 버튼을 누르면 절감 바이트/퍼센트와 함께 결과가 표시됩니다.
- 미니파이된 결과를 복사해 <style> 또는 <script> 태그에 삽입합니다.
- 원본 소스는 편집용으로 유지하고 미니파이 버전만 배포합니다.
주요 사용 사례
- First Contentful Paint 단축을 위한 <head> 인라인 크리티컬 CSS
- Google Tag Manager 커스텀 HTML 스니펫을 용량 한도에 맞추기
- 북마클릿에 삽입할 한 줄짜리 JS 압축
- 바이트 단위가 중요한 이메일용 CSS 축소
- 번들러 없이 정적 호스트에 배포할 vanilla JS 파일 축소
- 빌드에 추가하기 전 스니펫의 번들 크기 영향 추정
자주 묻는 질문
Q. 프로덕션 JavaScript에 그대로 써도 되나요?
A. 아주 단순한 스크립트라면 가능합니다. 실제 애플리케이션은 esbuild, terser, swc 같은 검증된 미니파이어를 빌드 파이프라인에 넣어 소스맵과 ECMAScript 엣지 케이스까지 처리하세요.
Q. 미니파이 결과가 CSS를 깨뜨립니다.
A. 대개 원본의 세미콜론 누락이 원인입니다. CSS 미니파이는 입력이 유효하다고 가정합니다 — 원본을 먼저 수정하세요.
Q. 미니파이가 코드 난독화 효과도 있나요?
A. 약간 있지만 식별자는 그대로이고 공백만 제거됩니다. 실제 난독화가 필요하면 전용 도구를 쓰되, 그것이 보안을 보장하지는 않는다는 점을 인지하세요.
Q. HTML도 같은 방식으로 미니파이할 수 있나요?
A. HTML은 별도 규칙이 필요합니다(예: <pre>의 공백 유지, 속성 따옴표 처리). 전용 HTML 미니파이어를 사용하세요.