JSON 포맷터

JSON 포맷터

변환 결과가 여기에 표시됩니다...

댓글과 질문

JSON 포맷터 주요 기능

JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하기 위한 경량 텍스트 기반 형식으로, 웹 API·설정 파일·데이터 교환에 널리 쓰입니다. 이 JSON 포맷터는 붙여넣기만 해도 자동으로 JSON을 예쁘게 정리하고, 자동복구·YAML/CSV/TypeScript 변환·JSONPath 쿼리까지 지원하는 무료 온라인 도구입니다.

🎨 포맷팅 (Beautify)

한 줄로 압축된 JSON을 읽기 쉬운 형태로 정리합니다.

✅ 검증 (Validate)

JSON 문법 오류를 찾아내고 알려줍니다.

📦 압축 (Minify)

불필요한 공백을 제거하여 파일 크기를 최소화합니다.

🔧 자동 복구 (Auto-Repair)

트레일링 쉼표, 작은따옴표, 주석, 따옴표 없는 키 등 흔한 JSON 오류를 자동으로 수정합니다.

🔄 YAML/CSV 변환

JSON 데이터를 YAML이나 CSV 형식으로 변환하여 복사하거나 다운로드할 수 있습니다.

📝 TypeScript 생성

JSON 구조를 분석하여 TypeScript 인터페이스를 자동으로 생성합니다.

JSON 포맷터 사용 방법

  1. JSON 붙여넣기 (자동 포맷팅) — 유효한 JSON을 붙여넣으면 자동으로 예쁘게 정리됩니다. 버튼 없이 바로 확인!
  2. 자동복구 또는 정리 클릭 — 깨진 JSON은 '자동 복구'로 오류를 수정하고, '정리(Beautify)'로 들여쓰기를 적용하세요.
  3. 트리 뷰로 확인 — 텍스트/트리 뷰 모드를 전환하여 데이터 구조를 시각적으로 탐색하세요.
  4. 변환 뷰 확인 — YAML, CSV, TypeScript 등 다양한 뷰 모드로 결과를 확인하세요.
  5. 결과 복사/다운로드 — 복사 또는 다운로드 버튼으로 원하는 형식의 결과를 저장하세요.

활용 예시

API 개발 & 테스트

REST API 응답을 보기 좋게 정리하여 데이터 구조를 빠르게 파악하고 디버깅합니다.

디버깅 & 문법 검증

JSON 문법 오류를 즉시 감지하고 정확한 오류 위치를 알려줍니다.

설정 파일 편집

package.json, tsconfig.json 등 설정 파일을 깔끔하게 정리하고 편집합니다.

학습 & 데이터 분석

복잡한 JSON 구조를 트리 뷰로 시각화하여 데이터 모델을 이해합니다.

데이터 변환

JSON을 YAML이나 CSV로 변환하여 다른 시스템이나 스프레드시트에서 활용합니다.

TypeScript 개발

API 응답 JSON으로 TypeScript 인터페이스를 자동 생성하여 타입 안전한 코드를 작성합니다.

자주 묻는 질문

JSON이란 무엇인가요?

JSON은 데이터를 저장하고 전송하기 위한 경량 텍스트 기반 형식입니다. 웹 API, 설정 파일 등에 널리 사용됩니다.

JSON 포맷터는 어떤 용도로 사용하나요?

압축된 JSON을 읽기 쉽게 정리하거나, JSON 문법 오류를 찾아 수정할 때 사용합니다.

JSON과 JavaScript 객체의 차이는?

JSON은 문자열 형태의 데이터 포맷이고, JavaScript 객체는 프로그래밍 언어의 데이터 타입입니다.

JSON 파일의 최대 크기는 얼마인가요?

JSON 자체에는 크기 제한이 없지만, 이 도구는 브라우저에서 실행되므로 수 MB 이내의 데이터를 처리하기에 적합합니다. 매우 큰 파일은 전용 에디터를 사용하시기 바랍니다.

Minify(압축)는 왜 사용하나요?

JSON 파일에서 불필요한 공백과 줄바꿈을 제거하여 파일 크기를 줄입니다. API 응답이나 설정 파일을 배포할 때 전송 속도를 높이고 저장 공간을 절약할 수 있습니다.

JSON 자동 복구는 어떤 오류를 고칠 수 있나요?

