HTML·CSS·JavaScript·JSON·XML 압축 코드를 한곳에서 펼치기
브라우저 한 화면에서 HTML·CSS·JS·JSON·XML 압축 코드 펼치기
배포용 빌드는 용량 때문에 압축된 채로 나옵니다. HTML 템플릿은 한 줄로 뭉개지고, 스타일시트는 공백이 사라지며, JavaScript 번들은 납작해지고, JSON 로그는 한 덩어리로 찍히고, XML 내보내기는 들여쓰기 없이 도착합니다. 바이트는 아끼지만 디버깅은 고통스럽죠. 이 페이지는 스니펫을 붙여 넣었을 때 다시 읽을 수 있는 구조가 필요한 순간을 위해 만들었습니다. IDE 전체가 아니라, 붙여 넣거나 파일을 가져온 뒤 브라우저 탭 안에서 바로 펼치는 도구입니다.
여기서 말하는 「펼치기」와 하지 않는 일
이 도구의 펼치기는 줄바꿈과 들여쓰기를 되살려 중첩을 따라가고, 빠진 중괄호를 찾고, 티켓에 붙일 구간을 복사하기 쉽게 만드는 작업입니다. HTML 압축 해제, CSS 줄 정리, JavaScript 한 줄 풀기, JSON 들여쓰기 복원, XML 구조 펼치기처럼 형식마다 검색어는 다르지만 목적은 같습니다. 읽을 수 있는 텍스트. JavaScript 난독화 해제는 아닙니다. 바뀐 변수명, 지워진 주석, 의도적인 인코딩은 그대로 남습니다. 입력이 유효하지만 압축만 된 경우엔 펼치기가 도움이 되고, 일부러 난독화했다면 구조만 보일 뿐 원문은 돌아오지 않습니다.
형식별 포매터는 보통 파일 종류를 이미 알고 있다고 가정합니다. 여기서는 자동 감지로 붙여 넣은 내용을 맞는 엔진에 보내고, 틀렸을 때는 형식을 직접 고를 수 있습니다. HTML 안에 스크립트나 스타일이 묻혀 있으면, 선택 옵션으로 <script>·<style> 내부까지 펼칩니다. 페이지 전체는 한 줄인데 버그는 콜백 안에 있는 경우에 특히 유용합니다. JSON·XML·HTML이 약간 깨져 있으면 펼치기 전에 복구를 시도합니다. JSON 뷰어나 XML 도구와 같은 맥락이라, 끝 쉼표 하나나 닫는 태그 하나 때문에 작업 전체가 막히지 않게 합니다.
붙여 넣고 펼치기다섯 형식, 하나의 도구 모음
어떤 포매터 탭을 열지 고민할 필요 없습니다. 한 번 붙여 넣으면 HTML, CSS, JavaScript, JSON, XML을 처리하거나, 이미 알고 있다면 형식을 직접 고르세요.
펼친 뒤 뷰어에서 바로 확인
펼친 HTML은 홈 Playground에서 라이브 미리보기로 열립니다. JSON과 XML은 JSON 뷰어·XML 뷰어로 넘어가며, 결과가 이미 로드된 상태에서 트리를 클릭하며 볼 수 있습니다. 평평한 텍스트 상자만 보는 것과는 차원이 다릅니다.
붙여 넣은 내용은 기기에 남습니다
펼치기는 브라우저 탭 안에서만 실행됩니다. 스테이징 API, 고객 저장소, 장애 로그에서 가져온 코드라도 서버로 올리지 않습니다.
일반 포매터와 다른 점
여러 형식을 한곳에서 펼치고, 펼친 뒤 뷰어로 보는 것——대부분의 단일 목적 도구에는 없는 조합입니다.
실무에서 붙여 넣는 형식을 한 진입점에서
팀 작업에서 압축은 한 언어만 오지 않습니다. CMS 내보내기 HTML, CDN 스타일시트, 로그 한 줄 JSON, 옛 연동 XML——형식마다 즐겨찾기 포매터를 바꾸면 흐름이 끊깁니다. 들여쓰기, 복구, 출력을 한 화면에 두어 컨텍스트를 옮기기 전에 끝낼 수 있습니다.
이 페이지에서 압축 코드 펼치는 방법
1) 압축 코드 붙여 넣기·가져오기·입력
운영 출력을 입력 패널에 넣거나 파일을 가져옵니다. 형식은 「자동 감지」로 두고, 로그 조각이 JSON으로 계속 오인되면 JSON으로 고정하세요. 들여쓰기 설정은 펼치기 전에 적용됩니다.
2) 작업 공간에서 펼치기
자동 실행을 껐다면 「펼치기」를 누르거나, 붙여 넣으면 바로 실행됩니다. HTML에 스크립트가 묻혀 있으면 「인라인 JS·CSS도 펼치기」를 켜세요. 실패하면 HTML·JSON·XML은 복구를, 또는 형식을 수동으로 바꿔 보세요.
3) 지원 형식은 뷰어로 열기
도구 모음의 눈 아이콘 「뷰어에서 미리보기」를 사용합니다. HTML은 Playground, JSON은 JSON 뷰어, XML은 XML 뷰어로 넘어갑니다. CSS·JavaScript는 편집용으로만 펼치며, 미리보기 버튼은 비활성 상태입니다.
4) 복사·다운로드·계속 탐색
펼친 텍스트를 에디터에 복사하거나, 확장자에 맞게 다운로드하거나, 뷰어에서 노드를 눌러 구조를 더 파고들 수 있습니다. 들여쓰기나 복구를 바꾼 뒤 다시 실행하면 출력이 갱신됩니다.
압축 코드 펼치기 FAQ
클립보드에 있는 압축 코드부터 펼쳐 보세요
HTML·CSS·JavaScript·JSON·XML을 로컬에서 펼친 뒤, HTML·JSON·XML은 제대로 된 뷰어로 확인하세요.
압축 코드 펼치기
- HTML·CSS·JS·JSON·XML 자동 감지 또는 수동 선택
- 펼친 HTML·JSON·XML은 사이트 뷰어에서 미리보기
- HTML 인라인 스크립트·스타일 펼치기(선택)
- 깨진 JSON·XML·HTML 복구 경로
브라우저에서 실행. 계정 불필요.
한 줄짜리 운영 코드를 옆으로 스크롤하지 마세요
붙여 넣고, 펼치고, 형식이 맞으면 뷰어로 보고, 구조가 사람이 쓴 것처럼 읽히면 복사하세요.