도구
가이드

JSON 트리 뷰어

JSON

JSON을 접고 펼칠 수 있는 트리로 렌더링합니다.

100% 클라이언트 백엔드 없음
입력
출력
이 페이지에서

JSON 트리 뷰어란?#

JSON 트리 뷰어는 JSON 문서를 파싱해서 파일 탐색기가 디렉터리 트리를 보여주듯 접을 수 있는 개요 로 그립니다. 한 줄로 길게 이어진 들여쓰기 텍스트를 읽으며 괄호를 세서 무엇이 무엇 안에 중첩되어 있는지 파악하는 대신, 구조를 한눈에 볼 수 있습니다. 객체와 배열은 클릭해서 열고 닫을 수 있는 가지이고, 문자열·숫자·불리언·null 같은 잎 값은 끝에 놓입니다.

이 차이는 문서가 깊거나 낯설 때 가장 큽니다. API 응답 하나가 수백 줄에 달하기 쉽고, 설정 파일은 비슷해 보이는 이름 아래 4~5단계 깊이로 설정이 중첩될 수 있습니다. 평면 포매터에서는 스크롤하다 자리를 잃습니다. 트리에서는 관심 있는 가지만 남겨두고 나머지를 모두 접어버리면 다른 것들이 주의를 끌지 않습니다.

이 페이지는 브라우저 안에서 JSON을 파싱하고 노드 단위로 접을 수 있는 트리를 렌더링하며, 입력을 HTML로 해석하지 않고 온전히 텍스트 콘텐츠로 다룹니다. 그래서 <script> 태그나 HTML처럼 보이는 문자열이 들어있는 문서도 실행되지 않고 비활성 상태로 표시됩니다.

사용 방법#

  1. 왼쪽 입력 패널에 JSON을 붙여넣으세요. 타이핑하는 대로 파싱이 일어납니다.
  2. 오른쪽에 트리가 나타납니다. 각 객체나 배열은 ▼ 토글, 여는 괄호({ 또는 [), 안에 든 항목 수, 닫는 괄호를 보여줍니다. 토글이나 괄호 자체를 클릭해 해당 가지를 펼치거나 접으세요.
  3. 모두 펼치기 로 모든 가지를 잎까지 열고, 모두 접기 로 문서 전체를 루트만 남기 줄입니다. 접기는 넓게 퍼진 페이로드를 한 줄 개요로 파악한 뒤 들여다볼 때 씁니다.
  4. 오른쪽 헤더는 루트의 최상위 항목 수(예: 5 items)를 보여주어 문서의 크기를 한눈에 알 수 있게 합니다.
  5. 예제 는 중첩된 데모 문서를 불러오고, 지우기 는 양쪽 패널을 비웁니다.

주요 기능#

  • 각 가지를 독립적으로 접기. 각 컨테이너는 자체적으로 열리고 닫히므로, 나머지는 접은 채로 하나의 하위 객체만 참고용으로 펼쳐둘 수 있습니다.
  • 들여쓰기 가이드. 자식 항목이 세로 가이드선 아래 들여쓰기되어, 조밀한 문서에서도 어떤 항목이 어느 괄호에 속하는지 명확합니다.
  • XSS 안전 렌더링. 모든 레이블과 값은 텍스트 콘텐츠로 작성되며, 입력은 결코 HTML로 파싱되지 않습니다. 악의적으로 보이는 문자열은 단순히 텍스트로 표시됩니다.
  • 충실한 잎 값. 문자열은 양끝 따옴표를 유지하고 숫자는 JSON.stringify가 쓰는 그대로 렌더링되어 true(불리언)와 "true"(문자열)이 시각적으로 구분됩니다.
  • 실시간 카운트. 헤더는 루트가 몇 개의 항목을 담고 있는지 편집에 맞춰 갱신합니다.

실전 예시#

예제 를 불러오면 파싱된 트리는 다섯 개의 최상위 항목을 가진 루트 객체를 보여줍니다.

▼ { 5
    "name": "ArpGate DevTools"
    "version": 1
    "active": true
  ▼ "tags": [ 3 ]
  ▼ "features": { 2 }

이 중 두 항목은 컨테이너입니다. tags를 펼치면 세 요소 배열("json", "encoding", "crypto")이 나타나고, features를 펼치면 static은 true이고 backend는 null이라는 점이 드러납니다. 트리는 평면 덤프에서 추측에 맡기는 대신 이 구분을 명시적으로 보여줍니다.

features 하위 객체에만 관심이 있다면 최상위의 다른 모든 ▼를 클릭해 접으세요. 루트의 카운트 5는 정확히 유지되고, 들여쓰기 가이드가 static과 backend가 루트가 아니라 features에 속한다는 점을 명확히 해 줍니다.

FAQ#

이 도구는 내 JSON을 수정하거나 다시 포맷하나요?#

아니요. 트리는 파싱된 값의 읽기 전용 보기 입니다. 입력 텍스트는 결코 다시 쓰이거나, 다시 들여쓰기되거나, 내보내지지 않습니다. 문서를 텍스트로 예쁘게 출력하려면 포매터를 쓰세요. 이 도구는 정규화가 아니라 탐색을 위한 것입니다.

트리에서 문자열이 왜 아직도 따옴표를 가지고 있나요?#

JSON 자신이 문자열과 키워드를 구별하는 방식이기 때문입니다. 따옴표가 없다면 true와 "true"가 같아 보이고, null과 문자열 "null"도 같아 보일 것입니다. 따옴표(JSON.stringify가 만들어내는 그대로)를 유지하면 그 구분을 한눈에 보존합니다.

매우 큰 문서는 어떻게 처리되나요?#

파싱과 렌더링은 전적으로 브라우저에서 일어나므로 업로드나 서버 왕복이 없습니다. 일반적인 설정이나 API 응답에는 즉각적입니다. 수 메가바이트 문서에서는 트리가 모든 값마다 노드를 만들어야 하므로 느려질 수 있습니다. 보이는 노드 수를 관리 가능하게 유지하려면 불필요한 가지를 접으세요.

HTML이 들어있는 문자열이 HTML로 렌더링되나요?#

절대 그렇지 않습니다. 도구는 모든 값을 텍스트 콘텐츠로 작성하며, 브라우저는 이를 비활성 문자로 취급합니다. <script>나 <img onerror=...>를 우연히 담고 있는 문자열은 있는 그대로 텍스트로 표시됩니다. 마크업으로 파싱되지 않고 실행될 수도 없습니다.