JSON 비교란
두 개의 JSON 데이터를 구조적으로 비교하여 어떤 키가 추가·삭제되었고 어떤 값이 변경되었는지 찾아 주는 도구입니다. API 응답의 변경 사항을 확인하거나 설정 파일의 차이를 점검할 때 유용합니다. 중첩된 객체와 배열도 모든 깊이까지 재귀적으로 비교하며, 입력한 데이터는 브라우저에서만 처리되어 외부로 전송되지 않습니다.
사용법
- 왼쪽 JSON에 기준이 되는 데이터를, 오른쪽 JSON에 비교할 데이터를 붙여넣습니다.
- 비교하기 버튼을 누르면 키 경로별로 차이를 보여 줍니다.
- 색상으로 종류를 구분합니다 : 추가(초록), 삭제(빨강), 변경(주황).
- 변경된 값은 이전 값 → 새 값 형태로 함께 표시됩니다.
- 지우기 : 양쪽 입력과 결과를 모두 비웁니다.
텍스트 비교와 무엇이 다른가
일반 텍스트 diff는 줄 단위로 글자를 비교하기 때문에, 같은 데이터라도 키 순서나 들여쓰기만 달라도 서로 다르다고 표시합니다. JSON 비교는 다릅니다. 먼저 양쪽을 파싱해 실제 데이터 구조로 만든 뒤, 키 이름을 기준으로 값을 맞춰 비교합니다. 그래서 {"a":1,"b":2}와 {"b":2,"a":1}은 순서만 다를 뿐 내용이 같으므로 "차이 없음"으로 나옵니다. 값이 실제로 바뀐 부분만 골라내므로 API 응답이나 설정 파일의 의미 있는 변화만 확인할 수 있습니다.
키 경로와 재귀 비교
비교 결과는 키 경로로 표시됩니다. 중첩된 객체는 user.name처럼 점으로, 배열 항목은 tags[0]처럼 인덱스로 경로를 표기합니다. 객체와 배열의 모든 깊이를 재귀적으로 파고들어 비교하므로, 깊숙이 묻힌 값 하나가 바뀌어도 정확한 위치를 짚어 줍니다. 결과는 세 가지로 구분됩니다 — 오른쪽에만 있는 키는 추가(초록), 왼쪽에만 있는 키는 삭제(빨강), 양쪽에 있지만 값이 다른 키는 변경(주황)이며, 변경은 이전 값 → 새 값을 함께 보여 줍니다.
배열을 key로 매칭하기
배열은 기본적으로 같은 인덱스끼리 비교합니다. 그래서 항목 순서만 바뀌어도 각 위치의 값이 변경된 것으로 잡혀, 실제보다 차이가 많아 보일 수 있습니다. 항목마다 id 같은 고유 값이 있다면 배열을 key 기준으로 매칭 옵션을 켜고 그 키 이름을 지정하세요. 인덱스 대신 지정한 key 값으로 항목을 짝지어 비교하므로, 순서 변경으로 인한 거짓 "변경"을 줄이고 실제로 값이 바뀐 항목만 정확히 찾을 수 있습니다.
비교 결과 상단에는 추가·삭제·변경 건수가 요약으로 표시되어 변화의 규모를 숫자로 파악할 수 있고, 두 JSON이 완전히 같으면 "차이 없음"으로 안내합니다. 결과는 + 추가, - 삭제, ~ 변경 형태의 텍스트로도 복사할 수 있어, 리뷰 메모나 이슈에 그대로 붙여넣기 좋습니다. API 버전 간 응답 비교, 설정 파일 변경 추적, 테스트 기대값과 실제값 대조 등 값이 실제로 어떻게 달라졌는지 확인해야 하는 상황에 두루 활용할 수 있습니다.
자주 묻는 질문
입력한 JSON이 서버로 전송되나요?
아니요. 모든 비교는 브라우저 안에서만 실행되며 입력한 데이터는 서버로 전송되거나 저장되지 않습니다.
중첩된 객체나 배열도 비교되나요?
네. 객체와 배열의 모든 깊이를 재귀적으로 비교하여 키 경로별로 추가·삭제·변경 내역을 표시합니다.
추가·삭제·변경은 어떻게 구분하나요?
우측에만 있는 키는 추가(초록), 좌측에만 있는 키는 삭제(빨강), 양쪽에 있지만 값이 다른 키는 변경(주황)으로 표시하며 변경은 이전 값과 새 값을 함께 보여 줍니다.
키 순서만 다른 두 JSON은 어떻게 처리되나요?
구조를 비교하므로 키 순서나 들여쓰기 차이는 무시됩니다. 값이 모두 같다면 순서가 달라도 차이 없음으로 표시됩니다.
배열 순서가 바뀌면 어떻게 되나요?
배열은 기본적으로 같은 인덱스끼리 비교합니다. 따라서 항목 순서가 바뀌면 해당 인덱스의 값이 변경된 것으로 표시될 수 있습니다.
순서 변경으로 인한 거짓 변경을 줄이려면?
배열을 key 기준으로 매칭 옵션을 켜고 id 같은 고유 키를 지정하면, 인덱스 대신 그 key 값으로 항목을 짝지어 비교하므로 순서 변경으로 생기는 거짓 변경을 줄일 수 있습니다.