JSON 포맷터

브라우저 처리

한 줄로 압축된 JSON을 들여쓰기한 구조로 정리하고, 문법 오류는 몇 번째 줄 몇 칸인지 알려 줍니다. 마지막 쉼표나 작은따옴표 같은 흔한 실수를 찾기 좋습니다.

도구 실행입력 후 결과 확인

JSON 포맷터 샘플 실행

API 응답이나 로그에 찍힌 JSON은 보통 한 줄로 압축돼 있어서 어떤 키 아래에 어떤 값이 있는지 눈으로 따라가기 어렵습니다. JSON 포맷터는 이 문자열을 실제로 파싱한 뒤 들여쓰기를 넣어 다시 써 주기 때문에, 중첩된 객체와 배열의 구조가 한눈에 보입니다.

브라우저 처리

샘플 입력

{"user":{"id":17,"name":"Kim"},"roles":["admin","editor"],"active":true}

샘플 결과

{
  "user": {
    "id": 17,
    "name": "Kim"
  },
  "roles": [
    "admin",
    "editor"
  ],
  "active": true
}

자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.

JSON 포맷터 사용 가이드

파싱에 실패하면 브라우저가 알려 주는 오류 위치를 '몇 번째 줄 몇 칸' 형태로 바꿔 보여 줍니다. 문법 오류는 대부분 마지막 항목 뒤에 남은 쉼표, 작은따옴표로 감싼 문자열, 닫히지 않은 괄호처럼 몇 가지 유형으로 정리되므로, 표시된 위치 바로 앞부분을 보면 원인을 빨리 찾을 수 있습니다.

반대로 '축소'는 들여쓰기와 줄바꿈을 모두 지운 한 줄 JSON을 만듭니다. 설정 값이나 요청 본문을 환경 변수, curl 명령, 메신저에 붙여 넣을 때 길이를 줄이는 용도로 씁니다.

사용 방법

'JSON 입력' 칸에 정리할 JSON을 붙여 넣습니다. 예시가 필요하면 '샘플'을 눌러 기본 데이터를 채울 수 있습니다.
들여쓰기 폭을 '2칸', '4칸', 'Tab' 중에서 고른 뒤 '정렬'을 누르면 'JSON 결과' 칸에 정리된 결과와 줄 수·용량이 표시됩니다.
한 줄로 압축하려면 '축소'를 누릅니다.
결과는 '복사'로 클립보드에 담거나 '다운로드'로 .json 파일로 저장합니다.

예시: 한 줄 API 응답 정렬 (2칸)

입력

{"user":{"id":17,"name":"Kim"},"roles":["admin","editor"],"active":true}

결과

{
  "user": {
    "id": 17,
    "name": "Kim"
  },
  "roles": [
    "admin",
    "editor"
  ],
  "active": true
}

값과 키 순서는 바뀌지 않고 공백만 추가됩니다. 같은 결과에 '축소'를 누르면 입력과 같은 한 줄 JSON으로 돌아갑니다.

이럴 때 쓰면 좋아요

개발자 도구 네트워크 탭에서 복사한 한 줄짜리 응답을 구조별로 펼쳐 필요한 필드를 찾을 때
팀원이 메신저로 보낸 JSON이 파싱 오류를 낼 때 어느 줄 어느 칸에서 문법이 깨졌는지 확인할 때
package.json이나 설정 파일을 팀 규칙에 맞는 들여쓰기(2칸 또는 4칸)로 통일할 때
요청 본문을 curl 명령이나 환경 변수에 넣기 위해 한 줄로 압축할 때

문제가 생겼을 때

Unexpected token 오류가 마지막 줄 근처에서 남

객체나 배열의 마지막 항목 뒤에 쉼표가 남아 있는 경우가 가장 흔합니다. JSON은 자바스크립트와 달리 끝 쉼표를 허용하지 않으므로 지운 뒤 다시 '정렬'을 누르세요.

문자열에서 오류가 나는데 내용은 정상으로 보임

JSON 문자열은 반드시 큰따옴표로 감싸야 합니다. 작은따옴표나, 워드프로세서에서 자동 변환된 둥근 따옴표(“ ”)가 섞였는지 확인하세요.

주석이 들어 있는 설정 파일이 파싱되지 않음

표준 JSON은 // 나 /* */ 주석을 지원하지 않습니다. tsconfig처럼 주석을 허용하는 JSONC 파일이라면 주석을 지운 뒤 정리하세요.

활용 팁

오류 위치가 표시되면 그 칸만 보지 말고 바로 앞 줄까지 함께 보세요. 쉼표 누락처럼 실제 원인은 표시 위치보다 앞에 있는 경우가 많습니다.
아주 큰 응답은 문제가 되는 배열이나 객체만 잘라서 넣으면 오류 위치를 더 빨리 좁힐 수 있습니다.
실제 서비스 토큰이나 고객 정보가 포함된 응답은 값을 가짜로 바꾼 뒤 공유용 결과를 만드는 습관을 들이면 안전합니다.

자주 묻는 질문

정렬하면 키 순서가 바뀌나요?

바뀌지 않습니다. 이 도구는 파싱한 값을 같은 순서 그대로 다시 쓰고 들여쓰기만 추가합니다. 키를 알파벳순으로 정렬하는 기능은 없습니다.

큰 숫자가 달라질 수 있나요?

자바스크립트의 숫자 범위를 넘는 아주 큰 정수(약 9천조 초과)는 파싱 과정에서 끝자리가 반올림될 수 있습니다. 주문번호처럼 긴 ID는 문자열로 다루는 것이 안전합니다.

2칸, 4칸, Tab 중 무엇을 써야 하나요?

정답은 없고 프로젝트 규칙을 따르면 됩니다. 자바스크립트 생태계는 2칸이 흔하고, 파이썬 쪽 도구가 만든 JSON은 4칸이 많습니다. 공유용이면 2칸이 가장 짧습니다.