JSON(JavaScript Object Notation)은 현대 웹 개발에서 가장 널리 사용되는 데이터 교환 형식입니다. 하지만 API 응답이나 로그 파일에서 받은 JSON은 대부분 한 줄로 압축되어 있어 한눈에 읽기가 매우 어렵습니다.
🗂️ 이 도구는 어떤 JSON이든 즉시 포맷팅, 유효성 검사, 시각화할 수 있습니다. 설치 없이 바로 사용하세요.
주요 기능
📐 포맷팅 (Prettify) & 압축 (Minify)
Prettify는 한 줄로 뭉쳐있는 JSON을 줄바꿈과 들여쓰기(2칸 또는 4칸)로 깔끔하게 정렬하여 중첩된 구조를 바로 읽을 수 있게 만들어줍니다. Minify는 반대로 모든 공백을 제거해 전송이나 저장에 최적화된 한 줄 문자열로 압축합니다.
✅ 실시간 유효성 검사
JSON을 입력하거나 붙여넣는 즉시 자동으로 유효성 검사가 실행됩니다. 올바른 JSON이면 초록색으로 확인 표시가 뜨고, 문법 오류가 있으면 정확한 오류 발생 위치(라인 번호, 문자 위치)와 원인을 알려줘 바로 수정할 수 있습니다.
🌲 인터랙티브 트리 뷰
트리 뷰 탭으로 전환하면 JSON을 접고 펼칠 수 있는 계층 구조로 탐색할 수 있습니다. 각 노드에서 키, 값, 데이터 타입을 한눈에 확인하고, 클릭 한 번으로 하위 항목을 접거나 펼칠 수 있습니다. 깊이가 2단계를 넘어가는 항목은 기본적으로 접혀 있어 복잡한 데이터도 깔끔하게 탐색할 수 있습니다.
⚡ 편의 기능
복사 — 클릭 한 번으로 전체 JSON을 클립보드에 복사합니다.
다운로드 — 현재 JSON을 .json 파일로 바로 저장합니다.
샘플 불러오기 — 문자열, 숫자, 불리언, 배열, 중첩 객체, null 등 다양한 타입을 포함한 예시 JSON을 즉시 불러와 도구를 체험해볼 수 있습니다.
주요 활용 사례
API 응답 디버깅 — 압축된 응답 바디를 붙여넣어 구조를 즉시 파악하고 원하는 필드를 찾습니다.
설정 파일 유효성 확인 — package.json, tsconfig.json 등의 설정 파일에 문법 오류가 없는지 배포 전에 검사합니다.
API 전송 데이터 최적화 — 보기 좋게 포맷된 JSON을 Minify해 네트워크 전송 시 페이로드 크기를 줄입니다.
복잡한 데이터 구조 탐색 — 깊게 중첩된 JSON을 트리 뷰로 탐색해 원하는 데이터를 쉽게 찾습니다.
JSON 데이터 타입
JSON은 6가지 기본 데이터 타입을 지원하며, 트리 뷰에서 색상으로 구분됩니다:
■문자열 (String) — 큰따옴표로 감싼 텍스트: "안녕하세요"
■숫자 (Number) — 정수 또는 소수: 42, 3.14
■불리언 (Boolean) — true 또는 false
■널 (Null) — 빈 값을 나타냄: null
■객체 (Object) — 키-값 쌍의 집합: { "키": "값" }
■배열 (Array) — 순서가 있는 목록: [1, 2, 3]
* 모든 처리는 브라우저 내에서만 이루어집니다. 입력한 JSON 데이터는 어떤 서버에도 전송되지 않습니다.
