JSON 포맷터

API 응답값을 확인하려고 콘솔에 찍었더니 중괄호와 대괄호가 한 줄로 뭉쳐 끝없이 오른쪽으로 흘러가는 걸 본 적 있으실 겁니다. 어디서 객체가 시작하고 어디서 배열이 끝나는지 눈으로 괄호를 세다 보면 금방 지치죠. JSON 포맷터는 그렇게 압축돼 내려온 JSON을 붙여넣으면 들여쓰기와 줄바꿈을 넣어 계층이 한눈에 보이게 정렬해 주는 도구입니다.

디버깅하다 매번 브라우저 콘솔이나 에디터 확장으로 예쁘게 펴 보는 게 번거로웠고, 문법이 살짝 틀렸을 때 "어디가 문제냐"를 안 알려주는 도구가 답답했습니다. 그래서 붙여넣으면 즉시 정렬되고, 틀렸으면 틀린 자리를 짚어 주는 걸 만들어 쓰고 있습니다.

사용 방법

1. 왼쪽 입력창에 정렬할 JSON을 붙여넣습니다. 손에 예시가 없으면 샘플 버튼을 눌러 예시 데이터로 시작해도 됩니다.

   

2. 입력하는 즉시 오른쪽에 정렬된 결과가 나옵니다. 들여쓰기는 2칸·4칸·탭 중에 고르고, 필요하면 키를 snake_case나 camelCase로 한 번에 통일할 수도 있습니다.

   

3. 문법이 틀리면 오른쪽에 오류 메시지가 뜨고, 왼쪽 입력창에서 문제가 된 위치를 표시해 줍니다. 어느 줄 어느 글자에서 파싱이 멈췄는지 바로 보이니 괄호나 쉼표 하나를 찾겠다고 전체를 훑을 필요가 없습니다. 결과가 맞으면 복사 버튼으로 가져가세요.

   

JSON은 왜 한 줄로 압축돼서 올까

서버가 게을러서가 아니라 그게 이득이라 그렇습니다. JSON에서 들여쓰기와 줄바꿈은 사람이 읽으라고 넣는 것일 뿐, 기계가 파싱하는 데는 필요 없는 공백입니다. 네트워크로 실어 보낼 때 이 공백을 다 걷어내면(minify) 전송량이 눈에 띄게 줄고, 그만큼 응답이 빨라지죠. 그래서 대부분의 API 서버는 응답을 압축된 한 줄로 내려보냅니다.

압축된 JSON을 마주치는 자리는 생각보다 많습니다. 브라우저 개발자도구 네트워크 탭에서 복사한 응답, 서버 로그에 통째로 찍힌 요청 바디, curl로 때려 본 엔드포인트의 출력, 설정 파일을 한 줄로 저장해 둔 환경변수까지. 사람이 읽으라고 만든 게 아니니 눈으로 뜯어보려면 다시 펴는 수밖에 없습니다.

알아두면 편한 JSON 디버깅 팁

JSON은 겉보기엔 자바스크립트 객체와 똑같이 생겼지만 표준 문법은 훨씬 깐깐합니다. 그 차이 때문에 손으로 JSON을 쓰다 자주 걸려 넘어지는 지점이 있습니다.

후행 쉼표는 표준에서 허용되지 않습니다

배열이나 객체의 마지막 항목 뒤에 쉼표를 붙이는 습관, 자바스크립트에선 문제없지만 표준 JSON에선 문법 오류입니다. [1, 2, 3,]처럼요. 이 포맷터는 후행 쉼표가 섞인 입력도 관대하게 받아들여 정렬해 주지만, 결과로는 쉼표를 뺀 표준 JSON을 내보냅니다. 그대로 복사해 붙여넣으면 됩니다.

작은따옴표와 따옴표 없는 키

JSON 문자열과 키는 반드시 큰따옴표(")로 감싸야 합니다. {'name': 'kim'}처럼 작은따옴표를 쓰거나 {name: "kim"}처럼 키의 따옴표를 생략하는 건 자바스크립트 객체 리터럴이지 JSON이 아닙니다. 이 도구는 그런 입력도 받아 큰따옴표로 정규화해 주니, 코드에서 급하게 복사해 온 객체를 그대로 넣어도 표준 JSON으로 바뀝니다.

주석은 넣을 수 없습니다

JSON 명세에는 주석이 아예 없습니다. //나 /* */를 넣으면 표준 파서는 바로 실패합니다. 설정 파일에 설명을 달고 싶어 주석을 남겼다가 파싱이 안 되는 경우가 흔하죠. 여기선 주석이 섞여도 정렬은 되지만, 출력에서는 주석이 빠진다는 점을 기억해 두세요.

문자열 안에 데이터를 통째로 담을 때 쓰는 이스케이프도 눈을 피곤하게 합니다. "{\"id\":1}"처럼 따옴표마다 역슬래시가 붙어 있으면 읽기가 거의 불가능하죠. 입력 패널의 이스케이프 해제 토글을 켜면 이 겹따옴표를 한 겹 풀어 안쪽 JSON을 꺼내 정렬해 줍니다.