CSS/JS 압축/해제

⚡ 코드 Minifier란?

CSS·JavaScript·HTML 코드를 압축해 파일 크기를 최소화합니다. 공백·줄바꿈·주석을 제거해 웹사이트 로딩 속도를 개선하고 대역폭을 절약합니다. 프로덕션 배포 전 압축은 표준 관행이며, 일반적으로 30~70% 용량 절감 효과를 볼 수 있습니다. 반대로 Beautify 기능은 압축된 코드를 다시 읽기 좋게 정렬합니다.

📊 압축 방식 비교

📄 압축 전후 비교

CSS를 예로 보면, 사람이 읽기 위해 넣은 요소가 얼마나 큰 비중인지 드러납니다. 아래 코드는 압축 후 약 40% 줄어듭니다.

/* 메인 버튼 스타일 */
.btn-primary {
    background-color: #3b82f6;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 8px;
}

.btn-primary{background-color:#3b82f6;color:#fff;padding:12px 24px;border-radius:8px}

실제 절감 효과는 코드 스타일에 따라 다릅니다. 주석과 들여쓰기가 많은 CSS는 절반 가까이 줄기도 하고, 이미 간결하게 작성된 코드는 10~20% 정도에 그칩니다.

⚠️ 압축이 깨뜨릴 수 있는 것들

공백 제거는 단순해 보이지만, 공백이 의미를 갖는 자리가 있습니다. 압축 후에는 반드시 동작을 확인하세요.

• HTML의 인라인 요소 사이 공백 — <span>A</span> <span>B</span>의 공백을 지우면 화면에서 두 글자가 붙어버립니다.
• <pre>와 <textarea> — 내부 공백과 줄바꿈이 그대로 출력되는 태그라 압축하면 표시가 달라집니다.
• 세미콜론 없는 JS — 줄바꿈에 의존해 문장을 구분하던 코드는 한 줄로 합쳐지면 문법 오류가 납니다.
• 템플릿 리터럴 — 백틱 문자열 안의 줄바꿈은 실제 값의 일부입니다.
• 조건부 주석·라이선스 주석 — 오픈소스 라이브러리는 라이선스 고지 주석을 유지해야 하는 경우가 있습니다.

실무에서는 Gzip이나 Brotli 압축이 서버 단에서 한 번 더 적용됩니다. Minify와 중복처럼 보이지만 원리가 달라 함께 쓸 때 효과가 가장 큽니다.

💡 활용 팁

• 개발 중에는 Beautify 상태로 작업하고, 배포 전에 Minify 적용
• CDN에 올릴 파일은 반드시 Minify하여 로딩 속도 개선
• 소스맵(Source Map)과 함께 사용하면 디버깅에도 문제없음
• 빌드 도구(Webpack, Vite)는 자동 Minify를 지원하므로 설정 확인

자주 묻는 질문