T
code-minifier web-performance javascript css html

고급 코드 압축기로 웹 성능 향상하기

JS, CSS, HTML 파일을 최적화하여 로딩 속도를 높이세요. 안전한 로컬 처리로 코드의 개인정보를 보호합니다.

2026-04-09 이 도구 사용하기

코드 압축이란 무엇인가?

코드 압축(Code Minification)은 소스 코드에서 공백 문자, 주석, 긴 변수명, 불필요한 구문 등 모든 불필요한 문자를 자동으로 제거하는 프로세스입니다. 코드의 런타임 동작을 전혀 변경하지 않으면서 기능적으로 동일하지만 크기가 훨씬 작은 파일을 생성합니다. 결과적으로 다운로드 속도가 빨라지고, 파싱 속도가 빨라지며, 서버 대역폭 비용이 절감됩니다.

이 기법의 역사는 다이얼업 인터넷 시절인 2000년대 초로 거슬러 올라갑니다. 당시에는 1바이트도 소중했기에 개발자들이 JavaScript 파일에서 주석과 공백을 직접 손으로 제거했습니다. 웹 애플리케이션이 점차 복잡해지면서 수동 압축은 비현실적이 되었고, YUI Compressor(2007년), Google의 Closure Compiler, 그리고 현재의 Terser·esbuild·통합 빌드 파이프라인 중심의 생태계로 발전했습니다.

오늘날 압축은 프로덕션 배포에 필수입니다. React·Vue·Angular·Svelte 등 모든 주요 프레임워크는 프로덕션 빌드 시 자동으로 압축을 적용하여 번들 크기를 30–70% 줄이는 경우가 많습니다.

JavaScript 압축의 작동 방식

현대의 JS 압축은 단순한 텍스트 검색·치환이 아닌 다단계 파이프라인입니다. 각 단계를 자세히 살펴봅니다.

1단계: 추상 구문 트리(AST)로 파싱

압축 도구는 먼저 JavaScript 소스 코드를 추상 구문 트리(Abstract Syntax Tree, AST)로 파싱합니다. AST는 코드 로직의 구조화된 메모리 표현입니다. Terser는 Acorn 또는 유사한 파서를 사용해 이 트리를 구성합니다. AST는 모든 함수 선언, 변수 할당, 표현식, 제어 흐름 분기를 트리 노드로 표현합니다.

이 단계가 중요한 이유는, 원시 텍스트가 아닌 AST에서 작업함으로써 정규 표현식 기반 방식으로는 절대 보장할 수 없는 의미적으로 안전한 변환이 가능해지기 때문입니다.

2단계: 공백 문자와 주석 제거

