JSON 키-값 구조 비교 & Diff 하이라이트 스튜디오

JSON 키-값 구조 비교 & Diff 하이라이트 스튜디오는 두 JSON 문서의 경로별 차이를 빠르게 찾는 브라우저 도구입니다. API 응답, 설정 파일, 번역 리소스처럼 중첩 구조가 많은 데이터를 붙여 넣고 추가, 삭제, 변경된 값을 바로 확인할 수 있습니다.

주요 기능

JSON 구조 비교

• 두 입력값을 JSON.parse로 검증하고 잘못된 문법은 각 입력창 아래에 표시합니다.
• 객체와 배열을 재귀적으로 펼쳐 $, $.user.name, $.items.0.price 같은 경로 단위로 비교합니다.
• 추가, 삭제, 변경, 동일 항목 수를 요약 카드로 보여줍니다.

Diff 하이라이트

• 결과 표에서 상태 배지와 색상으로 변경 유형을 구분합니다.
• 원본 값과 비교 값을 나란히 표시해 어떤 키가 달라졌는지 바로 확인할 수 있습니다.
• 필터를 사용해 추가된 값, 삭제된 값, 변경된 값만 따로 볼 수 있습니다.

모바일 대응

• 작은 화면에서는 입력 패널이 세로로 쌓이고 결과 행이 카드형으로 바뀝니다.
• 버튼과 선택 박스는 터치하기 쉬운 크기로 배치했습니다.

대상 사용자

• API 응답 변경을 검토하는 백엔드, 프론트엔드 개발자
• 환경 설정 JSON이나 배포 설정 차이를 확인하는 운영 담당자
• 다국어 번역 JSON에서 빠진 키와 변경된 문구를 찾는 콘텐츠 담당자
• 테스트 fixtures, mock data, 샘플 payload를 비교하는 QA 담당자

활용 사례

• 배포 전후 API 응답에서 새 필드가 추가됐는지 확인합니다.
• 기본 설정 파일과 운영 설정 파일의 값 차이를 경로 단위로 추적합니다.
• 번역 JSON 두 버전의 누락 키와 변경 문구를 빠르게 찾습니다.
• 배열 순서가 중요하지 않은 데이터는 배열 순서 무시 옵션으로 내용 차이에 집중합니다.

사용 방법

1. 왼쪽에는 원본 JSON, 오른쪽에는 비교할 JSON을 붙여 넣습니다.
2. 필요한 경우 키 정렬 또는 배열 순서 무시 옵션을 조정합니다.
3. 비교하기를 누르면 결과 표와 요약 숫자가 갱신됩니다.
4. 결과 필터에서 추가, 삭제, 변경, 동일 항목만 따로 확인합니다.
5. 샘플 버튼을 누르면 예시 JSON으로 기능을 바로 테스트할 수 있습니다.

제한 사항

• JSON 문법이 유효해야 비교할 수 있으며 JSON5, YAML, 주석 포함 JSON은 지원하지 않습니다.
• 매우 큰 파일은 브라우저 메모리와 렌더링 성능의 영향을 받을 수 있습니다.
• 배열 순서 무시 옵션은 배열 항목을 문자열화해 정렬하므로 복잡한 대용량 배열 분석에는 맞지 않을 수 있습니다.
• 서버 저장, 로그인, 팀 공유 기능은 포함하지 않습니다.

FAQ

JSON 파일이 서버로 업로드되나요?

아니요. 입력, 파싱, 비교는 현재 브라우저에서만 처리됩니다.

API 응답 두 개를 비교할 수 있나요?

네. 응답 본문이 유효한 JSON이면 붙여 넣어서 경로별 추가, 삭제, 변경 값을 확인할 수 있습니다.

배열 순서가 다른 경우도 같은 값으로 볼 수 있나요?

배열 순서 무시 옵션을 켜면 배열 항목을 정렬한 뒤 비교합니다. 순서 자체가 의미 있는 데이터라면 끄고 비교하세요.

JSON 문법 오류는 어디에서 확인하나요?

각 입력창 아래 상태 영역에 파싱 오류 메시지가 표시됩니다.