📦 HTML / CSS / JavaScript 압축
HTML, CSS, JavaScript를 압축 또는 정렬. 주석 제거, 공백 압축, 크기 절약 표시.
완전 무료
가입 불필요
브라우저 완결
5 개 언어
다크 모드
📖 자주 걸리는 지점
HTML / CSS / JavaScript 의 공백과 주석을 지워 줄입니다(반대로 정형도 가능합니다). 모두 브라우저 안에서 처리합니다. 운영 빌드 파이프라인의 대체는 되지 않습니다 — 여기서 하는 것은 어휘 수준의 압축뿐이며 terser 나 esbuild 가 하는 변수명 축약, 데드 코드 제거, 트리 셰이킹은 포함되지 않습니다. 손안의 스니펫을 한 번 줄이고 싶다, 반대로 읽을 수 있는 형태로 되돌리고 싶다는 용도용입니다.
| 사례 | 무슨 일이 일어나는가 | 어떻게 하면 되는가 |
|---|---|---|
| 자바스크립트가 깨진다 | 원인은 대부분 세미콜론 생략입니다. 줄바꿈으로 문이 구분되던 코드에서 줄바꿈을 없애면 다음 줄과 한 문으로 이어집니다. 자바스크립트의 자동 세미콜론 삽입은 줄바꿈 위치에 의존하므로 줄바꿈을 지우는 순간 의미가 달라집니다. return 직후에 줄을 바꾸던 코드는 반대로 줄바꿈을 남기면 깨집니다. |
줄이기 전에 Prettier 등으로 정형해 세미콜론을 보충한 뒤 통과시키세요. 줄인 결과는 반드시 실행해 확인합니다. 미니파이된 코드에서 예외가 나면 Source Map 이 없으면 스택 트레이스를 읽을 수 없습니다. 운영에 내보낼 코드는 이 자리가 아니라 빌드 시에 Source Map 과 함께 생성하세요. |
| HTML 을 줄였더니 표시가 붙는다 | HTML 의 공백은 의미를 갖는 경우가 있습니다. <span>A</span> <span>B</span> 사이의 공백 하나는 렌더링 시 단어 사이로 표시됩니다. 이곳을 지우면 AB 가 됩니다. inline-block 을 가로로 늘어놓은 레이아웃에서도 이 공백이 의도적으로 작용하는 경우가 있습니다. |
태그 사이의 공백은 블록 요소 사이만 지우고 인라인 요소 사이는 남기는 것이 원칙입니다. <pre> 와 <textarea> 의 내용은 절대 건드리면 안 됩니다(줄바꿈과 들여쓰기가 그대로 표시되는 요소입니다). 판단이 번거롭다면 HTML 압축은 포기하고 gzip / Brotli 에 맡기는 것이 현실적입니다. 전송량 절감 효과는 그쪽이 훨씬 크고 위험은 없습니다. |
| CSS 를 줄였더니 일부 스타일이 안 먹는다 | 오래된 브라우저용 핵이 사라지는 것이 전형적입니다. *zoom 이나 _height, !ie, /*\*/ 같은 표기는 의도적인 구문 오류로 특정 브라우저에만 읽히게 하는 장치이므로 올바르게 처리되면 사라집니다. 또 content: "\f101" 같은 아이콘 폰트 이스케이프나 @media 안의 공백도 구현에 따라 깨집니다. |
줄인 CSS 를 운영에 내보내기 전에 반드시 실화면에서 한 번 확인하세요. IE 용 핵이 남아 있다면 이미 불필요할 가능성이 높으므로 이 기회에 삭제해 버리는 편이 건전합니다. 장기적으로는 PostCSS + cssnano 를 빌드에 넣는 편이 안전하고 벤더 프리픽스 부여나 중복 규칙 통합까지 돌봐 줍니다. |
미니파이의 효과를 과대평가하지 마세요. 텍스트는 어차피 gzip 이나 Brotli 로 압축되어 전송됩니다. 공백을 지워 30% 줄어든 것처럼 보여도 압축 후의 차이는 몇 퍼센트로 줄어드는 것이 보통입니다(압축 알고리즘은 반복 패턴에 강하고 연속된 공백은 바로 그 특기 분야이기 때문입니다). 표시 속도에 효과가 있는 것은 읽어들이는 파일의 수, 이미지 용량, 렌더링을 막는 리소스의 유무 쪽이 자릿수가 다르게 큰 요인입니다.
📖 사용법
-
1
언어와 동작 선택자동 감지 또는 HTML/CSS/JavaScript를 선택하고 압축 또는 정렬을 선택하세요.
-
2
코드 입력왼쪽 입력란에 코드를 붙여넣으세요. 샘플 버튼으로 예시를 확인할 수 있습니다.
-
3
크기 절약 확인 및 복사변환 결과와 크기 절약이 표시됩니다. 복사 버튼으로 결과를 클립보드에 복사하세요.
❓ 자주 묻는 질문
압축으로 코드 동작이 바뀌나요?
올바르게 수행하면 동작이 바뀌지 않습니다. 이 도구는 주석 제거와 공백 압축만 합니다. 변수 이름 단축은 하지 않습니다.
CSS calc()와 var()은 올바르게 처리되나요?
네. CSS 압축기는 속성 값 내의 공백을 안전하게 압축합니다.
정렬 시 들여쓰기 크기를 변경할 수 있나요?
네. 들여쓰기 옵션에서 2칸, 4칸 또는 탭을 선택할 수 있습니다.
🐛 이 도구에서 문제가 발생했나요?
무료 · 가입 불필요. 재현 절차만이라도 도움이 됩니다. 보고는 운영자에게 직접 전달되어 개선에 사용됩니다.
✅
보고 감사합니다!
운영자에게 전달되었습니다. 개선에 사용됩니다.