JSON 트리 뷰어 - 구조 시각화 및 경로 가져오기

JSON 트리 뷰어이란?

JSON 트리 뷰어는 JSON 데이터를 확장·접기가 가능한 트리 형식으로 시각화하는 도구예요. 데이터 타입(문자열·숫자·불리언·배열·객체·null)을 색상으로 구분하고 통계 정보(총 키 수·최대 깊이·타입별 카운트)도 확인할 수 있어요. 노드를 클릭하면 해당 JSONPath(예: $.users[0].name)를 클립보드에 복사해요. 깊이 중첩된 JSON 구조 파악에 특히 유용해요.

관련 항목: JSON 포맷터 · JSON 차이 비교 · JSON → 코드 변환

사용 방법

1. 텍스트 영역에 JSON을 붙여넣어요
2. '트리 표시' 버튼을 클릭해요
3. 노드를 클릭하여 확장/접기를 토글해요

사용 예시

입력:
{"users":[{"id":1,"name":"홍길동"},{"id":2,"name":"김철수"}]}

트리 표시:
▾ users (배열: 2개)
  ▾ [0] (객체)
    id: 1 (숫자)
    name: "홍길동" (문자열)
  ▾ [1] (객체)
    id: 2 (숫자)
    name: "김철수" (문자열)

실무 활용 예시: 깊이 중첩된 API 응답 JSON의 구조를 파악하고 목적 필드의 JSONPath를 복사하여 코드에 붙여넣어요

FAQ

큰 JSON도 표시할 수 있나요?

네. 기본적으로 깊이 2까지 노드가 확장돼요. 큰 JSON도 원활하게 조작할 수 있어요.

JSONPath는 어떤 형식으로 복사되나요?

$.key.subkey나 $.array[0].field 같은 JSONPath 형식으로 복사돼요. JQuery, JayWay 등 주요 JSONPath 라이브러리에서 사용할 수 있어요.

확장·접기는 어떻게 조작하나요?

노드를 클릭하면 확장·접기가 토글돼요. 초기 상태는 깊이 2까지 확장돼요.

배열 요소 수는 어디서 확인하나요?

배열 노드 레이블에 요소 수가 표시돼요. 통계 정보 패널에도 타입별 집계가 표시돼요.

데이터가 서버로 전송되나요?

아니요. 모든 표시 처리는 브라우저 내에서 완료돼요. 민감한 데이터도 안전해요.

관련 도구