JSON 포맷터 사용 방법
JSON 데이터를 입력하면 실시간으로 유효성을 검증하고, 보기 좋게 들여쓰기를 추가하거나 공백을 제거하여 압축할 수 있습니다. 웹 개발, API 디버깅, 설정 파일 편집 등 JSON을 다루는 모든 상황에서 유용합니다.
주요 기능
| 기능 | 설명 | 단축키 |
|---|---|---|
| 포맷 (들여쓰기) | 보기 좋게 들여쓰기와 줄바꿈 추가 | Format 버튼 |
| 압축 (Minify) | 공백·줄바꿈 제거하여 최소화 | Minify 버튼 |
| 복사 | 결과를 클립보드에 복사 | Copy 버튼 |
| 유효성 검증 | JSON 문법 오류 자동 감지 | 자동 |
| 통계 정보 | 키 개수, 중첩 깊이, 바이트 크기 | 자동 |
JSON 기본 구조
JSON은 두 가지 기본 구조로 이루어집니다.
객체 (Object)
{
"이름": "홍길동",
"나이": 30,
"직업": "개발자"
}
배열 (Array)
[1, 2, 3, "사과", "바나나"]
JSON 데이터 타입
| 타입 | 예시 | 설명 |
|---|---|---|
| 문자열 | "안녕하세요" | 큰따옴표로 감싼 텍스트 |
| 숫자 | 42, 3.14, -7 | 정수 또는 소수 |
| 불리언 | true, false | 참 또는 거짓 |
| null | null | 빈 값 |
| 객체 | {"key": "value"} | 키-값 쌍의 집합 |
| 배열 | [1, 2, 3] | 순서가 있는 값의 목록 |
자주 발생하는 JSON 오류와 해결법
1. Trailing Comma (끝 쉼표)
❌ {"a": 1, "b": 2,}
✅ {"a": 1, "b": 2}
2. 작은따옴표 사용
❌ {'name': '홍길동'}
✅ {"name": "홍길동"}
3. 키에 따옴표 누락
❌ {name: "홍길동"}
✅ {"name": "홍길동"}
4. 이스케이프 누락
❌ {"path": "C:\Users\admin"}
✅ {"path": "C:\\Users\\admin"}
5. 주석 사용 (JSON에서 주석 불가)
❌ {"name": "홍길동" /* 이름 */}
✅ {"name": "홍길동"}
들여쓰기 탭 크기 선택
- 2칸: JavaScript/TypeScript 프로젝트에서 주로 사용. 중첩이 깊은 JSON에 적합.
- 4칸: Python, Java 프로젝트에서 주로 사용. 가독성이 높지만 파일 크기가 커짐.
활용 사례
API 디버깅
- REST API 응답을 복사하여 포맷팅하면 데이터 구조를 쉽게 파악
- 요청 본문(body)을 작성할 때 유효성 검증으로 오류 사전 방지
설정 파일 편집
- package.json, tsconfig.json 등 설정 파일 편집 시 포맷팅
- 수동 편집 후 유효성 검증으로 구문 오류 확인
데이터 분석
- 키 개수와 중첩 깊이로 데이터 구조의 복잡도 파악
- 압축 전후 크기 비교로 최적화 효과 확인
코드 리뷰
- 압축된 JSON을 포맷팅하여 변경 사항 가독성 향상
- 팀원 간 JSON 데이터 공유 시 일관된 포맷 유지
참고
- RFC 8259: JSON 데이터 교환 형식 표준
- ECMA-404: JSON 데이터 교환 구문 표준
- JSON Schema: JSON 데이터 구조 검증 표준
※ 이 도구는 브라우저에서 실행되며 입력한 JSON 데이터는 서버로 전송되지 않습니다.