🌐 KO

🧾 JSON Formatter

JSON 텍스트를 들여쓰기해서 보기 좋게 정렬하거나 한 줄로 압축하고, 문법 오류가 있으면 정확한 위치(라인:컬럼)를 알려줍니다. 접고 펼칠 수 있는 트리 뷰로 구조를 한눈에 파악하세요.

가이드

자세히 알아보기

01

1. JSON Pretty Print와 Minify의 차이

Pretty print(정렬)는 JSON에 들여쓰기와 줄바꿈을 추가해 사람이 읽기 쉽게 만드는 작업이고, minify(압축)는 반대로 불필요한 공백과 줄바꿈을 모두 제거해 파일 크기를 최소화하는 작업입니다. 개발 중에는 pretty print된 JSON이 디버깅에 유리하지만, 실제 API 응답이나 프로덕션 배포 시에는 minify된 JSON이 네트워크 전송량을 줄여줍니다. 이 도구는 들여쓰기 방식을 2칸, 4칸, 탭 중에서 선택할 수 있어 프로젝트의 코드 스타일 컨벤션에 맞출 수 있습니다.

02

2. JSON 오류 위치를 정확히 찾는 법

JSON.parse()가 던지는 에러 메시지는 브라우저 엔진마다 형식이 달라 위치를 정확히 알기 어려운 경우가 많습니다. 이 도구는 JSON 문법(객체·배열·문자열·숫자·리터럴)을 직접 스캔하는 파서를 내장해, 어떤 브라우저에서 열어도 항상 동일하게 "몇 번째 줄, 몇 번째 칸"에서 문제가 발생했는지 짚어줍니다. 쉼표 누락, 따옴표 없는 키, 문자열 종료 누락 등 흔한 실수를 빠르게 찾는 데 유용합니다.

03

3. 트리 뷰로 복잡한 JSON 구조 파악하기

깊이 중첩된 JSON은 텍스트만 봐서는 어느 괄호가 어디에 대응하는지 파악하기 어렵습니다. 트리 뷰는 객체와 배열을 접고 펼칠 수 있는 노드로 표시해, 관심 있는 부분만 펼쳐서 볼 수 있게 해줍니다. 각 노드 옆의 복사 버튼을 누르면 해당 값의 경로(예: $.tools[1])가 클립보드에 복사되어, 코드에서 그 값을 참조할 때 바로 붙여넣을 수 있습니다.

자주 묻는 질문

입력한 JSON이 서버로 전송되나요?
아니요. 파싱과 정렬, 검증 모두 브라우저 안에서 JSON.parse()로만 처리되며 별도의 서버 API를 호출하지 않습니다. 민감한 API 응답이나 설정값도 안전하게 확인할 수 있습니다.
오류 메시지가 너무 친절하지 않은데 어떻게 읽나요?
"위치 3:5 — Expected ',' or '}'"처럼 라인:컬럼과 함께 어떤 토큰이 기대되었는지 표시됩니다. 입력창에서도 해당 줄이 자동으로 선택되어 바로 찾아갈 수 있습니다.
들여쓰기 방식을 바꾸면 이미 입력한 내용도 바뀌나요?
"정렬" 버튼을 다시 누르면 선택한 들여쓰기(2칸/4칸/탭)로 다시 포맷됩니다. 들여쓰기 선택만으로는 자동 반영되지 않고, 정렬 버튼을 눌러야 적용됩니다.
트리 뷰의 키 개수와 깊이는 무엇을 의미하나요?
키 개수는 JSON 전체에서 객체의 속성(키)이 몇 개인지 누적한 값이고, 깊이는 가장 안쪽까지 중첩된 단계 수입니다. 구조가 얼마나 복잡한지 가늠하는 데 참고할 수 있습니다.