HTML 압축

주석을 지우고 태그 사이의 연속된 공백을 줄여 HTML을 작게 만듭니다. pre, textarea, script 안의 내용은 그대로 두므로 화면에 보이는 모습은 바뀌지 않습니다. <style> 블록은 CSS로 압축하고, 줄어든 바이트 수를 결과 옆에 보여 줍니다.

사용법

1. 언어를 고르고(붙여 넣거나 파일을 끌어 놓으면 자동으로 감지) 코드를 붙여 넣거나 파일을 엽니다.
2. 정리는 Prettier로, SQL은 sql-formatter로 다시 씁니다. 들여쓰기와 줄 너비를 고르고 자바스크립트는 따옴표와 세미콜론, SQL은 방언과 키워드 대소문자도 정할 수 있습니다.
3. 압축은 HTML, CSS, JSON, XML, SQL, GraphQL에서 주석과 공백을 지웁니다. 자바스크립트와 타입스크립트는 공백과 주석만 줄입니다.
4. 문법 오류는 정확한 줄과 열을 표시합니다. 오류를 누르면 그 위치로 이동합니다.
5. 결과를 복사하거나 내려받고, 새 입력으로 쓸 수도 있습니다.

• 정리는 브라우저 안의 백그라운드 워커에서 실행되므로 큰 파일도 페이지가 멈추지 않고 코드는 업로드되지 않습니다.
• 언어 플러그인은 그 언어를 처음 쓸 때만 불러옵니다.
• 주석이나 끝 쉼표가 있는 JSON(JSONC)도 정리할 수 있지만, 압축하려면 엄격한 JSON이어야 합니다.
• YAML과 마크다운은 안전하게 압축할 수 없어 정리만 제공합니다.

코드 포매터를 쓰는 이유

서식이 통일되면 코드 리뷰에서 공백 대신 로직에 집중할 수 있고 diff도 작게 유지됩니다. Prettier는 구문 트리에서 파일 전체를 다시 출력하므로 원래 들여쓰기가 어떻든 결과가 같습니다. 고를 수 있는 옵션은 들여쓰기 폭이나 탭, 줄 너비(기본 80자), 자바스크립트의 작은따옴표·큰따옴표와 세미콜론 여부 정도입니다.

정리하기 전에 코드를 먼저 파싱하므로 간단한 문법 검사로도 쓸 수 있습니다. 괄호를 빠뜨렸거나 태그를 닫지 않았다면 정리가 멈추고 정확한 위치에 표시가 생겨, 스택 트레이스를 읽는 것보다 빨리 원인을 찾을 때가 많습니다.

정리와 압축

정리(beautify)는 사람이 읽기 좋게 줄바꿈과 들여쓰기를 넣습니다. 압축(minify)은 기계를 위해 주석과 공백을 지웁니다. HTML은 공백을 줄이되 pre와 textarea 내용은 그대로 두고, CSS는 /*! 라이선스 */ 블록을 뺀 주석을 지우며, SQL·JSON·XML·GraphQL은 한 줄로 만듭니다. 자바스크립트와 타입스크립트는 공백과 주석만 줄이고 번들러처럼 변수 이름을 바꾸지는 않습니다. YAML과 마크다운은 공백이 의미를 가지므로 정리만 지원합니다.

SQL 정리

SQL에는 정해진 표준 스타일이 없습니다. 여기서는 키워드를 대문자나 소문자로 맞출 수 있고, 방언을 고르면 MySQL, PostgreSQL, SQL Server(T-SQL), Oracle PL/SQL, SQLite, BigQuery, Snowflake 등의 문법, 예를 들어 백틱 식별자, :: 형변환, $1 매개변수를 제대로 처리합니다.

자주 묻는 질문