liminfo

CSS Minifier

CSS 코드 최적화 및 압축 도구

538 bytes

CSS Minifier 소개

CSS 미니파이어는 스타일의 렌더링 결과를 바꾸지 않으면서 파일 크기를 줄이는 일련의 텍스트 변환을 적용하는 무료 브라우저 기반 도구입니다. 블록 주석(/* ... */) 제거, 연속 공백·줄 바꿈을 단일 공간으로 축소, 중괄호·콜론·세미콜론·쉼표 주변 공백 제거, 닫는 중괄호 앞 마지막 세미콜론 제거, 6자리 16진수 색상 단축(#ffffff → #fff), 0 값의 단위 제거(0px → 0)를 수행합니다. 모든 변환은 서버 통신 없이 클라이언트 측에서 처리됩니다.

웹 개발자와 빌드 파이프라인 엔지니어는 CSS 미니파이를 통해 사용자에게 전달되는 스타일시트 크기를 줄여 페이지 로드 속도와 Lighthouse 성능 점수를 향상시킵니다. webpack, Vite, esbuild 같은 프로덕션 빌드 도구에는 CSS 미니파이 기능이 내장되어 있지만, 이 온라인 도구는 빠른 점검, 미니파이 출력 디버깅, 빌드 도구를 지원하지 않는 HTML 이메일 템플릿이나 CMS 플랫폼용 CSS 스니펫 준비에 유용합니다.

도구는 원본 바이트 수, 미니파이 후 바이트 수, 절감 비율을 측정하여 표시합니다. 공백 제거와 주석 삭제만으로도 일반적인 CSS 파일은 20~40% 크기가 줄어듭니다. 결과는 읽기 전용 텍스트 영역에 표시되며 원클릭으로 클립보드에 복사할 수 있습니다.

주요 기능

  • 여러 줄 주석을 포함한 모든 CSS 블록 주석(/* ... */) 제거
  • 토큰 사이의 모든 공백과 줄 바꿈을 단일 공백으로 축소
  • 중괄호 {}, 콜론 :, 세미콜론 ;, 쉼표 ,, 결합자 > ~ + 주변 공백 제거
  • 닫는 중괄호 앞 마지막 세미콜론 제거로 각 규칙 블록 단축
  • 자리쌍이 동일한 6자리 16진수 색상을 3자리로 단축(예: #aabbcc → #abc)
  • 0px, 0em, 0rem, 0%를 모두 단순 0으로 단위 제거
  • 원본 바이트, 미니파이 바이트, 절감 비율을 보여주는 결과 요약 패널
  • 미니파이 출력을 어느 프로덕션 스타일시트에도 바로 붙여넣는 원클릭 복사

자주 묻는 질문

CSS 미니파이란 실제로 무엇을 하나요?

스타일시트가 올바르게 동작하는 데 필요하지 않은 모든 문자 — 주석, 들여쓰기, 줄 바꿈, 불필요한 공백 — 를 제거합니다. 또한 3자리 16진수 색상이나 단위 없는 0 같은 단축 표현도 적용합니다. 결과 CSS는 원본과 기능적으로 동일하지만 네트워크 전송에 필요한 바이트가 줄어듭니다.

파일 크기를 얼마나 절감할 수 있나요?

주석과 서식이 포함된 일반적인 수기 CSS는 미니파이 후 20~40% 크기가 줄어듭니다. 주석이 많거나 공백이 많은 파일은 50% 이상 절감되기도 합니다. 도구가 정확한 바이트 수와 절감 비율을 표시하므로 해당 파일의 효과를 직접 확인할 수 있습니다.

CSS 미니파이를 하면 스타일이 깨질 수 있나요?

이 도구의 변환은 안전하며 모든 CSS 규칙의 의미를 그대로 보존합니다. 주석 제거, 공백 축소, 16진수/0 단축은 셀렉터나 속성의 동작 방식을 변경하지 않습니다. 미니파이 후 예상치 못한 스타일 변화가 생겼다면 미니파이어가 만든 버그가 아니라 원본 CSS에 있던 버그가 드러난 것입니다.

이 도구는 사용하지 않는 CSS 규칙도 제거하나요?

아니요. 이 도구는 미니파이어이지 퍼지 도구가 아닙니다. 입력된 코드를 압축할 뿐, HTML에서 실제로 사용되는 클래스를 분석하여 나머지를 제거하지는 않습니다. 미사용 CSS 제거에는 PurgeCSS, UnCSS, 또는 Tailwind의 내장 콘텐츠 스캔 기능을 사용하세요.

webpack이나 Vite의 CSS 미니파이 대신 이 도구를 써야 하나요?

프로덕션 프로젝트에는 빌드 도구에 내장된 CSS 미니파이(css-minimizer-webpack-plugin, Vite의 LightningCSS, PostCSS + cssnano)를 사용하세요. 이 온라인 도구는 빠른 임시 미니파이, HTML 이메일 인라인 CSS 준비, 스니펫 압축 결과 확인에 가장 적합합니다.

16진수 색상 단축 규칙은 어떻게 되나요?

6자리 16진수 색상은 각 자리쌍이 동일할 때 3자리로 단축됩니다. #aabbcc → #abc, #ffffff → #fff, #112233 → #123이 됩니다. #a1b2c3처럼 자리쌍(a1, b2, c3)이 동일하지 않은 색상은 단축할 수 없습니다. 미니파이어는 안전한 경우에만 이 변환을 적용합니다.

0 값에서 단위를 제거하는 이유는 무엇인가요?

CSS에서 0px, 0em, 0%, 0rem은 모두 단위 없는 0과 동일합니다. 브라우저는 값을 해석하는 데 단위가 필요 없습니다. 단위를 제거하면 0 값마다 2~3자를 단축할 수 있고, 스타일시트에는 margin, padding, border-width 등에서 0 값이 자주 등장합니다.

Sass나 Less도 이 도구로 미니파이할 수 있나요?

아니요. 이 도구는 일반 CSS 문법만 처리합니다. Sass(.scss/.sass)와 Less(.less)는 변수, 중첩, 믹스인 등 해당 전처리기가 먼저 컴파일해야 하는 추가 문법을 사용합니다. Sass나 Less를 먼저 CSS로 컴파일한 다음 출력 결과를 여기에 붙여넣어 미니파이하세요.