본문으로 건너뛰기
🛠️
Whiz Tools

무료 코드 포맷터: JavaScript, Python, HTML 등 코드 정리

코드 포맷터는 JavaScript, Python, HTML, CSS 등 12개 이상의 프로그래밍 언어의 코드를 적절한 들여쓰기와 간격으로 자동 정리한다. 모든 처리가 브라우저 안에서만 이루어지므로 회원가입이나 서버 업로드 없이 안전하게 무료로 사용할 수 있다.

코드 포맷터

단 한 번의 클릭으로 코드를 포맷하세요. 언어를 선택하고 코드를 붙여넣기하면 제대로 포맷됩니다.

사용 방법:

  1. 드롭다운에서 프로그래밍 언어를 선택하세요.
  2. 입력 영역에 포맷되지 않은 코드를 붙여넣기하세요.
  3. '코드 포맷' 버튼을 클릭하세요.
  4. 출력 영역에서 포맷된 결과를 복사하세요.
로딩 계산기...
📚

문서화

코드 포매터란 무엇인가?

코드 포매터는 코드의 동작은 바꾸지 않고 일관된 들여쓰기, 줄 바꿈, 간격을 적용해 소스 코드를 다시 작성하는 도구입니다. 이 코드 포매터는 웹 브라우저에서 실행됩니다. JavaScript, Python, HTML, CSS를 포함한 12개의 프로그래밍 언어를 지원합니다.

이 코드 포매터는 어떻게 작동하는가

이 도구는 언어마다 다른 규칙 집합을 사용합니다. JSON을 제외하면 어떤 규칙 집합도 코드의 전체 구문 분석 트리를 만들지 않습니다.

  • JSON은 브라우저에 내장된 JSON 파서로 해석한 다음 공백 두 칸 들여쓰기로 다시 출력합니다. JSON이 유효하지 않으면 도구는 오류를 알리고 출력을 표시하지 않습니다.
  • **JavaScript, TypeScript, Java, C, C++, C#**은 하나의 포매터를 공유합니다. 이 포매터는 코드를 문자 단위로 훑으면서 중괄호, 괄호, 세미콜론을 추적합니다. 모든 {은 새 들여쓰기 블록을 시작하고, 모든 } 또는 ;은 줄을 끝냅니다. 주석과 따옴표로 묶인 문자열은 수정하지 않고 그대로 복사합니다. 원래 코드에 없던 연산자 주변이나 쉼표 뒤의 공백은 추가하지 않으며, 줄 바꿈과 들여쓰기만 다시 구성합니다.
  • Python은 각 줄의 기존 들여쓰기를 읽고 단계마다 공백 네 칸을 사용하여 다시 구성하며, Python 언어 자체가 사용하는 중첩 규칙을 따릅니다. 긴 줄을 나누거나 빈 줄을 추가하거나 연산자 주변에 공백을 넣지는 않으며, 각 줄의 들여쓰기 깊이만 정규화합니다.
  • CSS는 불필요한 줄 바꿈과 공백을 제거한 다음, 각 { 및 ; 뒤와 각 } 앞에 줄 바꿈을 추가합니다.
  • HTML 및 XML은 중첩된 태그의 각 수준마다 줄 바꿈과 두 칸 들여쓰기를 추가하며, <br>, <img>, <input>과 같은 표준 자체 닫힘 태그를 인식합니다.
  • SQL은 SELECT, FROM, WHERE, JOIN, ORDER BY와 같은 정해진 키워드를 대문자로 변환하고, 각 주요 절 앞에서 새 줄을 시작합니다.

입력을 실제로 구문 분석하는 경로는 JSON 경로뿐이므로, 다른 포매터는 괄호 누락이나 닫히지 않은 문자열 같은 구문 오류를 감지하지 않습니다. 실행되지 않는 코드라도 입력된 텍스트를 그대로 다시 포맷합니다.

지원되는 언어

언어일반적인 파일 확장자들여쓰기 폭
JavaScript.js2칸
TypeScript.ts2칸
HTML.html2칸
CSS.css2칸
Python.py4칸
Java.java4칸
C.c4칸
C++.cpp4칸
C#.cs4칸
SQL.sql절마다 줄 바꿈
JSON.json2칸
XML.xml2칸

코드를 포맷하는 방법

  1. 드롭다운 메뉴에서 프로그래밍 언어를 선택합니다.
  2. 포맷되지 않은 코드를 입력 상자에 붙여 넣습니다.
  3. "코드 포맷"을 선택합니다.
  4. 출력 상자에서 포맷된 결과를 복사합니다.

포맷 작업은 전적으로 브라우저 내부에서 수행됩니다. 코드는 서버로 전송되지 않습니다.

JavaScript 포맷 예시

포맷 전:

1function add(a, b) {
2    if (a > 0) { return a + b; }
3    return 0;
4}
5

포맷 후:

1function add(a, b) {
2  if (a > 0) {
3    return a + b;
4  }
5  return 0;
6}
7

