본문 바로가기

코드 압축 · Minify (HTML·CSS·JS·JSON 용량 줄이기)

HTML·CSS·JS·JSON 의 주석과 불필요한 공백을 없애 용량을 줄입니다. 붙여넣거나 파일을 열고(끌어다 놓기 가능), 결과를 복사하거나 .min 파일로 내려받습니다. 코드는 서버로 보내지 않습니다.

붙여넣거나 연 코드·파일은 이 브라우저 안에서만 처리되며 서버로 전송되거나 저장되지 않습니다. 키·비밀번호가 섞인 코드도 안심하고 쓰되, 공용 컴퓨터에서는 쓴 뒤 화면을 닫으세요.

이 도구는 주석과 공백만 줄입니다. 변수 이름을 바꾸거나 코드를 다시 짜지 않으므로 전문 도구(terser, esbuild 등)보다 덜 줄어들지만 코드의 동작은 바꾸지 않습니다. 배포할 코드는 압축 후 한 번 더 동작을 확인하세요.

압축 방식

  • HTML·CSS·JS·JSON 모두 이 사이트가 직접 만든 압축기입니다. 문자열·정규식·템플릿 리터럴·url() 안은 바꾸지 않고, 주석과 토큰 사이의 공백만 줄입니다.
  • JS 는 줄바꿈이 낀 공백을 줄바꿈 하나로 남깁니다. 자동 세미콜론 삽입(ASI)이 줄바꿈에 기대기 때문에, 줄바꿈을 없애면 코드의 뜻이 달라질 수 있어서입니다.
  • HTML 은 블록 태그 사이의 공백만 지우고, 인라인 요소 사이의 한 칸은 남겨 글이 붙지 않게 합니다. <pre>·<textarea> 안은 그대로 두고, <script>·<style> 안은 JS·CSS 압축을 거칩니다.
  • JSON 은 문자열 밖의 공백만 지웁니다. 파싱했다 다시 쓰지 않으므로 큰 정수·1.0·유니코드 이스케이프가 바뀌지 않습니다.
  • 파일을 열면 확장자(.html .css .js .json)로 언어를 고르고, 내려받을 때는 app.js → app.min.js 처럼 .min 을 붙입니다.

자주 묻는 질문

코드나 파일이 서버로 올라가나요?

아닙니다. 파일은 브라우저에서 읽기만 하고 모든 압축이 이 탭 안에서 이뤄집니다.

압축했더니 동작이 달라졌어요.

주석과 공백만 줄이는 것이 원칙이지만 아주 드문 문법(정규식 판별이 모호한 코드 등)에서 틀릴 수 있습니다. 문제가 되는 코드를 알려 주세요. 그동안은 원본을 보관하고 결과를 확인하세요.

변수 이름은 왜 줄이지 않나요?

이름을 바꾸려면 코드를 완전히 해석해야 하고, 잘못 바꾸면 조용히 동작이 달라집니다. 이 도구는 안전을 우선해 공백과 주석만 다룹니다. 더 줄이려면 서버에서 gzip 을 켜거나 빌드 도구(terser, esbuild)를 쓰세요.

.min 파일과 원본은 어떻게 관리하나요?

원본을 따로 보관하고 .min 파일만 배포하세요. 압축본은 사람이 읽고 고치기 어렵습니다.