JSON 차이 비교
두 JSON 문서를 비교하여 추가・삭제・변경된 키를 키 경로 단위로 한눈에 확인할 수 있습니다. 객체와 배열을 재귀적으로 탐색하며, 타입이 다른 경우도 변경으로 표시됩니다. 모든 처리는 브라우저 내에서 완결되며 서버로 전송되지 않습니다.
JSON 차이 비교란
JSON 차이 비교는 두 개의 JSON 데이터를 구조 단위로 대조하여 어떤 키가 추가되었는지, 어떤 키가 삭제되었는지, 어떤 값이 변경되었는지를 한눈에 파악할 수 있도록 하는 작업입니다. API 응답 사양이 변경되었거나 환경별 설정 파일에 차이가 있어서, 텍스트 전체를 눈으로 비교하기에는 정보량이 너무 많은 상황에서 특히 위력을 발휘합니다. 이 도구는 객체와 배열을 재귀적으로 탐색하면서 키 경로 단위로 차이를 추출하므로, JSON 구조가 아무리 깊게 중첩되어 있어도 어디가 바뀌었는지 정확히 짚어낼 수 있습니다.
비교의 전제로서, JSON 구조 자체가 무너져 있으면 차이 계산을 진행할 수 없습니다. 쉼표 누락이나 따옴표가 닫히지 않은 것과 같은 구문 오류가 있으면, A와 B 중 어느 쪽 입력이 잘못되었는지를 명시한 오류로 표시됩니다. 또한 이 도구는 두 가지 서로 다른 대응 규칙을 사용합니다. 객체의 키는 이름으로 대응시키고, 배열의 요소는 인덱스(출현 순서)로 대응시킵니다. 이 전제를 이해해 두면 특정 키가 왜 "추가"나 "삭제"가 아니라 "변경"으로 감지되는지를 올바르게 해석할 수 있습니다.
JSON 차이 비교 사용 방법
- 비교 원본 JSON(A)을 입력한다 입력란에 JSON 텍스트를 붙여넣거나 직접 입력합니다. 기존 설정 파일이나 API 응답을 그대로 복사해 넣어도 됩니다.
- 비교 대상 JSON(B)을 입력한다 변경 후 또는 다른 환경의 JSON을 다른 쪽 입력란에 붙여넣습니다. A와 B의 입력 순서는 결과에 나타나는 "삭제"·"추가"의 방향에 반영됩니다.
- 샘플로 동작을 확인한다(선택 사항) "샘플 불러오기" 버튼을 누르면 추가・삭제・변경이 포함된 예시가 양쪽 입력란에 채워져, 표시 형식을 바로 파악할 수 있습니다.
- 차이 결과를 확인한다 삭제・추가・변경된 키가 키 경로와 함께 목록으로 표시됩니다. 변경된 키는 변경 전후의 값이 나란히 표시되어 차이 내용을 그 자리에서 읽어낼 수 있습니다.
- 필요에 따라 입력 내용을 지운다 "지우기" 버튼으로 두 입력란을 모두 비우고 다른 JSON 쌍의 비교를 시작할 수 있습니다.
더 잘 활용하기 위한 팁
- 키 경로는 `user.address[0].city`와 같은 점・대괄호 표기법으로 표시되므로, JSON 구조가 아무리 깊어도 어느 계층의 값이 바뀌었는지 즉시 파악할 수 있습니다.
- 배열은 같은 인덱스끼리 대응시켜 비교합니다. 배열 요소의 순서만 바뀌어도 모든 요소가 변경된 것으로 감지된다는 점에 주의하세요.
- 같은 키가 한쪽에서는 문자열, 다른 쪽에서는 객체처럼 타입 자체가 다른 경우에도 변경으로 감지되며, 양쪽의 원시 값이 그대로 표시됩니다.
- 배포 전후의 API 응답을 비교할 때는 타임스탬프나 요청 ID처럼 매번 달라지는 필드를 미리 제거하면, 실제로 확인해야 할 차이에만 집중할 수 있습니다.
- 변경되지 않은 값이 매우 많은 JSON이라도 일치하는 리프(leaf)의 개수만 집계해 표시하므로, 결과가 지나치게 길어지지 않고 파악하기 쉽습니다.
활용 사례
API 응답 사양 변경 확인
백엔드 배포 전후의 API 응답을 저장해 두고 이 도구로 비교하면, 의도치 않은 필드 추가・삭제・타입 변경을 조기에 발견할 수 있습니다.
환경별 설정 파일 비교
스테이징과 운영 환경의 config.json이나 package.json 내용을 비교하여 환경 변수 누락이나 버전 불일치를 찾아내는 데 사용할 수 있습니다.
코드 리뷰 시 차이 설명
JSON 형식의 마이그레이션 데이터나 스키마 정의를 리뷰할 때, 변경 사항을 말이나 댓글로 설명하는 대신 차이 목록을 그대로 공유할 수 있습니다.
테스트 스냅샷 비교
자동화 테스트가 출력하는 JSON 스냅샷과 기대값을 비교하여, 테스트 실패의 원인이 되는 필드를 빠르게 찾아낼 수 있습니다.
외부 연동 데이터 검증
웹훅으로 수신한 페이로드가 사양서대로의 구조인지, 샘플 JSON과 실제 데이터를 비교해 검증하는 용도로도 사용할 수 있습니다.
용어집
- 키 경로
- JSON의 루트에서 특정 값까지의 경로를 `user.address[0].city`와 같은 점・대괄호 표기법으로 나타낸 문자열입니다. 차이 결과는 이 단위로 표시됩니다.
- 중첩(네스팅)
- 객체나 배열 안에 또 다른 객체나 배열이 포함되어 있는 상태입니다. 중첩이 깊을수록 눈으로 직접 비교하기가 어려워집니다.
- 리프(leaf)
- JSON의 트리 구조에서 더 이상 분기하지 않는 말단 값(문자열・숫자・불리언・null)을 가리킵니다. 차이 비교는 최종적으로 리프 값끼리를 대조하는 작업입니다.
- 타입 불일치
- 같은 키 경로의 값이 한쪽에서는 문자열, 다른 쪽에서는 객체처럼 서로 다른 데이터 타입으로 되어 있는 상태입니다. 이 도구는 이것도 "변경"으로 감지합니다.
- 구문 오류
- JSON.parse가 실패하는 잘못된 표기를 말합니다. 쉼표 누락이나 따옴표가 닫히지 않은 경우가 대표적입니다.
- JSONPath
- JSON 내부의 값을 조회하기 위한 쿼리 언어 규격입니다. 이 도구의 키 경로 표기법은 JSONPath의 일부 문법을 간략화한 것에 가까운 개념입니다.
자주 묻는 질문
여담 ― CSV 차이 비교와 JSON 차이 비교, 키 대응 방식의 차이
본 사이트의 CSV 차이 비교 도구는 행을 식별하는 키 열을 하나 지정해 행・셀 단위로 비교하는 방식이었습니다. JSON은 행과 열이라는 평면 구조를 갖지 않고 객체의 중첩과 배열이라는 계층 구조를 허용하기 때문에, 같은 "차이 비교"라도 비교 알고리즘의 설계가 크게 다릅니다. 이 도구는 키 열이라는 개념 대신, 루트에서 리프까지 재귀적으로 따라가는 "키 경로"를 비교 단위로 사용합니다.
JSON 차이 감지에서 특히 까다로운 부분이 배열 처리입니다. CSV의 행은 키 열의 값으로 고유하게 식별할 수 있지만, JSON 배열 요소에는 식별자가 보장되지 않습니다. 이 도구는 단순히 인덱스(출현 순서)로 대응시키는 방식을 채택했으며, 이는 배열 내용이 추가・삭제되는 상황보다 객체 구조나 원시 값의 변화를 추적하고 싶은 상황(설정 파일이나 API 응답 비교 등)에 더 적합한 설계입니다.
실무에서는 REST API의 응답 사양이 변경되지 않았는지 지속적 통합(CI)에서 자동으로 점검하는 용도에도 비슷한 발상이 사용됩니다. 이 도구는 브라우저에서 완결되는 간편함을 중시하지만, 그 사고방식 자체는 스냅샷 테스트나 계약 테스트(Contract Testing)와 공통되며, JSON 구조의 차이를 기계적으로 감지한다는 과제는 개발의 다양한 단계에서 반복적으로 등장합니다.