JSON 포맷터 & 뷰어

JSON 포맷터 & 뷰어 사용 가이드

JSON 포맷터 & 뷰어는 API 응답, 웹훅 payload, 설정 파일, 로그 데이터처럼 한 줄로 길게 붙은 JSON을 읽기 쉬운 형태로 바꾸고 구조를 시각화하는 개발자 도구입니다. 붙여 넣은 텍스트를 JSON.parse로 검증한 뒤 선택한 들여쓰기에 맞춰 구문 강조와 줄 번호가 있는 결과로 정리하고, 접기/펼치기가 가능한 트리 뷰로 중첩 구조를 한눈에 파악할 수 있습니다. 트리에서 키를 클릭하면 data.users[0].email 같은 접근 경로가 바로 복사되고, 필요하면 공백 없는 압축 JSON으로 다시 만들 수 있습니다. 모든 처리는 현재 브라우저에서만 이루어지며 입력 텍스트를 Toolvil 서버로 업로드하지 않습니다.

JSON은 괄호 하나, 쉼표 하나가 틀려도 전체 파싱이 실패하기 때문에 오류 위치를 빠르게 알아차리는 것이 중요합니다. 이 페이지는 파싱이 실패하면 오류 메시지와 대략적인 위치를 표시하고, 작은따옴표·후행 쉼표·따옴표 없는 키·주석처럼 흔한 실수는 자동 수정 배너로 한 번에 교정합니다. 개발자가 API 응답을 점검할 때뿐 아니라 노코드 자동화, 데이터 분석, CMS 설정값 확인처럼 JSON을 잠깐 열어 봐야 하는 상황에서도 설치형 프로그램 없이 모바일과 데스크톱 브라우저에서 바로 사용할 수 있습니다.

사용 방법

1. JSON 입력 칸에 텍스트를 붙여 넣거나 .json 파일을 드래그합니다.
2. 코드 뷰에서 구문 강조된 결과를, 🌳 트리 뷰에서 접기/펼치기 구조를 확인합니다.
3. 트리에서 키를 클릭해 data.users[0].email 형태의 경로를 복사합니다.
4. 오류가 있으면 자동 수정 배너를 눌러 표준 JSON으로 교정합니다.
5. 압축·키 정렬을 적용하고 결과를 복사하거나 .json으로 다운로드합니다.

코드 뷰와 트리 뷰

코드 뷰는 들여쓰기와 줄 번호, 키·문자열·숫자·불리언·null 색상 구분으로 정리된 JSON을 보여 주고, 트리 뷰는 객체와 배열을 접기/펼치기가 가능한 계층 구조로 시각화합니다. 깊은 중첩이나 큰 배열에서는 트리 뷰로 전체 구조를 빠르게 훑은 뒤 필요한 노드의 키를 클릭해 경로를 복사하면, API 디버깅이나 코드 작성에 그대로 붙여 넣을 수 있습니다.

자동 수정이 고치는 오류

자동 수정 엔진은 작은따옴표를 큰따옴표로 바꾸고, 후행 쉼표를 제거하며, 따옴표 없는 키를 교정하고, // 및 /* */ 주석을 삭제합니다. 개발 중 콘솔에서 복사한 JavaScript 객체 리터럴을 표준 JSON으로 바꿀 때 특히 유용합니다. 다만 자동 수정은 흔한 패턴을 다루는 보조 기능이므로, 교정 후에는 결과가 의도한 데이터와 같은지 한 번 더 확인하세요.

압축과 키 정렬을 해석하는 방법

압축은 불필요한 공백을 제거해 전송이나 저장에 유리한 한 줄 형태로 만드는 과정이고, 키 정렬은 같은 구조의 JSON을 비교할 때 객체 키 순서를 안정시킵니다. 배열은 순서가 의미를 갖는 경우가 많으므로 이 도구는 배열 항목 순서를 그대로 둡니다. 코드 리뷰나 문서에는 코드 뷰 결과를, URL 파라미터나 작은 설정값에는 압축 결과를 사용하는 식으로 목적에 맞게 구분하세요.

이 도구는 JSON 문법 검증과 표시 형식 정리를 돕는 유틸리티입니다. 데이터 보안 판단, 스키마 검증, API 계약 검증까지 대신하지 않으므로 민감한 값은 입력 전에 제거하고, 서비스 배포 전에는 별도의 테스트와 스키마 검사를 함께 진행하세요.