JSON 포매터 사용법 - JSON 정렬 검증 압축을 한 번에 처리하는 방법
JSON 포매터로 데이터를 정렬하고 검증 압축하는 방법을 정리합니다
JSON이란 무엇인가
JSON(JavaScript Object Notation)은 데이터를 저장하고 전달하기 위한 텍스트 형식입니다. 웹에서 서버와 브라우저가 데이터를 주고받을 때 가장 많이 쓰는 포맷입니다. 쇼핑몰에서 상품 정보를 불러오거나, 날씨 앱이 기온 데이터를 가져올 때 뒤에서는 JSON이 오가고 있습니다.
JSON이 널리 쓰이는 이유는 사람도 읽을 수 있고 기계도 처리하기 쉬운 구조이기 때문입니다. 중괄호({})와 대괄호([]), 키-값 쌍으로 이루어진 단순한 규칙입니다.
| 항목 | 내용 |
|---|---|
| 정식 명칭 | JavaScript Object Notation |
| 파일 확장자 | .json |
| 데이터 타입 | 문자열, 숫자, 불리언, 배열, 객체, null |
| 주요 용도 | API 통신, 설정 파일, 데이터 저장 |
| 대안 포맷 | XML, YAML, CSV |
JSON 이전에는 XML이 표준이었습니다. 하지만 XML은 태그가 많아서 데이터보다 구조 표시가 더 긴 경우가 많았습니다. JSON은 같은 데이터를 훨씬 간결하게 표현할 수 있어서 빠르게 XML을 대체했습니다.
JSON이 읽기 어려운 이유
API에서 받은 JSON 응답을 열어보면 이런 모습인 경우가 많습니다.
| 상태 | 예시 | 문제점 |
|---|---|---|
| 압축된 JSON | {"name":"홍길동","age":30,"address":{"city":"서울","zip":"06100"}} | 한 줄에 모든 데이터, 구조 파악 불가 |
| 정렬된 JSON | 들여쓰기와 줄바꿈 적용 | 없음 - 읽기 편함 |
서버에서 보내는 JSON은 전송 속도를 위해 공백과 줄바꿈을 모두 제거한 압축 상태입니다. 한 줄짜리 텍스트 덩어리라서 데이터가 수십 개만 돼도 눈으로 읽기가 불가능합니다.
- 중괄호 매칭이 안 보임 - 중첩된 객체가 어디서 시작하고 끝나는지 한 줄로는 파악할 수 없습니다. 데이터가 복잡해질수록 중괄호와 대괄호가 뒤엉켜 보입니다
- 키-값 구분이 어려움 - 모든 데이터가 쉼표로 연결되어 있어서 어디까지가 하나의 항목인지 눈에 들어오지 않습니다
- 오류 찾기 불가능 - 쉼표 하나가 빠졌거나 따옴표가 잘못 닫혀도 압축 상태에서는 발견하기 어렵습니다
API 디버깅에서 시간을 가장 많이 잡아먹는 건 코드 작성이 아니라 JSON 응답을 읽는 것입니다. 포매터로 정렬만 해도 디버깅 시간이 절반으로 줄어듭니다.
JSON 포매터 사용법
JSON 포매터에 접속해서 JSON 데이터를 붙여넣으면 정렬, 검증, 압축을 한 곳에서 처리할 수 있습니다.
| 기능 | 설명 | 활용 상황 |
|---|---|---|
| 정렬(Format) | 들여쓰기와 줄바꿈 추가 | API 응답 확인, 구조 파악 |
| 압축(Minify) | 공백, 줄바꿈 제거 | 전송 용량 최소화 |
| 검증(Validate) | 문법 오류 검출 | JSON 파일 오류 찾기 |
| 키 정렬 | 키를 알파벳순으로 정렬 | 버전 관리, diff 비교 |
| 통계 표시 | 파일 크기, 깊이, 키 개수 | 데이터 구조 분석 |
들여쓰기 방식을 2칸, 4칸, 탭 중에서 선택할 수 있습니다. 팀에서 코딩 컨벤션이 정해져 있다면 그에 맞게 설정하면 됩니다. 일반적으로 2칸 들여쓰기가 가장 많이 쓰입니다.
키 정렬 기능은 Git 등 버전 관리 시스템에서 유용합니다. JSON의 키 순서가 매번 달라지면 내용은 같은데 diff에서 변경으로 표시됩니다. 키를 알파벳순으로 정렬해두면 실제 데이터 변경만 diff에 나타나서 코드 리뷰가 깔끔해집니다.
실무에서 JSON을 다루는 상황
개발자뿐만 아니라 다양한 직군에서 JSON을 만나게 됩니다.
| 직군 | JSON 사용 상황 | 필요한 작업 |
|---|---|---|
| 백엔드 개발자 | API 응답 디버깅 | 정렬해서 구조 확인 |
| 프론트엔드 개발자 | API 연동, 상태 관리 | 응답 데이터 검증 |
| 데이터 분석가 | JSON 형식 데이터셋 분석 | 구조 파악, 키 확인 |
| 기획자/PM | API 문서 검토 | 예시 데이터 읽기 |
| 서버 관리자 | 설정 파일 수정 | 문법 검증 후 저장 |
| 마케터 | GA4 이벤트 데이터, GTM 설정 | JSON 구조 이해 |
- API 디버깅 - 서버에서 오류 응답이 올 때 JSON 본문에 에러 메시지가 들어있습니다. 압축 상태라서 못 읽겠으면 포매터에 붙여넣어서 정렬하면 에러 원인을 바로 찾을 수 있습니다
- 설정 파일 수정 - package.json, tsconfig.json, docker-compose에서 사용하는 설정 파일이 JSON 형식입니다. 수정 후 검증하지 않으면 쉼표 하나 때문에 서비스가 안 뜰 수 있습니다
- 데이터 분석 - NoSQL 데이터베이스(MongoDB 등)는 JSON 형태로 데이터를 저장합니다. 쿼리 결과를 분석하려면 JSON 구조를 파악해야 합니다
- GTM/GA4 - 구글 태그 매니저나 GA4에서 커스텀 이벤트를 설정할 때 JSON 형식으로 데이터를 정의합니다. 마케터도 기본적인 JSON 구조는 알아야 합니다
JSON 작성 시 흔한 실수
| 실수 | 잘못된 예시 | 올바른 예시 | 설명 |
|---|---|---|---|
| 마지막 쉼표 | {"a": 1, "b": 2,} | {"a": 1, "b": 2} | 마지막 항목 뒤에 쉼표 불가 |
| 작은따옴표 | {'name': 'Kim'} | {"name": "Kim"} | 반드시 큰따옴표만 사용 |
| 주석 | {"a": 1 // 주석} | {"a": 1} | JSON에 주석 불가 |
| 키에 따옴표 없음 | {name: "Kim"} | {"name": "Kim"} | 키도 큰따옴표 필수 |
| 불리언 대문자 | {"active": True} | {"active": true} | true/false/null은 소문자 |
마지막 쉼표(trailing comma)가 가장 흔한 실수입니다. 자바스크립트에서는 허용되지만 JSON에서는 오류입니다. 항목을 추가하거나 삭제할 때 마지막 쉼표를 빼먹거나 남겨두는 경우가 많습니다.
주석을 넣을 수 없다는 것도 자주 실수하는 부분입니다. 프로그래밍 언어에서는 // 주석이 당연한데, JSON은 주석을 지원하지 않습니다. 설정 파일에 설명을 넣고 싶으면 "_comment" 같은 별도 키를 만들어 값으로 적는 우회 방법을 쓰기도 합니다.
작은따옴표도 안 됩니다. 파이썬이나 자바스크립트에서 문자열에 작은따옴표를 쓰는 습관 때문에 JSON에서도 그대로 쓰면 파싱 에러가 납니다. JSON은 큰따옴표만 허용합니다.
