JSON 자동 수정 원리와 오류 읽는 법

JSON 파일에 설명을 달려고 주석을 넣었다가, 혹은 마지막 항목 뒤에 콤마를 하나 안 지웠다가 "Unexpected token" 오류를 만난 사람을 위한 글입니다. 표준 JSON 문법은 주석과 trailing comma, 따옴표 없는 키를 애초에 정의하지 않기 때문에 나는 오류이지, 어쩌다 생긴 버그가 아닙니다. 오류 메시지를 읽는 법과, 자동으로 고쳐주는 기능이 내부에서 실제로 무엇을 하는지를 사실 위주로 설명합니다.

요약 ① 표준 JSON 문법에는 주석·trailing comma·따옴표 없는 키가 정의돼 있지 않아 JSON.parse가 곧바로 오류를 던집니다. ② 오류 메시지의 position은 텍스트 처음부터 센 글자 위치, line은 그 위치까지의 줄바꿈 횟수로 정해집니다. ③ Auto-Fix는 주석을 지운 텍스트를 new Function으로 느슨한 JS 객체 리터럴처럼 평가한 뒤, 성공하면 표준 JSON으로 다시 직렬화합니다.

왜 이런 오류가 나는가: 흔한 상황 하나

흔히 겪는 상황은 이렇습니다. VS Code의 settings.json이나 tsconfig.json은 주석을 쓸 수 있는 JSONC 확장 형식입니다. 이 파일 일부를 복사해 다른 프로그램의 설정값이나 API 요청 본문에 그대로 붙여넣으면, 그 프로그램의 JSON.parse는 주석 문법을 표준에 없는 토큰으로 보고 그 자리에서 멈춥니다.

또 다른 흔한 경우는 배열이나 객체의 항목을 하나 지우다가 생깁니다. 마지막에서 두 번째 줄이 되어버린 항목 뒤에 콤마가 그대로 남으면, 그 콤마 다음에 값이 없으므로 파싱이 실패합니다. 두 경우 모두 사람 눈에는 자연스러워 보이지만 JSON 문법에는 없는 구조입니다.

도구 없이 오류를 직접 읽고 고치는 법