가독성을 위해서만 존재하는 공백 문자(스페이스·탭·줄바꿈)가 모두 제거됩니다. 주석(// 단일 행 주석과 /* */ 블록 주석)도 삭제됩니다. 주석이 풍부한 코드베이스에서는 이 처리만으로 파일 크기를 15–30% 줄일 수 있습니다.

3단계: 변수·함수명 맹글링(Mangling)

calculateTotalPrice 같은 길고 설명적인 식별자가 a·b·c 같은 짧은 1–2자 이름으로 바뀝니다. 이를 맹글링이라 합니다. AST는 특정 변수에 대한 모든 참조가 해당 스코프 내에서 일관되게 이름이 변경되도록 보장합니다. 맹글링은 공백 제거에 더해 보통 10–20% 추가로 절감합니다.

4단계: 데드 코드 제거

도달할 수 없는 코드가 식별되어 제거됩니다. 정의되었지만 한 번도 호출되지 않는 함수는 삭제됩니다. 항상 false인 조건 분기(예: if (false) { … })도 제거됩니다. 이를 통해 출력 크기가 줄어들고, 엔진이 파싱·컴파일할 코드가 줄어 런타임 성능도 향상됩니다.

5단계: 상수 접기와 표현식 단순화

상수 표현식이 컴파일 시점에 평가됩니다. var x = 2 + 3이 var x = 5가 됩니다. true && someFunc()가 someFunc()가 됩니다. !0이 true를, !1이 false를 대체합니다. 이런 마이크로 최적화는 대규모 코드베이스에서 누적 효과가 큽니다.

6단계: AST에서 코드 재생성

마지막으로 수정된 AST가 불필요한 문자를 모두 제거한 형태의 JavaScript 소스 코드로 직렬화됩니다. 출력 결과는 단 한 줄의 압축된 유효한 JavaScript입니다.

예시: 압축 전후 비교

// 압축 전 (원본 코드)
function calculateTotal(items, taxRate) {
  // 소계 계산
  var subtotal = 0;
  for (var i = 0; i < items.length; i++) {
    subtotal = subtotal + items[i].price * items[i].quantity;
  }
  var tax = subtotal * taxRate;
  var total = subtotal + tax;
  return total;
}

// 압축 후 (Terser 출력)
function calculateTotal(t,a){var l=0;for(var r=0;r<t.length;r++)l+=t[r].price*t[r].quantity;return l+l*a}

원본 9줄·236자 함수가 단 1줄 99자로 압축되었습니다 — 58% 감소.

CSS 압축의 작동 방식

CSS 압축도 유사한 파싱·변환·재생성 파이프라인을 따릅니다. 주요 변환은 다음과 같습니다.

공백 문자와 주석 제거 — 모든 들여쓰기, 줄바꿈, /* */ 주석이 제거됩니다. 수백 줄에 걸친 CSS 파일이 보통 한 줄로 접힙니다.

약식 속성 합병 — margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px;가 margin: 10px 5px;가 됩니다. padding·border·background·font 속성도 마찬가지입니다.

색상 값 단축 — #ffffff가 #fff가 되고, rgb(255, 0, 0)이 red 또는 #f00이 됩니다. 명명된 색상은 더 짧은 16진수 동등값으로 대체됩니다.

제로 값 최적화 — 0px가 0이 되고, 0%가 0이 됩니다. 값이 0일 때 단위는 불필요합니다.

중복 규칙 제거 — 중복 선택자와 덮어쓰기된 속성이 통합됩니다. cssnano(PostCSS 기반)가 이 모든 변환을 처리합니다.

일반적인 CSS 압축은 원본 작성 방식에 따라 20–50% 파일 크기를 줄입니다.

HTML 압축의 작동 방식

HTML 구조가 렌더링과 접근성에 영향을 주기 때문에 HTML 압축은 다소 보수적으로 진행됩니다. 주요 기법은 다음과 같습니다.

공백 축소 — 태그 사이의 연속적인 여러 스페이스와 줄바꿈이 단일 스페이스로 축소되거나, 시각적 영향이 없는 곳에서는 완전히 제거됩니다.

선택적 태그 제거 — HTML5는 특정 컨텍스트에서 특정 닫는 태그(</li>·</td>·</p> 등)를 생략할 수 있습니다. 압축 도구가 안전하게 제거합니다.

속성 따옴표 제거 — 값에 스페이스나 특수 문자가 없으면 <div class="container">가 <div class=container>가 됩니다.

인라인 JS/CSS 압축 — HTML 내의 <script>·<style> 블록은 해당 JS/CSS 압축 도구를 사용해 압축됩니다.

부울 속성 단축 — <input disabled="disabled">가 <input disabled>가 됩니다.

일반적인 HTML 압축 절감 효과는 **5–20%**로, HTML 구문 자체가 덜 장황하기 때문에 JS/CSS보다 작습니다.

빌드 도구 생태계

Terser

Terser는 JavaScript 압축의 업계 표준입니다. ES6+를 완전히 지원하는 UglifyJS의 포크로, Webpack·Vite·Rollup 및 대부분의 주요 번들러의 압축 단계를 담당합니다.

# Terser CLI 사용법
npx terser input.js -o output.min.js --compress --mangle

cssnano

cssnano는 PostCSS 기반 CSS 최적화 도구입니다. 여러 최적화 패스를 실행하며 Webpack의 CSS 파이프라인에서 기본으로 사용됩니다.

# PostCSS로 cssnano 사용
npx postcss input.css -o output.min.css --use cssnano

html-minifier-terser

클래식 html-minifier의 유지 관리되는 포크로, 최신 HTML5를 지원하고 인라인 스크립트 압축을 위해 Terser를 통합합니다.

Webpack

Webpack은 프로덕션 모드에서 JS에는 TerserPlugin을, CSS에는 CssMinimizerPlugin을 사용합니다.

{
  "optimization": {
    "minimize": true,
    "minimizer": ["...new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })"]
  }
}

drop_console: true 옵션은 프로덕션 번들에서 모든 console.log() 호출을 제거합니다.

Vite

Vite는 개발 모드 트랜스파일에 esbuild를, 프로덕션 빌드에는 Rollup + Terser를 사용합니다. 압축은 완전히 자동으로 vite build를 실행하면 추가 설정 없이 압축된 청크 출력이 생성됩니다.

esbuild

esbuild는 Go로 작성되어 JavaScript 기반 번들러보다 10–100배 빠릅니다. 번들링 단계의 일부로 압축을 수행합니다. Terser의 고급 압축 패스를 모두 지원하지는 않지만, 빠른 속도 덕분에 개발 빌드와 점점 더 많은 프로덕션 빌드에서 기본 선택이 되고 있습니다.

Tree Shaking과 압축의 차이

Tree shaking과 압축은 상호 보완적이지만 서로 다른 기술입니다.

Tree shaking은 모듈 수준에서 데드 코드를 제거합니다. 유틸리티 라이브러리를 가져오지만 20개 함수 중 2개만 사용한다면, tree shaking은 번들 생성 전에 사용되지 않는 18개 함수를 완전히 제거합니다. 이를 위해서는 ES 모듈(import/export)이 필요하며, 이는 정적 구조 덕분에 번들러가 어떤 익스포트가 실제로 사용되는지 추적할 수 있습니다.

압축은 필요하다고 판단된 코드의 크기를 줄입니다 — tree shaking이 실행된 후 남은 코드를 압축합니다.

두 기법을 결합하면 tree shaking + 압축으로 전체 라이브러리 가져오기를 수백 KB에서 불과 몇 KB로 줄일 수 있습니다.

Source Maps: 압축된 코드 디버깅

압축된 코드는 읽을 수 없습니다. 프로덕션에서 오류가 발생하면 스택 추적은 압축 파일의 1행 847열을 가리킵니다 — 디버깅에 쓸모가 없습니다.

Source maps(·map 파일)은 압축 코드 위치에서 원본 소스 위치로의 매핑을 제공하여 이 문제를 해결합니다. 브라우저 개발자 도구는 source maps를 자동으로 사용하여 디버깅 시 원본 읽기 쉬운 코드를 표시합니다.

npx terser input.js -o output.min.js --source-map "url='output.min.js.map'"

모범 사례: source maps를 생성하되 인증된 사용자에게만 제공하거나, 지적 재산을 보호하기 위해 공개 CDN에서 제외하세요.

압축 vs 전송 압축 (gzip / Brotli)

이 두 개념은 자주 혼동되지만, 서로 다른 수준에서 작동하며 완벽하게 보완됩니다.

기법 작동 수준 일반적인 절감
코드 압축 소스 코드 수준 30–70%
gzip HTTP 전송 레이어 압축 후 크기의 60–80%
Brotli HTTP 전송 레이어 압축 후 크기의 70–85%

코드 압축은 엔트로피(공백 문자, 주석, 긴 이름)를 제거하여 텍스트를 더 압축하기 쉽게 만듭니다. gzip/Brotli는 이미 압축된 텍스트를 추가로 압축합니다. 효과가 누적됩니다. 100KB 파일이 압축으로 40KB가 되고 Brotli HTTP 전송 후 12KB가 될 수 있습니다.

두 방법 모두 활성화하세요. 서버나 CDN에서 Content-Encoding: br(Brotli)을 설정하고, 제공 전에 코드를 압축하는 빌드 파이프라인을 사용하세요.

실제 성능 수치

다음은 실제 프로덕션 배포를 대표하는 수치입니다.

  • React 프로덕션 빌드: 개발 번들 약 2.5 MB → 프로덕션 압축 후 약 130 KB (tree shaking + 압축 + gzip 후 95% 감소)
  • Bootstrap CSS: 미압축 약 185 KB → 압축 후 약 157 KB → gzip 후 약 23 KB
  • jQuery 3.x: 미압축 약 290 KB → 압축 후 약 87 KB → gzip 후 약 30 KB
  • 일반적인 SPA: 압축만으로 번들 크기 40–70% 감소
  • 대형 CSS 프레임워크: cssnano로 30–60% 감소

JavaScript 100KB를 절감할 때마다 중간 사양 모바일 기기에서 파싱·컴파일 시간이 약 1초 단축됩니다. 느린 3G 연결에서는 절감 효과가 더욱 두드러집니다.

사용 사례

프로덕션 웹 배포 — 주요 사용 사례입니다. 사용자에게 제공되는 모든 파일은 압축되어야 합니다.

CDN 제공 — Cloudflare·Fastly·AWS CloudFront 같은 CDN은 자산을 자동으로 압축할 수 있지만, 빌드 시 압축이 더 빠르고 제어하기 쉽습니다.

프로그레시브 웹 앱(PWA) — PWA는 브라우저에 리소스를 캐시합니다. 자산이 작을수록 초기 설치가 빨라지고, 오프라인 성능이 향상되며, 사용자 기기 저장 공간 사용이 줄어듭니다.

이메일 템플릿 — 이메일 템플릿의 인라인 HTML/CSS는 간결해야 합니다. 많은 이메일 클라이언트에 크기 제한이 있으며 모바일에서의 렌더링 속도도 중요합니다.

서버리스 함수 — 콜드 스타트 시간은 번들 크기에 일부 결정됩니다. Lambda나 Cloudflare Worker 코드를 압축하면 콜드 스타트 지연 시간을 측정 가능한 수준으로 줄일 수 있습니다.

npm 패키지 게시 — 적절한 exports 필드가 있는 압축된 tree shaking 가능한 패키지를 게시하면 라이브러리 사용자에게 훌륭한 개발자 경험을 제공합니다.

수동 압축 vs 빌드 도구 통합

수동 (온라인 도구) 빌드 파이프라인
속도 단일 파일 즉시 처리 전체 프로젝트 자동화
일관성 일정하지 않음 매 빌드마다 재현 가능
Source maps 선택 사항 자동 생성
팀 워크플로 확장 불가 버전 관리된 설정
최적 용도 빠른 확인, 학습, 프로토타입 모든 프로덕션 프로젝트

온라인 도구(저희 도구 등)는 압축의 작동 방식을 이해하거나, 단일 파일을 빠르게 압축하거나, 빌드 설정 없이 프로토타입을 만들 때 이상적입니다. 빌드 도구 통합은 모든 프로덕션 프로젝트에 필수입니다.

모범 사례

  1. 프로덕션에서는 항상 압축하세요. 미압축 파일을 사용자에게 제공하지 마세요.
  2. 항상 source maps를 생성하세요. 프로덕션 오류 디버깅 시 필요합니다.
  3. 서버나 CDN에서 Brotli 압축을 활성화하세요 (코드 압축과 병행).
  4. Terser에서 drop_console: true를 사용해 프로덕션 번들에서 디버그 로그를 제거하세요.
  5. 압축 전에 tree shaking을 실행하세요. Vite나 Rollup 같은 번들러가 자동으로 수행합니다.
  6. 압축 도구를 최신 상태로 유지하세요. 최신 버전에는 개선된 압축 알고리즘이 포함됩니다.
  7. 압축 전후를 측정하세요. Lighthouse·WebPageTest·Chrome DevTools Network 탭으로 크기 감소를 확인하세요.
  8. 압축된 파일을 직접 편집하지 마세요. 항상 소스에서 압축하세요. 수동 편집은 다음 빌드에서 덮어씌워집니다.
  9. 공격적인 CSS 압축 후 CSS 명시도 문제를 확인하세요 — 약식 합병으로 유효 명시도가 변경될 수 있습니다.
  10. 콘텐츠 해싱을 사용하세요 (예: bundle.a3f9b2.min.js). 압축된 자산에 대한 적극적인 CDN 캐싱이 가능해집니다.

자주 묻는 질문

Q: 압축으로 코드 동작이 바뀌나요? A: 아니요. 올바른 압축 도구는 동작에 영향을 주지 않는 것만 제거하거나 이름을 바꿉니다. 공백 문자, 주석, 식별자(일관되게 이름 변경)가 해당됩니다. 압축 후 코드가 다르게 동작한다면, 대개 Function.name, 함수의 toString(), 또는 이름 맹글링 후 작동하지 않는 유사한 리플렉션 기반 패턴에 의존하기 때문입니다.

Q: 개발 환경에서도 압축해야 하나요? A: 일반적으로는 아닙니다. 압축된 코드는 디버깅이 어렵습니다. 스테이징 환경에서는 source maps를 사용하고, 프로덕션 빌드에서만 완전한 압축을 활성화하세요.

Q: 온라인 압축 도구를 사용하는 것이 안전한가요? A: 저희 도구는 완전히 브라우저 내에서 실행됩니다 — 코드는 서버로 전송되지 않습니다. 서드파티 온라인 도구를 사용할 때는 DevTools의 Network 탭으로 확인하세요.

Q: 압축과 난독화의 차이는 무엇인가요? A: 압축의 주요 목표는 파일 크기 감소이고 가독성 저하는 부작용입니다. 난독화는 문자열 인코딩, 제어 흐름 평탄화, 데드 코드 삽입 등의 기법을 사용해 의도적으로 코드를 이해하기 어렵게 만듭니다. 압축된 코드는 포매터로 복원할 수 있지만, 제대로 난독화된 코드는 그렇지 않습니다.

Q: 압축으로 JavaScript 실행 속도가 향상되나요? A: 직접적으로는 거의 없습니다 — 최신 JS 엔진은 포맷에 관계없이 코드를 파싱하고 JIT 컴파일합니다. 주요 성능 이점은 다운로드 및 파싱 시간 단축으로, 모바일 네트워크에서 특히 중요합니다. 상수 접기는 약간의 런타임 이점을 제공합니다.

Q: 공격적인 압축으로 코드가 깨질 위험이 있나요? A: Terser나 esbuild 같이 잘 관리되는 도구를 사용한다면 위험이 매우 낮습니다. 가장 흔한 문제는 .name 속성에 의존하는 코드, eval()을 사용하는 코드(Terser는 보수적으로 처리), 약식 합병으로 인한 CSS 명시도 변화입니다. 항상 압축된 출력에 대해 테스트 스위트를 실행하세요.

블로그로 돌아가기 코드 압축기 →