JS/JSON 압축·미화 및 난독화기

JavaScript 압축(minify)은 동작은 그대로 두고 주석, 들여쓰기, 줄바꿈을 지워 파일을 작게 만들고 페이지 로딩을 빠르게 합니다. 정리(beautify)는 반대로 한 줄로 뭉친 코드를 다시 줄바꿈하고 들여써서 외부 스크립트를 읽거나 디버깅하기 쉽게 만듭니다. 이 도구는 두 기능과 간단한 난독화를 한 페이지에 모아, 코드를 붙여 넣으면 원본 크기, 결과 크기, 압축률을 바로 보여 줍니다.

솔직히 말하면 이 도구는 Terser나 esbuild처럼 코드를 구문 트리로 분석하지 않고 가벼운 정규식으로 처리합니다. 압축 시 /* */와 // 주석을 지우고, 연속된 공백을 합치고, 연산자 주변 공백을 없앱니다. 작은 스크립트, 북마클릿, 임베드용 코드 조각에는 편리하지만 깨지는 경우가 있습니다. "https://..."처럼 문자열 안의 "//"를 주석으로 착각하거나, 세미콜론 없이 자동 삽입에 의존하는 코드가 줄바꿈이 합쳐지며 동작하지 않거나, 정규식 리터럴과 템플릿 문자열이 영향을 받을 수 있습니다. 원본 파일을 보관하고 결과를 꼭 실행해 확인하세요.

난독화는 코드를 Base64로 바꾼 뒤 eval로 감싸 실행하게 만들며, JSON이면 JSON.parse로 감쌉니다. 소스를 한눈에 읽히는 것은 막지만 "가리는 것"일 뿐 보호가 아닙니다. 누구나 바로 디코딩할 수 있고, 파일은 약 3분의 1 커지며, eval을 쓰는 코드는 사이트의 콘텐츠 보안 정책(CSP)에 막힐 수도 있습니다. API 키나 비밀번호를 프런트엔드 코드에 넣고 난독화로 지킬 수 있다고 기대하지 마세요.

실제 프로젝트라면 Vite, esbuild, Terser 같은 도구를 빌드 과정에 넣어 자동으로 압축하는 것이 좋습니다. 이들은 변수명을 안전하게 줄이고 쓰이지 않는 코드도 제거합니다. 이 도구는 짧은 코드 조각을 빠르게 처리하거나, 압축 후 크기를 확인하거나, 남이 압축한 코드를 펼쳐 읽는 데 적합합니다. 모든 처리는 브라우저에서 이루어지며 코드는 업로드되지 않습니다.