브라우저 콘솔(F12)에서 직접 확인할 수 있습니다. 문제가 되는 텍스트를 백틱으로 감싸 JSON.parse(\...`)`를 실행하면, Chrome이나 Edge 같은 V8 기반 엔진은 SyntaxError를 던지면서 메시지 안에 position 숫자를 포함시킵니다. 최근 V8 버전은 "(line 3 column 5)"처럼 줄·칸 번호까지 함께 적어줍니다.

position은 텍스트 맨 앞을 0으로 놓고 그 문자까지 몇 번째 글자인지를 센 값입니다. line은 그 위치까지 줄바꿈이 몇 번 나왔는지를 세어 매긴 줄 번호입니다. 메시지에 line이 없다면 position만으로 앞에서부터 줄바꿈 개수를 손으로 세어 줄을 특정할 수 있습니다.

위치를 찾았다면 그 지점 앞뒤를 살펴 아래 세 가지 중 하나인지 확인합니다. 셋 다 표준 JSON 문법에는 없는 구조라 엔진이 그 지점에서 멈춘 것입니다.

• //나 /* */로 시작하는 주석이 섞여 있는지
• 객체나 배열의 마지막 항목 뒤에 불필요한 콤마가 남아 있는지
• 키가 따옴표 없이 맨살로 적혀 있는지

세 가지를 손으로 지우거나 따옴표로 감싸면 표준 JSON이 됩니다. 다만 중첩이 깊거나 항목이 많은 파일에서는 이 작업을 여러 번 반복해야 할 수 있습니다.

저희 도구로 확인하기.

직접 해보기 →

Auto-Fix 버튼이 내부에서 하는 일

자동 오류 복구(Auto-Fix) 버튼은 방금 설명한 수작업을 코드로 옮긴 것입니다. 먼저 정규식으로 // 줄 주석과 /* */ 블록 주석을 텍스트에서 제거합니다.

그다음 남은 텍스트를 new Function으로 평가합니다. new Function은 문자열을 자바스크립트 코드로 실행하는 방식이라, JSON.parse보다 훨씬 느슨한 자바스크립트 객체 리터럴 문법을 그대로 받아들입니다. 따옴표 없는 키(유효한 식별자인 경우), 작은따옴표 문자열, 마지막 항목 뒤의 trailing comma는 모두 ECMAScript 문법에서 원래 허용되는 구조라 자바스크립트 엔진이 오류 없이 읽어냅니다.

평가가 성공하면 그 결과로 나온 자바스크립트 객체를 JSON.stringify로 다시 직렬화합니다. 이 과정에서 따옴표 없던 키에는 큰따옴표가 붙고, trailing comma는 애초에 결과물에 존재하지 않게 되어 입력창과 출력창에 표준 JSON 형태로 반영됩니다.

다만 이 방식이 통하려면 남은 텍스트가 온전한 자바스크립트 문법이어야 합니다. 괄호가 짝이 안 맞거나 값 자체가 아예 빠진 경우처럼 자바스크립트 문법으로도 해석되지 않는 오류는 Auto-Fix로도 복구되지 않습니다.

결과 통계 패널이 세는 것

입력창에 텍스트가 있으면 통계 패널이 별도 버튼 없이 바로 갱신됩니다. JSON.parse를 시도해 성공하면 VALID, 실패하면 INVALID로 유효성을 표시합니다.

Key 개수는 최상위 객체만이 아니라 중첩된 모든 객체의 프로퍼티를 순회하며 더한 총합입니다. Array 개수 역시 최상위 배열 하나만 세는 게 아니라 구조 안 어디에 있든 배열로 나타나는 값을 모두 더한 개수입니다.

Depth는 객체·배열이 몇 겹까지 중첩됐는지를 나타내는 최댓값입니다. 배열 안에 객체가 있고 그 객체 안에 다시 배열이 있다면 그만큼 depth가 늘어납니다.

바이트 용량은 문자열 길이(.length)가 아니라 Blob 객체를 만들어 잰 실제 바이트 수입니다. 문자열을 Blob으로 만들면 UTF-8로 인코딩되므로, 한글처럼 여러 바이트를 쓰는 문자가 많을수록 문자 수보다 바이트 용량이 크게 나타납니다.

자주 헷갈리는 것들

"이건 JSON 아니야?"라는 혼동은 대개 아래 세 가지를 섞어서 생각할 때 일어납니다.

자바스크립트 콘솔에 객체를 console.log로 찍었을 때 나오는 모양이나, VS Code 설정 파일처럼 주석이 섞인 텍스트는 사람 눈에는 JSON처럼 보여도 표준 JSON.parse 기준으로는 전부 오류 대상입니다. Auto-Fix가 통하는 이유는 이 텍스트들이 대부분 "자바스크립트 객체 리터럴" 칸에 들어가기 때문입니다.

한 가지 더 헷갈리는 지점이 있습니다. 자바스크립트 객체에 undefined나 함수가 값으로 들어 있으면 JSON.stringify는 그 프로퍼티를 결과에서 통째로 빼버립니다(배열 안이라면 null로 바뀝니다). Auto-Fix로 되살린 JSON에 원래 있던 항목이 사라져 보인다면 이 규칙 때문일 수 있습니다.

정리

• 표준 JSON은 주석·trailing comma·따옴표 없는 키를 정의하지 않아, 이 세 가지가 있으면 JSON.parse가 오류를 던집니다.
• 오류 메시지의 position은 처음부터 센 글자 위치, line은 그 위치까지의 줄바꿈 횟수로 정해집니다.
• Auto-Fix는 주석 제거 후 new Function으로 느슨한 자바스크립트 문법으로 평가하고, 성공하면 표준 JSON으로 재직렬화합니다.
• 통계 패널의 Key·Array 개수는 중첩 구조 전체를 합산한 값이고, 용량은 문자 수가 아니라 Blob 기준 바이트 수입니다.
• 괄호가 안 맞는 등 자바스크립트 문법으로도 읽히지 않는 오류는 Auto-Fix로 복구되지 않습니다.

자주 묻는 질문

자동 오류 복구(Auto-Fix)는 어떤 오류를 고쳐 주나요?

표준 JSON 사양에 어긋나는 한 줄·블록 주석(//, /* */), 따옴표 없이 적힌 키, 마지막에 남은 trailing comma를 자바스크립트 엔진의 느슨한 문법 해석을 이용해 감지하고 표준 JSON 형태로 재구성합니다.

입력한 JSON이 서버로 전송되나요?

전송되지 않습니다. 이 도구는 100% 클라이언트 사이드 브라우저 런타임에서 동작하므로 입력한 데이터가 네트워크를 통해 서버로 수집되지 않습니다.

에러 메시지에 있는 position과 line은 어떻게 계산되나요?

도구가 별도로 다시 계산하는 값이 아니라, 브라우저 자바스크립트 엔진이 JSON.parse 실패 시 만들어내는 오류 메시지 문자열 안에서 정규식으로 뽑아낸 숫자입니다. position은 텍스트 처음부터 센 글자 위치, line은 그 위치까지의 줄 번호입니다.

Auto-Fix를 눌러도 안 고쳐지는 경우가 있나요?

있습니다. Auto-Fix는 주석을 지운 텍스트를 자바스크립트 문법으로 평가하는 방식이라, 남은 텍스트가 자바스크립트 문법으로도 해석되지 않으면(괄호 짝이 안 맞거나 값이 아예 빠진 경우 등) 실패합니다.