JSON 포매터
API 응답, 설정 파일, webhook, 로그 샘플에서 가져온 JSON을 붙여넣고 서식 지정, 압축, 검증 중 하나를 선택하세요. 포매터는 중첩된 객체와 배열을 2칸 또는 4칸 들여쓰기로 펼치고, 압축 기능은 불필요한 공백을 제거하며, 검증 기능은 복사하기 전에 텍스트가 유효한 JSON인지 확인합니다.
JSON 서식 지정 방법
-
1
JSON 붙여넣기
객체, 배열, 문자열, 숫자, 불리언 또는 `null` 같은 완전한 JSON 값을 입력합니다.
-
2
작업 선택
읽기 좋은 출력은 서식 지정, compact 출력은 압축, 구문 확인은 검증을 사용합니다.
-
3
들여쓰기 선택
서식 지정 출력에는 웹 프로젝트에서 흔한 2칸 또는 저장소 스타일에 맞는 4칸을 선택합니다.
-
4
결과 복사
파서 메시지나 서식 지정된 출력을 확인한 뒤 결과를 편집기, API 클라이언트 또는 문서로 복사합니다.
이 JSON 포매터가 하는 일
- JSON 서식 지정:
{"a":1,"b":[1,2,3]}같은 compact 입력을 들여쓰기 있는 읽기 쉬운 JSON으로 바꿉니다. - JSON 압축: 읽기 편하게 넣은 공백을 제거합니다. 짧은 예시, 임베드, 전송 payload에 유용합니다.
- 구문 검증: 붙여넣은 텍스트가 JSON으로 파싱되는지 확인합니다. 이는 구문 검사이며 JSON Schema 검증은 아닙니다.
- 모든 JSON 루트 값 처리: 객체와 배열이 가장 흔하지만 JSON 텍스트는 문자열, 숫자,
true,false,null일 수도 있습니다. - 단순한 흐름 유지: 붙여넣고, 작업을 선택하고, 출력을 확인한 뒤 결과를 복사합니다.
의도적으로 바꾸지 않는 것
- 잘못된 JSON을 자동으로 고치지 않습니다. 파서 메시지가 수정할 부분을 알려줍니다.
callback({...})같은 JSONP 래퍼를 허용하지 않습니다.- 먼저 제거하지 않은 JSONC 주석이나 trailing comma를 허용하지 않습니다.
- 객체 키를 정렬하지 않습니다. 기존 순서는 파서와 serializer가 허용하는 범위에서 유지됩니다.
- 비즈니스 규칙, 필수 필드, API 스키마는 검증하지 않습니다. 이 단계에는 JSON Schema 검증기를 사용하세요.
서식 선택 기준
| 상황 | 가장 좋은 작업 | 도움이 되는 이유 |
|---|---|---|
| API 응답 읽기 | 2칸으로 서식 지정 | 중첩된 객체와 배열을 더 쉽게 훑어볼 수 있습니다. |
| 저장소 스타일 맞추기 | 2칸 또는 4칸으로 서식 지정 | 일관된 들여쓰기는 코드 리뷰를 깔끔하게 만듭니다. |
| 요청에 payload 넣기 | 압축 | JSON 값을 바꾸지 않고 공백만 제거합니다. |
| 로그에서 복사한 데이터 확인 | 검증 | 재사용 전에 붙여넣은 조각이 완전한 JSON인지 확인합니다. |
| API 문서 준비 | 서식 지정 | 예시를 검토하고 복사하기 쉬워집니다. |
잡아내는 JSON 구문 문제
| 파서 메시지 | 흔한 원인 | 해결 방법 |
|---|---|---|
Unexpected token ' at position X |
키나 문자열을 작은따옴표로 감쌈 | JSON 문자열에는 큰따옴표를 사용합니다. |
Unexpected end of JSON input |
닫는 중괄호, 대괄호 또는 따옴표 누락 | 붙여넣은 텍스트의 끝부분을 확인합니다. |
Unexpected token , at position X |
마지막 항목 뒤의 trailing comma | 마지막 쉼표를 제거합니다. |
Unexpected token a at position X |
따옴표 없는 키, NaN 또는 undefined |
키를 따옴표로 감싸고 유효한 JSON 값만 사용합니다. |
Unexpected token / at position X |
JSONC 또는 JavaScript에서 복사한 주석 | 검증 전에 // 및 /* */ 주석을 제거합니다. |
실무 팁
- 응답을 검토할 때는 먼저 서식 지정하고, 정말 compact payload가 필요할 때만 압축하세요.
- 문서, 티켓, API 클라이언트에 JSON을 붙여넣기 전에 검증하세요. 출처가 일부 로그 줄이라면 특히 중요합니다.
- 프로젝트의 들여쓰기 규칙을 유지하세요. 기존 파일을 2칸에서 4칸으로 바꾸면 diff가 불필요하게 커질 수 있습니다.
- 비밀값, 운영 환경 자격 증명, 고객 데이터를 일반 웹 도구에 붙여넣지 마세요. 민감한 payload에는 조직에서 승인한 내부 또는 오프라인 포매터를 사용하세요.
자주 묻는 질문
아니요. 이 도구는 JSON 구문만 확인합니다. 필수 필드, 허용 값, 객체 구조를 확인해야 한다면 정상적으로 파싱된 뒤 JSON Schema 검증기를 사용하세요.
엄격한 JSON은 주석이나 trailing comma를 허용하지 않습니다. 검증하거나 서식 지정하기 전에 JSONC 스타일 주석과 마지막 쉼표를 제거하세요.
프로젝트에서 이미 쓰는 스타일을 따르세요. JavaScript와 웹 설정 파일에서는 2칸이 흔하고, 일부 backend 저장소에서는 4칸이 더 읽기 쉬울 수 있습니다.
비밀값, access token, 자격 증명, 고객 레코드를 일반 웹 포매터에 붙여넣지 않는 것이 좋습니다. 민감한 payload에는 승인된 내부 도구나 오프라인 도구를 사용하세요.
관련 도구
보색 찾기
어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.
Webpack 설정 생성기
순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.
색상 혼합기
두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.
PHP 포매터
간단한 PHP 코드에 줄바꿈과 2칸 또는 4칸 들여쓰기를 추가합니다. 결과를 반드시 검토하세요. PHP 파서나 PSR-12 적용 도구가 아닙니다.
OpenAPI 검증기
OpenAPI 또는 Swagger 문서를 JSON이나 YAML로 붙여넣고 핵심 구조를 점검하세요: 버전 필드, info 객체, paths를 명확한 오류와 경고와 함께 확인합니다.
CSS 로딩 애니메이션 생성기
순수 CSS로 원형 스피너를 만듭니다. 지름, 테두리 두께, 포인트 색상, 회전 속도를 설정하고 미리 보기를 확인한 뒤 바로 쓸 수 있는 CSS를 복사하세요. SVG도 자바스크립트도 필요 없습니다.
이 도구는 다른 언어로도 제공됩니다
- JSONフォーマッター [JA]
- JSON-formaterare [SV]
- Formateur JSON [FR]
- JSON-Formatierer [DE]
- ตัวจัดรูปแบบ JSON [TH]
- Trình định dạng JSON [VI]
- Formateador de JSON [ES]
- JSON-formatter [NL]
- Formatter JSON [PL]
- Pemformat JSON [ID]
- منسق JSON [AR]
- Formatador de JSON [PT]
- JSON 格式化工具 [ZH]
- JSON Formatter [EN]
- Форматировщик JSON [RU]
- JSON Biçimlendirici [TR]
- Formattatore JSON [IT]