JSON 포매터가 하는 일
JSON(JavaScript Object Notation)은 프로그램끼리 데이터를 주고받을 때 가장 흔히 쓰는 형식입니다. API는 보통 JSON을 공백 없이 한 줄로 돌려줍니다. 공백은 바이트만 늘릴 뿐 컴퓨터에는 필요 없기 때문입니다. 하지만 사람에게는 필요합니다. JSON 포매터는 줄바꿈과 들여쓰기를 넣어 구조를 보여 줍니다. 어떤 값이 어느 객체에 속하는지, 배열이 어디서 시작하고 끝나는지 바로 보이므로 JSON 정렬 도구이자 간단한 JSON 뷰어로 쓸 수 있습니다.
이 도구는 세 가지 일을 합니다.
- 포맷: 압축된 JSON을 들여쓰기된 읽기 쉬운 JSON으로 바꿉니다.
- 압축(Minify): 문자열 안에 있지 않은 공백과 줄바꿈을 모두 지웁니다.
- 검사: JSON이 표준에 맞는지 확인하고 처음 발견한 문제를 알려 줍니다.
사용 방법
- 왼쪽 상자에 JSON을 붙여넣습니다. 붙여넣는 즉시 정렬됩니다. 파일 열기를 눌러
.json파일을 불러오거나, 예시를 눌러 예제를 시험해 볼 수도 있습니다. - 들여쓰기를 고릅니다. 공백 2칸, 공백 4칸, 탭 중에서 선택합니다.
- 포맷, 압축(Minify), 검사 중 하나를 누릅니다. Ctrl+Enter를 누르면 마지막으로 실행한 작업을 키보드로 다시 실행합니다.
- 키를 알파벳순으로 보고 싶다면 키 A-Z 정렬을 켭니다.
- 복사를 누르거나, 다운로드를 눌러 결과를
.json파일로 저장합니다.
처음 실행한 뒤에는 입력하는 대로 결과가 갱신되므로, 문제를 고치면서 오류가 사라지는 것을 바로 확인할 수 있습니다.
정렬 전과 후
공백이 없는 전형적인 API 응답입니다.
{"id":42,"name":"Ada Lovelace","active":true,"roles":["admin","editor"],"address":{"city":"London","zip":"NW1"},"score":98.50,"manager":null}
공백 2칸으로 포맷한 결과입니다.
{
"id": 42,
"name": "Ada Lovelace",
"active": true,
"roles": [
"admin",
"editor"
],
"address": {
"city": "London",
"zip": "NW1"
},
"score": 98.50,
"manager": null
}
98.50이 98.50 그대로 남는다는 점을 보세요. 이 포매터는 자체 파서로 텍스트를 읽고 숫자를 한 글자씩 그대로 복사합니다. 12345678901234567890 같은 큰 ID도 정확히 유지되지만, JSON.parse 기반 도구라면 12345678901234567000으로 출력합니다.
키 A-Z 정렬을 켜고 공백 4칸으로 설정하면 {"name":"Ada","age":36,"address":{"zip":"NW1","city":"London"}}는 다음과 같이 바뀝니다.
{
"address": {
"city": "London",
"zip": "NW1"
},
"age": 36,
"name": "Ada"
}
검사는 올바른 입력에 대해 짧은 요약을 보여 줍니다. 첫 번째 예제에서는 “올바른 JSON입니다. 루트는 객체이며, 값은 모두 12개, 중첩 깊이는 3단계입니다.“라고 알려 줍니다.
자주 보는 오류 메시지
JSON이 깨져 있으면 상자 아래 메시지가 문제의 행(줄)과 열을 알려 주고, 입력에서 보기를 누르면 커서가 그 위치로 이동합니다. 다음은 이 도구가 실제로 보여 주는 메시지입니다.
| 실수 | 메시지 |
|---|---|
| 마지막 항목 뒤의 쉼표 | 4행 1열: “}” 앞에는 후행 쉼표를 쓸 수 없습니다 |
| 작은따옴표 사용 | 1행 2열: 큰따옴표로 감싼 속성 이름이 와야 하는데 작은따옴표(JSON 문자열에는 큰따옴표 필요)입니다 |
| 항목 사이 쉼표 누락 | 3행 3열: 값 뒤에 “,” 또는 “}“가 와야 하는데 “”“입니다 |
| 따옴표 없는 키 | 1행 2열: 큰따옴표로 감싼 속성 이름이 와야 하는데 “n”입니다 |
// 주석 |
2행 3열: JSON에서는 주석을 쓸 수 없습니다 |
이 규칙은 JSON 표준에서 나옵니다. JavaScript 객체 리터럴은 작은따옴표, 따옴표 없는 키, 후행 쉼표를 허용하기 때문에 .js 파일에서 복사한 코드는 여기서 자주 실패합니다. 데이터가 실제로 JavaScript 코드라면 자바스크립트 포매터가 더 알맞습니다.
팁과 한계
- 엄격한 JSON만 받습니다.
undefined,NaN, 주석, 후행 쉼표는 다른 프로그램에서도 거부되므로 오류로 보고합니다. - 중복 키는 쓴 그대로 둡니다. 포매터가 합치거나 지우지 않습니다.
- 압축할 때 문자열 내용은 그 안의 공백까지 포함해 건드리지 않습니다.
- 한글 문자열도 그대로 유지됩니다.
"홍길동"은 정렬한 뒤에도 그대로이고,"\uC11C\uC6B8"처럼 유니코드 이스케이프로 쓴 값도 한글로 풀지 않고 쓴 그대로 둡니다. - 파일 전체를 검사하려면 파일 열기를 쓰세요. 모든 내용이 기기 안에 머뭅니다.
JSON을 정렬하는 다른 방법
VS Code. .json 파일을 열고 명령 팔레트에서 Format Document(문서 서식)를 실행합니다. VS Code에 내장된 JSON 포매터가 사용됩니다.
jq를 이용한 명령줄. jq . data.json은 정렬된 JSON을, jq -c . data.json은 압축된 JSON을 출력합니다. jq로는 데이터를 걸러 내거나 모양을 바꿀 수도 있습니다.
Python을 이용한 명령줄. python -m json.tool data.json은 파일을 공백 4칸으로 정렬합니다. 표준 라이브러리에 들어 있으므로 Python이 설치된 곳이면 어디서나 작동합니다. 기본 설정에서는 한글이 \uD64D 같은 이스케이프로 바뀌므로, 한글을 그대로 보려면 Python 3.9 이상에서 --no-ensure-ascii 옵션을 붙이세요.
JavaScript에서. JSON.stringify(JSON.parse(text), null, 2)로 문자열을 정렬할 수 있지만, JavaScript 숫자를 거치기 때문에 긴 ID는 자릿수를 잃을 수 있습니다.
관련 도구
JSON을 설정 파일 형식으로 바꾸려면 JSON YAML 변환기를 쓰세요. JSON을 다른 JSON 문자열 안에 넣으려면 JSON 문자열 변환을, 스프레드시트에서 내보낸 데이터로 JSON을 만들려면 CSV JSON 변환을 이용해 보세요.