</>DevTools

{ }JSON 포맷터

JSON 데이터를 깔끔하게 정리하고 유효성 검증

JSON 포맷터 사용 가이드와 파싱 오류 해결법

JSON은 규칙이 매우 적은 데이터 형식입니다. 그래서 배우기 쉽지만, 규칙이 적은 만큼 어긋났을 때 파서가 알려주는 정보도 빈약합니다. 이 도구는 붙여넣은 JSON을 들여쓰기해서 구조를 눈으로 확인하게 해주고, 문법이 깨진 경우 브라우저 파서가 내놓은 오류 메시지를 그대로 보여줍니다. 아래 내용은 그 오류 메시지를 해석하는 방법과, 포맷과 압축을 각각 어디에 써야 하는지에 대한 설명입니다.

표준 JSON이 허용하는 것과 허용하지 않는 것

많은 파싱 오류는 JavaScript 객체 리터럴과 JSON을 같은 것으로 착각해서 생깁니다. JSON은 JavaScript에서 파생됐지만 훨씬 좁은 규격(RFC 8259)이고, JavaScript에서 문제없이 쓰던 표기 상당수가 JSON에서는 오류입니다.

표기표준 JSON설명
{"a": 1}허용키는 반드시 큰따옴표로 감싼 문자열
{a: 1}불가따옴표 없는 키는 JavaScript 문법이지 JSON이 아님
{'a': 1}불가작은따옴표는 JSON에서 문자열 표시로 쓸 수 없음
{"a": 1,}불가마지막 요소 뒤 쉼표(trailing comma) 금지
// 주석불가JSON에는 주석 문법이 아예 없음
NaN, Infinity불가JSON의 수는 유한한 십진수만 가능 (null로 대체)
{"a": undefined}불가undefined는 JSON 값이 아님 (null 사용)
1e-7, -0.5허용지수 표기와 음수는 정상 JSON 수

사용 방법

  1. 왼쪽 입력창에 JSON을 붙여넣습니다. 한 줄로 압축된 API 응답이어도 그대로 넣으면 됩니다.
  2. 들여쓰기 폭을 2 spaces, 4 spaces, 1 tab 중에서 고릅니다. 팀 컨벤션이 없다면 2 spaces가 무난합니다.
  3. 정리(Format)를 누르면 오른쪽에 들여쓰기된 결과가 나옵니다. 문법이 깨져 있으면 결과 대신 빨간 오류 메시지가 표시됩니다.
  4. 압축(Minify)은 반대로 모든 공백과 줄바꿈을 제거해 한 줄로 만듭니다.
  5. 결과 위쪽의 통계로 키 개수, 객체/배열 수, 최대 중첩 깊이, 바이트 크기를 확인합니다.
  6. 복사 버튼으로 클립보드에 담거나, 다운로드로 .json 파일로 저장합니다.

오류 메시지 해석하기

이 도구는 브라우저의 JSON.parse가 던진 메시지를 가공하지 않고 보여줍니다. 메시지에 포함된 위치 정보(position N 또는 line N column M)가 가장 중요한 단서입니다. 다만 파서는 '문제가 처음 확정된 지점'을 알려주기 때문에, 실제 원인은 그보다 앞에 있는 경우가 많습니다. 예를 들어 여는 중괄호를 닫지 않으면 오류는 문서 맨 끝에서 보고됩니다.

메시지원인해결
Unexpected token ' ...작은따옴표로 감싼 문자열큰따옴표(")로 교체
Unexpected token } / ]닫는 괄호 직전의 trailing comma마지막 쉼표 삭제
Unexpected end of JSON input괄호나 따옴표가 닫히지 않음여는/닫는 짝 개수 확인
Unexpected token N / INaN 또는 Infinitynull이나 문자열로 치환
Bad escaped character\ 뒤에 허용되지 않는 문자\" \\ \/ \b \f \n \r \t \uXXXX만 사용
Unexpected non-whitespace ...값 하나 뒤에 또 다른 값JSON 문서 하나에 최상위 값은 하나뿐
Unexpected token o in JSON문자열 "[object Object]"를 파싱객체를 문자열로 잘못 연결한 코드 확인

Format과 Minify, 어디에 쓰는가

Format은 사람이 읽기 위한 변환입니다. 중첩 구조를 파악하거나, 응답에 예상한 필드가 들어 있는지 확인하거나, 코드 리뷰에 붙여 넣을 때 씁니다. 들여쓰기는 데이터의 의미를 바꾸지 않으므로 언제든 되돌릴 수 있습니다.

