JSON 프리티 프린트: 가독성을 위한 JSON 포맷팅 방법
JSON 프리티 프린팅이란?
JSON 프리티 프린팅은 원시의 압축된(축소된) JSON 데이터를 가져와서 적절한 들여쓰기, 줄 바꿈 및 간격을 적용하여 사람이 읽을 수 있도록 다시 포맷팅하는 과정입니다. 프리티 프린트된 JSON 문서는 중첩된 객체와 배열의 계층 구조를 드러내는 일관된 들여쓰기와 명확한 구조적 포맷팅을 사용합니다.
동일한 데이터의 두 가지 표현을 비교해 보세요:
축소됨 (읽기 어려움):
{"users":[{"id":1,"name":"Alice","roles":["admin","editor"]},{"id":2,"name":"Bob","roles":["viewer"]}],"total":2}
프리티 프린트됨 (읽기 쉬움):
{
"users": [
{
"id": 1,
"name": "Alice",
"roles": ["admin", "editor"]
},
{
"id": 2,
"name": "Bob",
"roles": ["viewer"]
}
],
"total": 2
}
프리티 프린트 vs 축소된 JSON
프리티 프린트된 JSON과 축소된 JSON 사이의 선택은 사용 사례에 따라 달라집니다:
| 측면 | 프리티 프린트 | 축소됨 | |--------|-------------|----------| | 가독성 | 높음 -- 명확한 구조 | 낮음 -- 모든 데이터가 한 줄에 | | 파일 크기 | 더 큼 (공백이 더 많음) | 더 작음 (공백 오버헤드 없음) | | 네트워크 전송 | 대용량 페이로드의 경우 더 느림 | 더 빠름, 더 적은 대역폭 | | 디버깅 | 개발에 이상적 | 검사에 실용적이지 않음 | | 프로덕션 사용 | 거의 사용되지 않음 | API 응답의 표준 |
프로덕션 API는 일반적으로 대역폭을 줄이기 위해 축소된 JSON을 제공하는 반면, 개발자는 개발 및 디버깅 중에 JSON을 프리티 프린트합니다.
들여쓰기 스타일
대부분의 포맷터는 두 가지 일반적인 들여쓰기 스타일을 지원합니다:
2-공백 들여쓰기 (가장 일반적)
{
"name": "Alice",
"age": 30,
"address": {
"city": "New York"
}
}
권장 대상: JavaScript/TypeScript 프로젝트, 현대 웹 개발 및 대부분의 일반적인 용도.
4-공백 들여쓰기
{
"name": "Alice",
"age": 30,
"address": {
"city": "New York"
}
}
권장 대상: Python 프로젝트(PEP 8 스타일) 및 명확성을 위해 더 넓은 들여쓰기를 선호하는 팀.
탭 들여쓰기
일부 개발자는 특히 사용자가 편집기에서 탭 너비를 조정하는 접근성 중심 워크플로우에서 탭 기반 들여쓰기를 선호합니다.
적절한 들여쓰기 선택하기
대부분의 팀은 가독성과 수평 공간 효율성의 균형을 맞추기 위해 2-공백으로 표준화합니다. JavaScript 생태계(Node.js, React, Vue)는 압도적으로 2-공백 들여쓰기를 사용합니다. Python 중심 환경에서 작업하는 경우 4-공백 들여쓰기가 더 자연스럽게 느껴질 수 있습니다. 핵심은 일관성입니다 -- 하나의 스타일을 선택하고 Prettier나 EditorConfig와 같은 도구로 프로젝트 전체에 적용하세요.
다양한 프로그래밍 언어에서의 JSON 프리티 프린트
JavaScript / Node.js
const formatted = JSON.stringify(data, null, 2);
console.log(formatted);
Python
import json
formatted = json.dumps(data, indent=2)
print(formatted)
Java
import com.fasterxml.jackson.databind.ObjectMapper;
ObjectMapper mapper = new ObjectMapper();
String formatted = mapper.writerWithDefaultPrettyPrinter()
.writeValueAsString(data);
Go
import "encoding/json"
formatted, _ := json.MarshalIndent(data, "", " ")
fmt.Println(string(formatted))
Ruby
require 'json'
puts JSON.pretty_generate(data)
JSON 프리티 프린트 방법
온라인 JSON 포맷터 사용하기
가장 빠른 방법은 무료 온라인 JSON 포맷터를 사용하는 것입니다 -- JSON을 붙여넣으면 구문 강조 및 오류 감지와 함께 즉시 포맷된 출력을 얻을 수 있습니다.
명령줄 도구 사용하기
jq 사용 (가장 인기 있음):
cat file.json | jq .
Python 사용:
python -m json.tool file.json
Node.js 사용:
node -e "const d = require('./file.json'); console.log(JSON.stringify(d, null, 2));"
브라우저 개발자 도구
모든 주요 브라우저는 네트워크 탭에서 JSON 응답을 자동으로 포맷팅합니다:
- Chrome DevTools: 네트워크 탭이 JSON 응답을 자동으로 프리티 프린트합니다
- Firefox 개발자 도구: JSON 응답이 접을 수 있는 트리 뷰로 표시됩니다
- Safari Web Inspector: JSON 미리보기에 자동 포맷팅이 포함됩니다
JSON 포맷팅을 위한 IDE 플러그인
VS Code
VS Code는 뛰어난 내장 JSON 지원을 제공합니다. Shift+Alt+F(Windows/Linux) 또는 Shift+Option+F(macOS)를 사용하여 모든 JSON 파일을 포맷팅할 수 있습니다. 추가 확장 기능이 경험을 향상시킵니다:
- Prettier -- JSON, JSONC 및 기타 여러 언어를 일관되게 포맷팅합니다
- JSON Tools -- 키보드 단축키로 JSON 정렬, 축소 및 포맷팅
- JavaScript Booster -- 고급 JSON 조작 기능
JetBrains IDE (IntelliJ, WebStorm, PyCharm)
- 내장 포맷터:
Ctrl+Alt+L(Windows/Linux) 또는Cmd+Option+L(macOS) - 붙여넣기 시 자동 JSON 유효성 검사 및 포맷팅
Vim / Neovim
" JSON을 제자리에서 포맷팅
:%!jq .
고급 JSON 포맷팅 옵션
현대 JSON 포맷터는 기본 들여쓰기 이상의 기능을 제공합니다:
- 키 정렬 -- 일관된 출력을 위해 객체 키를 알파벳순으로 정렬
- 구문 강조 -- 키, 문자열, 숫자, 불리언에 색상 코딩
- 접을 수 있는 트리 -- 더 쉬운 탐색을 위해 중첩 구조 확장 및 축소
- 줄 번호 -- 디버깅 중 특정 위치 참조
- 오류 강조 -- 상세한 메시지와 함께 구문 오류를 시각적으로 표시
JSON 가독성을 위한 모범 사례
- 포맷팅 전에 항상 유효성 검사 -- 포맷터는 유효하지 않은 JSON을 수정할 수 없습니다. JSON 유효성 검사기를 먼저 사용하여 구문 오류를 잡아내세요.
- 팀 표준 설정 -- 들여쓰기에 합의하고(2-공백이 업계 표준) Prettier나 린터로 적용하세요.
- 중첩을 얕게 유지 -- 깊게 중첩된 JSON(4단계 이상)은 포맷팅과 관계없이 읽기 어렵습니다. 가능하면 구조를 재구성하는 것을 고려하세요.
- 의미 있는 키 사용 -- 설명적이고 간결한 키 이름은 어떤 포맷터보다 가독성을 더 향상시킵니다.
- 후행 줄 바꿈 추가 -- POSIX 표준을 준수하고 diff 노이즈를 피하기 위해 JSON 파일을 줄 바꿈 문자로 끝내세요.
저희 무료 온라인 JSON 프리티 프린트 도구를 사용하여 사용자 정의 가능한 들여쓰기와 구문 강조로 JSON 데이터를 즉시 포맷팅하고 보기 좋게 정리하세요.