JS/CSS 압축기

언제 사용하나요?

인라인 스크립트나 임베드 코드의 파일 크기를 줄이거나, 배포 전 간단한 스니펫을 압축해야 할 때 사용합니다.

사용 방법

• JS 또는 CSS 코드를 입력합니다.
• 압축 버튼을 누르면 공백과 불필요한 문자가 제거됩니다.
• 압축된 코드를 복사합니다.

입력값 안내

압축하고자 하는 JavaScript 스크립트 또는 CSS 스타일 코드를 텍스트 영역에 입력합니다.

계산·변환 기준

정규표현식과 문자열 조작 로직을 활용하여 소스 코드 내부의 불필요한 줄바꿈, 다중 공백, 탭, 주석(단일행 `//`, 다중행 `/* */`)을 일괄 탐색하여 제거함으로써 최종 바이트(Byte) 크기를 최소화(Minify)합니다.

사용 예시

• 배포 전 크기 줄이기 - 짧은 스니펫이나 임베드 코드의 크기를 줄입니다.
• 배포 전 빠른 점검 - 입력값과 생성 결과를 확인해 개발·운영 작업 전 오류 가능성을 줄입니다.
• 문서·리뷰 보조 - 정리된 결과를 복사해 개발 문서, 이슈, 코드 리뷰 코멘트에 바로 붙여넣습니다.

예시

• 여러 줄의 공백과 주석이 섞인 5KB JS 파일 → 모든 공백이 제거된 1줄짜리 2KB 코드로 압축
• 배포 전 CSS 파일 → 공백·줄바꿈을 제거해 용량을 절반 이하로 축소

주의사항

• 압축(minify)된 결과는 참고용입니다. 프로덕션 배포 전 반드시 실제 환경에서 동작을 검증하세요.
• 입력 코드는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

Minify란

공백, 줄바꿈, 주석 등 실행에 불필요한 문자를 제거해 파일 크기를 줄입니다. JS·CSS 파일을 압축하면 네트워크 전송량이 줄어 페이지 로딩이 빨라집니다.

빌드 도구와의 차이

webpack, Vite, Rollup 같은 번들러의 minify 기능이 더 고급 최적화를 수행합니다. 이 도구는 빠른 수동 압축 확인이나 소규모 프로젝트에 적합합니다.

자주 묻는 질문

난독화 도구인가요?

주 목적은 크기 축소이며 JavaScript는 mangle과 compress를 함께 적용합니다.

압축할 코드가 외부로 전송되나요?

아니요. 압축은 브라우저 안에서만 처리되어 코드가 외부 서버로 전송되지 않습니다.

JS와 CSS를 함께 압축하나요?

JavaScript와 CSS 각각에 맞는 압축 규칙을 적용하므로 코드 종류를 선택해 압축합니다.

압축하면 동작이 달라지나요?

공백과 줄바꿈만 제거하므로 코드 동작은 동일합니다. 다만 압축 결과는 적용 전 한 번 테스트하는 것이 안전합니다.

관련 도구

• JavaScript 포매터 - JavaScript 코드를 Prettier 기준으로 읽기 좋게 정리합니다.
• CSS 포매터 - minify되거나 뒤섞인 CSS 코드를 선택자·속성별로 줄 분리해 정렬합니다. @media 쿼리와 :root 변수 블록도 계층에 맞게 들여쓰기합니다.
• 파일 크기 변환기 - Byte, KB, MB, GB, TB 파일 크기 단위를 1000 또는 1024 기준으로 변환합니다.
• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.
• 비밀번호 생성기 - 길이, 문자셋, 개수를 선택해 브라우저에서 안전한 랜덤 비밀번호를 생성합니다.