JSON 트리 뷰어

무료 온라인 JSON 트리 뷰어, 검사기 및 편집기

이 JSON 트리 뷰어는 원시 JSON 데이터를 펼치고 접을 수 있는 대화형 트리 구조로 바꿔 주므로 깊게 중첩된 객체도 쉽게 탐색할 수 있습니다. JSON 문자열을 붙여 넣거나, .json 파일을 업로드하거나, 페이지로 끌어다 놓으면 도구가 즉시 검증하고 파싱해 문자열, 숫자, 불리언, null 값을 색상으로 구분한 계층 구조로 보여 줍니다.

시각화 외에도 이 도구는 가벼운 JSON 편집기 역할을 합니다. 트리에서 기본 값 위에 마우스를 올리면 편집 및 삭제 버튼이 나타나므로 별도의 편집기로 옮겨 가지 않고 데이터를 그 자리에서 수정할 수 있습니다. 변경 사항은 바로 원본 JSON에 반영되며, 이를 복사하거나 다운로드할 수 있습니다. 내장된 JSON 검사기는 구문 오류를 실시간으로 표시하고, 자동 수정 기능은 따옴표 없는 키, 작은따옴표, 후행 쉼표 같은 흔한 실수를 고쳐 줍니다.

강력한 검색 기능으로 전체 구조에서 키와 값을 찾을 수 있으며, 통계 패널은 전체 키, 객체, 배열, 문자열, 숫자, 불리언, null의 개수와 최대 깊이, 바이트 크기를 정리해 보여 줍니다. API 응답을 디버깅하든, 설정 파일을 살펴보든, 데이터베이스 내보내기 파일을 분석하든 이 온라인 JSON 뷰어는 작업 속도를 유지하면서 데이터를 비공개로 지켜 줍니다. 모든 처리는 브라우저에서 이루어지며 서버로 업로드되지 않습니다.

주요 기능

• 펼치기, 접기, 모두 펼치기, 모두 접기 컨트롤이 있는 대화형 트리 뷰
• 오류 내용을 알려 주는 실시간 JSON 검증
• 따옴표 없는 키, 작은따옴표, 후행 쉼표, undefined 값 등 흔한 JSON 오류 자동 수정
• 트리 뷰에서 값을 바로 편집하고 삭제하는 인라인 편집
• 결과 강조 표시와 경로 표시가 있는 키 및 값 검색
• JSON 통계 패널: 전체 키, 객체, 배열, 문자열, 숫자, 불리언, null 개수, 최대 깊이, 크기
• 원본 JSON 입력의 서식 정리(pretty-print) 및 압축(minify) 전환
• 파일 업로드, 드래그 앤 드롭, 클립보드 복사, .json 다운로드
• 트리 뷰와 코드 뷰 전환
• 트리를 더 넓게 볼 수 있도록 접을 수 있는 입력 패널

JSON 트리 뷰어 사용 방법

1. JSON 불러오기: 입력 영역에 JSON을 붙여 넣거나, "업로드"를 클릭해 .json 파일을 선택하거나, 입력 영역에 파일을 끌어다 놓거나, "샘플 불러오기"를 클릭해 데모를 확인하세요.
2. 검증 및 파싱: 도구가 JSON을 실시간으로 검증합니다. 오류가 감지되면 "JSON 오류 수정"을 클릭해 흔한 문제를 자동으로 고치세요.
3. 트리 탐색: 노드를 클릭해 펼치거나 접으세요. 한꺼번에 탐색하려면 "모두 펼치기"와 "모두 접기"를 사용하세요.
4. 데이터 검색: 검색창에 키 이름이나 값을 입력하면 일치하는 항목이 전체 경로와 함께 표시됩니다.
5. 값 편집 또는 삭제: 기본 값 옆의 편집 또는 삭제 컨트롤을 사용하세요. 이 컨트롤은 터치 화면에서도 사용할 수 있으며, 삭제 시에는 확인 절차가 필요합니다.
6. 데이터 내보내기: "복사"를 클릭하면 JSON이 클립보드에 복사되고, "다운로드"를 클릭하면 .json 파일로 저장됩니다.

활용 사례

• API 응답 디버깅: REST 또는 GraphQL 응답을 붙여 넣어 구조를 시각화하고 특정 필드를 빠르게 찾으세요.
• 설정 파일 점검: package.json, tsconfig.json 또는 다른 설정 파일을 업로드해 구조와 값을 확인하세요.
• 데이터 구조 분석: 통계 패널을 사용해 JSON 페이로드의 복잡도, 즉 중첩 깊이, 키 개수, 바이트 크기를 파악하세요.
• 빠른 JSON 편집: IDE나 텍스트 편집기를 따로 열지 않고도 JSON 데이터를 간단히 수정하세요.
• 오류 수정: 로그나 외부 소스에서 가져온 잘못된 JSON을 애플리케이션에서 처리하기 전에 자동 수정 기능으로 고치세요.
• 데이터베이스 내보내기 검토: MongoDB, Firebase 같은 문서 데이터베이스에서 내보낸 JSON을 읽기 쉬운 형태로 확인하세요.
• 교육 및 학습: JSON, API, 데이터 모델링을 배우는 학생들을 위해 중첩된 데이터 구조를 시각화하세요.

자주 묻는 질문

팁과 모범 사례

• 탐색 전에 서식 정리: "JSON 서식 정리"를 클릭해 입력을 보기 좋게 정렬하면 트리 뷰와 함께 원본 텍스트를 읽기가 더 쉬워집니다.
• 입력 패널 접기: JSON을 불러온 뒤 입력 패널을 숨기면 깊은 계층 구조를 볼 수 있도록 트리에 최대한의 화면 공간을 줄 수 있습니다.
• 큰 파일은 검색 활용: 큰 JSON에서 노드를 일일이 펼치는 대신 검색창에 키나 값을 입력해 일치하는 항목으로 바로 이동하세요.
• 통계로 빠르게 점검: 개별 노드를 살펴보기 전에 "통계 보기"로 데이터 복잡도를 빠르게 파악하세요.
• 편하게 드래그 앤 드롭: 파일 관리자에서 .json 파일을 입력 영역으로 바로 끌어다 놓으면 가장 빠르게 데이터를 불러올 수 있습니다.
• 편집 후 다운로드: 인라인 편집을 마친 뒤에는 원본을 덮어쓰지 말고 "다운로드"를 클릭해 수정된 JSON을 새 파일로 저장하세요.