본문으로 건너뛰기
🛠️
Whiz Tools

JSON 비교 도구 - 온라인에서 JSON 무료 비교 | JSON 차이점 분석

두 JSON 객체를 비교해 추가, 삭제, 수정된 모든 값을 나열하는 무료 온라인 개발 도구입니다. 각 변경 사항의 정확한 경로까지 함께 표시해 개발자가 API 응답이나 설정 파일의 데이터 차이를 빠르게 확인할 수 있습니다. 코드 리뷰와 배포 전 설정 검증 과정에서 유용하게 쓰입니다.

JSON 차이 도구

로딩 계산기...
📚

문서화

JSON 비교 도구(JSON diff 도구라고도 함)는 두 JSON(JavaScript Object Notation) 값을 비교하고 둘 사이에서 변경된 내용을 보고합니다. 추가되거나 삭제되거나 수정된 모든 속성 또는 배열 항목과 데이터 내 정확한 위치를 표시합니다. 이 페이지에서는 실제 비교 로직을 바탕으로 작동 예시를 들어 whiz.tools JSON 비교 도구의 작동 방식을 설명합니다.

JSON 비교란 무엇인가?

JSON 비교는 차이점을 찾기 위해 두 JSON 문서를 서로 대조하는 과정입니다. JSON 문서는 객체(중괄호 안의 키-값 쌍), 배열(대괄호 안의 순서가 있는 목록), 문자열·숫자·불리언·null과 같은 원시 값으로 구성된 텍스트입니다. 이러한 문서가 몇 줄을 넘어서면 눈으로 비교하는 작업은 느리고 오류가 발생하기 쉬우므로, 비교 도구가 자동으로 대응 관계를 확인하고 각 변경 사항을 강조 표시합니다.

개발자는 이러한 비교를 사용해 API 응답을 확인하고, 구성 파일의 변경 사항을 추적하며, 데이터 마이그레이션에서 정보가 손실되지 않았는지 검증하고, 버전 관리 중인 JSON 파일의 변경 내용을 검토합니다.

도구가 두 JSON 값을 비교하는 방법

도구는 먼저 표준 JSON 파서를 사용해 두 입력을 구문 분석한 다음, 결과로 얻은 두 값을 한 번에 한 수준씩 함께 순회합니다. 각 단계에서 다음 세 가지 질문을 순서대로 확인합니다.

  1. 두 값의 유형이 서로 다른가요(예를 들어 하나는 객체이고 다른 하나는 숫자인 경우), 또는 한쪽이 null이고 다른 쪽은 아닌가요? 그렇다면 해당 위치에 수정 사항을 기록하고 더 깊은 비교을 중단합니다.
  2. 두 값이 모두 원시 값인가요(문자열, 숫자, 불리언 또는 null)? 그렇다면 값을 직접 비교합니다. 숫자 123에서 문자열 "123"로 바뀐 경우를 포함해 어떤 차이든 수정 사항으로 처리합니다.
  3. 두 값이 모두 객체이거나 모두 배열인가요? 그렇다면 아래 규칙에 따라 내용을 비교하고, 중첩된 객체 또는 배열이 있으면 재귀적으로 비교합니다.

모든 차이는 user.address.city 또는 tags[1]와 같은 경로와 함께 기록되므로 원본 문서에서 쉽게 찾을 수 있습니다. 객체 멤버는 마침표로 연결하고 배열 항목은 대괄호 안에 인덱스로 표시합니다. 배열이 객체로 바뀌는 경우처럼 문서 최상위에서 발생한 차이는 데이터 내부의 경로가 없으므로 $로 표시합니다. 이는 RFC 9535의 JSONPath 표준에서 정의한 루트 식별자이며 문서 전체를 나타냅니다.

객체 비교

두 JSON 객체를 비교할 때 도구는 어느 한 객체에라도 나타나는 모든 키를 수집합니다. 각 키에 대해 다음과 같이 처리합니다.

  • 키가 두 번째 객체에만 있으면 추가된 속성입니다.
  • 키가 첫 번째 객체에만 있으면 삭제된 속성입니다.
  • 키가 양쪽 모두에 있으면 도구가 두 값을 재귀적으로 비교합니다.

키의 순서는 중요하지 않습니다. JSON 표준은 객체 멤버의 순서를 정의하지 않으므로 {"a":1,"b":2}와 {"b":2,"a":1}는 동일한 것으로 처리됩니다.

배열 비교

배열은 내용이 아니라 위치를 기준으로 비교합니다. 도구는 두 배열을 인덱스별로 순회하며, 더 긴 배열의 길이까지 각 인덱스에 있는 값을 비교합니다. 한 배열이 더 짧으면 더 긴 배열 끝에 남은 항목이 추가 또는 삭제된 것으로 보고됩니다.

따라서 도구는 배열 항목의 내용을 기준으로 서로 대응시키려 하지 않습니다. 객체가 인덱스 1에서 인덱스 2로 "이동"했다는 사실을 인식하지 못하고 각 인덱스의 값이 바뀌었다고만 판단합니다. 배열 중간의 항목을 삭제하거나 삽입하면 뒤따르는 모든 항목이 한 위치씩 이동하므로, 일반적으로 깔끔한 추가 또는 삭제 하나가 아니라 여러 개의 개별 수정 사항으로 표시됩니다.

풀이 예시

예시 1: 두 객체 비교

첫 번째 JSON:

1{ "user": { "address": { "city": "New York", "zip": "10001" } } }
2

두 번째 JSON:

1{ "user": { "address": { "city": "Boston", "zip": "02108" } } }
2

결과:

  • 수정됨 user.address.city: "New York" → "Boston"
  • 수정됨 user.address.zip: "10001" → "02108"

예시 2: 끝에서 발생한 배열 변경

첫 번째 JSON:

1{ "tags": ["important", "urgent", "review"] }
2

두 번째 JSON:

1{ "tags": ["important", "critical", "review", "documentation"] }
2

인덱스 0은 변경되지 않았고, 인덱스 1은 변경되었으며, 인덱스 2는 변경되지 않았고, 인덱스 3은 두 번째 배열에만 있습니다. 결과:

  • 수정됨 tags[1]: "urgent" → "critical"
  • 추가됨 tags[3]: "documentation"

예시 3: 배열 중간 항목 삭제

이 예시는 배열 중간에서 항목을 삭제하면 어떤 일이 발생하는지 보여 줍니다. 이는 흔히 혼동을 일으키는 원인입니다.

첫 번째 JSON:

1{
2  "products": [
3    { "id": 1, "name": "Laptop", "price": 999.99 },
4    { "id": 2, "name": "Mouse", "price": 24.99 },
5    { "id": 3, "name": "Keyboard", "price": 59.99 }
6  ]
7}
8

"Mouse" 항목이 삭제되고 끝에 "Monitor" 항목이 추가된 두 번째 JSON:

1{
2  "products": [
3    { "id": 1, "name": "Laptop", "price": 899.99 },
4    { "id": 3, "name": "Keyboard", "price": 59.99 },
5    { "id": 4, "name": "Monitor", "price": 349.99 }
6  ]
7}
8

이를 본 사람은 "Mouse가 삭제되고 Monitor가 추가되었다"고 말할 것입니다. 하지만 도구는 인덱스만 엄격하게 비교하므로 그렇게 판단하지 않습니다. 인덱스 0과 0, 인덱스 1과 1, 인덱스 2와 2를 비교하므로 삭제된 항목 뒤의 모든 필드가 잘못된 객체와 대응됩니다. 실제 결과는 일곱 개의 수정 사항입니다.

  • 수정됨 products[0].price: 999.99 → 899.99
  • 수정됨 products[1].id: 2 → 3
  • 수정됨 products[1].name: "Mouse" → "Keyboard"
  • 수정됨 products[1].price: 24.99 → 59.99
  • 수정됨 products[2].id: 3 → 4
  • 수정됨 products[2].name: "Keyboard" → "Monitor"
  • 수정됨 products[2].price: 59.99 → 349.99

이와 같은 목록을 비교할 때 더 깔끔한 결과를 얻으려면 붙여넣기 전에 두 배열을 같은 방식으로 정렬하거나 키를 지정하세요. 예를 들어 각 목록을 같은 순서로 작성하거나 비교 전에 ID 필드로 객체를 대응시키면 됩니다.