Minify는 전송량을 줄이기 위한 변환입니다. 공백과 줄바꿈을 없애면 보통 원본의 10~30% 정도가 줄어들고, 중첩이 깊고 키가 짧은 데이터일수록 감소폭이 큽니다. 다만 요즘 HTTP 응답은 대개 gzip이나 brotli로 압축되어 전달되므로, 압축 계층이 이미 반복되는 공백을 잘 처리합니다. 실제 이득은 압축을 쓰지 않는 경로, 예컨대 localStorage 저장, URL 쿼리 파라미터 삽입, 문자 수 제한이 있는 필드에 넣을 때 큽니다.

설정 파일은 Minify하지 마세요. package.json이나 tsconfig.json을 한 줄로 만들면 Git diff가 파일 전체 변경으로 잡혀 리뷰가 불가능해집니다.

구조 통계를 읽는 법

최대 깊이는 실무에서 가장 유용한 숫자입니다. 깊이가 6~7을 넘어가면 클라이언트 코드에서 옵셔널 체이닝이 길게 이어지고, 스키마 변경에 취약해집니다. 응답 설계를 다시 볼 신호로 삼을 만합니다.

키 개수와 바이트 크기를 함께 보면 페이로드에 실제로 필요한 데이터가 얼마나 들어 있는지 감을 잡을 수 있습니다. 목록 API 응답이 수백 KB인데 화면에서 쓰는 필드가 몇 개뿐이라면, 필드 선택 파라미터를 도입할 여지가 있다는 뜻입니다.

이런 작업에 씁니다

  • REST API·GraphQL 응답을 붙여넣어 필드 이름과 중첩 구조를 확인
  • GitHub, Stripe, Slack 웹훅 페이로드를 사람이 읽을 수 있게 정리
  • package.json, tsconfig.json, composer.json 같은 설정 파일의 문법 검증
  • MongoDB·Firestore 문서를 콘솔에서 복사해 구조 확인
  • JSON Lines 로그에서 한 줄을 떼어내 펼쳐 보기
  • 로컬스토리지나 쿠키에 저장된 상태 값을 디코딩해 검사

자주 묻는 질문

붙여넣은 데이터가 서버로 전송되나요?
전송되지 않습니다. 파싱과 직렬화 모두 브라우저의 JSON.parse와 JSON.stringify로 처리되며, 입력값을 외부로 보내는 네트워크 요청은 없습니다. 다만 회사 정책상 사내 데이터를 외부 웹사이트에 붙여넣는 것 자체가 금지된 경우가 있으니, 민감한 프로덕션 데이터라면 사내 규정을 먼저 확인하세요.
주석이 들어 있는 JSON은 왜 오류가 나나요?
표준 JSON에는 주석 문법이 없습니다. VS Code 설정 파일(settings.json)이나 tsconfig.json은 사실 JSONC라는 확장 형식이고, 이 편집기들이 주석을 허용해 주는 것입니다. 주석이 포함된 파일을 검증하려면 주석 줄을 먼저 지우고 넣으세요.
큰 파일도 처리할 수 있나요?
브라우저 메모리 안에서 처리하므로 수 MB 정도는 대개 문제가 없지만, 수십 MB를 넘어가면 탭이 멈출 수 있습니다. 큰 파일은 jq 같은 명령줄 도구(예: jq . data.json)를 쓰는 편이 안전합니다.
키 순서가 바뀌지 않나요?
바뀌지 않습니다. JSON.parse는 객체 키의 삽입 순서를 유지하고 JSON.stringify가 그 순서대로 다시 씁니다. 단, 키가 정수처럼 생긴 문자열("1", "2")이면 JavaScript 객체의 속성 순서 규칙에 따라 숫자 순으로 앞에 몰릴 수 있습니다.
숫자 정밀도가 손실될 수 있나요?
그럴 수 있습니다. JavaScript의 수는 배정밀도 부동소수점이라 안전한 정수 범위가 ±2^53-1입니다. 그보다 큰 ID(예: 트위터 스노플레이크 ID, 일부 DB의 bigint)는 파싱 후 값이 미세하게 달라질 수 있습니다. 이런 값은 API 설계 단계에서 문자열로 내려받는 것이 정석입니다.
유효성 검증과 스키마 검증은 다른 건가요?
다릅니다. 이 도구가 하는 것은 문법 검증, 즉 '파싱 가능한 JSON인가'입니다. 필수 필드가 있는지, 타입이 맞는지 같은 구조 검증은 JSON Schema의 영역이고, 그건 JSON Schema Generator 도구로 초안을 만들 수 있습니다.

💡 참고: 오류 위치가 문서 맨 끝으로 보고된다면 거의 항상 괄호나 따옴표를 닫지 않은 경우입니다. 이때는 입력을 절반으로 나눠 각각 넣어 보면 어느 쪽에 문제가 있는지 빠르게 좁힐 수 있습니다.

🔗관련 도구🔄 텍스트/데이터 변환