JavaScript 압축(Minification) 완벽 가이드: 파일 크기를 줄이는 현실적인 방법

웹 성능 최적화를 이야기할 때 JavaScript 압축은 항상 빠지지 않는 주제입니다. 그런데 막상 해보려 하면 '빌드 툴 설정이 너무 복잡하다', '간단한 스크립트 하나 때문에 Webpack을 설치하긴 싫다'는 생각이 드는 경우가 많습니다.

저도 그런 적이 있었습니다. 레거시 프로젝트를 유지보수하던 중 빌드 시스템 없이 CDN에서 직접 불러오는 스크립트 파일이 있었는데, 이미 배포 중인 파일을 압축할 방법이 없어서 난감했던 기억이 납니다. 그때 가장 빠른 해결책이 온라인 압축 도구였고, 실제로 45KB짜리 스크립트가 22KB로 줄어들었습니다.

JavaScript 압축이 실제로 제거하는 것들

압축 도구가 소스 파일에서 제거하는 주요 요소들을 살펴보겠습니다.

주석(Comments). 단일 행 주석(// ...)과 여러 행 주석(/* ... */)이 모두 제거됩니다. 주석이 많은 코드에서 가장 큰 용량 절감이 일어납니다.

공백과 줄 바꿈. 들여쓰기에 사용된 공백, 함수 사이의 빈 줄, 연산자(=, +) 주변의 공백이 제거됩니다.

불필요한 세미콜론. 일부 압축 도구는 JavaScript의 자동 세미콜론 삽입(ASI) 규칙에 따라 생략 가능한 세미콜론을 제거합니다. 이 부분은 코드 스타일에 따라 주의가 필요합니다.

고급: 변수명 변경. Terser, UglifyJS 같은 강력한 도구는 currentUserIndex 같은 긴 변수명을 a처럼 단일 문자로 바꿉니다. 용량 감소와 동시에 어느 정도의 코드 난독화 효과도 있습니다.

JS Minifier 온라인 도구는 기본적인 주석 제거와 공백 축소를 처리합니다. 변수명은 바꾸지 않지만, 대부분의 간단한 작업에는 충분합니다.

실제로 얼마나 줄어들까?

코드 종류에 따라 천차만별입니다. 현실적인 수치를 보면:

주석이 풍부한 유틸리티 코드: 200KB → 95KB (52% 절감) — 주석이 파일의 절반을 차지할 수 있어 가장 효과적입니다.

이미 최적화된 프레임워크 소스: 150KB → 130KB (13% 절감) — 이미 최적화되어 있어 추가 절감 여지가 적습니다.

일반적인 애플리케이션 코드: 50KB → 32KB (36% 절감) — 가장 흔한 경우입니다.

파일 크기 외에도 파싱 시간이 줄어드는 숨은 이점이 있습니다. 텍스트가 적으면 JavaScript 엔진이 파일을 더 빨리 파싱할 수 있어, 특히 저사양 모바일 기기에서 체감 속도 차이가 납니다.

기본 압축의 한계

솔직하게 말씀드리겠습니다. 온라인 도구를 포함한 기본 정규식 기반 압축 도구에는 명확한 한계가 있습니다.

모든 케이스를 안전하게 처리하지 못할 수 있습니다. 정규식 기반의 주석 제거는 //나 /* 패턴을 포함한 템플릿 리터럴이나 문자열을 잘못 처리할 수 있습니다.

변수명 변경 없음. 공백 제거로만 용량이 줄어듭니다. Terser처럼 타이트한 최적화를 원한다면 전용 도구를 사용하세요.

데드 코드 제거 없음. 실제로 사용되지 않는 함수나 변수를 찾아내지 못합니다.

트리 쉐이킹 없음. 현대적인 번들러는 사용하지 않는 모듈 전체를 번들에서 제거합니다. 이건 압축보다 훨씬 강력한 최적화이지만, 기본 압축 도구로는 불가능합니다.

온라인 도구가 적합한 상황

그럼 언제 온라인 도구를 쓰는 게 맞을까요?

• 빌드 프로세스 없이 운영하는 소규모 프로젝트나 레거시 코드
• 작은 유틸리티 스크립트(분석 코드, 위젯 임베드)
• 이미 압축된 코드를 읽기 쉽게 정리하고 싶을 때(Beautify 기능 활용)
• 특정 코드 스니펫에서 압축 결과를 빠르게 확인하고 싶을 때

반면 CI/CD 파이프라인이 있거나 React, Vue, Svelte 같은 프레임워크를 사용한다면, 빌드 도구가 자동으로 처리하도록 두는 것이 훨씬 효율적입니다.

압축이 잘못될 수 있는 경우

실제로 겪었거나 본 적 있는 케이스들입니다.

ASI 의존 코드. 아래 같은 코드:

return
  {
    value: 1
  }

JavaScript ASI 때문에 return undefined가 됩니다. 줄 바꿈을 공격적으로 제거하는 압축 도구는 이를 return{value:1}로 만들어 실제로 객체를 반환하게 만들 수도 있습니다. 반대 방향으로 동작하는 케이스도 있으니 주의가 필요합니다.

eval이나 Function 생성자. 런타임에 함수 문자열을 만들어 실행하는 코드는 변수명 변경과 잘 어울리지 않습니다. 공백 제거는 대체로 안전하지만 이런 패턴이 있다면 신중하게 테스트해야 합니다.

기본 원칙: 압축 후 반드시 테스트. 문제가 생기면 압축된 출력에서 해당 영역을 확인하세요.

다른 최적화와 함께 쓰기

압축은 성능 전략의 일부일 뿐입니다.

gzip/Brotli. 서버에서 파일을 전송할 때 압축을 적용하세요. 압축된 JavaScript도 gzip으로 추가 60-80% 절감이 가능합니다.

번들링. 여러 JS 파일을 하나로 합치면 HTTP 요청 오버헤드가 줄어듭니다. 파일 수 감소가 개별 파일 크기 감소만큼 중요할 수 있습니다.

코드 분할. 사용자가 현재 페이지에서 필요하지 않은 코드는 나중에 로드하세요. 500KB JS를 모두 초기에 불러오는 것보다 지금 필요한 50KB만 먼저 불러오는 게 훨씬 낫습니다.

CSS도 압축하고 싶다면 CSS Minifier를, HTML 압축은 HTML Minifier를 사용하세요.

JS Minifier 사용법

JS Minifier 도구 사용법은 간단합니다:

1. 입력 필드에 JavaScript 코드를 붙여넣으세요
2. 압축(Minify) 버튼: 주석과 공백을 제거해 파일 크기 감소
3. 정리(Format) 버튼: 이미 압축된 코드를 읽기 쉽게 정리 (외부에서 받은 번들 파일 분석에 유용)
4. 원본과 결과의 바이트 크기 및 절감 비율 확인
5. 결과를 복사하여 프로젝트에 적용

모든 처리는 브라우저에서 이루어집니다. API 키나 비즈니스 로직이 포함된 코드도 안심하고 사용할 수 있습니다.

압축 vs 난독화

많은 분들이 압축과 난독화를 혼동합니다. 관련이 있지만 다른 개념입니다.

• 압축(Minification): 코드를 더 작고 빠르게 전송하기 위한 최적화
• 난독화(Obfuscation): 코드를 읽기 어렵게 만들어 역공학을 방해

Terser의 변수명 변경은 압축의 부작용으로 약한 난독화 효과가 있습니다. 진짜 난독화 도구는 더 나아가 모든 것을 _0x1a2b 형태로 바꾸고, 데드 코드를 삽입하고, 문자열을 인코딩합니다.

그러나 결국 결론은 같습니다: 클라이언트 사이드 JavaScript에 시크릿을 넣지 마세요. 난독화는 속도를 늦출 뿐이지, 막지는 못합니다.

정리

JavaScript 압축은 확실한 성능 개선 방법입니다. 빌드 프로세스가 있다면 그 안에 통합하고, 간단한 스크립트나 일회성 작업이라면 온라인 도구를 활용하세요.

JS Minifier 도구는 설정 없이 바로 쓸 수 있습니다. 고급 최적화가 필요하다면 Terser나 현대적인 번들러를 활용하세요.

마지막으로, 원본 소스는 반드시 버전 관리에 보관하세요. 압축된 파일은 다시 사람이 읽을 수 있는 형태로 완전히 복원하기 어렵습니다.