왜 만들었나요
JSON을 볼 때마다 브라우저 콘솔이나 편집기 확장 기능으로 옮겨 펴 보는 일이 번거로웠습니다. 문법이 살짝 틀렸을 때 어디가 문제인지 짚어 주지 않는 도구도 답답했습니다. 그래서 붙여넣으면 즉시 정렬되고, 틀렸으면 틀린 자리를 짚어 주는 걸 만들어 쓰고 있습니다.
JSON 포맷터
한 줄로 뭉친 JSON을 들여쓰기와 줄바꿈을 넣어 보기 좋게 정렬합니다. 문법이 틀리면 어디가 문제인지 짚어 줍니다.
로딩 중...
Note
붙여넣은 JSON은 서버로 전송되지 않습니다. 정렬이 전부 브라우저 안에서 이뤄져, 실제 응답 데이터나 설정값도 기기 밖으로 나가지 않습니다.
사용 방법
-
왼쪽 입력창에 정렬할 JSON을 붙여넣습니다. 예시가 없으면 샘플 버튼으로 시작해도 됩니다.
-
입력하는 즉시 오른쪽에 정렬된 결과가 나옵니다. 들여쓰기는 2칸·4칸·탭 중에 고르고, 키 이름을
snake_case나camelCase로 한 번에 통일할 수도 있습니다.
-
문법이 틀리면 오류 메시지가 뜨고 어느 줄 어느 글자에서 멈췄는지 표시됩니다. 결과가 맞으면 복사 버튼으로 가져가세요.
이렇게 나옵니다
한 줄로 온 API 응답을 넣으면 이렇게 나옵니다.
| 넣은 것 | 나온 것 |
|---|---|
{"id":1,"user":{"name":"kim","tags":["a","b"]}} | 들여쓰기와 줄바꿈이 들어간 여러 줄 |
키 이름 변환을 켜면 user_name이 userName으로 한 번에 바뀝니다.
알아두면 좋은 것
JSON은 왜 한 줄로 오나
들여쓰기와 줄바꿈은 사람이 읽으라고 넣는 것일 뿐, 프로그램이 읽는 데는 필요 없는 공백입니다. 네트워크로 보낼 때 이걸 걷어내면 전송량이 줄어 응답이 빨라지므로, 대부분의 서버는 압축된 한 줄로 내려보냅니다.
압축된 JSON을 만나는 자리는 생각보다 많습니다. 개발자도구 네트워크 탭, 서버 로그, curl 출력, 환경변수에 넣어 둔 설정 등입니다.
JSON은 자바스크립트 객체보다 깐깐합니다
겉보기는 같지만 표준 문법은 훨씬 엄격합니다. 손으로 쓰다 자주 걸리는 지점입니다.
| 자바스크립트에선 되지만 JSON에선 오류 | 예시 |
|---|---|
| 마지막 항목 뒤 쉼표 | [1, 2, 3,] |
| 작은따옴표 | {'name': 'kim'} |
| 따옴표 없는 키 | {name: "kim"} |
| 주석 | // 설명 · /* 설명 */ |
이 도구는 위 네 가지가 섞여 있어도 그대로 받아 정렬해 줍니다. 결과는 표준 JSON으로 나오니 그대로 복사해 쓰면 됩니다. 다만 주석은 결과에서 빠집니다.
JSON 포맷터와 다른 JSON 도구의 차이
이름이 비슷해 헷갈리기 쉽지만 쓰임이 다릅니다. 하려는 일에 맞춰 고르면 됩니다.
| 하고 싶은 것 | 도구 |
|---|---|
| 보기 좋게 정렬해 복사 | JSON 포맷터 (이 도구) |
| 구조를 접었다 펴며 살펴보기 | JSON 트리뷰 |
| 필요한 항목만 골라 내보내기 | JSON 편집기 |
이런 경우에는
형식이 잘못됐다는 오류가 나요
왼쪽 입력창에 문제가 된 위치가 표시되니 그 부근부터 살펴보세요. 원인은 대개 아래 넷 중 하나입니다.
| 원인 | 잘못된 예 | 올바른 예 |
|---|---|---|
| 마지막 쉼표 | {"a": 1,} | {"a": 1} |
| 이름에 따옴표 없음 | {a: 1} | {"a": 1} |
| 작은따옴표 사용 | {'a': 1} | {"a": 1} |
| 괄호 짝이 안 맞음 | {"a": 1 | {"a": 1} |
마지막 쉼표는 위치가 표시되지 않는 경우가 있는데, 그럴 땐 닫는 괄호 바로 앞을 확인하면 대개 찾습니다.
역슬래시가 잔뜩 붙어 읽기 힘들어요
문자열 안에 JSON을 통째로 넣으면 "{\"id\":1}" 처럼 따옴표마다 역슬래시가 붙습니다. 입력 패널의 이스케이프 해제 토글을 켜면 한 겹 풀어 안쪽 JSON을 꺼내 정렬해 줍니다. 다만 이 토글을 켠 상태에서 안쪽 JSON이 틀리면 몇 번째 줄·글자인지는 표시되지 않고 오류 내용만 나옵니다.
이 도구로는 안 되는 것
- 구조를 접었다 펴며 탐색하려면 JSON 트리뷰가 편합니다
- 값을 고치거나 항목을 지울 수 없습니다 — 값을 손봐야 한다면 JSON 편집기를 쓰세요
- 표 형태로 바꾸려면 CSV → JSON을 쓰세요
용어 설명
- 들여쓰기
줄 앞을 띄워 안쪽에 속한 내용임을 표시하는 것입니다. JSON에서는 몇 칸을 띄우든 뜻이 같지만, 2칸이 가장 널리 쓰입니다.
- snake_case · camelCase
여러 단어를 이어 붙일 때의 표기 방식입니다.
user_name처럼 밑줄로 잇는 게 snake_case,userName처럼 뒷 단어 첫 글자를 대문자로 쓰는 게 camelCase입니다. 서버와 앱이 서로 다른 방식을 쓸 때 맞춰 줘야 합니다.
자주 묻는 질문
숫자 값이 변하지 않고 그대로 유지되나요?
네, 표준 JSON을 넣으면 그대로 보존됩니다. 숫자를 자바스크립트 숫자로 바꾸지 않고 원본 텍스트를 그대로 옮기는 방식이라, 9223372036854775807 같은 큰 정수나 100.0 · 1.0e+10 표기가 반올림되거나 바뀌지 않습니다. 키를 snake_case·camelCase로 바꿔도 마찬가지입니다. 다만 작은따옴표·주석처럼 표준이 아닌 문법이 섞여 정규화가 필요한 입력은 한 번 파싱을 거치므로 큰 정수의 정밀도가 달라질 수 있습니다.
입력한 JSON 데이터가 서버에 저장되나요?
아니요. 모든 변환 작업은 사용자의 브라우저 로컬 환경에서만 이루어지며, 외부 서버로 데이터를 전송하지 않아 안전합니다.
에러 메시지가 뜨는데 어떻게 해결하나요?
JSON 표준 문법에 어긋나는 부분이 있는지 확인하세요. 에러가 발생한 위치를 알려드리오니 해당 지점의 따옴표나 쉼표를 수정하시면 됩니다.
JSON 포맷터·트리뷰·편집기는 어떻게 나눠 쓰나요?
보기 좋게 정렬해 복사하는 것이 목적이라면 이 도구(JSON 포맷터)가 맞습니다. 구조가 깊어 어디에 무엇이 있는지 파악하는 것이 목적이라면 가지를 접었다 펼 수 있는 JSON 트리뷰가, 필요한 항목만 골라 CSV나 엑셀 등 다른 형식으로 내보내는 것이 목적이라면 JSON 편집기가 적합합니다. 셋 다 붙여넣은 데이터를 서버로 보내지 않습니다.
압축된 한 줄짜리 JSON은 왜 이렇게 자주 보이나요?
들여쓰기와 줄바꿈은 사람이 읽으라고 넣는 것일 뿐 프로그램이 읽는 데는 필요 없는 공백이라, 네트워크로 보낼 때 이를 걷어내면 전송량이 줄어 응답이 빨라집니다. 그래서 대부분의 서버가 압축된 한 줄로 내려보냅니다. 개발자도구 네트워크 탭, 서버 로그, curl 출력, 환경변수에 넣어 둔 설정 등에서 자주 마주치게 되며, 그럴 때 여기에 붙여넣으면 바로 읽을 수 있는 형태가 됩니다.
마지막 업데이트: