liminfo

JSON Tree Viewer

JSON 데이터 인터랙티브 트리 시각화 도구

JSON Tree Viewer 소개

JSON Tree Viewer는 JSON 텍스트를 파싱해 브라우저에서 완전한 인터랙티브 트리 구조로 렌더링합니다. 각 노드는 키 이름과 값의 데이터 타입을 고유한 색상으로 표시합니다. 문자열은 녹색, 숫자는 파란색, 불리언은 빨간색, null은 회색으로 나타납니다. 객체와 배열 노드는 자식 키 수나 항목 수를 괄호 안에 표시하며, 클릭 한 번으로 펼치고 접을 수 있습니다. 깊이 0~1의 노드는 기본적으로 펼쳐져 있어 별도 조작 없이 최상위 구조를 바로 파악할 수 있습니다.

이 도구는 API 개발자, QA 엔지니어, 데이터 분석가가 코드 편집기로 전환하지 않고 대용량 또는 깊게 중첩된 JSON 페이로드를 빠르게 탐색해야 할 때 이상적입니다. 트리 전체가 브라우저 내 React 상태로 렌더링되므로 서버 요청이나 파일 업로드가 없어 내부 API의 민감한 JSON 응답도 안전하게 검토할 수 있습니다.

모든 노드에 마우스를 올리면 나타나는 경로 복사 버튼이 특히 유용합니다. 클릭하면 해당 노드의 JSONPath 표기법(예: $.users[0].address.city)이 클립보드에 복사되어, 코드에서 특정 필드를 참조하거나 쿼리 필터를 작성하거나 동료에게 정확한 위치를 공유할 때 매우 편리합니다.

주요 기능

  • 완전한 인터랙티브 트리로 JSON 렌더링
  • 타입별 색상 구분 — 문자열 녹색, 숫자 파란색, 불리언 빨간색, null 회색
  • 객체와 배열 노드에 자식 수 표시 (예: "{ 5 keys }" 또는 "[ 3 items ]")
  • 파싱 후 깊이 0~1 노드 자동 펼침으로 즉각적인 구조 파악
  • 마우스 오버 시 노드마다 경로 복사 버튼 표시
  • JSONPath 점/괄호 표기법(예: $.users[0].name) 클립보드 복사
  • 파싱 오류 발생 시 엔진 오류 메시지 포함 명확한 에러 패널 표시
  • 100% 클라이언트 사이드 — JSON이 브라우저 밖으로 나가지 않음

자주 묻는 질문

JSON Tree Viewer는 어떻게 사용하나요?

JSON을 텍스트 영역에 붙여넣고 "JSON 파싱" 버튼을 클릭하세요. 트리가 즉시 렌더링됩니다. 객체나 배열 노드를 클릭해 펼치고 접을 수 있으며, 노드에 마우스를 올리면 "path" 버튼이 나타나 JSONPath를 복사할 수 있습니다.

색상 코딩은 어떤 타입을 구분하나요?

문자열은 녹색, 숫자는 파란색, 불리언은 빨간색, null은 회색, 객체/배열 컨테이너 노드는 중립적인 진한 회색으로 표시됩니다. 숫자가 문자열로 저장된 경우 파란색 대신 녹색으로 나타나므로 타입 불일치를 한눈에 포착할 수 있습니다.

"path"를 클릭하면 복사되는 경로는 무엇인가요?

$로 시작하는 JSONPath 형식 문자열입니다. 배열의 경우 인덱스가 대괄호 안에 표시되고(예: $.items[2].name), 객체의 경우 키가 점으로 구분됩니다. 이 표기법은 jq, JSONPath 라이브러리, 많은 API 테스트 도구와 호환됩니다.

매우 큰 JSON 파일도 처리할 수 있나요?

뷰어는 파싱된 트리 전체를 React 컴포넌트로 렌더링하므로, 수십만 개 노드의 JSON은 초기 렌더링이 느릴 수 있습니다. 최상위 노드를 접어두고 필요한 부분만 펼치는 방식으로 성능을 유지할 수 있습니다.

JSON이 잘못된 형식이면 어떻게 되나요?

JSON.parse 오류를 포착해 엔진의 오류 메시지, 일반적으로 문법 오류의 행과 문자 위치를 포함해 빨간 오류 패널에 표시합니다. 텍스트 영역에서 문제를 수정하고 다시 파싱하면 됩니다.

JSON 스키마 검증도 지원하나요?

아니요, 이 도구는 입력이 파싱 가능한 JSON인지 문법 검증만 수행합니다. JSON Schema 정의에 대한 검증은 ajv나 jsonschema 같은 스키마 검증 도구가 적합합니다.

URL에서 가져온 JSON을 바로 볼 수 있나요?

이 도구는 텍스트 직접 입력만 지원합니다. URL의 JSON을 보려면 curl이나 브라우저 개발자 도구 Network 탭으로 응답 본문을 복사해 붙여넣으세요.

JSON 데이터가 안전하게 처리되나요?

네. 트리 렌더링은 전적으로 브라우저 내 React와 JavaScript로 이루어집니다. 어떤 데이터도 서버로 전송되지 않습니다. 민감한 API 응답, 토큰, 내부 데이터 구조를 안전하게 붙여넣을 수 있습니다.