도구
가이드

JSON 차이 비교

JSON

두 JSON 문서를 비교하여 구조적 차이를 강조 표시합니다.

100% 클라이언트 백엔드 없음
왼쪽(원본)
오른쪽(변경)
출력
이 페이지에서

JSON diff란?#

JSON diff는 두 JSON 문서를 비교해 무엇이 바뀌었는지 정확히 알려줍니다. 어떤 필드가 새로 나타났고, 어떤 것이 사라졌고, 어떤 것이 같은 경로에 있으면서 다른 값을 가지는지입니다. 텍스트 diff의 구조적 대응물이지만, 줄을 매칭하는 대신 객체와 배열의 트리를 따라가므로, 값이 1에서 2로 바뀐 것이 재작성된 텍스트 블록이 아니라 특정 경로의 정확한 편집으로 나타납니다.

이는 JSON이 진화하는 무언가의 전송 형식일 때마다 중요합니다. 배포 사이의 API 응답, 리비전 사이의 설정 파일, 테스트 스위트의 픽스처, 날짜 사이의 내보내기 데이터. 예쁘게 출력된 두 덩어리를 나란히 보는 것은 아주 작은 문서에만 통합니다. 중첩이 깊어지면 차이를 하나하나 나열받아야 합니다.

주의할 점은 JSON diff가 배열에 대해 순서에 민감 하다는 것입니다. 두 배열은 요소가 위치별로 일치할 때만 같으며, 이는 JSON 자신이 동등성을 정의하는 방식입니다. 그래서 [a, b]와 [b, a]는 다르고 diff는 이를 보고합니다. 순서가 의미 있을 때(단계의 시퀀스)는 유용하고, 의미 없을 때(배열을 가장한 집합)는 놀라운 결과입니다.

사용 방법#

  1. 원본 문서를 왼쪽(원본) 패널에, 수정된 문서를 오른쪽(변경) 패널에 붙여넣으세요.
  2. 비교는 타이핑하는 대로 실시간으로 실행됩니다. 비교 를 눌러 강제로 갱신할 수도 있습니다.
  3. 출력 영역은 각 차이를 자기 줄에 나열합니다.
    • 추가됨 — 경로가 오른쪽에만 존재합니다. 해당 줄은 새 값을 보여줍니다.
    • 제거됨 — 경로가 왼쪽에만 존재합니다. 해당 줄은 이전 값을 보여줍니다.
    • 변경됨 — 경로가 양쪽에 모두 있지만 값이 다릅니다. 해당 줄은 이전 → 새를 보여줍니다. 각 줄에는 $.version이나 $.tags[2] 같은 JSONPath 스타일 경로가 붙어 어느 문서에서든 찾을 수 있습니다.
  4. 두 문서가 깊이 동일하다면 상태 줄이 빈 패널을 해석하게 두는 대신 “차이 없음”이라고 명시적으로 알려줍니다.
  5. 예제 는 현실적인 이전/이후 쌍을 불러오고, 지우기 는 양쪽 패널과 결과를 초기화합니다.

주요 기능#

  • 구조적이고 텍스트적이지 않음. 파싱된 값 트리를 비교하므로, 다시 들여쓰기하거나 객체 키 순서를 바꾸거나 공백을 바꾸는 것이 결코 거짓 차이를 만들지 않습니다.
  • 정확한 경로. 모든 변경은 JSONPath 표기로 위치를 알려줍니다. 루트는 $, 객체 필드는 .key, 배열 인덱스는 [i]라서 바로 올바른 자리로 갈 수 있습니다.
  • 세 가지 변경 종류. 추가, 제거, 변경이 각각 보고되고 색으로 구분되어 추가가 삭제와 편집 사이에 한눈에 듭니다.
  • 측면별 오류 보고. 한쪽 입력이 올바른 JSON이 아니면 상태 줄은 불투명하게 실패하는 대신 어느 쪽이 실패했는지 이름을 밝힙니다.
  • 실시간 비교. 어느 패널을 편집하든 diff가 갱신되어 픽스처나 응답을 다듬는 작업이 즉각적입니다.

실전 예시#

예제 를 불러오면 두 패널에 작은 설정 문서의 수정 전후가 채워집니다.

{
  "name": "ArpGate",
  "version": 1,
  "tags": ["json", "encoding"],
  "features": { "static": true, "backend": null }
}

왼쪽, 그리고 오른쪽은:

{
  "name": "ArpGate",
  "version": 2,
  "tags": ["json", "encoding", "crypto"],
  "features": { "static": true, "backend": false, "offline": true }
}

diff는 무엇이 움직였는지 정확히 나열합니다.

changed  $.version           1 → 2
added    $.tags[2]           "crypto"
changed  $.features.backend  null → false
added    $.features.offline  true

나타나지 않는 것에 주목하세요. $.name(변경 없음), $.tags[0]와 $.tags[1](변경 없음), $.features.static(변경 없음). 같은 가지는 출력을 만들지 않으므로 두 문서에 필드가 여러 개 있어도 네 줄 diff가 전부입니다. 그런 다음 양쪽 패널을 같은 문서로 설정하면 상태 줄은 “차이 없음 — 입력이 동일합니다”로 바뀝니다.

FAQ#

순서가 바뀐 배열이 전부 바뀐 것으로 나타나는 이유는?#

JSON 배열은 순서가 있고 동등성은 위치 기준입니다. [1, 2]와 [2, 1]은 인덱스 0과 인덱스 1에서 다르므로 diff는 두 변경을 보고합니다. 순서가 의미 있는 시퀀스에서는 맞는 동작입니다. 배열이 집합을 나타낸다면, 비교 전에 양쪽 문서에서 정렬(또는 정규화)하세요. 그렇지 않으면 이동이 편집으로 보입니다.

객체 키의 이름이 바뀐 것을 알아채나요?#

제거에 추가가 더해진 것으로 보고합니다. JSON에는 “이 키가 저 키가 되었다”를 표현할 수 없기 때문입니다. enabled를 active로 바꾸면 removed $.enabled와 added $.active로 나타납니다. 즉 한 줄의 “이름 변경”이 아니라 두 줄입니다. 데이터에서 무엇이 바뀌었는지에 대한 정직한 표현입니다.

타입 변경은 어떻게 보이나요?#

단일 changed 줄로 보고됩니다. 값이 문자열 "36"에서 숫자 36으로 바뀌면 diff는 해당 경로에 "36" → 36을 보여줍니다. 직렬화가 달라 타입 변환이 보입니다. null이 false가 되거나 숫자가 객체가 되는 경우에도 같습니다.

어떤 필드가 변경되지 않았는지 알 수 있나요?#

아니요, 의도적으로 그렇습니다. 변경되지 않은 모든 필드를 나열하면 실제 변경을 노이즈에 묻힙니다. diff는 델타만 보여주며 같은 가지는 조용합니다. 한 문서의 전체 모양이 필요하면 트리 뷰어로 렌더링하세요.