워드프레스 운영 중 사용자 정의 HTML 위젯이나 테마 템플릿에 직접 구현한 소스코드를 삽입해야 하는 경우가 많습니다. 그런데 줄바꿈과 들여쓰기가 그대로 남은 코드를 올리면 ‘소스 보기’만으로 로직과 디자인이 한눈에 읽혀서, 복사해 가기가 너무 쉽습니다.
그렇다고 시중의 무리한 코드 압축기(Minifier)를 쓰면 구문을 과하게 바꾸다가 자바스크립트나 외부 URL(https://…)이 깨져 페이지 전체가 먹통이 되는 경우가 종종 있습니다.
그래서 주석과 불필요한 줄바꿈·공백만 정리하고, 코드의 동작과 화면 모양은 건드리지 않도록 설계한 ‘워드프레스 맞춤형 안전 우선 한 줄 정리기’를 만들었습니다. 자바스크립트의 문자열·정규식·외부 주소(https://, //cdn…)와 애드센스 같은 광고 코드는 그대로 보존하고, 세미콜론이 없어 한 줄로 합치면 깨질 수 있는 코드는 미리 경고해 줍니다. 아래에서 바로 사용해 보세요.
바로 사용해보세요
HTML 한 줄 정리기
📌 이런 분들께 특히 추천합니다!
- 구문 오류 걱정을 줄이고 싶은 분: 숏코드나 HTML 위젯에 스크립트, CSS, 광고 코드를 넣다가 구문 에러(Syntax Error)가 났던 분. 주석은
<script>와<style>안에서만 지우고, 문자열·정규식 안의//는 건드리지 않습니다. - 주석 청소를 자동으로 하고 싶은 분: 자바스크립트 한 줄 주석(
//)과/* */주석, HTML 주석(<!-- -->)을 일일이 손으로 지울 필요 없이 한 번에 정리하고 싶은 분.http://,https://는 물론//cdn.example.com/…같은 주소와 본문 속//글자도 그대로 보존됩니다. - 소스를 한눈에 보기 어렵게 하고 싶은 분: 워드프레스 사용자 정의 HTML 블록이나 위젯의 소스를 ‘소스 보기’에서 곧바로 훑어보기 어렵게 만들고 싶은 분 (※ 코드 정렬 도구로 다시 펼칠 수 있으므로 완벽한 복제 방지는 아닙니다)
- 코드를 빽빽한 한 줄로 정리하고 싶은 분: 위젯이나 숏코드에 넣을 코드를 줄바꿈 없는 한 줄로 만들고 싶은 분
주요 기능 및 특징
- 구문을 해치지 않는 주석 제거: HTML 주석과 CSS 주석, 그리고 코드 깨짐의 주범인 자바스크립트 한 줄 주석(
//)까지 지웁니다. 문자열, 정규식, 템플릿 문자열(백틱) 안의//나/*는 주석으로 오인하지 않습니다. 애드센스 광고 코드나 외부 스크립트 태그의 주소가 잘리지 않습니다. - 화면이 달라지지 않는 공백 정리: 줄바꿈과 들여쓰기를 한 칸 공백으로 바꿔 한 줄로 합칩니다.
div,p,li처럼 블록 태그 사이의 공백만 제거하고,<b>가</b> <i>나</i>처럼 글자 사이 띄어쓰기는 보존해 화면 모양을 유지합니다. 와<pre>·<textarea>안의 줄바꿈도 그대로 보존됩니다. - 깨질 수 있는 코드는 사전 경고: 자바스크립트가 줄바꿈으로 문장을 구분하고 세미콜론(;)이 없으면, 한 줄로 합칠 때 오류가 날 수 있습니다. 이런 스크립트는 결과 아래에 경고를 띄우니, 세미콜론을 붙인 뒤 다시 정리하면 됩니다.
- 용량 분석 대시보드와 복사 기능: 정리 전후의 바이트 크기와 절감률을 바로 보여 줍니다. 복사 버튼은 브라우저가 클립보드 접근을 막은 환경에서는 대체 복사 방식으로 자동 전환됩니다.
사용 방법
- 입력창에 정리할 HTML, CSS, JS 코드를 붙여넣습니다.
- [한 줄 정리] 버튼을 클릭합니다.
- 결과가 나오면 용량 절감 통계와 경고 메시지(있는 경우)를 확인하고, [복사하기]로 클립보드에 담습니다.
- 워드프레스 HTML 위젯이나 원하는 코드 블록에 그대로 붙여넣으세요.
⚠️ 이것만은 주의해 주세요!
Q. 코드 안에 웹사이트 주소(https://...)나 광고 스크립트가 있는데 안 깨지나요?
A. 주소와 광고 스크립트는 그대로 보존됩니다. https:// 는 물론 //cdn... 처럼 슬래시 두 개로 시작하는 주소와, 문자열이나 정규식 안의 // 도 주석으로 오인하지 않습니다.
다만 자바스크립트에 세미콜론(;)이 없고 줄바꿈으로만 문장을 구분한 코드는 한 줄로 합치면 동작이 달라질 수 있습니다. 이런 경우 결과 아래에 경고가 표시되니, 문장 끝에 세미콜론을 붙인 뒤 다시 정리해 주세요. 정리 후에는 실제 페이지에서 한 번 확인하시길 권장합니다.도움이 되셨다면 북마크해두고 필요할 때마다 사용하세요! 😊
