API 응답을 확인하려고 콘솔을 열었더니 JSON 데이터가 한 줄에 쭉 이어져 나온다. 중괄호와 대괄호가 어디서 시작하고 끝나는지 눈으로 따라가기 어렵다. 들여쓰기만 제대로 넣어도 구조가 한눈에 보이는데, 매번 수작업으로 정리하기는 비효율적이다.
JSON 포맷팅이 필요한 이유
JSON(JavaScript Object Notation)은 데이터를 주고받는 표준 형식이다. API 응답, 설정 파일, 로그 데이터 대부분이 JSON으로 되어 있다. 문제는 전송 효율을 위해 공백과 줄바꿈을 모두 제거한 상태로 오는 경우가 많다는 것이다.
예시{"name":"홍길동","age":30,"skills":["js","python"],"active":true}
이 한 줄이 깊이 3~4단계의 복잡한 JSON이 되면 육안 분석이 사실상 불가능하다.
온라인에서 JSON 정렬하기
JSON 포매터에 데이터를 붙여넣고 정렬 버튼을 누르면, 들여쓰기와 줄바꿈이 적용된 깔끔한 형태가 오른쪽 출력창에 나타난다.
설정할 수 있는 옵션
| 옵션 | 선택지 | 언제 쓰나 |
|---|---|---|
| 들여쓰기 | 2칸 / 4칸 / 탭 | 팀 코딩 컨벤션에 맞출 때 |
| 키 정렬 | 알파벳순 정렬 | 키 순서를 통일해서 비교할 때 |
| 압축 | 공백/줄바꿈 전부 제거 | 전송 용량을 줄여야 할 때 |
JSON 문법 오류 찾기
JSON은 문법이 엄격하다. 쉼표 하나, 따옴표 하나만 빠져도 파싱 에러가 난다. 자주 발생하는 실수는 이런 것들이다.
- 마지막 항목 뒤에 쉼표를 넣는 경우(trailing comma) — JSON에서는 허용되지 않는다
- 키를 작은따옴표(
')로 감싼 경우 — 반드시 큰따옴표(")를 써야 한다 - 값에
undefined나 주석(//)을 넣은 경우 — JSON에서는 지원하지 않는다
검증 기능을 쓰면 어디에서 오류가 발생했는지 위치와 내용을 알려주기 때문에, 수백 줄짜리 JSON에서 문제를 빠르게 찾을 수 있다.
압축은 언제 쓰나
포맷팅과 반대로, JSON에서 공백과 줄바꿈을 전부 제거하는 것이 압축(minify)이다. 보기에는 불편하지만 파일 크기가 줄어든다. API 요청 본문이나 설정 파일을 서버에 전송할 때 압축하면 네트워크 트래픽을 아낄 수 있다.
도구 화면에 JSON 통계(파일 크기, 깊이, 키 개수)가 표시되니, 압축 전후 크기 차이를 바로 확인할 수 있다.
JSON 데이터를 다루는 일이 잦다면 포매터 페이지를 즐겨찾기에 넣어두는 게 편하다. 매번 에디터 플러그인을 설치하거나 터미널 명령어를 치는 것보다 빠르다.