JSON 보기 좋게 정렬하는 법 (포맷터 사용법)

API 테스트 중에 응답이 돌아왔다. 그런데 데이터가 한 줄로 쭉 이어져 있어서 어디가 어딘지 파악이 안 된다. 중괄호와 쉼표가 뒤엉킨 텍스트 덩어리를 눈으로 분석하는 건 사람이 할 일이 아니다.

JSON이 한 줄로 오는 이유

서버에서 JSON을 보낼 때는 대부분 공백과 줄바꿈을 제거한 상태(minified)로 전송한다. 네트워크 트래픽을 줄이기 위해서다. 기능적으로는 문제가 없지만, 사람이 읽기에는 불편하다.

{"name":"김철수","age":30,"address":{"city":"서울","zip":"06232"},"hobbies":["독서","코딩"]}

이걸 정렬하면 구조가 한눈에 보인다.

{
  "name": "김철수",
  "age": 30,
  "address": {
    "city": "서울",
    "zip": "06232"
  },
  "hobbies": [
    "독서",
    "코딩"
  ]
}

JSON 포맷터로 할 수 있는 것

1. 정렬 (Pretty Print)

압축된 JSON에 들여쓰기와 줄바꿈을 추가한다. JSON 포맷터에 붙여넣고 정렬 버튼을 누르면 된다. 들여쓰기 간격은 2칸, 4칸, 탭 중에 고를 수 있다.

2. 문법 검증

JSON에 오류가 있으면 파싱 자체가 안 된다. 흔한 실수를 예로 들면 이렇다.

• 마지막 항목 뒤에 쉼표가 붙은 경우 (trailing comma)
• 키에 따옴표를 안 쓴 경우
• 작은따옴표를 쓴 경우 (JSON은 큰따옴표만 허용)
• 중괄호나 대괄호 짝이 안 맞는 경우

포맷터에 넣으면 오류 위치와 원인을 알려주니까, 수백 줄짜리 JSON에서 눈으로 찾는 것보다 빠르다.

3. 압축 (Minify)

반대로 정렬된 JSON에서 공백과 줄바꿈을 전부 제거한다. 설정 파일을 서버에 올리거나 API 요청 본문에 넣을 때 용량을 줄일 수 있다.

4. 키 정렬

JSON 객체의 키를 알파벳순으로 정렬한다. 두 개의 JSON을 비교할 때 키 순서가 다르면 diff가 엉망으로 나오는데, 키를 정렬해두면 비교가 쉬워진다.

개발 중 JSON을 다루는 상황

TIP VS Code에서도 Shift + Alt + F로 JSON을 정렬할 수 있다. 다만 파일을 열지 않고 클립보드에 있는 JSON을 빠르게 확인하려면 웹 도구가 더 간편하다.

JSON 관련 작업은 개발 중 매일 반복된다. 도구 하나 즐겨찾기에 넣어두면 그만큼 디버깅 시간이 줄어든다.