개발 도구
자바스크립트 정리·압축
한 줄로 뭉친 JS를 펼치고, 배포용으로 줄입니다. 문법 오류 위치와 gzip 크기까지.
🔒 입력한 내용과 파일은 이 브라우저 안에서만 처리합니다. 서버로 보내지 않습니다.
자바스크립트 정리·압축 사용법
자바스크립트 코드를 두 방향으로 바꿉니다. 정리하기는 한 줄로 뭉쳐 있거나 들여쓰기가 흐트러진 코드를 문장마다 줄을 나눠 펼치고, 압축하기는 공백과 주석을 빼고 함수 안의 변수 이름을 짧게 바꿔 파일을 줄입니다. 남의 사이트에 걸린 min.js가 무슨 일을 하는지 읽어 볼 때, 워드프레스나 쇼핑몰 관리자 화면에 넣을 스크립트를 줄일 때, 코드가 왜 실행되지 않는지 문법 오류 위치를 찾을 때 씁니다.
쓰는 순서
- 입력 칸에 코드를 붙여 넣거나 파일 열기로 js 파일을 불러옵니다.
- 정리하기 또는 압축하기를 누릅니다. 처음 한 번은 엔진을 읽느라 1~2초 걸릴 수 있습니다.
- 결과 위에서 입력 크기, 결과 크기, 변화율, gzip 전송 크기를 확인합니다.
- 빨간 안내가 나오면 줄과 칸을 보고 고칩니다. 오류 위치로 이동을 누르면 입력 칸의 그 글자가 선택됩니다.
- 결과 복사나 파일로 저장으로 가져갑니다.
예시
예시 버튼의 코드(497바이트)를 기본 옵션으로 압축하면 362바이트로 27.2% 줄어들고, gzip 전송 크기는 311바이트로 나옵니다. 함수 안의 total, item 같은 이름은 한 글자로 바뀌지만 바깥에 선언한 cartTotal 과 format 은 그대로입니다. 첫 줄의 /*! 장바구니 합계 v1.0 */ 은 저작권 주석으로 보고 남기고, // 설명 주석은 지웁니다.
문법 검사의 예로 function add(a, b) { return a + ; } 를 넣으면 "1번째 줄 33번째 칸: 이 자리에 올 수 없는 기호 ; 입니다"라고 알려 줍니다. 더하기 뒤에 값이 빠진 자리입니다.
정리 옵션
- 들여쓰기: 2칸, 4칸, 탭.
- 중괄호:
if (a) {처럼 같은 줄에서 열지, 다음 줄에서 따로 열지 고릅니다. 자바스크립트는 같은 줄이 사실상 표준입니다.return다음 줄에 중괄호를 두면 값이 반환되지 않는 문법상 함정도 있습니다. - 한 줄 최대: 정한 길이를 넘는 줄을 연산자나 쉼표 자리에서 나눕니다.
- 이어진 .메서드() 를 줄마다:
a.filter().map().join()을 메서드마다 줄을 나눠 세로로 읽게 합니다. - 문법 검사도 함께: 정리하면서 문법이 맞는지도 확인합니다. 오류가 있어도 정리된 결과는 보여 줍니다.
압축 옵션
| 옵션 | 하는 일 | 끄는 경우 |
|---|---|---|
| 변수 이름 줄이기 | 함수 안의 변수와 매개변수 이름을 한두 글자로 바꿉니다. | 오류가 났을 때 이름을 보고 추적해야 하는 코드 |
| 쓰지 않는 코드 정리 | 실행되지 않는 분기, 쓰지 않는 지역 변수를 빼고 1 + 2 같은 계산을 미리 해 둡니다. if 를 삼항 연산자로 바꾸는 식으로 문장도 줄입니다. | 결과를 원본과 줄 단위로 비교하고 싶을 때 |
| console 호출 지우기 | console.log 등 console 로 시작하는 호출을 뺍니다. | 운영 중에도 기록을 남겨야 할 때 |
| 저작권 주석 남기기 | /*! 로 시작하거나 @license, @preserve 가 든 주석을 남깁니다. | 직접 쓴 코드여서 표시가 필요 없을 때 |
코드에 import 나 export 가 있으면 모듈로 읽습니다. 모듈은 바깥 이름이 다른 파일에 드러나지 않으므로 가장 바깥의 이름까지 줄입니다.
자주 나오는 문법 오류
- 코드가 중간에 끝났습니다: 닫는 괄호가 모자랍니다. 가리키는 곳은 파일 끝이지만 실제로 빠진 곳은 그보다 앞입니다. 정리된 결과에서 들여쓰기가 갑자기 깊어지는 지점을 보면 찾기 쉽습니다.
- 이 자리에 올 수 없는 기호: 쉼표나 괄호가 하나 더 있거나, 바로 앞에 값이 빠졌습니다.
- 문자열을 닫는 따옴표가 없습니다: 따옴표 문자열 안에서 줄을 바꿨거나 문자열 안에 같은 따옴표를 그대로 썼습니다.
'It\'s'처럼 역슬래시를 붙이거나 다른 종류의 따옴표로 감쌉니다. - 코드에 쓸 수 없는 글자: 문서 편집기에서 복사하면서 따옴표가 둥근 따옴표로 바뀐 경우가 많습니다.
파일 여러 개를 한 번에
파일을 두 개 이상 고르면 지금 방식과 옵션으로 모두 처리해 ZIP으로 저장합니다. 압축일 때는 app.min.js 처럼 이름이 바뀝니다. 문법 오류로 압축하지 못한 파일은 목록에 이유가 나오고 ZIP에서는 빠집니다.
주의할 점
- 압축은 코드의 동작을 바꾸지 않도록 만들어졌지만, 함수 이름을 글자로 읽어 쓰는 코드(
fn.name)나eval로 지역 변수를 읽는 코드는 결과가 달라질 수 있습니다. 압축한 파일은 배포 전에 한 번 실행해 보세요. - 문법 검사는 괄호, 따옴표, 문장의 꼴을 봅니다. 선언하지 않은 변수를 쓰거나
let으로 같은 이름을 두 번 선언한 것처럼 실행해 봐야 드러나는 오류는 잡지 못합니다. - 읽기 어렵게 일부러 꼬아 놓은 난독화 코드는 정리해도 구조만 보일 뿐 뜻까지 풀리지는 않습니다.
- 입력이 20만 자를 넘으면 붙여 넣을 때 자동으로 처리하지 않습니다. 버튼을 눌러 주세요.
자주 묻는 질문
압축된 min.js 파일을 원래 코드로 되돌릴 수 있나요?
줄바꿈과 들여쓰기는 되살릴 수 있어 구조를 읽을 수 있게 됩니다. 하지만 a, b, c로 줄어든 변수 이름과 지워진 주석은 파일에 남아 있지 않아 되돌릴 수 없습니다. 원래 이름이 필요하면 소스맵 파일이나 원본 저장소를 찾아야 합니다.
변수 이름 줄이기를 켜면 코드가 망가지지 않나요?
함수 안에서만 쓰는 이름만 줄이고, 파일 가장 바깥에 선언한 함수와 변수 이름은 그대로 둡니다. 다른 파일이나 HTML에서 부르는 이름이 바뀌지 않게 하기 위해서입니다. 객체의 속성 이름도 바꾸지 않습니다.
문법 오류는 어떻게 알려 주나요?
몇 번째 줄 몇 번째 칸인지와 원인을 한국어로 알려 주고, 해석기가 낸 영어 원문도 함께 적습니다. 그 줄의 내용에 ^ 표시가 붙고 오류 위치로 이동 버튼으로 입력 칸의 그 자리로 갈 수 있습니다. 괄호가 빠진 경우에는 실제로 빠진 곳보다 뒤쪽이 가리켜질 수 있습니다.
타입스크립트나 JSX도 되나요?
정리하기는 대체로 동작하지만 문법 검사와 압축은 표준 자바스크립트만 지원합니다. 타입 표기나 JSX 태그가 있으면 그 자리에서 문법 오류로 나옵니다. 정리만 하려면 문법 검사도 함께 옵션을 끄고 쓰세요.
gzip 전송 크기는 무엇인가요?
웹 서버는 대부분 파일을 gzip이나 br로 눌러서 보내기 때문에 방문자가 실제로 내려받는 양은 파일 크기보다 작습니다. 결과 코드를 브라우저에서 gzip으로 눌러 본 크기를 보여 드립니다. 압축 옵션을 바꿔 가며 실제 전송량이 얼마나 달라지는지 비교할 때 봅니다.
함께 쓰면 좋은 도구
마지막 수정 2026-11-09. 있었으면 하는 기능이나 불편한 점은 이 도구에 건의하기로 알려 주세요.