
지저분한 JSON 때문에 고생하지 마세요: 2초 만에 깔끔하게 정리하기 (무료)
📷 Tima Miroshnichenko / Pexels지저분한 JSON 때문에 고생하지 마세요: 2초 만에 깔끔하게 정리하기 (무료)
읽기 힘든 JSON을 붙여넣기만 하면 깔끔하게 포맷된 결과물이 즉시 나옵니다. 설치도, 회원가입도 필요 없어요 — API 응답과 설정 파일 디버깅에 가장 빠른 방법입니다.
JSON이란 무엇인가요?
JSON(JavaScript Object Notation)은 사람이 읽고 쓰기 쉽고 기계가 파싱하고 생성하기도 쉬운 경량 데이터 교환 형식입니다. 현대 웹 개발에서 API 응답, 설정 파일, 데이터 저장에 가장 많이 사용되는 형식입니다.
API를 다루는 개발자라면 JSON을 항상 접하게 됩니다. REST API 응답, 웹훅 페이로드, Node.js 프로젝트의 설정 파일까지 — JSON일 가능성이 매우 높습니다. JSON을 읽고, 포맷하고, 디버깅하는 능력은 개발자의 핵심 기술입니다.
JSON을 포맷하는 이유
압축된 JSON은 읽기 어렵습니다. API 응답은 종종 공백 없이 하나의 긴 줄로 도착하는데, 이는 디버깅을 매우 힘들게 만듭니다. JSON을 포맷(또는 "예쁘게 출력")하면 적절한 들여쓰기와 줄 바꿈이 추가되어 구조가 명확하고 이해하기 쉬워집니다.
포맷 전:
{"name":"John","age":30,"city":"New York","hobbies":["reading","coding"],"address":{"street":"123 Main St","zip":"10001"}}
포맷 후:
{
"name": "John",
"age": 30,
"city": "New York",
"hobbies": [
"reading",
"coding"
],
"address": {
"street": "123 Main St",
"zip": "10001"
}
}
차이가 확연합니다. 포맷된 버전에서는 최상위 키가 5개이고, hobbies는 두 항목의 배열이며, address는 중첩된 객체라는 것을 즉시 알 수 있습니다. 압축된 버전에서는 중괄호와 대괄호를 직접 눈으로 추적해야만 파악할 수 있습니다.
JSON 포매터 사용 방법
- JSON 붙여넣기 — 입력 필드에 원시 JSON을 붙여넣습니다
- "포맷" 클릭 — 2칸 또는 4칸 들여쓰기로 보기 좋게 만들기
- "압축" 클릭 — JSON을 한 줄로 압축하기
- 결과 복사 — 클릭 한 번으로 복사
도구는 붙여넣을 때 JSON을 즉시 유효성 검사하므로 문제가 있으면 바로 피드백을 받을 수 있습니다.
흔한 JSON 오류 (와 수정 방법)
JSON은 엄격한 문법 규칙이 있으며, 하나라도 위반하면 파싱 오류가 발생합니다. 실제로 가장 자주 보이는 오류들을 순서대로 정리해 드립니다:
1. 후행 쉼표 (Trailing Comma)
단연 가장 흔한 JSON 오류입니다. JavaScript는 배열과 객체에서 후행 쉼표를 허용하므로, 개발자들이 JSON에서는 허용되지 않는다는 사실을 종종 잊어버립니다.
// 잘못됨 — "coding" 뒤의 후행 쉼표
{
"hobbies": ["reading", "coding",]
}
// 올바름
{
"hobbies": ["reading", "coding"]
}
2. 큰따옴표 대신 작은따옴표 사용
JSON은 모든 문자열에 큰따옴표를 요구합니다. JavaScript와 Python에서는 유효한 작은따옴표가 JSON 파싱을 중단시킵니다.
// 잘못됨
{'name': 'John'}
// 올바름
{"name": "John"}
3. 키에 따옴표 누락
JavaScript에서는 객체 키에 따옴표가 필요하지 않지만, JSON에서는 모든 키가 큰따옴표로 묶인 문자열이어야 합니다.
// 잘못됨
{name: "John", age: 30}
// 올바름
{"name": "John", "age": 30}
4. JSON에서 주석 사용
JSON은 주석을 지원하지 않습니다. 절대로. JSON이 JavaScript처럼 보이기 때문에 이 점을 놓치는 경우가 많습니다. 설정 파일에 주석이 필요하다면 JSONC(VS Code에서 지원하는 주석이 있는 JSON) 또는 YAML을 사용하는 것을 고려하세요.
// 잘못됨
{
"port": 3000, // 서버 포트
"host": "localhost"
}
// 올바름
{
"port": 3000,
"host": "localhost"
}
5. 이스케이프되지 않은 특수 문자
백슬래시, 큰따옴표, 또는 제어 문자가 포함된 문자열은 올바르게 이스케이프되어야 합니다:
// 잘못됨 — 이스케이프되지 않은 백슬래시와 따옴표
{"path": "C:\Users\john", "note": "He said \"hello\""}
// 올바름
{"path": "C:\\Users\\john", "note": "He said \"hello\""}
6. 유효하지 않은 값
JSON은 정확히 이러한 값 유형만 지원합니다: 문자열, 숫자, 불리언(true/false), null, 객체, 배열. 그 외의 것은 유효하지 않습니다:
// 잘못됨
{"value": undefined}
{"count": NaN}
{"total": Infinity}
// 올바른 대안
{"value": null}
{"count": 0}
{"total": 9999999}
{"date": "2026-04-18T10:30:00Z"}
커맨드 라인에서 JSON 포맷하기
웹 기반 도구에 접근할 수 없거나 스크립트의 일부로 JSON을 포맷해야 할 때가 있습니다. 다음은 가장 유용한 커맨드 라인 방법들입니다:
Python 사용 (대부분의 시스템에서 사용 가능)
# JSON 파일 포맷하기
python3 -m json.tool input.json
# 파이프에서 JSON 포맷하기
curl -s https://api.example.com/data | python3 -m json.tool
jq 사용 (JSON을 위한 스위스 아미 나이프)
jq는 전용 JSON 프로세서로, 커맨드 라인에서 JSON을 다루는 가장 강력한 도구입니다:
# 예쁘게 출력하기
cat data.json | jq '.'
# 특정 필드 추출하기
cat data.json | jq '.users[0].name'
# API 응답 포맷하기
curl -s https://api.example.com/users | jq '.'
JSON을 자주 다루고 jq가 설치되어 있지 않다면, 지금 바로 설치하세요. 수많은 시간을 절약해 줄 것입니다.
JSON 작업 팁
들여쓰기 현명하게 선택하기
- 2칸 들여쓰기: 더 간결하고 화면에 더 많은 내용을 표시합니다. JavaScript/TypeScript 프로젝트와 대부분의 웹 프레임워크에서 널리 사용됩니다.
- 4칸 들여쓰기: 깊이 중첩된 구조에서 읽기 더 쉽습니다. Python 프로젝트와 기업용 Java 환경에서 일반적입니다.
- 탭 들여쓰기: 기술적으로는 유효하지만 JSON에서는 드뭅니다. 공백을 사용하세요.
대부분의 웹 개발에서 2칸이 실용적인 선택입니다.
배포하기 전에 유효성 검사하기
특히 수작업으로 작성하거나 스크립트로 수정한 경우, 프로덕션에서 사용하기 전에 항상 JSON을 유효성 검사하세요. 쉼표 하나가 누락되거나 괄호 하나가 추가되면 전체 애플리케이션이 다운될 수 있습니다. 우리 포매터는 붙여넣을 때 구문 오류를 잡아주므로, 데이터를 빠르게 검증하는 좋은 방법입니다.
일관성을 위해 키 정렬하기
두 JSON 객체를 비교할 때(예: 코드 리뷰나 설정 파일 비교), 정렬되지 않은 키는 diff를 복잡하게 만듭니다. 많은 포매터에는 객체 키를 알파벳 순으로 재귀적으로 정렬하는 "키 정렬" 옵션이 있습니다.
실제 JSON 디버깅 시나리오
API 응답 디버깅
curl 요청을 보내고 압축된 JSON 덩어리를 받았을 때, 구조를 이해하기 전에 먼저 보기 좋게 만들어야 합니다:
curl -s https://api.example.com/users/123 | jq '.'
또는 응답을 JSON 포매터에 붙여넣으세요. 그러면 오류가 응답 구조에 있는지, 누락된 필드인지, 예상치 못한 값인지 즉시 파악할 수 있습니다.
두 JSON 객체 비교하기
두 API 응답이 동일해야 하는데 뭔가 다를 때:
jq -S '.' response1.json > sorted1.json
jq -S '.' response2.json > sorted2.json
diff sorted1.json sorted2.json
-S 플래그는 키를 알파벳 순으로 정렬하여 구조적 차이가 노이즈를 만들지 않게 합니다.
대용량 JSON 파일에서 데이터 추출하기
# 첫 번째 사용자의 이메일 가져오기
cat users.json | jq '.data.users[0].email'
# 모든 사용자 이름을 평면 목록으로 가져오기
cat users.json | jq '[.data.users[].name]'
# 상태로 사용자 필터링하기
cat users.json | jq '[.data.users[] | select(.status == "active")]'
JSON과 다른 데이터 형식 비교
| 특징 | JSON | YAML | XML | TOML |
|---|---|---|---|---|
| 가독성 | 좋음 | 훌륭함 | 보통 | 좋음 |
| 주석 | 없음 | 있음 | 있음 | 있음 |
| 데이터 유형 | 기본 | 풍부 | 문자열 기반 | 풍부 |
| 파일 크기 | 작음 | 작음 | 큼 | 작음 |
| 파싱 속도 | 빠름 | 보통 | 느림 | 빠름 |
| 생태계 | 방대 | 큼 | 큼 | 성장 중 |
JSON은 단순성과 범용 파서 지원 덕분에 API 통신과 데이터 교환에서 우위를 점합니다. YAML은 주석과 가독성이 중요한 설정 파일에 더 적합합니다. XML은 기업 시스템과 문서 형식에서 여전히 자리를 지키고 있습니다.
보안 고려사항
서버 사이드 포매터에 민감한 데이터 붙여넣지 않기
일부 온라인 JSON 포매터는 처리를 위해 서버로 데이터를 전송합니다. API 키, 토큰, 비밀번호 또는 개인 데이터를 다루는 경우, 브라우저에서 모든 것을 처리하는 클라이언트 사이드 포매터만 사용하세요. 우리 도구는 모든 포맷을 로컬에서 수행합니다 — 아무것도 외부로 전송되지 않습니다.
JSON 주입에 주의하기
JSON 입력을 받는 애플리케이션을 구축하는 경우, 항상 데이터를 유효성 검사하고 정리하세요. 문자열 연결로 JSON을 구성하지 마세요:
// 위험 — JSON 주입 위험
const json = '{"name": "' + userInput + '"}';
// 안전
const json = JSON.stringify({ name: userInput });
무료 JSON 포매터를 사용해 JSON 데이터를 즉시 포맷하세요! 브라우저에서 완전히 실행되며, 구문 강조 표시를 지원하고, 입력하는 동안 오류를 잡아줍니다.