JSON 뷰어 · JSON 포맷터

사용 방법

1. JSON 입력란에 원본 JSON 문자열을 붙여넣습니다.
2. 가독성이 필요하면 Pretty Print, 전송/저장이 목적이면 Minify를 선택합니다.
3. 오류가 나오면 파싱 메시지를 확인한 뒤 따옴표, 콤마, 중괄호를 수정하고 다시 실행합니다.

JSON 포맷팅이 필요한 상황

API 응답이나 설정 파일, 로그처럼 한 줄로 압축된 JSON은 사람이 구조를 파악하기 어렵습니다. 키가 수십 개 중첩된 응답을 한 줄로 받으면 어디서 객체가 끝나고 배열이 시작되는지 눈으로 따라가기 힘듭니다. 이럴 때 Pretty Print로 들여쓰기를 넣으면 계층 구조가 한눈에 들어와 디버깅과 코드 리뷰가 쉬워집니다. 반대로 네트워크 전송이나 파일 저장처럼 용량을 줄여야 할 때는 Minify로 공백과 줄바꿈을 제거합니다. 두 방향 모두 데이터 내용은 바꾸지 않고 표현만 정리한다는 점이 핵심입니다.

유효한 JSON과 JavaScript 객체의 차이

겉모습이 비슷해 보여도 JSON 문법은 JavaScript 객체 표기보다 엄격합니다. JSON에서는 키도 큰따옴표로 감싸야 하고({"name": "값"}), 작은따옴표나 따옴표 없는 키는 허용되지 않습니다. 주석도 쓸 수 없고, 마지막 요소 뒤의 쉼표(trailing comma)도 오류가 됩니다. 코드 편집기에서 객체 리터럴로는 잘 동작하던 표기가 JSON 파서에서는 막히는 이유가 여기에 있습니다.

자주 발생하는 오류와 해석

• 따옴표 누락: 키나 문자열 값을 따옴표로 감싸지 않은 경우. {name: "값"}은 오류, {"name": "값"}이 정상입니다.
• trailing comma: 배열·객체의 마지막 요소 뒤에 쉼표가 남은 경우([1, 2, 3,]).
• 주석 포함: //나 /* */ 주석은 JSON에서 허용되지 않습니다.
• 괄호 짝 불일치: 여는 {·[ 개수와 닫는 }·] 개수가 맞지 않는 경우.

파서는 오류가 난 지점의 위치(줄·열)를 알려 주므로, 그 근처를 먼저 살펴보면 원인을 빠르게 찾을 수 있습니다. 다만 괄호 짝이 어긋나면 실제 원인보다 뒤쪽에서 오류로 잡히기도 하므로, 표시된 위치 앞쪽도 함께 확인하는 것이 좋습니다.

주의사항과 함께 쓰면 좋은 도구

아주 큰 JSON(수 MB 이상)을 처리하면 브라우저가 한꺼번에 파싱·렌더링하느라 잠시 느려질 수 있으므로, 필요한 부분만 잘라 넣는 것이 가볍습니다. 구조 정리와 별개로 문법 오류만 빠르게 짚고 싶다면 JSON 유효성 검사기로 파싱 가능 여부를 먼저 확인하고, 표 형태로 옮겨야 하면 JSON ↔ CSV 변환기를 이어서 사용하는 흐름이 편리합니다.

자주 묻는 질문

JSON viewer와 JSON formatter는 무엇이 다른가요?

실무에서는 거의 같은 맥락으로 쓰입니다. 이 페이지는 JSON을 보기 좋게 보여주는 viewer 역할과 정렬/압축 formatter 역할을 함께 제공합니다.

JSON 정렬(beautify)은 언제 쓰나요?

로그 확인, 코드 리뷰, API 응답 구조 파악처럼 사람이 읽어야 할 때 정렬된 JSON이 유용합니다.

잘못된 JSON을 넣으면 어떻게 되나요?

브라우저의 JSON 파서 기준으로 오류 메시지를 표시합니다. 오류 위치 근처의 따옴표, 콤마, 괄호를 먼저 확인해 주세요.

민감한 JSON 데이터를 넣어도 되나요?

이 도구는 브라우저 내부에서 처리하도록 설계됐지만, 조직 보안 정책이 있다면 민감 데이터는 마스킹 후 사용을 권장합니다.

마지막 쉼표(trailing comma)는 왜 오류가 나나요?

JSON 표준은 배열·객체의 마지막 요소 뒤 쉼표를 허용하지 않습니다. JavaScript에서는 동작하더라도 JSON 파서에서는 막히므로 제거해야 합니다.

주석이나 작은따옴표를 써도 되나요?

아니요. JSON에는 주석을 넣을 수 없고, 키와 문자열은 큰따옴표로만 감싸야 합니다. 작은따옴표나 따옴표 없는 키는 오류로 처리됩니다.

큰 JSON을 넣으면 화면이 느려집니다.

수 MB 이상의 JSON은 한 번에 파싱·표시하느라 브라우저가 잠시 멈출 수 있습니다. 필요한 부분만 잘라 넣으면 더 가볍게 처리됩니다.