본문으로 건너뛰기
🛠️
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] 같은 경로와 함께 기록되므로 원본 문서에서 쉽게 찾을 수 있습니다.

객체 비교

두 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 객체의 멤버에는 정해진 순서가 없으므로, 키와 값이 같고 순서만 다른 두 객체는 동일한 것으로 처리됩니다.

배열 항목의 순서가 중요합니까? 네. 배열은 인덱스 위치로 비교되므로, 항목을 배열의 다른 위치로 옮기면 이동이 아니라 일련의 수정으로 처리됩니다.

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

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

주석이나 후행 쉼표가 있는 JSON도 비교할 수 있습니까? 아니요. RFC 8259에서 정의한 표준 JSON에는 주석 구문이 없고, 배열과 객체에는 후행 쉼표를 둘 수 없습니다. 브라우저의 JSON 파서는 이러한 입력을 올바르지 않은 것으로 거부합니다.

참고 자료

  1. 인터넷 엔지니어링 태스크 포스. RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format. RFC 8259 — 객체는 이름/값 쌍의 순서 없는 집합이고, 배열은 순서가 있는 나열이며, 문법은 토큰 사이에 공백만 허용합니다.
  2. Mozilla 개발자 네트워크. JSON.parse(). JSON.parse() 참고 문서 — 올바르지 않은 JSON은 SyntaxError를 발생시키며, 배열과 객체에는 후행 쉼표를 둘 수 없습니다.