Tools mentioned in this article
Open the browser-based tool while you read and try the workflow immediately.
JSON은 먼저 읽기 쉽게 만드는 것이 중요합니다
API 응답, 웹훅 페이로드, 로그, 설정 파일에서는 JSON을 자주 다룹니다.
하지만 실제로는 한 줄로 압축되어 있거나, 중첩이 깊거나, 이스케이프된 문자열이 섞여 있는 경우가 많습니다.

그 상태로 읽으면 필요한 필드를 놓치거나 배열과 객체의 경계를 잘못 이해하기 쉽습니다.
먼저 JSON을 포맷팅해 구조를 확인하는 것이 디버깅의 시작입니다.
예를 들어 다음과 같은 한 줄 응답이 들어왔다고 합시다.
{"id":42,"name":"Alice","roles":["admin","editor"],"profile":{"city":"Tokyo"}}
포맷팅하면 중첩과 배열 구조가 한눈에 보입니다.
{
"id": 42,
"name": "Alice",
"roles": ["admin", "editor"],
"profile": {
"city": "Tokyo"
}
}
포맷팅 후 확인할 것
중첩 구조
정리된 JSON은 어떤 필드가 어떤 객체에 속하는지 명확하게 보여줍니다.
user.profile.name 같은 경로를 확인하거나 배열 안의 객체 구조를 비교할 때 유용합니다.
값의 타입
"123"은 문자열이고 123은 숫자입니다.
"true"와 true, null과 빈 문자열도 다릅니다.
이 차이를 초기에 확인하면 화면 표시, 검증, 연동 과정의 오류를 줄일 수 있습니다.
문법 오류
불필요한 쉼표, 닫히지 않은 중괄호, 따옴표가 빠진 키는 자주 발생하는 JSON 오류입니다.
포맷터로 파싱이 되는지 확인하면 애플리케이션 코드에 넣기 전에 문제를 분리할 수 있습니다.
다음 예에는 JSON으로서 유효하지 않은 부분이 두 군데 있습니다.
{
"name": "Alice",
"tags": ["a", "b",], // 끝에 붙은 불필요한 쉼표
age: 30 // 키가 따옴표로 감싸이지 않음
}
JSON에서는 끝의 쉼표나 주석, 따옴표 없는 키가 허용되지 않습니다. 손으로 쓴 JSON이나 JavaScript 객체 리터럴을 복사할 때 섞이기 쉬우므로, 포맷터로 파싱이 통과하는지 먼저 확인하면 안전합니다.
실무 활용 예
- API 응답 확인: 브라우저 Network 탭이나 curl 출력 결과를 붙여 넣고 필드를 확인합니다.
- 로그 분석: 한 줄짜리 구조화 로그를 읽기 쉽게 정리합니다.
- 샘플 데이터 정리: 문서, 테스트, 버그 리포트에 사용할 JSON 예시를 정돈합니다.
- 스키마 준비: 정리된 JSON을 바탕으로 TypeScript 타입, Zod 스키마, OpenAPI 정의를 만듭니다.
DevToolKits에서 JSON 확인하기
JSON 포매터를 사용하면 브라우저에서 바로 JSON을 포맷팅하고 검증할 수 있습니다.
구조를 확인한 뒤에는 관련 도구로 이어갈 수 있습니다.
- JSON ⇔ YAML 변환 도구로 설정 파일 형식에 맞게 변환합니다.
- JSON → TypeScript 타입 생성으로 타입 정의를 만듭니다.
- JSON → Zod 스키마 생성으로 런타임 검증을 준비합니다.
- JSON → OpenAPI 스키마 생성으로 API 문서의 기반을 만듭니다.
JSON 포맷팅은 작은 작업이지만, 이후의 디버깅과 설계를 훨씬 편하게 만듭니다.
자주 묻는 질문
JSON에 주석이나 끝 쉼표를 쓸 수 있나요?
표준 JSON에서는 주석도 끝 쉼표도 쓸 수 없습니다. 이를 허용하는 것은 JSON5나 JSONC 같은 확장 사양으로, 설정 파일 등 일부 도구가 독자적으로 지원하는 것입니다. API에서 주고받는 데이터라면 표준 JSON으로 유효한지 포맷터로 확인하세요.
기밀 정보가 담긴 JSON을 외부 도구에 붙여넣어도 괜찮나요?
API 키나 개인정보가 담긴 응답을, 처리 내용이 불명확한 외부 서비스로 보내는 것은 피하는 게 안전합니다. JSON 포매터는 브라우저 안에서 처리가 완결되며 입력 데이터를 서버로 보내지 않으므로 기밀 데이터 확인에도 쓸 수 있습니다.
포맷팅한 다음에는 무엇을 하면 되나요?
포맷팅해 구조를 파악했다면 용도에 따라 타입 정의·검증·API 명세서로 전개할 수 있습니다. 타입이 필요하면 TypeScript 타입 생성, 런타임 검사라면 Zod 스키마 생성, 사양 공유라면 OpenAPI 생성이 출발점이 됩니다.