개발자 도구#JSON#API#디버깅#백엔드

API 디버깅이 빨라지는 JSON 워크플로우 7가지

엉킨 API 응답을 트리뷰로 펼치고, 한 줄로 압축해 cURL 에 붙이고, 깨진 JSON 의 위치를 line·column 으로 찾는 실전 흐름.

2026-04-28·9분 읽기·HengSsg

API 응답이 한 줄로 쏟아져 들어올 때 가장 먼저 하는 일 — JSON 을 사람이 읽을 수 있는 형태로 펼치는 것. 그리고 어떤 키에 어떤 값이 들어있는지, 어디서 형식이 깨졌는지 빠르게 짚어내는 것. 이 글은 백엔드 응답을 분석하고 cURL 한 줄을 만드는 7가지 실전 흐름을 정리한다.

흐름 1 — 한 줄 응답 펼치기

{"ok":true,"user":{"id":42,"name":"hengssg","roles":["admin","editor"]},"ts":1714281600}

이 한 줄을 그대로 읽으려고 하면 머리가 깨진다. JSON 포맷터에 붙여 정렬 을 누르면:

{
  "ok": true,
  "user": {
    "id": 42,
    "name": "hengssg",
    "roles": ["admin", "editor"]
  },
  "ts": 1714281600
}

들여쓰기 2/4 칸 토글로 코드 리뷰용 (4칸) / 좁은 화면용 (2칸) 을 골라 쓸 수 있다.

흐름 2 — Minify 로 cURL 한 줄 만들기

Postman 에서 작성한 요청 본문을 동료에게 cURL 로 넘기고 싶을 때, 사람이 읽기 좋은 JSON 을 그대로 붙여 넣으면 줄바꿈이 cURL 명령을 깨뜨린다. Minify 버튼 한 번이면 모든 공백·줄바꿈이 제거되어 한 줄로 압축된다.

curl -X POST https://api.example.com/users \
  -H 'Content-Type: application/json' \
  -d '{"name":"hengssg","roles":["admin"]}'

원본 JSON 의 들여쓰기를 보존하려면 정렬, 그대로 cURL 에 박으려면 Minify — 둘 사이를 자유롭게 왔다 갔다 할 수 있는 게 핵심.

흐름 3 — 깨진 JSON 의 위치 찾기

운영 로그에서 잘라온 JSON 이 깨져 있을 때:

{"ok": true, "user": {"id": 42, "name": "hengssg",}}

브라우저는 그냥 “Unexpected token” 만 던진다. 도구를 쓰면 line 1 column 49 가 표시되어 trailing comma 위치를 바로 짚을 수 있다.

자주 만나는 깨짐 3가지

  1. , 직전이 마지막 값 (trailing comma) — JSON 표준에서 허용 안 됨
  2. 키에 따옴표 빠짐 — {name: "x"} ❌ → {"name": "x"}
  3. 작은따옴표 사용 — {'name': 'x'} ❌ → {"name": "x"}

흐름 4 — 트리뷰로 깊은 응답 탐색

GraphQL / 페이지네이션 API 의 응답은 5~7 단계로 중첩되곤 한다. 트리뷰는 객체·배열 옆 ▶ 토글로 접고 펼쳐서 ‘지금 보고 싶은 가지’ 만 펼쳐 둘 수 있다.

{
  "data": {
    "search": {
      "edges": [
        { "node": { "id": "1", "title": "..." } }
      ]
    }
  }
}

datasearchedges 까지만 펼치고 나머지는 접어둔 채 비교하면, 100개 항목이 들어있는 응답도 흐름이 한눈에 보인다.

흐름 5 — 응답 크기 추적

도구 하단의 통계 패널에는 입력의 bytes / lines / characters / 최상위 타입(object/array) + 항목 수 가 실시간으로 뜬다. 새 API 가 페이지당 50KB 를 넘기 시작하면 페이지네이션을 의심해야 한다는 신호 — 단위는 ‘느낌’ 이 아니라 ‘숫자’ 로 봐야 한다.

응답 크기액션
< 5KB그대로 사용
5~50KB캐시 / gzip 검토
50KB ~ 500KB페이지네이션 / 필드 선택
> 500KB즉시 분할 — UX 가 무너지기 시작

흐름 6 — 보안: 토큰·키가 들어간 JSON 다루기

온라인 JSON 포맷터에 토큰을 붙여 넣는 게 찜찜할 때가 있다. 핵심 체크 포인트 하나:

모든 파싱·렌더링이 브라우저 안에서만 실행되는가?

trovetool JSON 포맷터는 서버에 입력을 전송하지 않는다. 네트워크 탭을 열어두고 붙여넣어 봐도 외부로 나가는 요청이 없다. 브라우저 격리 안에서 처리되므로 access token, refresh token, API key 가 들어간 응답도 안전하게 다룰 수 있다.

(한 번 더 안전하게 하려면 토큰 부분만 X 로 마스킹한 뒤 붙여넣는 습관을 들이자.)

흐름 7 — 두 응답 차이 비교

A 환경 응답과 B 환경 응답을 나란히 두고 어디가 다른지 봐야 할 때:

  1. 양쪽 모두 같은 들여쓰기로 정렬 (예: 2칸)
  2. 한쪽 / 다른 한쪽을 각각 텍스트 에디터에 붙여넣고 diff
  3. 키 순서 차이로 노이즈가 생기면 — 양쪽 모두 정렬한 뒤 키를 알파벳순으로 재정렬한 변환을 한 번 더 거쳐야 한다.

(키 정렬 옵션은 다음 버전 로드맵에 있다. 현재는 정렬 결과를 복사해 외부 diff 도구로 확인.)

함께 쓰면 좋은 도구

정리

JSON 도구는 ‘예쁘게 펼치는 도구’ 로 끝나지 않는다. 응답 디버깅의 시작점 이다. 한 줄을 펼치고, 깨진 위치를 찾고, 깊은 가지를 탐색하고, cURL 한 줄로 다시 압축하는 흐름을 손에 익히면 디버깅 사이클이 절반으로 줄어든다.

JSON 포맷터 열기 →

도구의 핵심은 ‘붙여넣고 → 즉시 보이는’ 사이클을 끊김 없이 반복하는 것. 5초의 마찰이 50번 쌓이면 그게 곧 ‘백엔드 디버깅이 피곤한 이유’ 가 된다.