포매터는 { } 안의 코드를 별도의 들여쓰기된 줄로 옮기고, 수준마다 두 칸을 사용하는 들여쓰기로 정규화했습니다. a > 0 및 a + b 주변의 간격은 이미 입력되어 있었으므로 발견한 그대로 유지했습니다.

Python 포맷 예시

포맷 전:

1def calculate_average(numbers):
2  if len(numbers) == 0:
3    return 0
4  total = sum(numbers)
5  return total / len(numbers)
6

포맷 후:

1def calculate_average(numbers):
2    if len(numbers) == 0:
3        return 0
4    total = sum(numbers)
5    return total / len(numbers)
6

원본 코드는 들여쓰기 단계마다 공백 두 칸을 사용했습니다. 포맷터는 각 줄의 들여쓰기를 단계마다 공백 네 칸으로 다시 구성했으며, 이는 Python의 공식 스타일 가이드인 PEP 8의 들여쓰기 단계마다 공백 네 칸 규칙에 맞습니다. 모든 줄의 순서는 그대로 유지했고 줄 안의 공백은 건드리지 않았습니다.

코드를 포맷하는 것이 중요한 이유

일관되지 않은 들여쓰기는 함수, 반복문 또는 조건문이 끝나는 위치를 파악하기 어렵게 만듭니다. 여러 사람이 편집한 코드는 탭과 공백을 섞어 들여쓰거나, 블록에 속한 줄이 서로 맞지 않게 되는 경우가 많습니다. 포매터를 실행하면 모든 파일이 같은 시각적 구조를 갖게 되므로 코드를 더 빠르게 훑어보고 잘못 배치된 괄호를 쉽게 찾을 수 있습니다.

제한 사항

  • 입력 크기: 이 도구는 최대 50,000자의 코드를 허용합니다. 더 긴 입력은 포맷 작업이 시작되기 전에 오류 메시지와 함께 거부됩니다.
  • 대부분의 언어에서는 구문을 검사하지 않음: JSON 입력만 구문 분석하고 유효성을 검사합니다. 나머지 11개 언어의 코드는 괄호가 누락되었거나 문자열이 닫히지 않았더라도 입력된 그대로 다시 포맷합니다. 이 경우 출력의 들여쓰기가 잘못될 수 있지만 오류로 표시되지는 않습니다.
  • 연산자 주변의 공백은 변경하지 않음: JavaScript, TypeScript 및 C 계열 포매터는 줄 바꿈과 들여쓰기만 재배치합니다. +, =, !== 주변이나 원래 없었던 쉼표 뒤에 공백을 삽입하지 않습니다.
  • PHP는 지원되지 않음: 지원되지 않는 언어를 선택하면 코드가 변경되지 않은 채 반환됩니다.

자주 묻는 질문

이 도구가 내 코드의 구문 오류를 검사합니까? JSON에 대해서만 검사합니다. JSON 입력은 해석 과정을 거치므로 유효하지 않은 JSON은 오류 메시지를 표시합니다. 지원하는 다른 언어의 코드는 구문이 유효한지 검사하지 않고 서식만 다시 정리합니다.

내 코드를 서버로 전송합니까? 아니요. 서식 지정은 JavaScript를 사용하여 브라우저 안에서만 실행됩니다. 코드는 어디에도 업로드되거나 저장되지 않습니다.

서식을 지정할 수 있는 코드의 최대 분량은 얼마입니까? 50,000자입니다. 이보다 많이 붙여 넣으면 서식 지정이 시작되기 전에 오류가 발생합니다.

연산자 주변이나 쉼표 뒤에 빠진 공백을 추가합니까? 아니요. JavaScript, TypeScript, Java, C, C++, C#에서는 추가하지 않습니다. 이 포맷터들은 중괄호와 세미콜론 주변의 들여쓰기와 줄바꿈만 다시 구성하고, 나머지는 각 줄에 작성된 그대로 복사합니다.

어떤 들여쓰기를 사용합니까? JavaScript, TypeScript, HTML, CSS, JSON, XML은 공백 두 칸을 사용합니다. Python, Java, C, C++, C#은 공백 네 칸을 사용합니다.

서식을 지정한 뒤에도 코드가 거의 그대로인 이유는 무엇입니까? 입력이 이미 일관된 간격과 한 가지 괄호 스타일을 사용했다면 포맷터는 주로 들여쓰기만 다시 구성하므로 변화가 작을 수 있습니다. 들여쓰기가 섞여 있거나 아주 적은 줄로 압축된 코드에서 가장 유용합니다.

참고 자료

  1. MDN Web Docs(Mozilla). JSON.stringify(). JSON.stringify() 참조 — 숫자형 space 인수가 들여쓰기 단계마다 사용할 공백의 수를 정합니다.
  2. Python Software Foundation. The Python Language Reference: Lexical analysis. Python 어휘 분석: 들여쓰기 — 줄 앞의 공백이 각 줄의 들여쓰기 수준을 정하며, 이것이 문장을 묶습니다.
  3. Python Software Foundation. PEP 8: Style Guide for Python Code. PEP 8 — "Use 4 spaces per indentation level."