JSON Parser and Tree Viewer, API 응답을 빠르게 펼쳐보는 도구

API 응답을 디버깅하다 보면 JSON을 자주 봅니다.

짧은 응답은 콘솔에서도 충분하지만, 중첩이 깊거나 배열이 길어지면 눈으로 읽기 어렵습니다.

이럴 때 만든 도구가 JSON Parser and Tree Viewer입니다.

어떤 도구인가

JSON Parser and Tree Viewer는 입력한 JSON을 브라우저 안에서 파싱하고 보기 좋게 정리합니다.

주요 기능은 이렇습니다.

• JSON syntax validation
• format
• minify
• collapsible tree viewer
• syntax error line/column hint
• object/array/value summary
• copy formatted JSON

입력값은 외부 API로 보내지 않습니다.

민감한 API 응답을 다룰 때도 서버 업로드 없이 브라우저 내부에서 확인하는 흐름을 목표로 합니다.

기본 사용법

가장 많이 쓰는 흐름은 단순합니다.

1. JSON input에 API 응답을 붙여 넣습니다.
2. Format 버튼을 누릅니다.
3. formatted output과 tree viewer를 확인합니다.
4. 필요한 경우 Copy로 정리된 JSON을 복사합니다.

Minify는 공백을 제거한 compact JSON이 필요할 때 사용합니다.

예를 들어 설정값을 한 줄로 넣어야 하는 환경이나 테스트 payload를 작게 만들 때 쓸 수 있습니다.

Tree viewer가 유용한 경우

JSON은 중첩이 깊어지면 원하는 값을 찾기 어렵습니다.

예를 들어:

user.profile.addresses[0].postalCode

처럼 path가 길어지면 plain text로 스크롤하는 것보다 tree로 접고 펴는 방식이 훨씬 편합니다.

특히 API 응답에서:

• 특정 필드가 있는지 확인
• 배열 길이 확인
• 중첩 object 구조 파악
• null과 빈 배열 구분

같은 작업을 할 때 유용합니다.

JSON 오류를 볼 때

잘못된 JSON을 넣으면 오류 메시지와 힌트를 표시합니다.

자주 나오는 오류는 다음과 같습니다.

• 끝에 쉼표가 남아 있음
• key에 따옴표가 없음
• 문자열 따옴표가 닫히지 않음
• JSON 안에 주석이 들어감
• object/array bracket이 맞지 않음

JavaScript object literal과 JSON은 비슷해 보이지만 다릅니다.

JSON은 key도 반드시 double quote가 필요합니다.

이런 상황에 잘 맞다

• REST API 응답 확인
• webhook payload 검토
• config JSON 정리
• 로그에 찍힌 JSON fragment 확인
• 테스트 fixture 만들기

특히 “응답은 왔는데 구조를 모르겠다”는 상황에서 빠르게 펼쳐보는 용도로 좋습니다.

한 줄 요약

JSON Parser and Tree Viewer는 API 응답이나 설정 JSON을 format, minify, validate하고 tree 구조로 펼쳐보는 브라우저 기반 JSON 도구입니다.