왜 만들었나요
중첩이 깊은 응답을 정렬만 해 놓으면 화면이 온통 괄호로 덮여 어디가 어디인지 놓치기 일쑤였습니다. 접었다 펴면서 필요한 가지만 따라가고 싶어서 만든 JSON 뷰어입니다.
JSON 뷰어
JSON을 나뭇가지 모양으로 펼쳐 구조를 봅니다. 안 볼 가지는 접고, 찾을 값은 검색해서 바로 위치를 짚습니다.
로딩 중...
Note
붙여넣은 JSON은 서버로 전송되지 않습니다. 트리를 그리는 처리가 전부 브라우저 안에서 이뤄져, 실제 응답 데이터도 기기 밖으로 나가지 않습니다.
사용 방법
-
JSON 뷰어 왼쪽 입력창에 JSON을 붙여넣습니다. 샘플 버튼으로 시작하거나 파일 아이콘으로
.json을 불러올 수 있습니다.
-
오른쪽에 트리가 그려집니다. 객체와 배열에는 +·− 버튼이 붙어 있어 안 볼 가지는 접고 파고들 가지만 펼치면 됩니다.
-
위쪽 검색창에 찾을 키나 값을 넣으면 해당 위치가 강조되고 화면 가운데로 옮겨집니다. 화살표로 다음·이전 결과를 오갈 수 있습니다.
이렇게 나옵니다
중첩이 깊은 응답을 넣으면 이렇게 나옵니다.
| 넣은 것 | 나온 것 |
|---|---|
| 5단계 중첩된 JSON | 가지 모양 트리 — 접었다 펴며 탐색 |
검색으로 userId를 찾으면 몇 개가 걸렸는지와 각각의 위치를 짚어 줍니다.
알아두면 좋은 것
정렬만으로는 왜 부족한가
JSON 뷰어가 필요한 이유가 여기 있습니다. 들여쓰기만 넣으면 구조가 세로로 길게 늘어납니다. 5단계쯤 중첩되면 화면 하나에 안 들어와서 스크롤을 오가며 괄호를 세게 됩니다.
트리로 보면 필요 없는 가지를 접어 관심 있는 부분만 남길 수 있습니다. 응답이 크고 구조가 복잡할수록 차이가 큽니다.
이런 데이터가 깊게 중첩됩니다
- API 응답 — 사용자 안에 주문, 주문 안에 상품, 상품 안에 옵션
- 설정 파일 — 환경별·서비스별로 갈라지는 구조
- 로그 — 요청 정보 안에 헤더·바디가 통째로 들어간 경우
화면을 그림으로 저장할 수 있습니다
만들어진 트리는 PNG 이미지로 내려받을 수 있습니다. 데이터 구조를 문서나 발표 자료에 넣거나, 팀에 공유해 "이런 모양으로 옵니다"라고 설명할 때 유용합니다.
저장되는 것은 지금 화면에 보이는 영역 그대로입니다. 트리가 화면보다 크면 밖으로 나간 부분은 잘리니, 전체화면으로 펼쳐 트리가 다 들어오게 맞춘 뒤 저장하세요. 접어 둔 가지는 접힌 상태로 저장되므로 보여 주고 싶은 부분만 펼쳐 두면 됩니다.
JSON 뷰어와 다른 도구의 차이
비슷해 보이지만 목적이 다릅니다. 하려는 일에 맞춰 고르면 됩니다.
| 하고 싶은 것 | 도구 |
|---|---|
| 구조를 눈으로 파악 | JSON 뷰어 (이 도구) |
| 보기 좋게 정렬해 복사 | JSON 포맷터 |
| 필요한 항목만 골라 내보내기 | JSON 편집기 |
이런 경우에는
검색했는데 안 나와요
접어 둔 가지 안쪽은 검색되지 않습니다. 찾는 값이 있을 만한 가지를 먼저 펼친 뒤 검색하세요.
어디에 있는지 짐작이 안 된다면, 상위 가지를 모두 펼친 뒤 검색하는 편이 확실합니다.
트리가 너무 커서 보기 힘들어요
- 확대·축소 버튼으로 배율을 조절하세요. 축소 버튼으로는 50%까지만 줄어들므로, 더 작게 보려면 마우스 휠(트랙패드는 두 손가락)로 줄이세요
- 전체화면으로 펼치면 큰 구조도 한눈에 들어옵니다
- 관심 없는 상위 가지부터 접으면 화면이 훨씬 정리됩니다
- 데이터가 아주 크다면 필요한 부분만 잘라 붙여넣는 게 빠릅니다
형식이 잘못됐다는 오류가 나요
JSON은 형식이 아주 엄격합니다. 흔한 원인은 이렇습니다.
| 원인 | 잘못된 예 | 올바른 예 |
|---|---|---|
| 마지막 쉼표 | {"a": 1,} | {"a": 1} |
| 이름에 따옴표 없음 | {a: 1} | {"a": 1} |
| 작은따옴표 사용 | {'a': 1} | {"a": 1} |
몇 번째 줄에서 문제가 생겼는지 함께 알려 주니 그 부근을 살펴보세요. 마지막 쉼표처럼 위치가 나오지 않는 경우도 있는데, 그럴 땐 닫는 괄호 바로 앞을 확인하면 대개 찾습니다.
5MB가 넘는다며 안 그려져요
브라우저 탭이 멈추는 것을 막기 위한 제한입니다. 로그나 덤프처럼 큰 데이터는 필요한 부분만 잘라 붙여넣으세요. 배열이라면 앞의 몇 건만 넣어도 구조를 파악하는 데는 충분합니다.
이 도구로는 안 되는 것
용어 설명
- 중첩
데이터 안에 데이터가 들어 있는 구조입니다. "주문 목록 안에 주문이 있고, 주문 안에 상품 목록이 있는" 식으로 층이 쌓입니다. 층이 깊을수록 눈으로 따라가기 어려워집니다.
- 노드
트리에서 가지 하나하나를 말합니다. 키 하나, 값 하나가 각각 노드가 되고, 객체나 배열 노드는 아래에 자식 노드를 거느립니다.
자주 묻는 질문
입력한 JSON 데이터는 서버에 저장되나요?
아니요, 절대 저장되지 않습니다. 이 도구는 사용자의 브라우저 내에서만(Client-side) 동작하므로, 입력하신 민감한 API 응답 데이터나 개인정보는 외부 서버로 전송되지 않아 매우 안전합니다.
대용량 JSON 파일도 시각화할 수 있나요?
5MB까지 됩니다. 브라우저 탭이 멈추는 것을 막기 위해 입력·업로드 모두 5MB에서 끊고, 그보다 큰 데이터는 트리를 그리지 않고 용량 안내 문구를 표시합니다. 로그나 덤프처럼 큰 JSON은 필요한 부분만 잘라서 넣어 주세요. 5MB 이내라도 노드 수가 아주 많으면 렌더링이 느려질 수 있습니다.
잘못된 형식의 JSON을 입력하면 어떻게 되나요?
유효하지 않은 JSON을 입력하면 트리가 그려지던 자리에 오류 메시지가 표시됩니다. 브라우저가 위치를 알려주는 오류라면 몇 번째 줄 몇 번째 글자에서 멈췄는지까지 함께 보여 주고(후행 쉼표처럼 위치가 오지 않는 경우도 있습니다), 잘못된 곳을 고치면 트리가 곧바로 다시 그려집니다. 흔한 원인은 마지막 항목 뒤에 남은 쉼표, 항목 이름을 큰따옴표로 감싸지 않은 경우, 작은따옴표를 쓴 경우, 괄호 짝이 안 맞는 경우입니다.
만들어진 트리를 이미지로 저장할 수 있나요?
네. 트리를 PNG 이미지로 내려받을 수 있습니다. 데이터 구조를 문서나 발표 자료에 넣거나 팀에 공유할 때 캡처보다 깔끔하게 나옵니다. 접어 둔 가지는 접힌 상태 그대로 저장되므로, 보여 주고 싶은 부분만 펼쳐 두고 저장하면 원하는 범위만 담을 수 있습니다.
검색했는데 값이 안 나옵니다.
접어 둔 가지 안쪽은 검색되지 않습니다. 찾는 값이 있을 만한 가지를 먼저 펼친 뒤 검색해 보세요. 어디에 있는지 짐작이 안 된다면 상위 가지를 모두 펼친 다음 검색하는 편이 확실합니다. 트리가 너무 커서 보기 힘들다면 확대·축소 버튼으로 배율을 조절하거나 전체화면으로 펼쳐 보세요.
마지막 업데이트: