JSONEditor.io

편집기는 VS Code를 떠받치는 Monaco에서 돌아가고, 그 선택은 곳곳에 드러난다. JSON, YAML, XML 문법 강조, 물결선으로 표시하는 실시간 오류 탐지, IntelliSense와 자동 완성, 큰 파일을 위한 코드 접기, 정규식을 지원하는 찾기와 바꾸기가 갖춰진다. 단축키가 VS Code와 같아 손의 기억이 그대로 옮겨진다. 대가는 번들 크기지만, Monaco가 페이지와 나란히 로드되기에 그 비용은 보이지 않는다.

같은 파일을 세 방식으로 읽는다. 텍스트 모드는 원본 JSON을 편집 가능한 형태로 보여준다. 트리 모드는 구조를 펼칠 수 있는 계층으로 그려, 중첩 객체의 가지가 눈으로 좇기 어려울 때 힘을 발휘한다. 표 모드는 배열을 행과 열로 늘어놓아 레코드 목록을 훑는 일이 고역이 아니게 된다. 작업하면서 모드를 바꿔도 밑에 있는 문서는 계속 동기화된다.

변환은 JSON, YAML, CSV, XML, TypeScript를 아우르고 거의 모두 양방향으로 오갈 수 있다. JSON에서 CSV로 가는 길은 중첩 객체를 펼치고, 바로 그 점이 출력을 스프레드시트에서 쓸 수 있게 만든다. DevOps 작업은 매니페스트와 Compose 파일을 위한 JSON에서 YAML 변환으로 이득을 본다. TypeScript 내보내기는 샘플 데이터를 인터페이스 정의로 바꿔 타입이 있는 프로젝트에 붙이게 한다.

AI 도우미는 스크립트를 쓰는 대신 바꿀 내용을 평범한 말로 설명하게 해준다. 모든 이메일 주소를 배열로 뽑아 달라거나 응답을 다른 모양으로 정리해 달라고 하면, 생성하면서 결과를 흘려보낸다. 이 기능은 Vercel AI SDK를 통해 GPT-4로 돌아간다. 제품에서 데이터를 기기 밖으로 보내는 유일한 부분이며, 쓰기 전에 화면이 그 사실을 알린다.

512MB 파일까지 탭을 얼리지 않고 연다. 대부분의 브라우저 편집기가 못 하는 말이다. Monaco는 보이는 줄만 그리므로 거대한 문서도 작은 파일처럼 움직인다. 오프라인 지원 덕분에 첫 로딩 뒤에는 포맷, 검증, 변환이 연결 없이도 돌아간다. 비행기 안이나 막힌 사내망에 갇힌 개발자에게 맞는 조합이다.

복구 도구는 깨진 문서를 훑어 늘 나오는 용의자를 찾는다. 끝에 남은 쉼표, 이스케이프되지 않은 문자, 빠진 따옴표, 잘못된 이스케이프 시퀀스. 그리고 수정을 제안하거나 적용한다. 스키마 검증은 반대 방향으로, 데이터를 미리 정의한 JSON 스키마와 대조해 구조가 어긋난 것을 데이터베이스에 닿기 전에 붙잡는다. 둘 다 실제로 빌드를 멈추는 실패를 덮는다.

JSON 파일 두 개를 나란히 열면 버전 간 추가, 변경, 삭제가 드러나, 버전 찾기가 빠른 눈검사로 바뀐다. 파일을 클라우드에 저장하고 공유 링크를 만들면 동료가 첨부 파일 없이 같은 문서를 연다. 멀티탭 작업 공간은 여러 파일을 폴더로 정리해 열어 두게 해주며, 코드 편집기와 같은 감각이다.