JSON 포맷터란?
JSON은 데이터를 주고받는 가장 널리 쓰이는 형식입니다. 사람이 읽기 쉽게 만들어졌지만, API 응답처럼 한 줄로 압축된 JSON은 그대로 읽기 어렵습니다. 들여쓰기를 넣어 구조를 드러내면 훨씬 보기 편합니다.
이 포맷터는 들여쓰기와 압축, 키 정렬을 지원하고 문법 오류가 있으면 한국어 설명과 함께 몇 번째 줄인지 알려줍니다. 구조 통계(깊이, 키 개수)도 함께 보여줍니다.
사용 방법
- JSON을 붙여 넣으면 즉시 검사하고 정렬합니다.
- 들여쓰기 방식을 고릅니다. '압축'을 고르면 한 줄로 만듭니다.
- 두 JSON을 비교할 때는 '키를 가나다순으로 정렬'을 켜면 편합니다.
- 오류가 있으면 무엇이 잘못됐는지와 위치를 알려줍니다.
계산 방법
| JSON에서 안 되는 것 | 올바른 JSON |
|---|---|
| {'a': 1} — 작은따옴표 | {"a": 1} |
| {a: 1} — 따옴표 없는 키 | {"a": 1} |
| {"a": 1,} — 마지막 쉼표 | {"a": 1} |
| // 주석 | 주석을 쓸 수 없음 |
| {"a": undefined} | {"a": null} |
| {"a": 0x1F} — 16진수 | {"a": 31} |
JSON은 JavaScript 객체 리터럴에서 출발했지만 더 엄격합니다. JavaScript에서 되는 문법이 JSON에서는 안 되는 경우가 많아 이 차이가 오류의 주된 원인입니다.
- JSON이 허용하는 값: 객체, 배열, 문자열, 숫자, true, false, null
- 문자열은 반드시 큰따옴표를 씁니다.
- 숫자에 NaN이나 Infinity를 쓸 수 없습니다.
- 최상위 값이 객체나 배열이 아니어도 됩니다. 42 나 "hello" 도 유효한 JSON입니다.
활용 예시
{"name":"바로계산","count":22} 를 넣으면 들여쓰기된 형태로 바뀌고, 객체 1개·키 2개·깊이 2라는 구조 정보가 나옵니다. 압축 모드를 고르면 다시 한 줄로 만들어 바이트 수가 얼마나 줄었는지도 보여줍니다.
- 키 정렬은 중첩된 객체에도 적용됩니다. 두 응답의 차이를 비교할 때 유용합니다.
- 압축은 전송량을 줄일 때 씁니다. 보기 좋게 만든 JSON은 공백 때문에 30~50% 커집니다.
- 깊이가 지나치게 깊으면(10단계 이상) 구조를 다시 검토해 볼 만합니다.
자주 묻는 질문
- 입력한 JSON이 서버로 전송되나요?
- 전송되지 않습니다. 모든 처리가 브라우저 안에서 이루어집니다. API 키나 개인정보가 들어 있는 응답을 넣어도 외부로 나가지 않습니다.
- 오류 위치가 안 나올 때가 있습니다.
- 브라우저의 JSON 파서가 오류 메시지에 위치를 넣어 줄 때만 표시할 수 있습니다. 위치가 없는 경우에도 무엇이 잘못됐는지는 한국어로 설명합니다.
- JSON5나 JSONC도 지원하나요?
- 지원하지 않습니다. 주석이 있는 JSONC나 느슨한 문법의 JSON5는 표준 JSON이 아니라서 오류로 처리됩니다. 주석을 지우고 넣어 주세요.
- 큰 JSON도 처리되나요?
- 브라우저 메모리가 허용하는 한 처리됩니다. 다만 수십 MB 이상이면 입력할 때 반응이 느려질 수 있습니다.
- 키 정렬을 하면 원본이 바뀌나요?
- JSON 객체의 키 순서는 의미가 없다는 것이 표준 입장이라 대부분의 시스템에서 문제가 없습니다. 다만 순서에 의존하는 코드가 있다면 주의하세요. 배열의 순서는 바꾸지 않습니다.
참고 자료
계산 기준 · 브라우저 내장 JSON 파서로 검사하고 JSON.stringify 로 정렬합니다. 오류 메시지는 한국어 설명을 덧붙이고, 파서가 위치를 제공하는 경우 줄·열을 함께 표시합니다. 키 정렬은 중첩 객체까지 재귀적으로 적용합니다.