트레일링 쉼표, 작은따옴표, JavaScript 주석(//와 /* */), 따옴표 없는 키 등 흔한 JSON 문법 오류를 자동으로 수정합니다.

JSON을 TypeScript 인터페이스로 변환할 수 있나요?

네, JSON 데이터를 입력하면 자동으로 TypeScript 인터페이스를 생성합니다. 중첩 객체, 배열, 옵셔널 필드, 유니온 타입까지 지원합니다.

JSON 붙여넣기 시 자동으로 정리되나요?

네! 유효한 JSON을 붙여넣으면 자동으로 포맷팅됩니다. 별도로 버튼을 누를 필요 없이 깔끔하게 정리된 JSON을 바로 확인할 수 있습니다.

JSON을 예쁘게 보는 방법은?

JSON 데이터를 입력창에 붙여넣은 뒤 '정리(Beautify)' 버튼을 클릭하거나 그냥 붙여넣기만 해도 자동으로 들여쓰기가 적용됩니다. 트리 뷰 모드로 전환하면 계층 구조를 더욱 시각적으로 탐색할 수 있습니다.

긴 숫자 ID가 정리 후 달라지는 이유는 무엇인가요?

이 도구는 JavaScript의 JSON.parse로 숫자를 읽습니다. 정수의 절댓값이 9007199254740991을 넘으면 정확도가 손실될 수 있습니다. 숫자 계산이 필요 없는 긴 ID는 데이터를 만드는 단계에서 큰따옴표로 감싼 문자열로 전달하세요. 붙여넣기 자동 정리에서도 같은 제한이 적용되므로 원본을 별도로 보관하세요.

자동 복구 결과를 그대로 사용해도 되나요?

복구 결과가 JSON으로 읽힌다는 사실만으로 원래 값이 보존되었다고 보장할 수 없습니다. 일부 문자열 패턴도 바뀔 수 있으며 누락된 값을 추론해 복원하지 않습니다. 유효한 JSON에는 정리 기능을 사용하고, 복구가 필요한 경우에는 원본을 따로 보관한 뒤 키와 값을 비교하세요.

모든 JSONPath 문법을 지원하나요?

아니요. 이 도구의 자체 구현은 기본적인 속성 경로, 배열 인덱스, 와일드카드 조회를 지원합니다. 필터 조건과 재귀 탐색을 포함한 JSONPath 전체 문법을 지원하지 않습니다. 아래 배열 이름 추출 예시처럼 단순한 경로에 사용하고 결과를 원본과 대조하세요.

개인정보 안내

이 JSON 포맷터는 모든 데이터 처리가 사용자의 브라우저 내에서 이루어집니다. 입력하신 JSON 데이터는 서버로 전송되지 않으며, 어떠한 정보도 저장하거나 수집하지 않습니다. 안심하고 민감한 데이터도 처리하실 수 있습니다.

입력과 결과로 확인하는 JSON 예제

아래 예제는 이 도구의 현재 처리 코드로 확인한 결과입니다. 들여쓰기 2칸, 키 정렬 끔을 기준으로 하며, 정리·자동 복구·JSONPath 조회의 차이를 직접 비교할 수 있습니다.

1. API 응답을 읽기 좋게 정리하기

다음 JSON을 붙여넣거나 정리(Beautify)를 실행합니다. 텍스트 뷰에서 객체와 배열의 구조를 확인하세요.

입력

{"name":"Tani","active":true,"scores":[10,20]}

현재 도구의 출력

{
  "name": "Tani",
  "active": true,
  "scores": [
    10,
    20
  ]
}

이 예제에서는 값이 유지되고 공백과 줄바꿈이 추가됩니다. 다만 이 도구는 원문을 파싱해서 다시 출력하므로 모든 입력의 원문이나 값을 그대로 보존하는 편집기는 아닙니다. 아래 큰 정수와 중복 키 사례를 확인하세요.

2. 주석과 작은따옴표가 있는 입력 복구하기

아래 입력은 표준 JSON이 아닙니다. 자동 복구를 실행하면 이 예제에서는 주석을 제거하고 키와 문자열의 따옴표, 마지막 쉼표를 정리합니다.

입력

// example
{name:'Tani',active:true,}

현재 도구의 출력

{
  "name": "Tani",
  "active": true
}

복구는 일부 흔한 문법 문제를 처리하는 보조 기능입니다. 임의의 깨진 파일을 완전히 복원하거나 작성자의 의도를 알아내는 기능은 아닙니다.

3. 배열에서 이름만 추출하기

입력 JSON을 먼저 정리한 뒤 JSONPath 버튼으로 조회창을 열고 아래 경로를 입력합니다. 별표는 users 배열의 각 항목을 선택합니다.

입력

{"users":[{"name":"Tani"},{"name":"Mina"}]}

조회 경로: $.users[*].name

현재 도구의 출력

[
  "Tani",
  "Mina"
]

조회 경로를 $.users[0].name으로 바꾸면 첫 번째 이름 하나를 찾습니다. 이 도구는 결과가 하나일 때 배열 대신 해당 값 자체를 표시합니다.

정리 전에 알아둘 값 손실과 복구의 한계

문법 검증 통과와 데이터 의미의 정확성은 다릅니다. 중요한 파일은 원본을 보관하고, 결과를 저장하기 전에 ID와 키별 값을 확인하세요.

큰 정수는 정리나 붙여넣기에서 반올림될 수 있습니다

아래 숫자는 JavaScript의 안전한 정수 범위를 벗어납니다. 현재 도구의 파싱 단계에서 값이 달라지며, 들여쓰기 설정의 문제가 아닙니다.

입력

{"id":9007199254740993}

현재 도구의 출력

{
  "id": 9007199254740992
}

원본 시스템에서 ID를 문자열로 내보내면 이 숫자의 자릿수를 보존할 수 있습니다. 이미 반올림된 결과를 나중에 문자열로 바꾸어도 원래 숫자는 되살아나지 않습니다.

같은 객체의 중복 키는 마지막 값만 남습니다

아래 입력은 파싱 오류 없이 처리되지만, 첫 번째 role 값은 결과에서 사라집니다. RFC 8259는 객체의 이름이 고유해야 상호운용하기 좋다고 설명합니다.

입력

{"role":"reader","role":"editor"}

현재 도구의 출력

{
  "role": "editor"
}

여러 값을 보존하려면 서로 다른 키나 배열로 원본 데이터 구조를 정리하세요. 이 도구는 중복 키를 별도의 경고로 알려주지 않습니다.

복구 성공이 문자열 보존을 뜻하지는 않습니다

다음은 이미 유효한 JSON에 자동 복구를 실행한 반례입니다. 현재 복구 처리에서는 문자열 안의 쉼표까지 제거되어 값이 바뀝니다.

입력

{"note":"a,}"}

현재 도구의 출력

{
  "note": "a}"
}

유효한 JSON의 들여쓰기에는 자동 복구 대신 정리를 사용하세요. 복구는 입력창 내용도 바꿀 수 있으므로 실행 전에 원본을 별도로 보관하고, 처리 후 문자열 값을 대조하세요.

JSONPath 지원 범위: $.users[0].name 같은 속성·인덱스 경로와 $.users[*].name 같은 기본 와일드카드를 사용하세요. 필터 조건이나 재귀 탐색은 지원하지 않으며, 복잡한 경로의 빈 결과를 원본에 데이터가 없다는 뜻으로 해석하면 안 됩니다.

검증 기준과 공식 참고 문서

2026년 9월 12일 현재 JSON.parse/JSON.stringify 처리와 이 도구의 복구·JSONPath 함수로 위 입출력을 검증했습니다. 공식 문서는 JSON 문법과 JavaScript의 숫자 표현을 설명하며, 이 도구 자체의 동작 보증이나 인증을 의미하지 않습니다.

관련 도구

JSON CSV 변환JWT 디코더SQL 포맷터타임스탬프 변환기WebAssembly 모듈 검사기다국어 연결 행렬 검사기구문 트리 질의 실험실컨테이너 빌드 단계 분석기의존성 그래프 탐색기버전 제약 충돌 분석기작업 스케줄 충돌 검사기패치 검토 작업대소스맵 탐색기다국어 카탈로그 검사기구조화 데이터 대조기HTTP 아카이브 분석기웹훅 서명 실험실Protobuf 스키마 작업대GraphQL 스키마 실험실Avro 스키마 호환성 검사기로컬 SQL 데이터 작업대스키마 기반 입력 폼 생성기3D 메쉬 검사·복구기관망 유량·압력 실험실로봇팔 운동학 실험열저항 회로 실험실보 휨 실험실기어열 배치 실험공차 누적 실험실센서 교정 곡선 맞추기PCB 적층 비교 설계기디지털 필터 설계기도로망 도달 범위 지도태양 그림자 배치 실험GPS 오차 시뮬레이터디지털 논리 회로 실험아날로그 회로 실험실링크 기구 운동 실험해석용 메쉬 생성기OpenAPI 계약 검사기DB 스키마 변경 계획기수식 차원 검사기트러스 힘 실험실논리식 최소화 실험실제어계 응답 실험실대기행렬 시뮬레이터위치 구역 출입 이벤트 실험실좌표계 변환 실험실측량 폐합 검산 실험실위성·래스터 구간 분류단계구분도 설계기지도 인쇄 편집기GeoTIFF 래스터 재투영고도 등고선 생성기지형 가시영역 실험실지형 유역 탐색기오프라인 지도 타일 패키저텍스트 파일 인코딩 작업대파일 경로 호환성 검사기SBOM 라이선스 탐색기파일 형식 위장 검사기npm 잠금 파일 충돌 해결기소스 비밀값 점검기오프라인 웹 자료 패키저인증서 체인 검사기토렌트 메타정보 검사기파일 분할 전송 패키저로컬 파일 암호 금고동일 파일 찾기압축 파일 작업대디자인 토큰 관리기반응형 간격 체계 설계기반응형 타이포 시스템 설계기포장 전개도 설계기SVG 아이콘 스프라이트 묶기Flexbox 배치 설계기CSS Grid 배치 설계기정규 언어 동치 검사기Markdown 문서 묶음 검사기로그 패턴 추출기반응형 HTML 레이아웃 검사기메일 HTML 렌더 검토기내부 링크 구조 분석기상태 전이 모델 테스트 생성기페트리넷 흐름 실험Git 이력 그래프 탐색기HTTP 요청 명령 설계기바이너리 프로토콜 설계기바이너리 Hex 편집기바이너리 차이 패치 만들기파일 전자서명 작업대API 모의 응답 실험실데이터 열 매핑 설계기이벤트 로그 세션 분석기데이터베이스 관계도 설계기시계열 누락 검사기학습 데이터 분할기데이터 흐름 계보 작성기결정트리 학습 실험실데이터 비식별 처리기데이터 계약 규칙 검사기JSON Schema 검증기항목 동시출현 분석기robots 규칙 시뮬레이터HTML 검색 기본 검사기접근성 구조 검사기RSS·Atom 피드 작성기IndexNow 배포 알림 준비기검색 로봇 로그 분석기CSP 정책 검토기검색 실적 CSV 분석기CSV 수식 위험 검사기CORS 응답 시뮬레이터HTTP 캐시 동작 실험실쿠키 속성 검사기성능 추적 파일 분석기사이트맵 구조 검사기파일 일괄 이름 바꾸기파일 묶음 무결성 검증기폴더 용량 지도폴더 차이 검토기방문 순서 최적화GeoJSON 지도 편집기지도 영역 중첩 분석기지도 라벨 배치기공간 속성 결합기GeoJSON 공간 위상 검사기GPS 이동 기록 분석기이동 기록 위치 가림표 관계 결합기피벗 테이블 작업대데이터 품질 프로파일러표 데이터 정제 작업대기록 대사 도구데이터 사전 작성기canonical 관계 검사기리다이렉트 계획 검증기HTTP 응답 속도·핑 참고 테스트내 브라우저·시스템 정보JSON ↔ YAML 변환기XML ↔ JSON 변환기HTML 포맷터JavaScript 압축기목 데이터 생성기.gitignore 생성기라이선스 생성기User-Agent 분석기비밀번호 강도 검사코드 이미지 만들기XML 포맷터HTTP 상태 코드 찾기MIME 타입 찾기JS·SQL 문자열 이스케이프CSS 박스 그림자 생성기CSS 그라데이션 생성기들여쓰기 변환기진법 변환기유니코드 이스케이프 변환기유니코드 문자 분석기JSON 구조 비교기Markdown 표 생성기Base64 인코더URL 인코더Cron 표현식 생성기정규식 테스터UUID 생성기해시 생성기HTML 엔티티 변환기Markdown 미리보기CSS Minifier메타태그·OG 생성기대소문자·케이스 변환이미지 Base64 변환
개발 도구 도구 전체 보기 →이미지/미디어 →텍스트/변환 →생활/재미 →