왜 만들었나요
중첩이 깊은 응답을 정렬만 해 놓으면 화면이 온통 괄호로 덮여 어디가 어디인지 놓치기 일쑤였습니다. 접었다 펴면서 필요한 가지만 따라가고 싶어서 만들었습니다.
JSON 트리뷰
JSON을 나뭇가지 모양으로 펼쳐 구조를 봅니다. 안 볼 가지는 접고, 찾을 값은 검색해서 바로 위치를 짚습니다.
로딩 중...
Note
붙여넣은 JSON은 서버로 전송되지 않습니다. 트리를 그리는 처리가 전부 브라우저 안에서 이뤄져, 실제 응답 데이터도 기기 밖으로 나가지 않습니다.
사용 방법
-
왼쪽 입력창에 JSON을 붙여넣습니다. 샘플 버튼으로 시작하거나 파일 아이콘으로
.json을 불러올 수 있습니다.
-
오른쪽에 트리가 그려집니다. 객체와 배열에는 +·− 버튼이 붙어 있어 안 볼 가지는 접고 파고들 가지만 펼치면 됩니다.
-
위쪽 검색창에 찾을 키나 값을 넣으면 해당 위치가 강조되고 화면 가운데로 옮겨집니다. 화살표로 다음·이전 결과를 오갈 수 있습니다.
이렇게 나옵니다
중첩이 깊은 응답을 넣으면 이렇게 나옵니다.
| 넣은 것 | 나온 것 |
|---|---|
| 5단계 중첩된 JSON | 가지 모양 트리 — 접었다 펴며 탐색 |
검색으로 userId를 찾으면 몇 개가 걸렸는지와 각각의 위치를 짚어 줍니다.
알아두면 좋은 것
정렬만으로는 왜 부족한가
들여쓰기만 넣으면 구조가 세로로 길게 늘어납니다. 5단계쯤 중첩되면 화면 하나에 안 들어와서 스크롤을 오가며 괄호를 세게 됩니다.
트리로 보면 필요 없는 가지를 접어 관심 있는 부분만 남길 수 있습니다. 응답이 크고 구조가 복잡할수록 차이가 큽니다.
이런 데이터가 깊게 중첩됩니다
- API 응답 — 사용자 안에 주문, 주문 안에 상품, 상품 안에 옵션
- 설정 파일 — 환경별·서비스별로 갈라지는 구조
- 로그 — 요청 정보 안에 헤더·바디가 통째로 들어간 경우
이런 경우에는
용어 설명
- 중첩
데이터 안에 데이터가 들어 있는 구조입니다. "주문 목록 안에 주문이 있고, 주문 안에 상품 목록이 있는" 식으로 층이 쌓입니다. 층이 깊을수록 눈으로 따라가기 어려워집니다.
- 노드
트리에서 가지 하나하나를 말합니다. 키 하나, 값 하나가 각각 노드가 되고, 객체나 배열 노드는 아래에 자식 노드를 거느립니다.
자주 묻는 질문
입력한 JSON 데이터는 서버에 저장되나요?
아니요, 절대 저장되지 않습니다. 이 도구는 사용자의 브라우저 내에서만(Client-side) 동작하므로, 입력하신 민감한 API 응답 데이터나 개인정보는 외부 서버로 전송되지 않아 매우 안전합니다.
대용량 JSON 파일도 시각화할 수 있나요?
5MB까지 가능합니다. 브라우저 탭이 멈추는 것을 막기 위해 입력·업로드 모두 5MB에서 끊고, 그보다 큰 데이터는 트리를 그리지 않고 용량 안내 문구를 표시합니다. 로그나 덤프처럼 큰 JSON은 필요한 부분만 잘라서 넣어 주세요. 5MB 이내라도 노드 수가 아주 많으면 렌더링이 느려질 수 있습니다.
잘못된 형식의 JSON을 입력하면 어떻게 되나요?
유효하지 않은 JSON을 입력하면 트리가 그려지던 자리에 오류 메시지가 표시됩니다. 브라우저가 위치를 알려주는 오류라면 몇 번째 줄 몇 번째 글자에서 멈췄는지까지 함께 보여 주고(후행 쉼표처럼 위치가 오지 않는 경우도 있습니다), 잘못된 곳을 고치면 트리가 곧바로 다시 그려집니다.
마지막 업데이트: 2026년 8월