~ / developer / json-formatter

{ JSON Formatter }

붙여넣고 버튼 한 번. 모든 처리는 브라우저에서만 일어납니다.

input.json
output.json
waiting for input...

사용법

  1. 왼쪽 input.json 칸에 JSON을 붙여넣습니다. 구조를 먼저 보고 싶다면 Sample 버튼으로 예시 데이터를 불러오세요.
  2. Format을 누르면 들여쓰기가 적용된 보기 좋은 JSON이 오른쪽 output.json에 나옵니다. 입력 칸에서 Ctrl + Enter(Mac은 ⌘ + Enter)를 눌러도 같은 동작을 합니다.
  3. 들여쓰기는 indent: 2, indent: 4, indent: tab 중에서 고를 수 있고, 바꾸는 즉시 다시 정렬됩니다.
  4. Minify는 공백과 줄바꿈을 모두 걷어내 한 줄짜리 JSON으로 압축합니다.
  5. 결과는 Copy output으로 복사하고, Clear로 양쪽을 비웁니다.

정렬(Pretty print)과 압축(Minify)의 차이

JSON은 공백이 의미를 갖지 않는 포맷이라, 줄바꿈과 들여쓰기를 넣든 빼든 데이터 자체는 똑같습니다. 그래서 같은 내용을 목적에 따라 두 가지 모양으로 씁니다.

예를 들어 {"a":1,"b":[true,null]}를 indent 2로 정렬하면 키마다 한 줄씩, 배열 원소도 한 줄씩 펼쳐집니다. 출력 아래에는 결과 문자 수가 함께 표시되니 압축 전후 크기를 비교할 때 참고하세요.

이 도구가 하는 일

입력은 브라우저 내장 JSON.parse로 읽고 JSON.stringify로 다시 써서 출력합니다. 서버로 전송되는 데이터는 없습니다. 파싱에 성공하면 ✓ valid JSON이, 실패하면 ✗와 함께 브라우저가 알려주는 오류 메시지가 표시되므로 간단한 문법 확인도 겸할 수 있습니다. 오류 위치를 더 자세히 짚어보고 싶다면 JSON 유효성 검사기를 이용하세요.

다시 직렬화하는 방식이라 몇 가지가 원본과 달라질 수 있습니다. 같은 키가 두 번 나오면 마지막 값만 남고, 1.0 같은 숫자는 1로, 아주 큰 정수(약 9천조 초과)는 정밀도가 깎여 표시됩니다. 주석, 작은따옴표, 끝에 붙은 쉼표(trailing comma)는 표준 JSON이 아니어서 오류로 처리됩니다.

자주 묻는 질문

JSON 정렬하면 키 순서도 바뀌나요?
아니요. 입력에 적힌 순서를 그대로 유지합니다. 다만 "2", "10"처럼 정수 형태의 키는 JavaScript 객체 규칙상 숫자 오름차순으로 앞에 정렬될 수 있습니다.
Unexpected token 오류는 왜 나나요?
대부분 작은따옴표 사용, 키에 따옴표 누락, 마지막 원소 뒤 쉼표, 주석 포함 중 하나입니다. 오류 메시지에 표시되는 위치(position) 근처를 확인해 보세요.
회사 API 응답을 붙여넣어도 안전한가요?
모든 변환은 브라우저 안에서만 일어나고 입력 내용을 서버로 보내지 않습니다. 그래도 토큰이나 비밀번호가 담긴 데이터는 공용 PC에서 다루지 않는 편이 좋습니다.
탭 들여쓰기와 스페이스 중 무엇을 써야 하나요?
정답은 없지만 JavaScript·웹 프로젝트는 2칸, Python 생태계는 4칸을 흔히 씁니다. 팀의 코드 스타일(.editorconfig, Prettier 설정)을 따르는 것이 가장 좋습니다.

관련 도구

이 도구와 함께 보면 좋은 글