CSS 압축/정리

CSS 압축(Minify)에 대해서

CSS 압축은 스타일시트에서 불필요한 공백, 줄바꿈, 주석, 중복 세미콜론 등을 제거하여 파일 크기를 줄이는 최적화 과정입니다. 브라우저는 공백이나 주석 없이도 CSS를 완벽하게 해석하기 때문에, 압축된 CSS는 기능적으로 동일하면서도 전송 용량이 크게 줄어듭니다. 반대로 CSS 정리(Beautify)는 한 줄로 뭉쳐진 코드를 적절한 들여쓰기와 줄바꿈으로 펼쳐서 사람이 읽기 편한 형태로 되돌리는 작업입니다. 개발 중에는 정리된 CSS로 작업하고, 배포할 때는 압축된 CSS를 사용하는 것이 웹 성능 최적화의 기본입니다.

시작하기

1. 입력창에 CSS 코드를 직접 입력하거나 붙여넣기 합니다.
2. '압축(Minify)' 버튼을 클릭하면 공백과 주석이 제거된 최소화 CSS가 생성됩니다.
3. '정리(Beautify)' 버튼을 클릭하면 들여쓰기와 줄바꿈이 추가된 깔끔한 CSS로 변환됩니다.
4. 정리 모드에서는 들여쓰기 크기(2칸 또는 4칸)를 원하는 대로 선택할 수 있습니다.
5. 결과 영역의 '복사' 버튼을 클릭하여 변환된 CSS를 클립보드에 복사합니다.
6. 필요에 따라 결과를 프로젝트의 CSS 파일에 바로 붙여넣어 사용합니다.

기능 소개

• CSS 압축(Minify): 공백, 줄바꿈, 주석을 모두 제거하여 최소 크기의 CSS를 생성합니다.
• CSS 정리(Beautify): 압축된 코드를 읽기 쉬운 형태로 포맷팅합니다.
• 들여쓰기 설정: 정리 시 2칸 또는 4칸 들여쓰기를 선택할 수 있습니다.
• 실시간 미리보기: 입력과 동시에 결과를 바로 확인할 수 있습니다.
• 용량 비교: 원본과 압축 결과의 크기 차이를 확인하여 절감률을 파악합니다.
• 클립보드 복사: 변환된 CSS를 한 번에 복사하여 바로 사용할 수 있습니다.

주의할 점

• 소스맵(source map)을 함께 관리하면 압축된 CSS에서도 원본 위치를 추적하여 디버깅할 수 있습니다.
• 압축은 공백과 주석만 제거합니다. 사용하지 않는 CSS 규칙을 제거하려면 PurgeCSS 같은 별도 도구를 사용하세요.
• Webpack, Vite 등 빌드 도구에 내장된 CSS 압축 플러그인을 사용하면 배포 과정에서 자동으로 처리됩니다.
• CSS 문법 오류가 있는 경우 압축 결과가 예상과 다를 수 있으니, 먼저 문법을 확인하세요.
• 정리(Beautify) 기능은 디버깅이나 코드 리뷰에 매우 유용합니다.

활용 팁

• 프로덕션 배포: 개발 완료된 CSS를 압축해서 웹서버에 올리면 페이지 로딩 시간이 단축됩니다.
• 타사 CSS 분석: 외부 라이브러리나 프레임워크의 압축된 CSS를 정리해서 코드 구조를 파악할 수 있습니다.
• 이메일 템플릿: 인라인 CSS를 사용하는 이메일 템플릿에서 불필요한 공백을 제거하여 용량을 줄입니다.
• 빌드 파이프라인 검증: 빌드 도구가 제대로 압축했는지 수동으로 비교 확인할 때 활용합니다.

자주 하는 질문