JS / CSS Minifier + Beautifier

JavaScript 또는 CSS를 붙여넣으세요 — Minify를 눌러 프로덕션용으로 공백과 주석을 제거하거나, Beautify를 눌러 난독화된 / 한 줄 코드를 다시 들여쓰기해 읽기 쉬운 형태로 만드세요. 자동 언어 감지, 모두 브라우저 안에서 실행됩니다.

언어 들여쓰기

입력

출력

일상적인 JS + CSS 작업을 위해 만들어졌습니다

프로덕션을 위한 minify, 디버깅을 위한 beautify — 그리고 실제로 쓰는 재미를 더해주는 작은 디테일들.

두 가지 언어, 두 가지 변환

JavaScript 또는 CSS, minify 또는 beautify를 하나의 도구에서. 자동 감지가 내용 단서를 통해 언어를 선택하며, Language 드롭다운으로 직접 지정할 수도 있습니다.

안전 위주의 minify

주석을 제거하고 공백을 압축하지만, 식별자를 변경하지 않고, 순서를 바꾸지 않으며, 인라인 처리도 하지 않습니다. 문자열, 템플릿 리터럴, 정규식, 라이선스 배너 주석(/*! ... */)은 그대로 보존됩니다. 출력은 바이트 단위로 안전합니다.

난독화된 / minify된 코드를 beautify

한 줄로 압축된 minify 번들을 붙여넣고 Beautify를 누르면, 들여쓰기된 읽기 쉬운 버전을 얻을 수 있습니다 — 서드파티 스크립트 검사, 프로덕션 스택 트레이스 디버깅, 또는 잘 짜인 코드를 학습할 때 유용합니다.

한눈에 보이는 용량 차이

minify할 때마다 입력 바이트 → 출력 바이트의 차이와 절감 비율을 표시합니다. CSS 번들이 실제로 작아지고 있는지 더 이상 궁금해할 필요가 없습니다.

설계 단계부터 프라이버시 우선

코드는 기기를 떠나지 않습니다. tokeniser, minifier, beautifier 모두 JavaScript로 로컬에서 실행됩니다. DevTools → Network를 열어 외부로 나가는 요청이 0건임을 직접 확인하세요.

작고 빠르게

순수 JavaScript, 프레임워크 런타임 없음. 콜드 로드 용량은 gzip 기준 25 KB 미만입니다. 200 KB의 JS 번들도 일반 노트북에서 50 ms 이내에 minify됩니다.

JS / CSS를 minify 또는 beautify하는 방법

원본 코드에서 프로덕션용 출력까지 단 세 단계.

1

코드 붙여넣기

JavaScript 또는 CSS를 Input 패널에 넣으세요. 도구가 자동으로 언어를 감지합니다 — 소스가 모호한 경우(예: 작은 코드 조각)에는 Language 드롭다운에서 직접 선택할 수 있습니다.
2

Minify 또는 Beautify 선택

Minify를 눌러 프로덕션용으로 주석과 공백을 제거하세요. Beautify를 눌러 난독화된 / 한 줄 코드를 적절한 들여쓰기와 함께 펼치세요. 클릭할 때마다 즉시 다시 실행되므로, 양쪽을 오가며 비교할 수 있습니다.
3

복사 또는 다운로드

복사 아이콘으로 출력을 클립보드에 보내거나, 다운로드 아이콘으로 output.min.js / output.min.css / output.beauty.js / output.beauty.css로 저장하세요. 용량 차이(입력 → 출력 바이트, 절감 비율)가 얼마나 압축됐는지 정확히 보여줍니다.

일상적인 웹 개발 작업을 위해

아무 온라인 minifier에 코드를 붙여넣는 것보다 프라이버시 우선의 브라우저 도구가 더 나은 네 가지 일반적인 시나리오.

HTML 이메일이나 정적 사이트의 인라인 스크립트

정적 페이지, 트랜잭션 이메일 템플릿, 임베드 스니펫에는 종종 한 줄짜리 인라인 스크립트나 스타일시트가 필요합니다. 읽기 쉬운 원본을 넣고, minify한 뒤, 결과를 <style> 또는 <script> 태그에 붙여넣으면 끝입니다.

