zzzbbb.net

Developer Data

JSON Beautifier

길게 붙은 JSON을 들여쓰기해 빠르게 읽고 디버깅할 수 있도록 돕는 도구입니다.

도구 실행 패널

입력값을 붙여넣고 실행하면 결과를 바로 확인할 수 있습니다.

설명

도구 개요

이 페이지에서는 도구의 역할, 언제 쓰면 좋은지, 샘플로 어떻게 빠르게 확인할 수 있는지 정리합니다.

JSON 문자열을 보기 쉬운 구조로 정리합니다.

런타임 요약: JSON을 사람이 읽기 쉬운 형태로 정리합니다.

샘플 입력

아래 샘플을 그대로 붙여 넣으면 기본 처리 흐름을 바로 확인할 수 있습니다.

{"name":"zzzbbb","active":true,"items":[3,1,2]}

JSON 로그나 API 응답을 사람이 읽기 쉬운 구조로 정리하고 싶을 때 가장 먼저 사용할 수 있는 도구입니다. 줄바꿈과 들여쓰기가 없는 한 줄 JSON도 즉시 비교 가능한 형태로 깔끔하게 정리할 수 있습니다.

입력값은 사용자의 브라우저에서만 처리되며 서버로 업로드되지 않습니다. 내부 설정값이나 테스트 페이로드를 빠르게 확인할 때도 안전합니다.

언제 쓰나요

  • 압축된(Minified) JSON이 너무 길어 구조를 한눈에 파악하기 어려울 때
  • 코드 리뷰나 문서에 예시 JSON을 읽기 좋은 형태로 포함하고 싶을 때
  • 응답 페이로드의 특정 키 경로를 빠르게 찾고 비교해야 할 때

정리 옵션을 이렇게 쓰세요

들여쓰기, 키 정렬, 유니코드 이스케이프를 조합하면 용도에 맞는 출력 형태를 만들 수 있습니다.

  • indent: 사람이 읽기 쉽게 2칸 또는 4칸 구조로 정리할 때 사용합니다.
  • sortKeys: 객체 키 순서가 섞여 있는 두 JSON을 비교할 때 유용합니다.
  • escapeUnicode: 한글·이모지 같은 문자를 고정된 escape 형태로 보고 싶을 때 적합합니다.

자주 생기는 실수

  • JSON 조각만 복사해 끝의 } 또는 ]가 빠진 상태로 포맷팅하기
  • 문자열 안의 따옴표를 escape하지 않고 그대로 넣기
  • 비교 목적이라면서 키 정렬 옵션을 끈 채 출력 차이를 해석하기
  • JSON과 JavaScript 객체 리터럴을 같은 문법으로 착각하기

예시 입력

{"name":"zzzbbb","items":[3,1,2],"enabled":true}

예시 출력

{
  "name": "zzzbbb",
  "items": [
    3,
    1,
    2
  ],
  "enabled": true
}

FAQ

서버로 JSON이 전송되나요?
아니요. 브라우저 안에서만 포맷팅합니다.
들여쓰기는 바꿀 수 있나요?
네. 옵션에서 2칸 또는 4칸 들여쓰기를 선택할 수 있습니다.
키 정렬도 가능한가요?
가능합니다. 객체 키를 알파벳 순으로 정렬해 비교하기 쉽게 만들 수 있습니다.
유니코드 이스케이프는 언제 쓰나요?
로그, 코드 스니펫, 시스템 간 비교에서 비ASCII 문자를 `\uXXXX` 형태로 고정하고 싶을 때 유용합니다.
잘못된 JSON이면 어떻게 되나요?
포맷팅 대신 오류 메시지를 보여 주어 어디를 먼저 확인해야 하는지 파악할 수 있게 돕습니다.

관련 도구

더 탐색하기

이 도구는 Developer Data 카테고리에 속합니다. 비슷한 워크플로우가 필요하면 도구 허브의 전체 도구 목록 에서 비교해 보세요.