~ / developer / json-formatter

{ JSON Formatter }

붙여넣고 버튼 한 번. 모든 처리는 브라우저에서만 일어납니다.

광고
광고
input.json
output.json
waiting for input...
광고

사용법

  1. 왼쪽 input.json 칸에 JSON을 붙여넣습니다. 구조를 먼저 보고 싶다면 Sample 버튼으로 예시 데이터를 불러오세요.
  2. Format을 누르면 들여쓰기가 적용된 보기 좋은 JSON이 오른쪽 output.json에 나옵니다. 입력 칸에서 Ctrl + Enter(Mac은 ⌘ + Enter)를 눌러도 같은 동작을 합니다.
  3. 들여쓰기는 indent: 2, indent: 4, indent: tab 중에서 고를 수 있고, 바꾸는 즉시 다시 정렬됩니다.
  4. Minify는 공백과 줄바꿈을 모두 걷어내 한 줄짜리 JSON으로 압축합니다.
  5. 결과는 Copy output으로 복사하고, Clear로 양쪽을 비웁니다.

정렬(Pretty print)과 압축(Minify)의 차이

JSON은 공백이 의미를 갖지 않는 포맷이라, 줄바꿈과 들여쓰기를 넣든 빼든 데이터 자체는 똑같습니다. 그래서 같은 내용을 목적에 따라 두 가지 모양으로 씁니다.

예를 들어 {"a":1,"b":[true,null]}를 indent 2로 정렬하면 키마다 한 줄씩, 배열 원소도 한 줄씩 펼쳐집니다. 출력 아래에는 결과 문자 수가 함께 표시되니 압축 전후 크기를 비교할 때 참고하세요.

정렬·압축 예시

한 줄짜리 {"a":1,"b":[true,null]}(23자)를 indent 2로 Format하면 이렇게 펼쳐져요. 다시 Minify하면 원래 23자로 돌아와요.

{
  "a": 1,
  "b": [
    true,
    null
  ]
}

이 도구가 하는 일

입력은 브라우저 내장 JSON.parse로 읽고 JSON.stringify로 다시 써서 출력합니다. 서버로 전송되는 데이터는 없습니다. 파싱에 성공하면 ✓ valid JSON이, 실패하면 ✗와 함께 브라우저가 알려주는 오류 메시지가 표시되므로 간단한 문법 확인도 겸할 수 있습니다. 오류 위치를 더 자세히 짚어보고 싶다면 JSON 유효성 검사기를 이용하세요.

다시 직렬화하는 방식이라 몇 가지가 원본과 달라질 수 있습니다. 같은 키가 두 번 나오면 마지막 값만 남고, 1.0 같은 숫자는 1로, 아주 큰 정수(약 9천조 초과)는 정밀도가 깎여 표시됩니다. 주석, 작은따옴표, 끝에 붙은 쉼표(trailing comma)는 표준 JSON이 아니어서 오류로 처리됩니다.

JSON 문법 기준 — RFC 8259

JSON의 공식 규칙은 IETF RFC 8259와 ECMA-404예요. 값은 객체·배열·문자열·숫자와 true·false·null 일곱 가지뿐이고, 최상위에는 객체가 아니라 숫자나 문자열 하나만 와도 올바른 JSON이에요. 시스템끼리 주고받는 JSON은 UTF-8이어야 하고 맨 앞에 BOM을 붙이면 안 된다고 정해져 있어요.

항목허용허용 안 됨
문자열·키 따옴표"name" (큰따옴표)'name', 따옴표 없는 name
숫자-12, 0.5, 1e301, +1, .5, 0x1F, NaN, Infinity
공백스페이스, 탭, 줄바꿈(LF·CR)전각 공백, 줄바꿈 없는 공백(NBSP)
문자열 안 제어 문자\n, \t, \u00e9처럼 이스케이프문자열 안에 실제 줄바꿈
끝 쉼표 · 주석없음[1, 2,], // 메모, /* */
같은 키 두 번문법 오류는 아니지만 "고유해야 한다(SHOULD)"파서마다 처리가 달라 피해야 해요
광고

오류 메시지로 원인 찾기

브라우저마다 문구는 조금씩 다르지만, 크롬·엣지(V8)에서는 이렇게 나와요. position 숫자는 0부터 센 글자 위치예요.

