개발을 하다 보면 API 응답이나 설정 파일에서 한 줄로 뭉쳐있는 JSON을 마주칠 때가 많습니다. 눈으로 읽기가 거의 불가능한 수준이죠. 반대로 서버에 전송할 때는 불필요한 공백을 없애서 용량을 줄여야 할 때도 있습니다.
오늘은 JSON이 무엇인지, 어떻게 읽고 다루는지, 그리고 빠르게 정리하는 방법을 알려드립니다.
JSON이란?
JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하기 위한 경량 데이터 형식입니다. 1999년 더글러스 크록포드가 제안했으며, 현재 웹 API의 표준 데이터 형식으로 자리잡았습니다.
사람이 읽기 쉽고 기계가 파싱하기 쉬운 구조로 되어 있습니다.
JSON의 기본 구조
JSON은 6가지 데이터 타입을 지원합니다.
| 타입 | 예시 | 설명 |
|---|---|---|
| 문자열(String) | "hello" | 큰따옴표로 감쌈 |
| 숫자(Number) | 42, 3.14 | 정수·소수 모두 |
| 불리언(Boolean) | true, false | 참·거짓 |
| null | null | 값 없음 |
| 배열(Array) | [1, 2, 3] | 순서 있는 목록 |
| 객체(Object) | {"key": "value"} | 키-값 쌍 |
기본 JSON 예시:
{
"name": "홍길동",
"age": 30,
"isStudent": false,
"hobbies": ["독서", "코딩", "여행"],
"address": {
"city": "서울",
"district": "강남구"
}
}
JSON 작성 규칙
JSON을 직접 작성하거나 수정할 때 알아야 할 규칙들이 있습니다.
1. 키는 반드시 큰따옴표:
// 올바름
{"name": "홍길동"}
// 틀림 (작은따옴표 불가)
{'name': '홍길동'}
2. 마지막 항목에 쉼표 불가 (Trailing Comma):
// 올바름
{
"a": 1,
"b": 2
}
// 틀림 (마지막 쉼표)
{
"a": 1,
"b": 2,
}
3. 주석 불가:
// 틀림 — JSON에는 주석이 없음
{
// 이름
"name": "홍길동"
}
4. undefined 불가:
// 틀림 — undefined는 JSON 타입이 아님
{"value": undefined}
이런 규칙들을 하나라도 어기면 JSON 파싱 에러가 납니다. 포맷터는 이런 오류를 바로 잡아줍니다.
JSON 포맷팅이 필요한 상황
API 응답 디버깅: REST API를 테스트할 때 응답이 한 줄로 뭉쳐있으면 읽기 어렵습니다. 포맷팅하면 구조가 명확하게 보입니다.
// 포맷팅 전
{"user":{"id":1,"name":"홍길동","email":"hong@example.com","roles":["admin","user"]}}
// 포맷팅 후
{
"user": {
"id": 1,
"name": "홍길동",
"email": "hong@example.com",
"roles": ["admin", "user"]
}
}
설정 파일 정리: package.json, tsconfig.json 등 개발 설정 파일을 편집하다 들여쓰기가 망가진 경우 포맷팅으로 정리합니다.
유효성 검사: JSON 파싱 에러가 났을 때 어디서 오류가 났는지 찾을 때 포맷터가 오류 위치를 알려줍니다.
전송용 압축: 네트워크로 전송할 때는 공백을 제거한 압축(Minify) 형태로 용량을 줄입니다.
JSON vs 다른 데이터 형식 비교
| 형식 | 특징 | 주요 사용처 |
|---|---|---|
| JSON | 경량, 범용, 읽기 쉬움 | Web API, 설정 파일 |
| XML | 태그 기반, 무거움 | 기업 시스템, RSS |
| YAML | 들여쓰기 기반, 간결 | CI/CD, Docker, K8s |
| CSV | 표 형태, 단순 | 스프레드시트, 데이터 |
| TOML | 읽기 쉬운 설정 | Rust, 패키지 설정 |
웹 개발에서는 JSON이 사실상 표준입니다. REST API와 GraphQL 모두 JSON을 사용합니다.
가장 쉬운 방법 — 브라우저에서 바로
- ✅ JSON 유효성 검사 (오류 위치 표시)
- 🎨 구문 강조(Syntax Highlighting)
- 📐 들여쓰기 크기 조절 (2칸·4칸)
- 📦 Minify(압축) 기능
- 🔒 서버 전송 없음
- 💰 완전 무료
사용 방법
- toolzip.app/tools/json-formatter 접속
- JSON 텍스트 붙여넣기
- 포맷 또는 압축 선택
- 결과 복사
JSON 관련 자주 묻는 질문
Q. JSON과 JavaScript 객체의 차이는?
JavaScript 객체는 키에 따옴표 없어도 되고 함수도 값이 될 수 있습니다. JSON은 순수 데이터 형식이라 함수가 없고 키는 반드시 큰따옴표입니다.
// JavaScript 객체 (따옴표 없어도 됨)
const obj = { name: "홍길동", greet: () => "안녕" }
// JSON (반드시 큰따옴표, 함수 불가)
{"name": "홍길동"}
Q. JSON 파일 크기를 줄이려면?
Minify(압축)로 공백과 줄바꿈을 제거하면 크기가 20~30% 줄어듭니다. 서버 응답 시간 단축에 도움이 됩니다.
Q. JSON에 한국어를 쓸 수 있나요?
가능합니다. JSON은 UTF-8 인코딩을 지원하므로 한국어, 중국어, 일본어 등 유니코드 문자를 모두 사용할 수 있습니다.
Q. JSON을 엑셀로 변환할 수 있나요?
JSON → CSV 변환 후 엑셀에서 열거나, 직접 JSON → Excel 변환 도구를 사용할 수 있습니다.
정리
- ✅ JSON 유효성 검사 및 오류 위치 표시
- ✅ 구문 강조로 가독성 향상
- ✅ 들여쓰기 크기 선택
- ✅ Minify(압축) 기능
- ✅ 서버 전송 없음, 완전 무료
관련 도구: Base64 변환기 · URL 인코더 · JWT 디코더 · 해시 생성기