CSS Minifier

CSS 미니피케이션이란?

CSS 미니피케이션은 스타일시트의 동작을 변경하지 않으면서 불필요한 모든 문자를 제거하는 과정입니다. 공백, 줄바꿈, 주석, 후행 세미콜론과 불필요한 따옴표 같은 중복 문법을 제거합니다. 브라우저는 미니파이된 CSS와 원본 CSS를 동일하게 파싱합니다. W3C CSS Syntax Module은 문법을 정의하며, 토큰 사이의 공백은 식별자를 구분하는 경우를 제외하고 선택 사항입니다. 미니피케이션은 이를 활용하여 최소한의 필수 문자만 남깁니다.

온라인 CSS 미니파이어는 서식이 있는 스타일시트를 받아 전송 크기에 최적화된 압축 버전을 생성합니다. 일반적인 절감 효과는 소스의 공백과 주석 양에 따라 15%~40%입니다. 50KB 스타일시트를 기준으로 하면 페이지 로드마다 네트워크 전송 데이터가 7~20KB 줄어듭니다. 서버의 gzip 또는 Brotli 압축과 함께 사용하면 최종 전송 크기가 더욱 줄어듭니다. 이미 미니파이된 CSS를 압축하면 서식 있는 원본을 압축하는 것보다 더 작은 결과를 얻을 수 있습니다.

미니피케이션은 프론트엔드 빌드 파이프라인의 표준 단계입니다. cssnano, clean-css, esbuild 같은 도구는 빌드 과정에서 미니피케이션을 실행합니다. 그러나 개발 중에는 단일 스니펫을 테스트용으로 미니파이하거나, 중요 CSS 블록을 인라인으로 삽입하거나, 번들 설정에 추가하기 전에 스타일시트 크기를 확인해야 할 때가 있습니다. 이때 브라우저 기반 CSS 미니파이어가 유용합니다. CSS를 붙여넣고 미니파이된 결과를 얻어 복사하면 됩니다.

/* Main navigation styles */
.nav {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1e293b;
}

/* Links inside nav */
.nav a {
  color: #e2e8f0;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #818cf8;
}

.nav{display:flex;align-items:center;padding:1rem 2rem;background-color:#1e293b}.nav a{color:#e2e8f0;text-decoration:none;margin-right:1.5rem;transition:color .2s ease}.nav a:hover{color:#818cf8}

이 CSS 미니파이어를 사용하는 이유

어떤 CSS든 붙여넣으면 수 밀리초 안에 압축된 결과를 얻을 수 있습니다. 빌드 도구 설정, CLI 명령, 계정 생성이 필요 없습니다.

CSS 미니파이어 활용 사례

CSS 미니피케이션 기법

CSS 미니파이어는 파일 크기를 줄이기 위해 여러 변환을 적용합니다. 각 기법은 소스의 서로 다른 유형의 중복을 대상으로 합니다. 아래 표는 주요 기법과 서식 있는 스타일시트에서의 일반적인 절감 효과를 보여줍니다.

절감 비율은 입력에 따라 다릅니다. 주석이 많은 파일은 주석 제거의 효과가 크고, 이미 압축된 파일은 절감 효과가 작습니다. 가장 안정적인 효과는 공백 제거와 단축 속성 최적화에서 나옵니다. cssnano 같은 고급 미니파이어는 중복 선택자 병합, 롱핸드 속성을 단축 속성으로 축소(margin-top + margin-right + margin-bottom + margin-left를 margin으로), 재정의된 선언 제거도 수행합니다.

미니피케이션 vs. gzip 압축

미니피케이션과 압축은 상호 대체 관계가 아니라 보완 관계입니다. 서로 다른 레이어에서 동작하며 함께 적용할 수 있습니다.

코드 예제

다양한 언어와 환경에서 CSS를 프로그래밍 방식으로 미니파이하는 방법입니다.

import postcss from 'postcss'
import cssnano from 'cssnano'

const input = `
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* TODO: update color */
}
`

const result = await postcss([cssnano]).process(input, { from: undefined })
console.log(result.css)
// → ".nav{display:flex;padding:0 1rem;color:#fff}"

import csscompressor

css = """
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* navigation styles */
}
"""

minified = csscompressor.compress(css)
print(minified)
# → ".nav{display:flex;padding:0 1rem;color:#fff}"

package main

import (
	"fmt"
	"github.com/tdewolff/minify/v2"
	"github.com/tdewolff/minify/v2/css"
)

func main() {
	m := minify.New()
	m.AddFunc("text/css", css.Minify)

	input := ".nav { display: flex; padding: 0px 1rem; color: #ffffff; }"
	output, _ := m.String("text/css", input)
	fmt.Println(output)
	// → ".nav{display:flex;padding:0 1rem;color:#fff}"
}

# Using cssnano via PostCSS CLI
npx postcss styles.css --use cssnano -o styles.min.css

# Using clean-css CLI
npx clean-css-cli styles.css -o styles.min.css

# Quick one-liner with Node.js
node -e "const CleanCSS=require('clean-css');console.log(new CleanCSS().minify('body { margin: 0px; }').styles)"
# → "body{margin:0}"

자주 묻는 질문