JSONKit

© 2024 JSONKit

JSONKit
블로그

JSON 트리 뷰어로 복잡한 데이터 구조 파악하기

API 응답으로 수백 줄짜리 JSON을 받아봤다면, 그 안에서 원하는 필드를 찾느라 스크롤을 한참 내린 경험이 있을 것입니다. JSON 트리 뷰어는 이런 복잡한 데이터를 시각적으로 탐색할 수 있게 해주는 도구입니다.

왜 트리 뷰가 필요한가

중첩이 깊은 JSON의 문제

현대 API는 대부분 중첩된 객체와 배열을 포함한 복잡한 JSON을 반환합니다. 아래처럼 단순해 보이는 사용자 데이터도 실제로는 여러 단계로 중첩됩니다.

{
  "user": {
    "profile": {
      "personal": {
        "name": "홍길동",
        "contact": {
          "email": "hong@example.com",
          "phone": {
            "mobile": "010-1234-5678",
            "verified": true
          }
        }
      },
      "preferences": {
        "notifications": {
          "email": true,
          "sms": false,
          "push": true
        }
      }
    }
  }
}

텍스트로 보면 원하는 필드를 찾기 어렵지만, 트리 뷰에서는 각 단계를 접고 펼치며 탐색할 수 있습니다.

API 응답 탐색의 어려움

REST API나 GraphQL 응답은 종종 수십 개의 중첩 객체와 배열을 포함합니다. 특히 다음과 같은 상황에서 트리 뷰가 필수적입니다.

  • 처음 사용하는 외부 API의 응답 구조 파악
  • 예상과 다른 데이터가 반환될 때 디버깅
  • 복잡한 데이터 모델 설계 시 구조 검토
  • 팀원에게 데이터 구조 설명

트리 뷰의 기본 개념

노드 펼치기/접기

트리 뷰에서 각 객체와 배열은 노드로 표현됩니다. 노드 옆의 화살표를 클릭하면 내부 구조를 펼치거나 접을 수 있습니다.

▼ user (object)
  ▼ profile (object)
    ▶ personal (object)    ← 접힌 상태
    ▶ preferences (object) ← 접힌 상태

깊이 들어가지 않아도 되는 부분은 접어두고, 관심 있는 부분만 펼쳐서 탐색할 수 있습니다.

타입별 색상 구분

좋은 트리 뷰어는 데이터 타입에 따라 색상을 다르게 표시합니다.

타입일반적인 색상예시
문자열 (String)초록색"홍길동"
숫자 (Number)파란색

42, 3.14

불리언 (Boolean)주황색

true, false

null회색null
객체 (Object)흰색/기본

{} + 키 개수

배열 (Array)흰색/기본

[] + 요소 개수

색상 구분 덕분에 타입 불일치를 시각적으로 빠르게 발견할 수 있습니다. 숫자여야 할 값이 문자열로 들어온 경우를 즉시 알아챌 수 있습니다.

경로 표시

각 노드의 경로(예: user.profile.personal.name)를 표시해 주는 뷰어는 JSONPath 표현식 작성에 도움이 됩니다.

대규모 JSON 탐색 전략

전체 접기부터 시작

수백 개의 노드를 가진 JSON을 열면 처음에는 모두 펼쳐진 상태로 표시될 수 있습니다. 먼저 전체를 접은 뒤(Collapse All), 최상위 구조를 파악하고 필요한 부분만 선택적으로 펼치는 방식이 효율적입니다.

▶ data (object, 3 keys)     ← 접힌 상태에서 시작
▶ meta (object, 5 keys)
▶ pagination (object, 4 keys)

최상위에 어떤 키들이 있는지 파악한 후, 필요한 키를 선택적으로 펼칩니다.

배열 탐색

배열은 인덱스로 접근합니다. 100개 요소를 가진 배열에서 트리 뷰어는 보통 처음 몇 개의 항목만 보여주고 나머지는 "더 보기" 방식으로 처리합니다.

▼ items (array, 100 items)
  ▶ [0] (object, 5 keys)
  ▶ [1] (object, 5 keys)
  ▶ [2] (object, 5 keys)
  ... (97 more items)

배열의 첫 항목을 먼저 살펴보면 전체 구조를 파악할 수 있습니다. 모든 항목이 동일한 스키마를 따르는 경우가 많기 때문입니다.

깊이 제한 탐색

복잡한 JSON을 탐색할 때는 깊이를 단계별로 늘려가는 방법을 추천합니다.

  1. 1단계만 펼쳐서 최상위 키 파악
  2. 관심 있는 키를 2단계까지 펼치기
  3. 목표 데이터를 찾을 때까지 반복

실전 활용

API 디버깅

프론트엔드 개발 중 API 응답이 예상과 다를 때, 응답 JSON을 트리 뷰어에 붙여넣으면 구조를 빠르게 파악할 수 있습니다.

// 개발 중 API 응답 확인 예시
fetch('/api/users/1')
  .then((res) => res.json())
  .then((data) => {
    // JSON을 복사해서 트리 뷰어로 탐색
    console.log(JSON.stringify(data));
  });

특히 다음과 같은 상황에서 유용합니다.

  • 응답에서 특정 필드가 어느 경로에 있는지 찾을 때
  • 중첩된 배열 안의 객체 구조 파악
  • null 또는 undefined가 반환되는 원인 추적

데이터 모델링

새로운 데이터 구조를 설계할 때 JSON으로 작성한 뒤 트리 뷰어로 검토하면 설계 오류를 조기에 발견할 수 있습니다.

{
  "order": {
    "id": "ORD-001",
    "customer": {
      "id": 123,
      "name": "홍길동"
    },
    "items": [
      {
        "productId": "P-001",
        "quantity": 2,
        "price": 15000
      }
    ],
    "total": 30000,
    "status": "pending"
  }
}

트리 뷰에서 구조를 보면서 불필요한 중첩이 있거나 데이터 위치가 잘못된 경우를 시각적으로 확인할 수 있습니다.

Swagger/OpenAPI 응답 탐색

OpenAPI 스펙 파일은 복잡한 JSON 구조를 가집니다. 트리 뷰어로 스펙 파일을 탐색하면 엔드포인트와 스키마 구조를 빠르게 파악할 수 있습니다.

JSONKit Viewer 활용하기

JSONKit의 Viewer 도구는 복잡한 JSON을 인터랙티브한 트리 구조로 시각화합니다. 다음 기능을 제공합니다.

  • 노드 클릭으로 펼치기/접기
  • 타입별 색상 구분으로 데이터 타입 즉시 파악
  • 전체 펼치기/접기 기능
  • 모든 처리가 브라우저에서 이루어져 데이터 보안 유지

API 응답을 복사해서 Viewer에 붙여넣으면 즉시 탐색 가능한 트리 구조로 변환됩니다.

마무리

JSON 트리 뷰어는 복잡한 데이터 구조를 다루는 개발자에게 필수 도구입니다. 텍스트로는 파악하기 어려운 중첩 구조를 시각적으로 탐색하고, 타입 오류를 빠르게 발견하며, 팀원과 데이터 구조를 쉽게 공유할 수 있습니다. 다음에 복잡한 API 응답을 받으면 바로 트리 뷰어로 열어보세요.

viewer 도구 사용해보기