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 가독성을 위한 모범 사례

1. 포맷팅 전에 항상 유효성 검사 -- 포맷터는 유효하지 않은 JSON을 수정할 수 없습니다. JSON 유효성 검사기를 먼저 사용하여 구문 오류를 잡아내세요.
2. 팀 표준 설정 -- 들여쓰기에 합의하고(2-공백이 업계 표준) Prettier나 린터로 적용하세요.
3. 중첩을 얕게 유지 -- 깊게 중첩된 JSON(4단계 이상)은 포맷팅과 관계없이 읽기 어렵습니다. 가능하면 구조를 재구성하는 것을 고려하세요.
4. 의미 있는 키 사용 -- 설명적이고 간결한 키 이름은 어떤 포맷터보다 가독성을 더 향상시킵니다.
5. 후행 줄 바꿈 추가 -- POSIX 표준을 준수하고 diff 노이즈를 피하기 위해 JSON 파일을 줄 바꿈 문자로 끝내세요.

저희 무료 온라인 JSON 프리티 프린트 도구를 사용하여 사용자 정의 가능한 들여쓰기와 구문 강조로 JSON 데이터를 즉시 포맷팅하고 보기 좋게 정리하세요.