JSON 포매터

JSON 포매터란?

JSON 포매터(JSON 뷰어, pretty-printer라고도 부릅니다)는 한 줄로 압축되거나 들쭉날쭉한 JSON을 들여쓰기가 잘 된 읽기 좋은 형태로 바꿔주는 도구입니다. API 응답을 들여다볼 때, 설정 파일을 읽을 때, 로그를 디버깅할 때, 테스트 픽스처를 비교할 때, 프런트엔드와 백엔드 사이에 데이터를 옮길 때 등 개발자가 가장 자주 손이 가는 도구 중 하나죠.

JSON은 문법이 꽤 까다롭습니다. 키도 문자열도 반드시 큰따옴표로 감싸야 하고, 콤마는 정확한 자리에 있어야 하며, 열린 {나 [는 반드시 닫혀야 합니다. 포매터는 이런 구조를 한눈에 보이게 만들어 주고, 내장된 검증기는 문법이 깨졌을 때 그 위치를 정확히 알려줍니다.

JSON은 JavaScript Object Notation의 줄임말입니다. 자바스크립트에서 출발하긴 했지만 거의 모든 프로그래밍 언어가 JSON을 기본으로 읽고 쓸 수 있기 때문에, 웹에서 구조화된 데이터를 주고받는 사실상의 표준 포맷이 되었습니다.

사용하면서 자연스럽게 익히게 되는 것들

• 객체는 이름이 있는 필드를 묶을 때 {}로, 배열은 순서가 있는 값들을 나열할 때 []로 쓰며, 둘 다 원하는 만큼 깊이 중첩할 수 있습니다.
• 정렬된 JSON과 압축된 JSON은 *완전히 같은 데이터*입니다. 공백은 가독성에만 영향을 줄 뿐 의미는 그대로죠. 서버는 보통 바이트를 아끼려고 압축된 JSON을 응답합니다.
• JSON 값은 딱 6가지뿐입니다: 문자열, 숫자, 불리언, null, 객체, 배열. undefined도 함수도 주석도 없습니다.

JSON을 포맷팅하는 방법

1. 1

   입력창에 JSON 붙여넣기

   API 응답이나 로그, 설정 파일에서 JSON을 복사해 왼쪽 입력창에 붙여넣으세요. 압축된 형태든 일부만 정리된 형태든 모두 받아들입니다.

2. 2

   들여쓰기 폭 선택하기

   스페이스 2칸이 가장 흔하고, 4칸도 많이 쓰입니다. 진행 중인 프로젝트의 코딩 스타일에 맞춰 고르세요.

3. 3

   검증 결과 확인하기

   JSON이 유효하면 오른쪽에 정리된 결과가 나타납니다. 문제가 있으면 에러 메시지가 파싱이 실패한 줄과 글자 위치를 알려줍니다.

4. 4

   트리 뷰로 구조 살펴보기

   접고 펼 수 있는 트리 뷰를 활용해 깊이 중첩된 객체와 배열을 단계별로 닫아가며 볼 수 있습니다. 처음 보는 API 응답의 구조를 가장 빠르게 파악하는 방법입니다.

5. 5

   결과 복사하거나 다시 압축하기

   정리된 결과를 코드나 문서에 그대로 복사해 쓰거나, 저장이나 네트워크 전송용으로 다시 한 줄로 압축할 수 있습니다.

JSON 문법 빠른 참고

JSON을 구성하는 모든 요소를 정리했습니다. 이 목록 바깥에 있는 건 유효한 JSON이 아닙니다. 명세: RFC 8259, ECMA-404.

직접 시도해 볼 JSON 예제

{"user":{"id":7,"name":"Maya"},"skills":["HTML","JavaScript"]}

{  "user": {    "id": 7,    "name": "Maya"  },  "skills": ["HTML", "JavaScript"]}

{  "name": "Coddy",  "active": true,}

{  "count": 3,  "countText": "3",  "enabled": true}

{  "data": {    "orders": [      { "id": 101, "items": [{ "sku": "A", "qty": 2 }] },      { "id": 102, "items": [] }    ]  }}

JSON에서 자주 하는 실수

• 키나 문자열을 작은따옴표로 감싸는 것 — JSON은 큰따옴표만 허용합니다.
• JSON을 자바스크립트 객체처럼 다루는 것: 주석, 함수, undefined는 JSON에서 유효하지 않고, trailing comma도 파싱이 실패합니다.
• JSON의 숫자에는 앞에 +나 0을 제외한 leading zero가 올 수 없고, 정말 숫자 타입으로 쓰고 싶다면 따옴표로 감싸지 말아야 한다는 점을 잊는 것.

JSON Formatter 자주 묻는 질문