JSON 온라인 포맷

로컬 처리
app.formatter.view

다음으로도 #data={"name":"Ada"} 또는 #url=... 데이터를 넣을 수 있으며, 읽은 뒤 주소 표시줄에서 지워집니다.

한 줄로 뭉친 API 응답을 읽기 쉬운 구조로 펼칩니다. 붙여넣으면 문법을 자동 검증하고 들여쓰기로 정리하며, Key 정렬도 선택할 수 있습니다. 모두 현재 탭에서 끝나, 운영 메시지를 디버깅할 때 데이터를 제3자 사이트에 보내고 싶지 않은 장면에 맞습니다. Network 패널에서 복사한 압축 JSON, 로그의 한 줄 메시지도 바로 붙여 계층을 볼 수 있습니다.

자동으로 보기 좋게

객체, 배열, 중첩 계층을 인식해 2 / 4 칸 또는 Tab으로 들여씁니다. 중첩이 깊을수록 들여쓰기가 같은 층 필드를 맞추는 데 도움이 되어, 괄호를 눈으로 세지 않아도 됩니다.

편집기의 Prettier / 언어 서비스와 비슷하지만 파일을 만들거나 플러그인을 설치할 필요가 없어, 응답 본문을 잠깐 볼 때 맞습니다.

문법 검사

괄호가 안 맞거나 쉼표가 빠지거나 남치면 입력 쪽에서 멈추고 오류를 알려 줍니다. 작은따옴표, 따옴표 없는 키, JS 객체 리터럴에서 그대로 복사한 후행 쉼표도 흔한 문제입니다.

원문이 JSON5(주석 포함)이면 JSON5 도구로 표준 JSON으로 바꾼 뒤 다시 포맷하세요.

주소 표시줄로 넣기

다음으로 #data={...} 또는 #url= 페이지를 열면 채워지고, 읽은 뒤 주소 표시줄에서 지워집니다. 문서, 티켓, 스크립트에서 공유 링크를 만들어 상대가 열면 같은 데이터를 보게 할 때 맞습니다.

원격 #url= 브라우저 CORS 제한을 받으며, 이 사이트의 정적 파일이나 교차 출처가 열린 주소만 가져올 수 있습니다.

예시

입력(압축됨) 
 {"user":{"id":1001,"name":"홍길동","roles":["admin","editor"]}}
포맷 결과 
{
  "user": {
    "id": 1001,
    "name": "张三",
    "roles": [
      "admin",
      "editor"
    ]
  }
}
필드 값을 바꾸나요?

아니요. 공백과 줄바꿈만 조정합니다. 「Key 정렬」을 켜야 객체 키 순서가 바뀌며, 값은 그대로입니다.

압축 도구와 무엇이 다른가요?

포맷은 읽기용이고, 압축 은 전송용입니다. 둘을 오갈 수 있습니다.

데이터가 업로드되나요?

아니요. 파싱과 정리는 현재 브라우저 메모리에서 끝나며, 탭을 새로고침하거나 닫으면 내용이 사라집니다.

어느 정도 크기에 맞나요?

수 MB 이내는 대체로 문제없습니다. 약 2 MB를 넘으면 느려지고 경고가 나올 수 있습니다. 10 MB를 넘으면 분할하거나 jq 같은 로컬 CLI를 쓰세요.

권장 워크플로

  1. API, 로그, 클립보드에서 원본 JSON을 왼쪽 입력란에 붙여넣거나 「예시 불러오기」로 화면을 익히세요.
  2. 문법이 통과하면 2칸, 4칸 또는 Tab을 고르고, 다른 본과 비교할 때 「Key 정렬」을 켜세요.
  3. 「복사」로 보기 좋은 결과를 편집기, 티켓, 테스트 케이스로 가져가세요. 운영 환경에서는 압축 페이지로 공백을 없애세요.
  4. 구조가 깊으면 트리 보기로 전환하고, 몇몇 필드만 뽑으려면 JSONPath를 쓰세요.

연동 시 「먼저 포맷해 구조를 보고, 그다음 Diff하거나 YAML로 변환」하는 습관이, 압축된 한 줄에서 필드를 고치는 것보다 계층을 놓치기 어렵습니다.

관련 도구

압축 검증 JSON5 트리