JSON 트리 뷰어: 접을 수 있는 트리로 JSON 탐색

5,000 줄짜리 API 응답은 원시 텍스트로는 못 읽습니다. 접을 수 있는 JSON 트리 가 그 괄호의 벽을 가지마다 펼치고 접을 수 있는 인터랙티브 구조로 바꿔 줍니다 —— 다른 모든 걸 스크롤하지 않고도 원하는 필드를 찾을 수 있게. 이 가이드는 JSON tree viewer 가 뭔지, 크거나 깊게 중첩된 데이터에 왜 평문보다 좋은지, 그리고 formatter 나 validator 대신 트리를 잡아야 할 때를 설명합니다.

접을 수 있는 JSON 트리란?

JSON tree viewer 는 JSON 을 파싱해 평평한 텍스트 블록이 아닌 펼칠 수 있는 노드의 계층으로 렌더링합니다. 모든 객체 {} 와 배열 [] 가 한 줄로 접거나 자식을 펼쳐 보일 수 있는 노드가 됩니다. JSON 을 읽는 것 과 탐색하는 것 의 차이입니다.

// 접힌 상태 —— 한눈에 모양이 보임
{
  "user": {…},        ▶ 6 keys
  "orders": […],      ▶ 24 items
  "meta": {…}         ▶ 3 keys
}

노드를 클릭하면 펼쳐지고, 다시 클릭하면 한 줄 요약으로 접힙니다. 종종 숨겨진 키나 항목 수를 함께 보여 줍니다. 데이터 자체는 결코 바뀌지 않고, 당신이 보고 있는 양만 바뀝니다.

왜 트리가 텍스트의 벽보다 나은가

포매팅(예쁘게 출력)은 JSON 을 가독성 있게 만들지만, 큰 예쁘게 출력된 문서도 여전히 스크롤할 수천 줄입니다. 트리는 당신이 제어할 수 있는 구조 를 더해 줍니다:

• 깊이 중첩된 데이터 —— 설정 파일, Kubernetes manifest, GraphQL 응답은 여러 단계로 중첩됩니다. 관심 없는 가지를 접으면 관련 섹션이 위로 떠오릅니다.
• 큰 API 응답 —— 500 항목 배열을 한 줄로 접고 디버깅 중인 한 요소만 펼치기.
• 낯선 페이로드 —— 모든 걸 최상위로 접으면 파싱 코드 한 줄 쓰기 전에 API 의 형태를 즉시 지도처럼 볼 수 있습니다.
• 구조 비교 —— 접힌 노드 덕에 두 페이로드가 어떤 섹션을 공유하는지 한눈에 보입니다.

펼치기, 접기, 탐색

좋은 JSON tree viewer 는 클릭 토글 이상을 줍니다:

• 노드별 펼치기/접기 —— 조사 중인 가지만 엽니다.
• 전체 접기 / 전체 펼치기 —— 노드를 하나씩 닫는 대신 즉시 뷰를 리셋.
• 항목과 키 개수 —— 접힌 노드가 ▶ 24 items 또는 ▶ 6 keys 를 보여 방향감각을 유지해 줍니다.
• 구문 강조 —— 키, 문자열, 숫자, boolean, null 이 각기 다른 색을 받아 타입이 한눈에 분명합니다.
• 키 내비게이션 —— 수천 줄을 스크롤하지 않고 필드로 점프.

경로로 검색: JSONPath 와 JMESPath

트리가 열리면 다음 질문은 보통 "이 키는 어디?" 입니다. 두 작은 쿼리 언어가 클릭 대신 경로로 값에 접근하게 해 줍니다:

• JSONPath —— XPath 에서 영감을 받고, RFC 9535 으로 표준화됨. $.user.orders[*].id 은 "user.orders 의 모든 id" 로 읽습니다. 와일드카드, 슬라이스, 필터(?(@.price > 10)), 재귀 하강(..price) 지원.
• JMESPath —— AWS CLI 의 --query 과 많은 클라우드 도구가 사용. 표면은 비슷하지만 일급 시민의 프로젝션과 함수를 지원: users[?active].name.

tree viewer 는 탐색용, JSONPath/JMESPath 는 반복 가능한 추출용. 짝지어 쓰세요: 먼저 트리로 경로를 찾고, 스크립트나 jq 용으로 JSONPath 표현식으로 잡으세요.

Tree viewer vs Formatter vs Validator —— 언제 어느 걸 쓸지

이들은 겹칩니다 —— 대부분의 현대 도구는 포매팅 과 트리 렌더링을 모두 하지만 —— 어느 쪽으로 손을 뻗을지 결정짓는 질문은: 복사할 출력(formatter)이 필요한가, 탐색할 구조(viewer)이 필요한가. 전체 비교는 JSON Viewer vs JSON Formatter.

보기 전에 깨진 JSON 을 처리

tree viewer 는 트리를 만들려면 유효한 JSON 이 필요합니다 —— 파싱 못 하는 구조는 렌더링 못 합니다. 입력에 후행 쉼표, 단일 따옴표, 따옴표 없는 키(손편집 설정이나 LLM 출력에 흔함)가 있으면 먼저 수리하세요. 좋은 viewer 는 렌더링 전에 흔한 실수를 자동 수리합니다. 그렇지 않다면 JSON Fix 로 정리하거나 validator 로 정확한 오류를 확인. 근간 규칙은 JSON 이란?

자주 묻는 질문

접을 수 있는 JSON 트리가 뭔가요?

JSON 을 평평한 텍스트가 아니라 펼칠 수 있는 노드의 계층으로 렌더링하는 뷰. 각 객체와 배열을 한 줄 요약으로 접거나 펼쳐 자식을 보여 줄 수 있어 큰 문서를 다 스크롤하지 않고 탐색할 수 있습니다.

JSON tree viewer 는 formatter 와 어떻게 다른가요?

formatter 는 복사할 깨끗하고 들여쓰기 된 텍스트 를 출력하고, tree viewer 는 클릭으로 훑는 인터랙티브한 구조 를 렌더링합니다. 출력에는 formatter, 탐색에는 viewer. 전체 비교 참조.

개별 노드를 접고 펼칠 수 있나요?

네 —— 어떤 객체나 배열을 클릭하면 토글되고, "collapse all" / "expand all" 로 전체 뷰를 리셋. 접힌 노드는 숨겨진 키나 항목 수를 보여 줍니다.

내 JSON 이 유효하지 않으면?

트리는 파싱 가능한 JSON 에서만 만들 수 있습니다. 먼저 JSON Fix 로 흔한 오류를 수리하거나 JSON validator 로 정확한 문제를 찾고 정리된 결과를 보세요.

JSON 을 트리로 탐색

어떤 JSON 이든 fixjson 의 JSON Viewer 에 붙여 넣으면 즉시 접을 수 있는 트리를 렌더링합니다 —— 어떤 노드든 펼치고 접고, 항목 개수를 보고, 큰 중첩 페이로드를 탐색. 렌더링 전에 깨진 JSON 을 수리하고, 모든 게 브라우저에서 돌아 업로드되지 않습니다.

• JSON Viewer —— JSON 을 접을 수 있는 트리로 탐색
• JSON Viewer vs JSON Formatter —— 작업에 맞는 도구
• JSON 포매팅 방법 —— 읽기 좋은 텍스트로 예쁘게 출력
• JSON Diff —— 두 JSON 문서를 나란히 비교
• JSON 이란? —— 트리 뒤의 데이터 타입과 규칙