JSON 보기 힘들 때 이 사이트 쓰면 깔끔해짐

한 줄로 쭉 이어진 JSON 보다가 눈이 빠질 뻔했다

백엔드 API를 개발하면서 JSON 데이터를 매일 들여다본다. 문제는 서버에서 응답으로 오는 JSON이 대부분 한 줄로 쭉 이어져 있다는 거다. 중괄호와 대괄호가 뒤엉킨 한 줄짜리 JSON을 읽으려고 하면 정말 머리가 아프다. 데이터 구조를 파악하기도 어렵고 원하는 값을 찾기도 어렵다.

브라우저 개발자 도구에서 응답을 확인할 때도 마찬가지다. 데이터가 간단하면 괜찮은데, 중첩된 객체가 여러 겹이고 배열 안에 또 객체가 있는 복잡한 구조면 눈으로 따라가기가 불가능하다. 그래서 JSON을 예쁘게 정리해주는 포맷터를 항상 쓰게 되는데, 내가 요즘 쓰는 건 JSON포매터다.

사이트 첫 화면 - 딱 필요한 것만 있다

접속하면 큰 텍스트 입력 영역과 포맷 버튼이 보인다. 여기에 JSON 문자열을 붙여넣고 버튼을 누르면 들여쓰기가 적용된 깔끔한 JSON으로 변환해준다. 들여쓰기 간격은 보통 2칸이나 4칸으로 설정할 수 있고, 결과를 바로 복사할 수도 있다.

반대로 이미 정리된 JSON을 한 줄로 압축하는 기능도 있다. 서버에 요청을 보낼 때나 설정 파일에 넣을 때 한 줄 형태가 필요한 경우가 있는데, 이때 Minify 기능을 쓰면 된다. Beautify와 Minify 양쪽 다 지원하니까 상황에 따라 골라 쓸 수 있다.

JSON 유효성 검사도 해준다. 붙여넣은 JSON에 문법 오류가 있으면 어디가 잘못됐는지 알려주는데, 이게 개발할 때 정말 유용하다. 쉼표를 하나 빼먹었거나 따옴표를 안 닫은 경우 같은 사소한 실수를 바로 잡아준다. 직접 눈으로 찾으면 몇 분 걸리는 걸 몇 초 만에 해결할 수 있다.

API 개발할 때 매일 쓰게 되는 이유

REST API를 개발하면 요청과 응답을 확인하는 게 핵심 작업이다. Postman이나 Insomnia 같은 API 클라이언트에도 JSON 포맷 기능이 있지만, 가끔 슬랙이나 이메일로 전달받은 JSON 데이터를 확인해야 할 때는 웹 포맷터가 더 빠르다.

동료가 이 JSON 좀 확인해봐 하면서 메신저에 한 줄짜리 JSON을 보내오는 경우가 정말 많다. 그때 JSON 포맷 사이트에 바로 붙여넣으면 구조가 한눈에 보인다. 어떤 키에 어떤 값이 있는지, 배열에 몇 개의 항목이 있는지 파악이 즉시 된다.

디버깅할 때도 필수다. 서버 로그에 찍힌 JSON을 복사해서 정리하면 문제가 있는 부분을 빠르게 찾을 수 있다. 값이 null인 필드, 예상과 다른 타입의 데이터, 빠져 있는 키 등을 정리된 형태에서 훨씬 쉽게 발견할 수 있다.

프론트엔드 개발자에게도 유용하다

프론트엔드에서 API 연동할 때 응답 데이터 구조를 파악하는 건 기본 중의 기본이다. API 문서가 잘 되어 있으면 좋겠지만, 현실에서는 문서가 없거나 오래돼서 실제 응답과 다른 경우가 많다. 그러면 결국 직접 API를 호출해서 응답을 확인해야 한다.

이때 받은 JSON을 포맷터에 넣으면 데이터 구조가 명확해지면서 어떤 컴포넌트에 어떤 데이터를 연결해야 하는지 설계가 쉬워진다. 중첩이 깊은 경우에는 트리 구조로 접고 펼 수 있는 기능이 있으면 더 좋은데, 이 사이트에서도 그런 형태의 뷰를 제공해서 복잡한 JSON 탐색이 편하다.

Mock 데이터를 만들 때도 포맷터가 도움이 된다. 실제 API 응답을 복사해서 포맷터에 넣고 값만 수정하면 바로 Mock 데이터가 되니까, 백엔드 API가 아직 준비되지 않은 상태에서도 프론트엔드 개발을 진행할 수 있다.

비개발자도 JSON을 만질 일이 있다

개발자만 JSON을 다루는 시대는 지났다. 마케터가 GTM 설정을 할 때, 기획자가 API 스펙을 검토할 때, QA 엔지니어가 테스트 데이터를 확인할 때 모두 JSON을 접하게 된다. 이런 분들에게 한 줄짜리 JSON은 암호문과 다를 바 없다.

포맷터를 통해 정리된 JSON을 보면 비개발자도 데이터 구조를 어느 정도 이해할 수 있다. 키 이름만 봐도 어떤 정보를 담고 있는지 추측할 수 있고, 값의 형태를 보면 숫자인지 문자인지 구분이 된다. 개발팀과 소통할 때 이 정도 이해만 있어도 회의가 훨씬 원활해진다.

노코드 도구를 사용하는 분들도 JSON 설정 파일을 수정해야 하는 경우가 있다. Zapier나 Make 같은 자동화 도구에서 JSON 형식의 데이터를 다루는데, 이때 포맷터로 정리해서 보면 어디를 수정해야 하는지 파악이 쉽다.

JSON 문법 오류 찾을 때 진짜 세이브된다

JSON 문법은 엄격하다. 마지막 항목 뒤에 쉼표가 있으면 안 되고, 키는 반드시 큰따옴표로 감싸야 하고, 작은따옴표는 사용할 수 없다. 이런 규칙 하나라도 어기면 파싱 에러가 나는데, 긴 JSON에서 어디가 잘못됐는지 찾는 건 정말 고역이다.

이 포맷터의 유효성 검사 기능은 오류가 있는 위치를 정확하게 알려준다. 몇 번째 줄 몇 번째 문자에서 오류가 발생했는지 표시해주니까, 바로 그 부분으로 가서 수정하면 된다. 디버깅 시간을 획기적으로 줄여주는 기능이다.

가끔 JSON이라고 생각하고 붙여넣었는데 사실은 JSON이 아닌 형식인 경우도 있다. 자바스크립트 객체 리터럴이나 YAML 같은 걸 JSON이라고 착각하는 경우인데, 이때 유효성 검사에서 걸려주니까 형식 혼동도 방지할 수 있다.

설정 파일 관리에도 활용할 수 있다

package.json, tsconfig.json, 환경 설정 JSON 등 프로젝트에서 JSON 형식의 설정 파일을 다루는 경우가 많다. 이 파일들을 수정할 때 실수로 문법 오류를 내면 프로젝트가 빌드되지 않거나 예상치 못한 동작을 하게 된다.

수정하기 전에 포맷터에 넣어서 구조를 확인하고 수정 후에도 유효성 검사를 하면 이런 실수를 방지할 수 있다. 특히 JSON에 주석을 달 수 없어서 복잡한 설정을 이해하기 어려울 때, 포맷터로 정리해놓으면 가독성이 훨씬 나아진다.

여러 환경의 설정 파일을 비교해야 할 때도 유용하다. 개발용과 운영용 설정 JSON을 각각 포맷팅해서 나란히 놓으면 어디가 다른지 비교하기 쉽다. 이런 사소한 습관이 운영 사고를 예방하는 데 큰 역할을 한다.

개발하는 사람이라면 필수 즐겨찾기

JSON은 현대 웹 개발에서 가장 많이 사용되는 데이터 형식이다. 프론트엔드, 백엔드, 모바일, 데이터 분석 등 어떤 분야를 하든 JSON을 피해갈 수 없다. 그래서 JSON을 편하게 다룰 수 있는 JSON 포매터는 개발자의 필수 도구라고 해도 과언이 아니다.

무료이고 브라우저만 있으면 바로 쓸 수 있으니까 지금 즐겨찾기에 넣어두시라. 내일 당장 쓸 일이 생길 거다. 한 줄짜리 JSON을 멀뚱멀뚱 쳐다보는 시간이 사라지는 것만으로도 이 사이트를 알게 된 보람이 충분하다.

비개발자분들도 겁먹지 말고 한번 써보시라. JSON이 뭔지 몰라도 붙여넣기만 하면 정리가 되니까 누구나 쉽게 쓸 수 있다. 일하다가 중괄호 잔뜩 있는 텍스트를 받았을 때 이 사이트를 떠올리시면 된다.