JSON 뷰어·포매터

JSON은 어떻게 정렬하고 검사하나요?

위 입력창에 JSON을 붙여넣거나 파일을 끌어다 놓으면 곧바로 유효성을 검사하고 보기 좋게 정렬해 줍니다. 버튼을 누를 필요도 없고, 서버로 전송되는 것도 없습니다. API 응답을 아무 온라인 포매터에나 붙여넣을 때마다 그 사이트가 내 데이터를 몰래 기록하는 건 아닐까 신경 쓰여서 이 도구를 만들었습니다.

JSON이 유효하면 들여쓰기를 두 칸으로 다시 맞추고, 키·문자열·숫자·불리언을 색으로 구분해 한눈에 알아보기 쉽게 보여 줍니다. 유효하지 않으면 빈 화면 대신 무엇이 잘못됐는지 알려 주는 오류 메시지를 표시합니다.

오류 메시지는 무엇을 알려 주나요?

브라우저의 JSON.parse가 입력을 거부한 정확한 이유를 그대로 보여 줍니다. 대부분의 오류는 몇 가지 실수에서 비롯됩니다. 마지막 항목 뒤에 남은 쉼표, 큰따옴표 대신 쓴 작은따옴표, 따옴표를 빠뜨린 키, 끼어든 주석 같은 것들인데 JSON은 이 가운데 어느 것도 허용하지 않습니다.

메시지는 보통 파싱이 멈춘 위치를 가리키므로, 문서 전체를 한 줄씩 읽지 않고도 고쳐야 할 부분으로 바로 이동할 수 있습니다.

표준에 맞는 JSON은 무엇인가요?

JSON은 느슨한 관행이 아니라 정식으로 규격이 정해진 형식입니다. JSON을 정의하는 표준은 둘인데, 하나는 IETF의 RFC 8259(2017년 12월 발행, 인터넷 표준 STD 90)이고 다른 하나는 Ecma International의 ECMA-404(2판, 2017년 12월)입니다. 둘은 같은 문법을 설명합니다. RFC 8259는 JSON의 전체 타입 체계를 한 문장으로 정리합니다.

JSON은 네 가지 기본 타입(문자열, 숫자, 불리언, null)과 두 가지 구조 타입(객체, 배열)을 표현할 수 있다.

— RFC 8259, 1절

그래서 뷰어가 검사하는 모든 값은 정확히 이 여섯 가지 타입 가운데 하나입니다.

타입	분류	예시
string(문자열)	기본	"안녕"
number(숫자)	기본	42, -3.14, 1e5
boolean(불리언)	기본	true / false
null	기본	null
object(객체)	구조	{"key": "value"}
array(배열)	구조	[1, 2, 3]

이 표준들은 뷰어가 몇 가지 규칙에 엄격한 이유이기도 합니다. JSON은 마지막 항목 뒤의 쉼표를 허용하지 않고, 어떤 형태의 주석도 받지 않으며, 키는 작은따옴표가 아니라 큰따옴표로 감싸야 합니다. ‘유효하지 않은 JSON’ 오류의 대부분이 바로 이 세 가지에서 나옵니다. 또한 RFC 8259는 서로 다른 시스템끼리 주고받는 JSON은 “반드시 UTF-8로 인코딩되어야 한다”고 규정하는데, 이 도구가 모든 파일을 UTF-8로 읽는 것도 그 때문입니다. 정확한 문법이 궁금하다면 MDN의 JSON.parse 문서가 각 규칙을 예시와 함께 설명합니다.

JSON 파일을 올리거나 끌어다 놓을 수 있나요?

네. 업로드 링크로 .json이나 .txt 파일을 선택하거나, 입력창 위로 파일을 끌어다 놓으면 됩니다. 파일은 브라우저의 FileReader로 기기에서 직접 읽어 그 자리에서 정렬하며, 기기 밖으로 나가지 않습니다.

복사해서 붙여넣기 번거로운 큰 데이터, 예를 들어 내보낸 설정 파일이나 저장해 둔 API 응답을 다룰 때 특히 편리합니다. 정렬이 끝나면 복사 버튼으로 깔끔하게 정리된 결과를 한 번에 클립보드에 담을 수 있습니다.

JSON 뷰어는 언제 쓰면 좋나요?

개발하면서 매일 마주치는 자잘한 작업에서 가장 자주 쓰게 됩니다. 대표적인 경우는 다음과 같습니다.

• 한 줄로 압축된 API 응답을 읽을 수 있게 펼칠 때
• 커밋하기 전에 설정 파일이 올바른지 확인할 때
• 빌드를 깨뜨린 잘못 놓인 괄호나 쉼표를 찾아낼 때
• 브라우저 개발자 도구나 로그에서 복사한 JSON을 정리할 때

모든 처리가 브라우저 안에서만 이뤄지므로, 토큰이나 내부 데이터, 민감한 정보도 외부로 새어 나갈 걱정 없이 안심하고 붙여넣을 수 있습니다.