JSONFormat은 JSON 데이터를 정렬하고, 압축하고, 유효성을 검사하는 무료 온라인 도구입니다. 설치나 회원가입 없이 브라우저에서 바로 사용할 수 있으며, 모든 처리가 브라우저 내에서만 이루어져 입력한 JSON이 외부 서버로 전송되지 않습니다. 개발자가 API 응답을 분석하거나 설정 파일을 다룰 때 유용하게 활용할 수 있습니다.
주요 기능
기본 사용법
JSON 입력
왼쪽 입력창에 JSON을 붙여넣습니다. 입력하는 즉시 유효성 검사가 실행되어 상단에 ✅ 유효 또는 ❌ 오류 상태가 표시됩니다.
정렬 또는 압축
✨ 정렬 (2칸) 또는 ✨ 정렬 (4칸) 버튼으로 들여쓰기를 적용하거나, 🗜️ 압축 버튼으로 공백을 제거합니다.
결과 복사
오른쪽 결과창 상단의 복사 버튼을 클릭하면 결과 JSON이 클립보드에 복사됩니다.
유효성 검사 상태 표시
입력창에 JSON을 입력하면 300ms 후 자동으로 유효성 검사가 실행됩니다.
오류가 감지되면 입력창 테두리가 빨간색으로 변하고, 오류 위치(행·열)와 오류 메시지가 표시됩니다. 이 정보를 참고해 JSON을 수정하면 됩니다.
정렬 vs 압축 비교
정렬 전 (압축된 상태)
정렬 후 (들여쓰기 2칸)
구문 강조 색상 가이드
| 타입 | 색상 | 예시 |
|---|---|---|
| 키 (Key) | 보라색 | "name", "version" |
| 문자열 (String) | 초록색 | "BrowserKit", "https://..." |
| 숫자 (Number) | 파란색 | 42, 3.14, -1 |
| 불리언 (Boolean) | 주황색 | true, false |
| null | 빨간색 | null |
| 괄호 (Bracket) | 흰색 | {, }, [, ] |
들여쓰기 2칸 vs 4칸
| 옵션 | 권장 상황 |
|---|---|
| 2칸 들여쓰기 | JavaScript, Node.js, 웹 개발 표준. 화면 공간을 효율적으로 사용 |
| 4칸 들여쓰기 | Python, Java 등 4칸을 표준으로 사용하는 환경. 가독성이 더 높음 |
자주 발생하는 JSON 오류
| 오류 유형 | 잘못된 예 | 올바른 예 |
|---|---|---|
| 작은따옴표 사용 | {'key': 'value'} | {"key": "value"} |
| 마지막 쉼표 (Trailing comma) | {"a": 1, "b": 2,} | {"a": 1, "b": 2} |
| 따옴표 없는 키 | {key: "value"} | {"key": "value"} |
| 주석 포함 | {"a": 1 // 주석} | {"a": 1} |
| undefined 값 | {"a": undefined} | {"a": null} |
활용 예시
API 응답 분석
REST API나 GraphQL 응답을 개발자 도구에서 복사한 뒤 JSONFormat에 붙여넣고 정렬하면 중첩된 데이터 구조를 한눈에 파악할 수 있습니다.
설정 파일 검증
package.json, tsconfig.json, appsettings.json 등 JSON 형식의 설정 파일을 붙여넣어 문법 오류를 빠르게 찾을 수 있습니다. 특히 직접 편집 후 오류가 발생했을 때 유용합니다.
API 요청 본문 최소화
테스트용으로 정렬된 JSON을 작성한 뒤 압축 버튼으로 한 줄로 만들어 curl 명령어나 Postman에 바로 붙여넣을 수 있습니다.
샘플 JSON으로 빠른 테스트
📋 샘플 불러오기 버튼을 클릭하면 BrowserKit 서비스 데이터 형태의 샘플 JSON이 자동으로 로드됩니다. 도구의 동작 방식을 빠르게 확인할 수 있습니다.