JSON 트리 뷰어 - JSON 데이터 시각화 온라인
JSON을 인터랙티브 트리 구조로 시각화. 펼치기, 접기, 노드 검색, JSON 경로 복사 — 100% 클라이언트, 서버 전송 없음.
자주 묻는 질문
JSON 트리 뷰어란 무엇인가요?
JSON 트리 뷰어는 JSON 데이터를 파싱하여 인터랙티브한 계층형 트리 구조로 표시하는 온라인 도구입니다. 대괄호와 중괄호가 포함된 원시 텍스트 대신, 노드를 펼치고 접으며 중첩된 객체와 배열을 시각적으로 탐색할 수 있습니다. 각 데이터 타입은 즉시 식별할 수 있도록 색상으로 구분됩니다.
이 JSON 트리 뷰어를 어떻게 사용하나요?
왼쪽 입력 영역에 JSON 데이터를 붙여넣거나 .json 파일을 업로드하세요. 트리 뷰가 오른쪽에 자동으로 렌더링됩니다. 삼각형 아이콘을 클릭하여 노드를 펼치거나 접고, 깊이 버튼(1, 2, 3, 전체)으로 트리 깊이를 조절하고, 검색 바로 특정 키나 값을 찾을 수 있습니다.
제 데이터는 안전한가요? 서버로 전송되는 것이 있나요?
모든 JSON 파싱과 트리 시각화는 브라우저의 네이티브 JSON.parse()를 사용하여 100% 클라이언트 측에서 수행됩니다. 어떤 데이터도 서버로 전송되거나 데이터베이스에 저장되거나 로그에 기록되지 않습니다. 민감한 API 응답, 프로덕션 데이터, 기밀 설정 파일에도 안전하게 사용할 수 있습니다.
JSONPath란 무엇이고 경로 복사는 어떻게 작동하나요?
JSONPath는 XML의 XPath와 유사한 JSON 쿼리 언어입니다. JSON 구조 내 특정 요소를 참조하는 방법을 제공합니다 (예: $.data.users[0].name). 트리에서 노드를 클릭하면 브레드크럼 바에 전체 JSONPath가 표시되며, 한 번의 클릭으로 복사할 수 있습니다.
이 도구가 처리할 수 있는 최대 JSON 크기는 얼마인가요?
이 도구는 최대 5MB 크기의 JSON 파일을 처리할 수 있습니다. 1MB 미만의 파일은 거의 즉시 파싱됩니다. 트리 뷰는 부드러운 스크롤링으로 대용량 구조를 지원합니다. 깊이 버튼을 사용하여 접힌 상태에서 시작하고 필요한 섹션만 펼치세요.
JSON Formatter 도구와 어떻게 다른가요?
JSON Formatter는 텍스트 처리에 초점을 맞추며 — JSON 텍스트를 포맷팅, 미화, 압축합니다. JSON Tree Viewer는 시각적 탐색에 초점을 맞추며 — 펼치기/접기, 검색, 경로 복사, 노드 검사가 가능한 인터랙티브 트리로 렌더링합니다. 두 도구는 상호 보완적입니다.
특정 키나 값을 검색할 수 있나요?
네. 검색 바는 키와 값을 동시에 검색합니다. 일치하는 노드가 하이라이트되고, 상위 노드가 자동으로 펼쳐져 매치를 표시하며, 매치 카운터가 결과를 보여줍니다 (예: '12개 중 3'). 이전/다음 버튼으로 매치 사이를 이동할 수 있습니다.
어떤 JSON 데이터 타입이 지원되나요?
모든 표준 JSON 데이터 타입을 지원합니다: 문자열(초록), 숫자(주황), 불리언(보라), null(회색 이탤릭), 객체(키 개수와 함께 펼치기 가능), 배열(항목 개수와 함께 펼치기 가능). 각 타입은 시각적 식별을 위해 고유한 색상 코드를 가집니다.
코드 예제
// Build a tree from JSON and search it
function buildJsonTree(data, key = '$', path = '$', depth = 0) {
const node = { key, path, depth, type: getType(data) };
if (data === null) { node.value = null; return node; }
if (Array.isArray(data)) {
node.children = data.map((item, i) =>
buildJsonTree(item, `[${i}]`, `${path}[${i}]`, depth + 1));
return node;
}
if (typeof data === 'object') {
node.children = Object.entries(data).map(([k, v]) =>
buildJsonTree(v, k, `${path}.${k}`, depth + 1));
return node;
}
node.value = data;
return node;
}
function getType(v) {
if (v === null) return 'null';
if (Array.isArray(v)) return 'array';
return typeof v;
}
const json = { name: 'John', tags: ['dev', 'js'] };
const tree = buildJsonTree(json);
console.log(JSON.stringify(tree, null, 2));