신뢰하지 않는 서드파티 스크립트 읽기

벤더 픽셀, 광고 네트워크 비콘, 의심스러운 확장 프로그램 — 모두 minify된 한 줄로 배포됩니다. 붙여넣고 Beautify를 눌러, 프로덕션에 임베드하기 전에 그것들이 실제로 무엇을 하는지 확인하세요.

CMS 테마의 빠른 CSS 점검

WordPress / Shopify / Ghost / Webflow용 테마는 비대한 CSS를 함께 제공하는 경우가 많습니다. 스타일시트를 붙여넣고 beautify해서 중복 규칙과 사용하지 않는 셀렉터를 살펴보세요. 정리가 끝나면 다듬어진 버전을 다시 한 줄로 minify하세요.

외부 서비스로 보낼 수 없는 민감한 코드

API 키, 비밀 정보, 비즈니스 로직이 담긴 내부 스크립트 — 클라우드 minifier에 절대 붙여넣을 수 없는 코드입니다. 브라우저 전용 도구는 모든 바이트를 본인 노트북에 그대로 둡니다. DevTools → Network를 열어 어떤 것도 외부로 나가지 않음을 직접 확인하세요.

100% 비공개 — 브라우저에서 실행됩니다

코드는 절대 기기를 떠나지 않습니다. DevTools → Network를 열어보면 minify 또는 beautify 중에 외부로 나가는 요청이 전혀 없습니다.

tokeniser, minifier, beautifier 모두 본인 기기에서 JavaScript로 실행됩니다 — Terser도, esbuild도, 서드파티 API도 사용하지 않습니다.
라이선스 배너 주석(/*! ... */)은 기본적으로 보존되어, 오픈소스 라이브러리 라이선스가 요구하는 출처 표시를 실수로 제거하는 일이 없습니다.
로그인 없음, 코드 내용에 대한 텔레메트리 없음. 쿠키 동의 상태와 언어 설정용 쿠키만 사용합니다.

자주 묻는 질문

minifier는 얼마나 공격적인가요?

보수적입니다. 주석을 제거하고 공백을 압축하지만, 식별자를 변경하지 않으며(foo는 그대로 foo), dead-code 제거를 수행하지 않고, 문장의 순서를 바꾸지도 않습니다. 목표는 안전하고 예측 가능한 바이트 절감입니다. 최대 압축이 필요하다면 마지막 단계에서 출력을 Terser나 esbuild에 통과시키세요.

문자열, 템플릿 리터럴, 정규식이 깨지지 않나요?

아니요. tokeniser는 문자열, 템플릿 리터럴, 정규식을 모두 인식합니다. "...", '...', \`...\`, /regex/flags 안의 공백과 주석처럼 보이는 문자열은 있는 그대로 보존됩니다. 라이선스 배너 주석(/*! ... */)도 기본값으로 유지됩니다.

CSS minifier가 중첩 규칙과 @media 쿼리를 처리하나요?

네. 중첩 규칙, @media, @keyframes, @font-face, @layer, @container, @supports, CSS 커스텀 프로퍼티(--var) 모두 안전하게 minify됩니다. 콤마로 구분된 셀렉터 목록은 그대로 유지되며, 의미 없는 공백만 제거됩니다.

한 줄로 minify된 번들을 beautify할 수 있나요?

Beautify는 정확히 그 용도로 만들어졌습니다. minify된 JS 또는 CSS를 붙여넣고 Beautify를 누르면 다시 들여쓰기된 버전을 얻을 수 있습니다. beautifier는 의미를 바꾸지 않습니다 — 괄호 깊이에 맞춰 줄바꿈과 들여쓰기만 추가합니다. 어떤 방식으로 minify되었든 유효한 입력이면 동작합니다.

서버로 전송되는 것이 있나요?

없습니다. tokeniser, minifier, beautifier 모두 본인 기기의 JavaScript로 실행됩니다. DevTools → Network를 열어보면 minify 또는 beautify 중에 외부로 나가는 요청이 전혀 없습니다. API 키, 비밀 정보, 사내 코드를 붙여넣어도 무엇도 노트북을 떠나지 않습니다.