JSON 포매터 사용법: API 응답 데이터를 깔끔하게 정리하는 방법

API 응답으로 받은 JSON이 한 줄로 압축되어 있으면 읽는 것조차 힘듭니다. JSON 포매터는 이런 데이터를 계층 구조로 정렬해 한눈에 파악하기 쉽게 만들어줍니다. 개발자라면 하루에도 여러 번 쓰는 필수 도구입니다.

JSON이란?#

JSON(JavaScript Object Notation)은 데이터를 표현하는 경량 텍스트 형식입니다. 2001년 더글러스 크록포드가 소개했고 RFC 8259 표준으로 정의되어 있습니다. 웹 API 응답의 90% 이상이 JSON 형식으로 전달됩니다.

압축된 JSON 예시:

{"user":{"id":1,"name":"홍길동","email":"hong@example.com","orders":[{"id":101,"amount":29000},{"id":102,"amount":45000}]}}

포매터로 정리하면:

{
  "user": {
    "id": 1,
    "name": "홍길동",
    "email": "hong@example.com",
    "orders": [
      {
        "id": 101,
        "amount": 29000
      },
      {
        "id": 102,
        "amount": 45000
      }
    ]
  }
}

JSON의 7가지 데이터 타입#

JavaScript의 undefined나 함수는 JSON으로 직렬화되지 않습니다. JSON.stringify로 변환하면 자동으로 제거됩니다.

JSON 포매터 주요 기능#

1. 보기 좋게 정렬 (Pretty Print)#

들여쓰기(indent)를 적용해 계층 구조를 시각적으로 표현합니다. 들여쓰기 크기(2칸, 4칸, 탭)를 선택할 수 있습니다.

{
  "indent2": "공백 2칸 (가장 보편적)",
  "indent4": "공백 4칸 (가독성 우선)",
  "tab": "탭 (편집기 설정 따라감)"
}

2. 압축 (Minify)#

반대로 JSON을 한 줄로 압축합니다. API 요청 payload를 최소화하거나 설정 파일 용량을 줄일 때 사용합니다. 공백·줄바꿈을 모두 제거하면 보통 30~50% 용량 절감 효과가 있습니다.

3. 유효성 검사 (Validation)#

JSON 문법 오류를 찾아냅니다. 흔한 실수로는:

• 마지막 요소 뒤에 쉼표(trailing comma): {"a": 1, "b": 2,} 불가
• 문자열 키를 따옴표 없이 작성: {a: 1} 불가
• 작은따옴표 사용: {'a': 1} 불가 (큰따옴표만 허용)
• 주석(// 또는 /* */): JSON 표준 미지원
• undefined·NaN·Infinity: JSON 미지원

4. 트리뷰 탐색#

중첩된 객체와 배열을 트리 구조로 펼쳐볼 수 있습니다. 깊이 중첩된 데이터에서 특정 필드를 찾을 때 유용합니다.

자주 발생하는 JSON 오류와 해결법#

오류 1: Unexpected token#

SyntaxError: Unexpected token ',' in JSON at position 25

→ 쉼표 위치 오류. 마지막 요소 뒤 trailing comma 또는 잘못된 구분자.

오류 2: Unexpected end of JSON input#

SyntaxError: Unexpected end of JSON input

→ 중괄호·대괄호 닫기 누락. { 개수와 } 개수가 일치하는지 확인.

오류 3: Unexpected token in JSON at position 0#

→ 응답이 JSON이 아닌 HTML(에러 페이지)인 경우. API 호출 자체가 실패한 상황. 네트워크 탭에서 응답 확인 필요.

오류 4: 한글 깨짐 (??? 또는 \\uXXXX)#

→ 인코딩 문제. UTF-8로 저장·전송되었는지 확인. 서버 응답 헤더 Content-Type: application/json; charset=utf-8 확인.

JSON vs JSON5 vs JSONC#

VS Code의 settings.json이나 tsconfig.json은 JSONC 형식이어서
// 주석을 사용할 수 있습니다. 일반 JSON 파서는 주석을 허용하지 않으므로 혼동에 주의해야 합니다.

// VS Code settings.json (JSONC)
{
  // 주석 허용
  "editor.tabSize": 2,
  "editor.formatOnSave": true,  // trailing comma 허용
}

API 개발 시 JSON 활용 팁#

1. Postman·curl로 응답 확인#

응답 JSON을 복사해 포매터에 붙여넣으면 구조를 빠르게 파악할 수 있습니다.

# curl로 API 호출
curl -X GET https://api.example.com/users \
  -H "Authorization: Bearer TOKEN" \
  | jq .

# jq로 즉시 포매팅 (Linux/macOS)

2. 중첩 깊이 확인#

JSON 포매터로 데이터 구조를 파악하면
프론트엔드에서 다음과 같은 접근 경로를 정확히 쓸 수 있습니다.

const orderAmount = response.data.user.orders[0].amount;
// 옵셔널 체이닝으로 안전하게
const safeAmount = response?.data?.user?.orders?.[0]?.amount ?? 0;

3. 디버깅#

예상과 다른 API 응답을 포매터로 열어 실제 키 이름, 데이터 타입, 중첩 구조를 확인하면
버그 원인을 빠르게 찾을 수 있습니다. 카멜케이스(camelCase) vs 스네이크케이스(snake_case) 차이로 자주 실수합니다.

response.userName    // 서버가 user_name으로 보냈을 때 undefined
response.user_name   // 정상 접근

한국 주요 API의 JSON 형식#

정부 공공데이터포털#

공공데이터포털 API는 대부분 JSON 또는 XML을 지원합니다. JSON 응답 예시:

{
  "response": {
    "header": {
      "resultCode": "00",
      "resultMsg": "NORMAL SERVICE"
    },
    "body": {
      "items": [],
      "totalCount": 100
    }
  }
}

네이버·카카오 API#

{
  "documents": [
    {
      "title": "검색 결과 제목",
      "link": "https://example.com",
      "datetime": "2026-05-03T12:34:56.000+09:00"
    }
  ],
  "meta": {
    "total_count": 100,
    "is_end": false
  }
}

날짜는 ISO 8601 형식이 표준입니다.

보안: JSON Injection 주의#

사용자 입력을 그대로 JSON에 삽입하면 인젝션 취약점이 발생할 수 있습니다.

// 위험: 사용자 입력 직접 삽입
const json = `{"name": "${userInput}"}`;

// 안전: JSON.stringify 사용
const json = JSON.stringify({ name: userInput });

서버 측에서는 JSON.parse 후 입력 검증을 추가하는 것이 표준입니다. SQL 인젝션과 마찬가지로 화이트리스트 검증·길이 제한·타입 검증이 필요합니다.

대용량 JSON 처리#

JSON 파일이 100MB 이상일 때:

브라우저 JSON 포매터는 보통 5~10MB 이하 파일에 적합합니다. 그 이상은 명령줄 도구(jq)나 IDE 전용 플러그인을 사용하세요.

jq: 명령줄 JSON 도구#

jq는 명령줄에서 JSON을 처리하는 표준 도구입니다.

# 보기 좋게 출력
cat data.json | jq .

# 특정 필드 추출
cat data.json | jq '.user.name'

# 필터링
cat users.json | jq '.[] | select(.age > 30)'

# 변환
cat data.json | jq '{name: .user.name, count: (.orders | length)}'

API 응답을 자동화 스크립트에서 처리할 때 필수입니다.

자주 묻는 질문 (FAQ)#

Q. JSON에 주석을 추가하는 방법이 있나요?

A. 표준 JSON은 주석을 허용하지 않습니다. 주석이 필요하면 JSON5나 JSONC를 사용하거나,
_comment 같은 더미 키를 활용할 수 있습니다.

{
  "_comment": "이 필드는 사용자 ID입니다",
  "userId": 12345
}

Q. 큰따옴표 안에 큰따옴표를 어떻게 쓰나요?

A. 백슬래시로 이스케이프합니다.

{"text": "그가 \"안녕\"이라고 말했다"}

Q. JSON과 JavaScript 객체 리터럴의 차이는?

A. JavaScript 객체 리터럴은 키에 따옴표가 필요 없고 trailing comma·주석을 허용하지만,
JSON은 모두 엄격히 규제합니다. JSON.stringify·JSON.parse를 통해 상호 변환됩니다.

Q. 한글 키 이름을 사용해도 되나요?

A. 가능합니다. JSON은 UTF-8 유니코드를 지원하므로 {"이름": "홍길동"}이 유효합니다. 다만 API 표준 호환성·라이브러리 안정성을 위해 영문 카멜케이스를 권장합니다.

Q. JSON과 XML 중 무엇을 써야 하나요?

A. 신규 시스템은 JSON이 표준입니다. JSON은 더 가볍고 파싱이 빠르며 JavaScript와 자연스럽게 통합됩니다. XML은 SOAP·기존 엔터프라이즈 시스템에서 여전히 사용됩니다.

관련 글#

• 데이터 단위 완전 정복: JSON 응답 크기 측정
• 강력한 비밀번호 만드는 법: API 키 관리

함께 사용하면 좋은 도구#

마치며#

JSON은 현대 웹 개발의 공통 언어입니다. 단순한 문법이지만 trailing comma·인코딩·중첩 구조에서 자주 실수가 발생합니다. JSON 포매터를 일상적으로 사용하면 디버깅 시간이 크게 줄어듭니다.

JSON 포매터에서 압축된 응답을 정렬하고,
정규식 테스터와 함께 활용해 JSON 데이터에서 특정 패턴의 값을 추출하는 작업도 수월해집니다.

안내: 이 글은 JSON 포매터 활용법에 관한 일반 정보입니다. 보안 민감 데이터(개인정보·결제정보·API 키)는 절대 외부 온라인 도구에 붙여넣지 마세요. 본 도구는 브라우저 내에서만 처리하지만, 일반적으로 민감 데이터는 로컬 도구(VS Code 확장·jq) 사용을 권장합니다.

Sources

• RFC 8259: JSON
• JSON.org
• 공공데이터포털: Open API 가이드
• MDN: JSON
• jq Manual