JSON 포매터, 유효성 검사 및 압축

브라우저에서 바로 JSON 포맷, 유효성 검사, 압축하기

JSON(JavaScript Object Notation)은 현대 웹의 공통 언어입니다. 호출하는 REST API 대부분이 JSON을 반환하고, 많은 설정 파일이 JSON을 사용하며, 서비스와 프론트엔드 사이를 오가는 데이터의 상당 부분이 JSON으로 직렬화됩니다. 이 형식이 인기 있는 데는 이유가 있습니다. 단순하고, 언어에 독립적이며, 프로그래머가 이미 익숙하게 다루는 객체, 배열, 문자열, 숫자에 깔끔하게 대응됩니다. 그러나 바로 그 간결함에 단점이 있습니다. 서버가 수백 개의 중첩 키를 한 줄에 담아 응답을 건네주는 순간, JSON의 매력이었던 구조는 문자들의 벽 속으로 사라져 버립니다.

speedor.net JSON Formatter는 그 구조를 되돌려 주기 위해 만들어졌습니다. 데이터를 붙여넣으면 즉시 브라우저 탭 안에서 JSON을 보기 좋게 정렬하고, 유효성을 검사하며, 압축합니다. 서버로 업로드되는 것은 전혀 없어서, 검사 중인 데이터가 토큰, 고객 정보, 내부 식별자 등 민감한 API 응답일 때 더욱 안심하고 사용할 수 있습니다.

들여쓰기가 JSON을 다시 읽기 쉽게 만드는 이유

포맷팅(beautifying 또는 pretty-printing이라고도 함)은 압축되거나 최소화된 JSON에 줄 바꿈과 일관된 들여쓰기를 추가합니다. 담긴 정보는 동일하고 공백만 달라집니다. 하지만 바로 그 공백 덕분에 눈이 중첩 깊이를 따라갈 수 있고, 한 객체가 끝나고 다음 객체가 시작되는 위치를 파악할 수 있으며, 세 항목짜리 배열과 세백 항목짜리 배열을 구별할 수 있습니다. 새벽 두 시에 통합 문제를 디버깅할 때, 읽기 편한 트리와 끊어지지 않는 문자열의 차이는 버그를 찾는 것과 놓치는 것의 차이입니다.

좋은 포매터는 키의 순서와 정확한 값도 그대로 유지하므로, 화면에 보이는 것이 API가 실제로 보낸 것과 동일합니다. 재렌더링된 근사값이 아니라 같은 바이트를, 기계가 파싱하는 것만큼 사람도 쉽게 읽을 수 있도록 배치한 것입니다.

유효성 검사와 모두가 실수하는 오류들

포맷팅은 작업의 절반에 불과합니다. JSON을 포맷하려면 먼저 유효해야 하며, 엄격한 형식 규칙은 사람들이 예상하는 것보다 훨씬 많은 실수를 잡아냅니다. 유효성 검사기는 입력을 파싱하고 정확히 어디서 오류가 발생했는지 알려주며, 보통 줄과 위치를 짚어줘서 맹목적으로 찾아 헤맬 필요가 없습니다. 아래의 몇 가지 실수가 잘못된 JSON의 압도적 다수를 차지합니다.

• 후행 쉼표. JSON은 객체나 배열의 마지막 요소 뒤에 쉼표를 허용하지 않습니다. JavaScript는 이를 용인하므로, 개발자들이 습관적으로 붙여넣는 경우가 많습니다.
• 작은따옴표. 문자열과 키는 반드시 큰따옴표를 사용해야 합니다. 소스 코드에서 객체 리터럴을 그대로 붙여넣으면 작은따옴표가 남아있고, 파서가 이를 거부합니다.
• 따옴표 없는 키. 모든 키는 인용된 문자열이어야 합니다. JavaScript 객체에서는 잘 작동하는 따옴표 없는 키는 JSON에서 유효하지 않습니다.
• 누락되거나 일치하지 않는 괄호. 닫히지 않은 {나 [, 또는 잘못된 닫는 괄호는 전체 문서를 망가뜨립니다. 포매터가 균형이 깨진 위치를 강조해 줍니다.
• 주석과 undefined 값. JSON에는 주석이 없고 undefined도 없습니다. null, 불리언, 숫자, 문자열, 배열, 객체만 허용됩니다.

의심스러운 페이로드를 먼저 유효성 검사기에 통과시키면 혼란스러운 배포 실패를 겪는 대신 몇 초 안에 문제가 드러납니다.

페이로드 크기를 줄이기 위한 압축

반대 작업도 마찬가지로 유용합니다. 압축은 선택적 공백을 모두 제거하여 JSON을 가장 짧은 한 줄 형태로 만듭니다. 데이터를 네트워크로 전송하거나 설정 값에 넣을 때 원하는 것이 바로 그것인데, 더 작은 페이로드는 대역폭을 줄이고 전송을 빠르게 합니다. 일반적인 작업 흐름은 응답을 보기 좋게 만들어 검토하고, 문제를 수정한 후, 커밋하거나 환경 변수에 붙여넣기 전에 결과를 압축하는 것입니다. 하나의 도구로 그 작업 흐름의 양 끝을 모두 처리합니다.

로컬 처리로 민감한 데이터 보호

모든 단계가 브라우저 내 JavaScript에서 실행되므로, 붙여넣은 JSON은 사용자의 기기를 벗어나지 않습니다. 이것은 마케팅적 수사가 아니라 실질적인 보장입니다. 베어러 토큰이 담긴 원시 API 응답이든, 사용자 데이터 내보내기든, 내부 서비스 설정이든 제3자 서버가 기록할 걱정 없이 붙여넣을 수 있습니다. 탭을 닫으면 데이터는 사라집니다. 데이터 처리 규정을 준수해야 하는 분들에게 로컬 전용 처리는 위험의 한 범주를 통째로 제거해 줍니다.

JSON이 정리되었다면 더 나아가고 싶을 수 있습니다. 나머지 개발자 도구를 살펴보거나, JSON to YAML로 구조를 변환하거나, Base64를 사용해 내장된 값을 디코딩하세요. 각 도구는 동일한 원칙을 따릅니다. 빠르고, 무료이며, 브라우저 안에서 모두 처리됩니다.

자주 묻는 질문