도구가 하지 않는 작업

  • 배열 항목을 내용으로 대응시키지 않습니다. 위에서 설명한 것처럼 순수하게 인덱스 위치로 비교하므로 항목이 변경된 것이 아니라 이동했다는 사실을 인식할 수 없습니다.
  • 순환 참조를 감지하지 않습니다. 실제로는 제한 사항이 되지 않습니다. 두 입력 모두 JSON.parse에서 생성되며, 이 함수는 항상 단순한 트리를 만들고 자기 자신을 참조하는 값을 생성할 수 없기 때문입니다. 유효한 JSON 텍스트에는 애초에 순환 참조가 존재할 수 없습니다.
  • 비교 전에 배열을 정렬하는 설정을 제공하지 않습니다. 위에서 설명한 인덱스 이동 효과를 피하려면 입력 항목의 순서를 바꾼 뒤 붙여넣는 방법밖에 없습니다.

도구 사용 방법

  1. 첫 번째 JSON 문서를 왼쪽 상자에, 두 번째 문서를 오른쪽 상자에 붙여넣습니다.
  2. 두 상자에 텍스트가 모두 들어가면 도구가 자동으로 비교합니다. 또는 Compare를 클릭해 수동으로 실행할 수 있습니다.
  3. 결과 목록을 확인합니다. 각 줄에는 user.age와 같은 경로와 해당 항목이 추가·삭제·수정되었는지가 표시되며, 이전 값과 새 값이 나란히 나타납니다.
  4. Copy를 클릭하면 결과를 일반 텍스트로 복사할 수 있습니다.

상자에 유효한 JSON이 아닌 텍스트가 들어 있으면 도구는 비교 결과 대신 해당 상자 아래에 오류를 표시합니다. 두 상자 모두 유효하지 않으면 두 오류가 동시에 나타납니다.

자주 묻는 질문

두 JSON 값 사이의 차이로 처리되는 것은 무엇인가요? 속성 또는 배열 항목이 두 문서 중 하나에만 존재하거나, 양쪽에 모두 존재하지만 값 또는 유형이 다르면 서로 다른 것으로 처리됩니다. 숫자 5에서 문자열 "5"로 값을 바꾸는 것도 서로 비슷해 보일 수 있지만 수정 사항으로 처리됩니다.

항목의 순서가 중요한가요? 컨테이너에 따라 다릅니다. JSON 객체는 멤버 순서가 정의되어 있지 않으므로 동일한 키와 값을 다른 순서로 가진 두 객체는 동일한 것으로 처리됩니다. 배열은 순서가 있으므로 도구는 인덱스 위치로 비교합니다. 따라서 항목을 다른 위치로 옮기면 이동으로 처리되지 않고 일련의 수정 사항으로 보고됩니다.

결과 경로 $는 무엇을 의미하나요? 문서의 일부가 아니라 문서 전체가 변경되었다는 뜻입니다. 예를 들어 한쪽 입력은 배열이고 다른 쪽은 객체인 경우처럼 최상위에서 두 입력의 값 유형이 다를 때 발생합니다. 일반 숫자 1과 2를 비교하는 경우도 해당합니다. $는 RFC 9535의 JSONPath 표준에 정의된 루트 식별자입니다.

내 JSON 데이터가 서버로 전송되나요? 아니요. 비교는 JavaScript를 사용해 브라우저에서 실행됩니다. 어떤 데이터도 업로드되지 않습니다.

들여쓰기나 축소와 같은 서식이 결과에 영향을 주나요? 아니요. 비교 전에 두 입력을 JSON 값으로 구문 분석하므로 공백, 들여쓰기 및 줄 바꿈은 영향을 주지 않습니다. 실제 데이터만 비교됩니다.

주석이나 후행 쉼표가 있는 JSON을 비교할 수 있나요? 아니요. RFC 8259에 정의된 표준 JSON에서는 주석이나 후행 쉼표를 허용하지 않습니다. 이러한 내용이 포함된 입력은 유효하지 않은 것으로 거부됩니다.

참고 문헌

  1. IETF. "JavaScript 객체 표기법(JSON) 데이터 교환 형식." RFC 8259, 2017년 십이월.
  2. IETF. "JavaScript 객체 표기법(JSON) 패치." RFC 6902, 2013년 사월.
  3. IETF. "JSONPath: JSON용 질의 표현식." RFC 9535, 2024년 이월. (섹션 2.2은 루트 식별자 $를 정의합니다.)
  4. Mozilla 개발자 네트워크. "JSON.parse()."