API 응답이 한 줄로 쭉 붙어서 왔다. 중괄호가 수십 개 중첩되어 있는데 어디가 시작이고 어디가 끝인지 눈으로 파악이 안 된다. 들여쓰기 하나만 넣으면 구조가 바로 보이는데, 그걸 수작업으로 하고 있을 수는 없다.
JSON 포맷터가 하는 일
JSON 포맷터는 뭉쳐 있는 JSON 데이터에 들여쓰기와 줄바꿈을 넣어 읽기 쉽게 정리해주는 도구다. 단순 정렬 외에도 실무에서 필요한 기능이 여러 가지 있다.
- 정렬(Prettify): 들여쓰기와 줄바꿈을 추가해서 구조를 한눈에 파악할 수 있게 만든다
- 압축(Minify): 반대로 공백과 줄바꿈을 전부 제거해서 파일 크기를 줄인다. 배포용 설정 파일에 유용하다
- 검증(Validate): 괄호 누락, 쉼표 빠짐, 따옴표 오류 같은 문법 실수를 잡아낸다
- 키 정렬: 객체의 키를 알파벳순으로 재배열한다. 두 JSON을 비교하거나 git diff를 깔끔하게 보고 싶을 때 유용하다
사용 방법
온라인 JSON 포맷터에 접속하면 입력창과 출력창이 나란히 보인다. 사용법은 간단하다.
- 왼쪽 입력창에 JSON 데이터를 붙여넣는다
- 들여쓰기 방식을 선택한다 (2칸, 4칸, 탭 중 택 1)
- "정렬" 버튼을 누르면 오른쪽에 정리된 결과가 나온다
- 필요하면 "키 정렬" 토글을 켜서 알파벳순으로 정렬한다
- 복사 버튼으로 결과를 클립보드에 가져간다
파일 크기, 중첩 깊이, 키 개수 같은 통계 정보도 실시간으로 표시된다. 데이터 구조를 빠르게 파악하는 데 도움이 된다.
JSON 문법 오류 찾기
API에서 받은 JSON이 파싱 에러를 내면 어디가 잘못된 건지 찾기가 막막하다. "검증" 기능을 쓰면 오류 위치와 원인을 바로 알려준다.
주의 자주 발생하는 JSON 문법 오류 3가지:
- 마지막 항목 뒤에 쉼표(trailing comma) 붙이기
- 키를 큰따옴표 대신 작은따옴표로 감싸기
- 중괄호나 대괄호 짝이 안 맞는 경우
자바스크립트에서는 허용되는 문법이 JSON에서는 에러가 되는 경우가 있다. trailing comma가 대표적이다. 눈으로 찾기 어려운 이런 오류를 검증 기능이 즉시 잡아준다.
정렬 vs 압축, 언제 뭘 쓸까
| 정렬(Prettify) | 압축(Minify) | |
|---|---|---|
| 용도 | 디버깅, 코드 리뷰, 구조 파악 | 배포, 네트워크 전송, 저장 최적화 |
| 파일 크기 | 커짐 (공백/줄바꿈 추가) | 작아짐 (공백 전부 제거) |
| 가독성 | 높음 | 낮음 (한 줄로 이어짐) |
자주 묻는 질문
대용량 JSON도 처리할 수 있나요?
브라우저 메모리 한도 내에서 처리 가능하다. 수 MB 수준의 JSON은 문제없지만, 수십 MB 이상이면 전문 에디터(VS Code 등)를 쓰는 게 낫다.
JSON과 자바스크립트 객체는 같은 건가요?
비슷하지만 다르다. JSON은 키를 반드시 큰따옴표로 감싸야 하고, 주석을 허용하지 않고, trailing comma를 쓸 수 없다. 자바스크립트 객체는 이 세 가지를 모두 허용한다.
입력한 JSON이 서버에 저장되나요?
모든 처리가 브라우저 안에서 이루어진다. 서버에 데이터가 전송되지 않으니 민감한 API 키나 인증 정보가 포함된 JSON도 안심하고 넣을 수 있다.
JSON 구조를 눈으로 읽는 건 비효율적이다. 붙여넣고 정렬 버튼 하나 누르면 중첩 구조가 한눈에 들어오니, 디버깅 시간을 확실히 줄일 수 있다.