JSON 포맷터/검증기

JSON 데이터를 보기 좋게 포맷팅하거나 압축하고, 문법 오류를 즉시 검증하세요. 모든 처리는 브라우저에서 이루어집니다.

JSON 포맷터 사용법

JSON 데이터를 입력창에 붙여넣고, 포맷팅 버튼을 클릭하면 2칸 들여쓰기로 정리된 JSON을 얻을 수 있습니다. 압축 버튼을 누르면 공백을 모두 제거한 한 줄 JSON으로 변환합니다. 검증 버튼으로 문법 오류를 확인할 수 있으며, 입력 시 실시간으로 유효성이 검사됩니다.

JSON 작성 팁

  • 키(key)는 반드시 큰따옴표(")로 감싸야 합니다.
  • 마지막 항목 뒤에 쉼표(trailing comma)를 넣지 마세요.
  • 문자열 값도 큰따옴표로 감싸야 합니다.
  • true, false, null은 소문자로 작성합니다.
  • 중첩 구조는 가독성을 위해 2~4칸 들여쓰기를 일관되게 사용하세요.
  • 큰 JSON 파일은 포맷팅 후 구조를 파악하면 디버깅이 훨씬 쉬워집니다.

JSON 포맷터 완벽 가이드

JSON(JavaScript Object Notation)은 경량 데이터 교환 형식으로, 사람이 읽고 쓰기 쉬우며 기계가 파싱하고 생성하기 쉬운 텍스트 기반 포맷입니다. 2001년 Douglas Crockford가 처음 제안하였으며, 현재 웹 개발에서 가장 널리 사용되는 데이터 형식입니다. REST API 응답, 설정 파일(package.json, tsconfig.json), 데이터 저장소 등 다양한 분야에서 핵심적으로 활용됩니다.

이 JSON 포맷터/검증기는 JSON 데이터를 보기 좋게 정리하거나, 용량을 줄이기 위해 압축하거나, 문법 오류를 즉시 검증할 수 있는 무료 온라인 도구입니다. 모든 처리는 브라우저에서 이루어지므로 데이터가 서버에 전송되거나 저장되지 않아 완벽한 보안을 보장합니다.

주요 기능

  • JSON 포맷팅(Prettify): 2칸 들여쓰기로 깔끔하게 정리
  • JSON 압축(Minify): 모든 공백과 줄바꿈을 제거하여 용량 최소화
  • 실시간 유효성 검증: 입력 시 0.5초 디바운스로 자동 문법 검사
  • 상세한 오류 메시지: JSON 파싱 오류 위치와 내용을 정확히 표시
  • 원클릭 복사: 결과물을 클립보드에 즉시 복사
  • 브라우저 내 처리: 서버 전송 없이 100% 클라이언트 사이드 처리

JSON 포맷팅이 중요한 이유

  • API 개발 및 테스트: REST API 응답 데이터를 읽기 쉽게 정리하여 디버깅 효율을 높입니다.
  • 설정 파일 관리: package.json, tsconfig.json, .eslintrc.json 등의 설정 파일을 올바른 형식으로 유지합니다.
  • 데이터 교환: 프론트엔드와 백엔드 간의 데이터 통신에서 JSON 구조를 명확하게 파악합니다.
  • 디버깅: 중첩된 복잡한 JSON 데이터의 구조를 시각적으로 파악하여 오류를 빠르게 찾습니다.
  • 용량 최적화: 프로덕션 환경에서 미니파이를 통해 네트워크 전송량을 줄입니다.

JSON 문법 규칙

JSON은 엄격한 문법 규칙을 따릅니다. 올바른 JSON을 작성하려면 다음 규칙을 반드시 숙지해야 합니다.
  • 객체(Object): 중괄호 {} 로 감싸며, "키": 값 쌍으로 구성됩니다. 키는 반드시 큰따옴표로 감싸야 합니다.
  • 배열(Array): 대괄호 [] 로 감싸며, 쉼표로 구분된 값의 순서 있는 목록입니다.
  • 문자열(String): 반드시 큰따옴표("")로 감싸야 합니다. 작은따옴표는 허용되지 않습니다.
  • 숫자(Number): 정수와 부동소수점을 지원합니다. 0x 16진수나 NaN, Infinity는 허용되지 않습니다.
  • 불리언(Boolean): true 또는 false만 허용됩니다(소문자만).
  • null: 값이 없음을 나타내며, 반드시 소문자 null을 사용합니다.
  • 중첩(Nesting): 객체와 배열은 무한으로 중첩할 수 있으나, 깊은 중첩은 가독성을 저해합니다.

흔한 JSON 오류와 해결법

  • 쉼표 누락: 객체나 배열의 항목 사이에 쉼표를 빠뜨리면 파싱 오류가 발생합니다.
  • 후행 쉼표(Trailing Comma): 마지막 항목 뒤에 쉼표를 넣으면 유효하지 않은 JSON이 됩니다. JavaScript에서는 허용되지만 JSON에서는 금지됩니다.
  • 작은따옴표 사용: JSON은 큰따옴표만 허용합니다. 'key'가 아닌 "key"로 작성해야 합니다.
  • 따옴표 없는 키: {name: "값"} 은 잘못된 JSON입니다. {"name": "값"}으로 작성해야 합니다.
  • 주석 사용: JSON은 주석(// 또는 /* */)을 지원하지 않습니다. 주석이 필요하면 JSON5나 JSONC 형식을 사용하세요.
  • 제어 문자: 문자열 내 탭, 줄바꿈 등은 \t, \n으로 이스케이프해야 합니다.

JSON vs XML 비교

JSON과 XML은 모두 데이터 교환 형식이지만 여러 면에서 차이가 있습니다.
  • 가독성: JSON은 간결하고 직관적이며, XML은 태그가 많아 장황합니다. 같은 데이터를 표현할 때 JSON이 훨씬 짧습니다.
  • 파일 크기: JSON은 XML보다 평균 30~50% 작은 파일 크기를 가집니다. 불필요한 닫기 태그가 없기 때문입니다.
  • 파싱 속도: JSON은 JavaScript의 JSON.parse()로 즉시 파싱되지만, XML은 별도의 DOM/SAX 파서가 필요합니다.
  • 데이터 타입: JSON은 문자열, 숫자, 불리언, null, 배열, 객체를 기본 지원하지만, XML은 모든 것이 문자열이며 스키마로 타입을 정의해야 합니다.
  • 사용 사례: JSON은 웹 API, 설정 파일, NoSQL DB에 주로 사용되고, XML은 SOAP, RSS, 문서 형식(DOCX, SVG)에 사용됩니다.

JSON 작성 모범 사례

  • 일관된 들여쓰기: 2칸 또는 4칸 들여쓰기를 프로젝트 내에서 통일하세요.
  • 의미 있는 키 이름: 'a', 'x'가 아닌 'userName', 'orderDate'처럼 명확한 이름을 사용하세요.
  • 적절한 중첩 깊이: 3~4단계 이상의 깊은 중첩은 데이터 구조를 재설계하는 것이 좋습니다.
  • 스키마 검증: JSON Schema를 사용하여 데이터 구조와 타입을 사전에 정의하고 검증하세요.
  • 날짜 형식 통일: ISO 8601 형식(예: "2024-01-15T09:30:00Z")을 사용하세요.
  • null 처리: 불필요한 null 값은 키 자체를 생략하는 것이 용량 절약에 유리합니다.

웹 개발에서의 JSON 활용

JSON은 현대 웹 개발의 핵심 데이터 형식으로, 거의 모든 곳에서 사용됩니다.
  • REST API: 대부분의 REST API는 JSON을 요청/응답 형식으로 사용합니다. fetch()나 axios로 받은 응답은 .json() 메서드로 파싱합니다.
  • package.json: Node.js 프로젝트의 메타데이터, 의존성, 스크립트를 정의하는 핵심 설정 파일입니다.
  • tsconfig.json: TypeScript 컴파일러 옵션을 설정하는 파일로, 프로젝트 빌드 방식을 결정합니다.
  • NoSQL 데이터베이스: MongoDB, CouchDB, Firebase 등은 JSON(또는 BSON) 형식으로 데이터를 저장합니다.
  • localStorage/sessionStorage: 브라우저 저장소에 객체를 저장할 때 JSON.stringify()와 JSON.parse()를 사용합니다.
  • GraphQL: GraphQL API도 응답 형식으로 JSON을 사용하며, 쿼리 결과가 JSON 구조로 반환됩니다.

JSON 도구 생태계

  • JSON Schema: JSON 데이터의 구조, 타입, 제약 조건을 정의하는 명세로, API 문서화와 데이터 검증에 필수적입니다.
  • JSON Path: JSON 데이터에서 특정 요소를 쿼리하는 표현 언어로, XPath의 JSON 버전입니다. (예: $.store.book[0].title)
  • JSON Patch (RFC 6902): JSON 문서의 부분 수정을 기술하는 형식으로, PATCH API 요청에 사용됩니다.
  • jq: 명령줄에서 JSON을 필터링, 변환, 쿼리하는 강력한 프로세서로, DevOps와 스크립팅에 필수적입니다.
  • JSON5: 주석, 후행 쉼표, 작은따옴표 등을 허용하는 JSON의 확장 형식으로, 설정 파일에 적합합니다.

관련 도구

Base64 인코딩/디코딩

텍스트와 파일을 Base64 형식으로 인코딩하거나 디코딩합니다. API 데이터 전송이나 이미지 인라인 삽입에 유용합니다.

URL 인코딩/디코딩

URL에 포함되는 특수문자를 퍼센트 인코딩으로 변환하거나 복원합니다. 쿼리 파라미터 처리에 필수적입니다.

해시 생성기

MD5, SHA-1, SHA-256 등 다양한 해시 알고리즘으로 텍스트의 해시값을 생성합니다. 데이터 무결성 검증에 사용됩니다.

자주 묻는 질문

입력창에 JSON 데이터를 붙여넣고, 포맷팅 버튼을 클릭하면 보기 좋게 정리됩니다. 압축 버튼은 공백을 모두 제거하고, 검증 버튼은 문법 오류를 확인합니다.
네, 모든 처리는 브라우저에서만 이루어지며 서버에 데이터가 전송되거나 저장되지 않습니다. 안심하고 사용하세요.
포맷팅은 들여쓰기와 줄바꿈을 추가하여 가독성을 높이는 것이고, 미니파이(압축)는 모든 공백과 줄바꿈을 제거하여 파일 크기를 최소화하는 것입니다. 개발 중에는 포맷팅을, 프로덕션 배포 시에는 미니파이를 사용하는 것이 일반적입니다.
입력할 때마다 자동으로 JSON 유효성이 검사됩니다. 입력이 멈추고 0.5초 후에 결과가 표시되어, 타이핑 중에 불필요한 오류 메시지를 방지합니다.
표준 JSON은 주석을 지원하지 않습니다. 주석이 필요한 경우 JSON5(.json5)나 JSONC(.jsonc) 형식을 사용하세요. VS Code의 settings.json처럼 JSONC를 지원하는 도구들이 있습니다. 또는 "_comment" 키를 사용하여 메모를 남기는 방법도 있습니다.