JSON 포맷터

JSON 포맷터 소개

이 도구는 붙여 넣은 텍스트를 브라우저 내장 JSON.parse로 읽은 뒤 JSON.stringify로 다시 써서 보여 줍니다. 그래서 결과는 「내 입력을 예쁘게 정리한 것」이 아니라 「엔진이 이해한 값을 새로 출력한 것」입니다. 0.1000이 0.1로, 1E3이 1000으로, \u00e9가 é로 바뀌어 나오는 이유가 이것입니다.

JSON은 문법이 아주 작지만, 사람이 손으로 쓰거나 JavaScript 객체 리터럴을 복사해 오면 규격에 없는 표기가 쉽게 섞입니다. 아래에서는 규격(RFC 8259, ECMA-404)이 실제로 허용하는 것과 자주 걸리는 지점, 그리고 파싱 과정에서 값이 바뀌는 경우를 다룹니다.

규격이 허용하지 않는데 자주 쓰는 표기

RFC 8259 기준으로 JSON 텍스트는 값 하나입니다. 예전 규격은 최상위를 객체나 배열로 제한했지만 지금은 "hello", 42, null 하나만 있어도 유효한 JSON이고, 이 도구도 그렇게 처리합니다. 반면 아래 표기는 모두 거부됩니다.

• 마지막 요소 뒤 쉼표: {"a": 1,} / [1,2,3,]
• 작은따옴표 문자열, 따옴표 없는 키: {'a': 1} / {a: 1}
• 주석: // 한 줄, /* 블록 */ 모두 없음
• NaN, Infinity, -Infinity: 규격은 「문법으로 나타낼 수 없는 숫자(Infinity, NaN 등)는 허용하지 않는다」고 적습니다. 반대로 JavaScript에서 JSON.stringify({x: NaN})을 하면 오류 없이 {"x":null}이 되어 값이 조용히 사라집니다.
• 앞자리 0: 01은 오류, 0.5는 되지만 .5는 오류
• 공백으로 인정되는 문자는 스페이스, 탭, LF, CR 네 가지뿐입니다. 파일 맨 앞의 BOM(U+FEFF)은 여기에 들지 않아 JSON.parse가 첫 글자에서 실패합니다. RFC 8259는 네트워크로 보내는 JSON에 BOM을 붙이지 말라(MUST NOT)고 합니다. 메모장 등에서 「UTF-8 BOM」으로 저장한 파일을 붙여 넣었는데 첫 글자에서 오류가 난다면 이 경우입니다.

주석과 쉼표가 되는 파일은 JSON이 아니다

VS Code의 settings.json, tasks.json, launch.json은 「JSON with Comments(jsonc)」 모드로 열립니다. 여기서는 // 와 /* */ 주석이 되고, 마지막 쉼표도 경고만 뜹니다. JSON5는 한 걸음 더 나아가 작은따옴표, 따옴표 없는 키, Infinity까지 허용하는 별도 형식입니다. 이런 파일을 그대로 이 도구에 넣으면 오류가 나는 게 정상입니다. 주석을 지우고 넣거나, 해당 형식 전용 파서를 쓰세요.

파싱하면서 값이 바뀌는 세 가지

첫째, 중복 키. 규격은 키가 고유해야 한다(SHOULD)고만 하고, 중복되면 「받는 소프트웨어의 동작은 예측할 수 없다」고 씁니다. JavaScript는 마지막 값을 남기므로 {"a":1,"a":2}는 {"a": 2}로 출력되고 첫 값은 흔적 없이 사라집니다. 다른 언어의 파서는 첫 값을 쓰거나 오류를 낼 수 있습니다.

둘째, 큰 정수. JavaScript 숫자는 IEEE 754 배정밀도라서, RFC 8259가 상호 운용을 보장하는 정수 범위는 -(2^53-1)부터 2^53-1(9007199254740991)까지입니다. 이를 넘는 64비트 ID는 끝자리가 바뀝니다. 트위터(X) API가 트윗 ID를 숫자 id와 문자열 id_str로 두 번 보내고, 개발 문서에서 JSON을 쓸 때는 id_str을 쓰라고 한 것이 이 때문입니다. JSON.parse는 이런 값을 오류 없이 반올림하므로, 이 도구는 입력에서 2^53을 넘는 정수를 찾아 경고를 함께 띄웁니다.

셋째, 키 순서. 정렬 옵션을 끄더라도 "2"나 "10"처럼 정수 모양의 키는 JavaScript 객체 규칙에 따라 맨 앞으로, 숫자 크기 순으로 옮겨집니다. 정렬 옵션을 켜면 이 규칙과 상관없이 모든 키를 문자열로 보고 문자 코드 순(대문자가 소문자보다 앞, "10"이 "2"보다 앞)으로 정렬해 출력하고, 배열 안의 순서는 건드리지 않습니다.

오류 메시지 읽는 법

메시지는 브라우저 엔진이 만든 영어 문장을 그대로 보여 줍니다. Chrome·Edge(V8)는 최근 버전에서 「Expected ',' or '}' after property value in JSON at position 23 (line 4 column 3)」처럼 위치를 함께 적고, Firefox는 「JSON.parse: expected ',' or '}' after property value in object at line 4 column 3 of the JSON data」 형식입니다. 도구는 메시지에서 「line L column C」나 「position N」을 찾아 행·열로 바꿉니다. 위치 정보가 없는 메시지(예: V8의 「Unexpected token ']', "[1,2,3,]" is not valid JSON」)라면 행·열은 표시되지 않습니다.

위치는 「파서가 더 이상 읽을 수 없게 된 곳」이지 실수한 곳이 아닙니다. 쉼표를 빠뜨리면 오류는 빠진 자리 다음 줄의 키에서 납니다. 표시된 위치의 바로 앞부분을 먼저 보세요.

압축은 얼마나 줄여 주나

id, name, active 세 필드를 가진 객체 1,000개 배열로 직접 재 보았습니다(Node.js zlib 기본 수준). 2칸 들여쓰기 67,282바이트, 압축본 43,281바이트로 원문 크기는 36% 줄었습니다. 그런데 gzip을 거치면 5,371바이트 대 5,106바이트로 차이가 약 5%, Brotli는 2,493 대 2,245바이트입니다. 서버가 gzip이나 Brotli로 보낸다면 공백 제거의 효과는 작고, 압축이 의미 있는 곳은 전송 압축이 없는 경로나 저장 공간, 로그 한 줄에 넣어야 하는 경우입니다.

예시

사용 방법

1. 입력란에 JSON을 붙여 넣습니다.
2. 들여쓰기(2칸·4칸·탭)와 키 정렬 여부를 고릅니다.
3. 「포맷」 또는 「압축」을 누릅니다. 오류가 나면 표시된 행·열의 바로 앞부분을 확인합니다.

자주 묻는 질문