입력오류 메시지원인
{'a':1}Expected property name or '}' … position 1작은따옴표
{"a":1,}Expected double-quoted property name … position 7끝 쉼표
[01]Unexpected number … position 2앞자리 0
{"a":NaN}Unexpected token 'N'NaN은 JSON 값이 아님
문자열 안 실제 줄바꿈Bad control character in string literal\n으로 바꿔야 함

예시 3가지

  1. Sample 데이터 크기 비교 — Sample 버튼의 한 줄 JSON은 107자예요. indent 2로 정렬하면 150자, indent 4는 176자, 탭은 137자가 돼요. Minify를 누르면 다시 107자로 돌아와요. 들여쓰기는 보기용이고 데이터는 똑같아요.
  2. 큰 정수가 바뀌는 경우 — {"id": 12345678901234567890}을 Format하면 12345678901234567000으로 바뀌어요. JavaScript 숫자는 253 − 1 = 9,007,199,254,740,991까지만 정확해서, 9007199254740993도 9007199254740992로 나와요. 트위터·디스코드처럼 큰 ID를 쓰는 API가 ID를 문자열로 함께 내려 주는 이유예요.
  3. 이스케이프가 풀리는 경우 — {"name":"caf\u00e9","emoji":"\ud83d\ude00"}는 {"name":"café","emoji":"😀"}로 출력돼요. 값은 같고 표기만 바뀐 거예요. 중복 키 {"a":1,"a":2}는 {"a":2}로 하나만 남아요.

JSON과 헷갈리는 형식

형식JSON과 다른 점이 도구에서
JavaScript 객체 리터럴따옴표 없는 키, 작은따옴표, 함수, undefined오류
JSON5 · JSONC (VS Code 설정)주석·끝 쉼표 허용오류 — 주석을 지우고 넣기
NDJSON (JSON Lines)줄마다 JSON 하나한 줄씩 넣거나 [ ]로 감싸고 쉼표 추가
Python print(dict) 결과', True, None오류 — json.dumps()로 출력하기

JSON과 YAML·XML의 차이는 JSON YAML XML 차이, 표 형태로 바꾸려면 JSON ↔ CSV 변환기를 쓰면 돼요.

광고
광고

자주 묻는 질문

JSON 정렬하면 키 순서도 바뀌나요?
아니요. 입력에 적힌 순서를 그대로 유지합니다. 다만 "2", "10"처럼 정수 형태의 키는 JavaScript 객체 규칙상 숫자 오름차순으로 앞에 정렬될 수 있습니다.
Unexpected token 오류는 왜 나나요?
대부분 작은따옴표 사용, 키에 따옴표 누락, 마지막 원소 뒤 쉼표, 주석 포함 중 하나입니다. 오류 메시지에 표시되는 위치(position) 근처를 확인해 보세요.
회사 API 응답을 붙여넣어도 안전한가요?
모든 변환은 브라우저 안에서만 일어나고 입력 내용을 서버로 보내지 않습니다. 그래도 토큰이나 비밀번호가 담긴 데이터는 공용 PC에서 다루지 않는 편이 좋습니다.
탭 들여쓰기와 스페이스 중 무엇을 써야 하나요?
정답은 없지만 JavaScript·웹 프로젝트는 2칸, Python 생태계는 4칸을 흔히 씁니다. 팀의 코드 스타일(.editorconfig, Prettier 설정)을 따르는 것이 가장 좋습니다.
JSON 앞에 BOM이 붙어 있으면 어떻게 되나요?
RFC 8259는 JSON 앞에 BOM(EF BB BF)을 붙이지 말라고 정하고, 파서는 무시해도 된다고 해요. 브라우저 JSON.parse는 BOM 문자(U+FEFF)를 오류로 처리하니, 메모장에서 저장한 파일이 오류가 나면 BOM 없는 UTF-8로 다시 저장하세요.
숫자 1.0이 1로 바뀌는데 데이터가 달라진 건가요?
JSON에는 정수와 실수의 구분이 없어서 1.0과 1은 같은 숫자예요. 다만 받는 쪽 언어가 1.0을 실수형으로 기대한다면 형식 차이로 문제가 될 수 있으니, 원본 표기를 꼭 유지해야 하면 정렬된 결과 대신 원본을 쓰세요.

관련 도구

이 도구와 함께 보면 좋은 글

광고

더 둘러보기

💻 개발자 다른 도구

🔥 많이 찾는 도구

🔮 재미로 한 번 더

📝 읽어 볼 만한 글

글 전체 보기 →