JSON 트리 뷰어

이 도구는 무엇인가요?

JSON 트리 뷰어는 JSON 문서를 탐색 가능한 개요로 바꿔줍니다. 모든 객체와 배열은 펼치거나 접을 수 있는 노드가 되고, 각 키는 추론된 타입을 보여주며, 리프 값은 바로 옆에 표시됩니다. 수천 줄의 텍스트를 스크롤하는 대신 실제로 필요한 가지만 파고들 수 있습니다.

이 도구는 JSON 포맷터와는 다릅니다. 포맷터는 JSON 텍스트에 들여쓰기를 적용해 보기 좋게 다시 쓰는 도구로, 단순히 예쁘게 만들거나 압축하거나 문법을 검증할 때 적합합니다. 트리 뷰어는 구조 자체를 탐색하고 파악하는 데 특화되어 있으며, 특히 JSON이 크거나 깊게 중첩되어 있거나 원하는 데이터가 어디에 있는지 아직 모를 때 유용합니다. 단순히 JSON 텍스트를 예쁘게 만들거나 검증만 하고 싶다면 JSON 포맷터를 사용하세요.

왜 사용해야 할까요?

• 깊게 중첩된 API 응답이나 설정 파일을 어느 괄호가 어느 레벨에 속하는지 놓치지 않고 탐색할 수 있습니다.
• 키 이름이나 값으로 검색해 일치하는 결과로 바로 이동하며, 경로가 자동으로 펼쳐집니다.
• 수 메가바이트에 달하는 큰 JSON도 부드럽게 처리합니다 — 자식 노드는 펼칠 때만 생성되므로 탭이 멈추지 않습니다.
• 문자열, 숫자, 불리언, null, 객체, 배열 등 모든 값의 타입을 명확한 라벨로 한눈에 확인할 수 있습니다.
• 100% 프라이빗 — 파싱과 렌더링이 모두 브라우저 안에서 이루어지며 어디에도 업로드되거나 저장되지 않습니다.

사용 방법

1. 입력창에 JSON을 붙여넣거나, 파일 선택 버튼으로 디스크에서 JSON 파일을 불러오세요.
2. "트리 렌더링"을 클릭해 인터랙티브 뷰를 생성하세요.
3. 객체나 배열 옆의 화살표를 클릭해 펼치거나 접으세요 — 큰 파일도 반응성을 유지하도록 두어 단계보다 깊은 노드는 자동으로 접힌 상태로 시작합니다.
4. 검색창에 키 이름이나 값을 입력해 일치하는 항목을 찾으세요 — 도구가 경로상의 모든 상위 노드를 펼치고 결과로 스크롤한 뒤 강조 표시합니다.
5. 다음/이전 버튼을 사용해 여러 개의 검색 결과를 차례로 확인하세요.

예시

입력

{"user":{"id":42,"name":"Ada","roles":["admin","editor"],"active":true,"manager":null}}

결과

user: { 4 keys }
  id: 42 (number)
  name: "Ada" (string)
  roles: [ 2 items ]
    0: "admin"
    1: "editor"
  active: true (boolean)
  manager: null

각 행은 키, 추론된 타입, 그리고 리프 노드라면 값을, 객체나 배열이라면 펼치기 전까지 접힌 개수를 보여줍니다.

실전 팁

• 거대한 API 응답이라면 노드를 하나씩 펼치기보다 id나 오류 코드처럼 특징적인 필드 이름부터 검색해보세요 — 바로 그 위치로 이동합니다.
• 처음 몇 단계보다 깊은 노드는 의도적으로 접힌 채 시작합니다. 수 메가바이트짜리 페이로드도 반응성을 유지하기 위한 것이니 필요한 가지만 펼치세요.
• 타입 배지(string, number, boolean, null, object, array)는 필드가 예상과 달리 null이거나, 객체를 기대했는데 배열인 경우를 발견할 때 특히 유용합니다.
• 구조를 탐색할 필요 없이 JSON 조각을 예쁘게 만들거나 검증만 하면 된다면 JSON 포맷터가 더 빠릅니다.

실무에서는 이렇게 쓰입니다

깊게 중첩된 API 응답, 데이터베이스 내보내기, 설정 파일은 평평한 텍스트로는 파악하기 어렵습니다 — 어느 닫는 중괄호가 어느 키와 짝인지 놓치기 쉽습니다. 같은 페이로드를 트리 뷰로 열면 필요 없는 부분은 모두 접고 중요한 가지에만 집중할 수 있어, 포맷된 텍스트 덩어리를 스크롤하며 원하는 필드를 찾는 것보다 훨씬 빠릅니다.

흔한 흐름은 이렇습니다. 큰 웹훅 페이로드를 먼저 여기에 붙여넣어 구조를 파악하고 필요한 필드를 찾은 다음, 버그 리포트나 코드 리뷰에 붙여넣을 깔끔하고 들여쓰기가 적용된 텍스트가 필요하면 JSON 포맷터로 전환합니다.

→ JSON 포맷터

이럴 때 사용하세요

• 특정 필드가 어디 있는지 코드를 작성하기 전에 크고 깊게 중첩된 API 응답을 탐색할 때.
• 수천 줄의 원본 텍스트를 스크롤하지 않고 큰 설정 파일이나 내보내기 파일을 검토할 때.
• 낯선 JSON 페이로드를 직접 파싱하는 코드를 짜기 전에 형태와 타입을 확인할 때.
• 큰 JSON 문서 어딘가에 묻혀 있는 특정 값(ID, 오류 메시지, 타임스탬프)을 찾아낼 때.

자주 묻는 질문