코드 정렬(Beautify)

JavaScript·CSS·HTML 코드를 보기 좋게 들여쓰기합니다.

언어 들여쓰기

남이 넘겨준 스크립트가 한 줄로 붙어 있거나, 여러 사람이 손댄 CSS의 들여쓰기가 제각각인 경우가 있습니다. 이런 코드는 읽는 데만 한참 걸리고 수정하다 실수도 나기 쉽습니다.

이 도구는 붙여넣은 코드의 줄바꿈과 들여쓰기를 규칙에 맞게 다시 잡아줍니다. 에디터 설정을 건드리지 않고 그 자리에서 확인할 때 유용합니다.

어떻게 계산되나요

코드를 붙여넣고 언어(JavaScript·CSS·HTML)와 들여쓰기(스페이스 2·스페이스 4·탭)를 고른 뒤 정렬을 누릅니다. 결과는 아래 칸에 나오고 복사로 가져갈 수 있습니다.

한 줄로 뭉친 코드를 블록 단위로 나눠 줄을 바꾸고, 중괄호나 태그의 깊이에 맞춰 들여쓰기를 다시 계산합니다. 연산자·콤마 주변 공백과 문장 구분도 일정한 규칙으로 맞춥니다. 압축된 코드를 다시 읽을 수 있게 펴는 용도로도 씁니다.

정렬은 서식만 바꿉니다. 압축 과정에서 짧게 바뀐 변수명이나 지워진 주석은 복원되지 않습니다. 또 언어를 잘못 고르면(예: HTML을 JavaScript로) 결과가 엉키므로 선택을 먼저 확인하세요.

Beautify: 압축되거나 흐트러진 코드를 사람이 읽기 좋은 서식으로 되돌리는 작업. Prettify라고도 부릅니다.
들여쓰기: 블록의 깊이를 공백이나 탭으로 표시하는 것. 팀 규칙에 따라 스페이스 2칸·4칸·탭 중 하나로 통일합니다.
탭 vs 스페이스: 탭은 편집기 설정에 따라 폭이 달라지고, 스페이스는 어디서 열어도 같은 폭으로 보입니다. 협업할 때는 한쪽으로 정해두는 편이 좋습니다.
미니파이(minify): 반대로 공백과 주석을 없애 파일 크기를 줄이는 작업. 배포용 코드에 씁니다.

압축된 스크립트를 정렬하면 원본이 되나요?

읽기는 훨씬 쉬워지지만 원본과 같아지지는 않습니다. 축약된 변수명과 삭제된 주석은 되돌릴 수 없으므로 구조를 파악하는 용도로 보세요.

JSON도 정렬되나요?

언어를 JavaScript로 두면 대체로 보기 좋게 펴집니다. 다만 JSON 규격 검사는 하지 않으므로 문법 오류까지 확인하려면 JSON 전용 도구를 쓰는 편이 정확합니다.

결과가 깨져서 나옵니다

먼저 언어 선택이 실제 코드와 맞는지 확인하세요. `<script>`·`<style>`이 섞인 문서는 HTML로 골라야 하고, 서버 템플릿 문법(PHP 태그, `{{ }}` 등)이 섞이면 정렬이 어긋날 수 있습니다.

코드가 서버로 전송되나요?

정렬은 브라우저 안에서만 실행되며 붙여넣은 코드는 전송되거나 저장되지 않습니다. 그래도 키나 비밀번호가 들어 있는 코드는 지운 뒤 사용하세요.