텍스트 비교 (Diff)

이런 상황에서 씁니다

수정 전후의 HTML, CSS, 설정 파일을 나란히 붙여넣어 어떤 줄이 바뀌었는지 확인합니다. Git을 쓰지 않는 간단한 정적 페이지 수정이나 문서 초안 비교처럼 빠른 육안 검토가 필요할 때 유용합니다.

텍스트 비교(Diff)란?

텍스트 비교(Diff) 도구는 두 텍스트 사이의 차이를 줄 단위 또는 단어 단위로 분석하여 추가된 부분(초록)과 삭제된 부분(빨간)을 시각적으로 표시합니다. Git의 git diff 명령어와 동일한 원리로 작동하며, 버전 관리 시스템 없이도 브라우저에서 바로 두 텍스트를 비교할 수 있습니다.

계약서 조항 변경 확인, 코드 스니펫 수정 내역 추적, 번역본과 원문 비교, 설정 파일 차이 검출 등 텍스트 변경 이력을 확인해야 하는 모든 상황에서 활용됩니다.

사용 방법

1. 원본 텍스트 입력 — 왼쪽(또는 위쪽) 입력창에 변경 전 원본 텍스트를 붙여넣습니다.
2. 수정 텍스트 입력 — 오른쪽(또는 아래쪽) 입력창에 변경 후 수정 텍스트를 붙여넣습니다.
3. 비교 실행 — "비교하기" 버튼을 클릭하면 두 텍스트의 차이가 하이라이트로 표시됩니다.
4. 결과 해석 — 초록색은 추가된 내용, 빨간색은 삭제된 내용입니다. 변경 없이 동일한 줄은 일반 색상으로 표시됩니다.
5. 좌우 바꾸기 — 원본과 수정본을 반대로 넣은 경우 "좌우 바꾸기" 버튼으로 쉽게 수정할 수 있습니다.

실무 활용 시나리오

• 배포 전 설정 검증: 운영/스테이징 설정 파일 차이를 확인합니다.
• 문서 개정 이력 확인: 계약서/가이드 문서의 수정 라인을 검토합니다.
• 코드 리뷰 보조: IDE 외부에서 빠르게 변경 라인만 공유합니다.

비교 결과가 이상할 때 점검할 것

• 공백/탭/줄바꿈 차이도 변경으로 계산됩니다. 포맷터 적용 후 비교하면 잡음을 줄일 수 있습니다.
• 원본과 수정본을 반대로 넣으면 추가/삭제 해석이 뒤집힙니다. 필요 시 좌우 바꾸기를 사용하세요.
• 아주 긴 입력은 브라우저 메모리 사용량이 늘어 반응이 느려질 수 있습니다.

결과 숫자를 읽는 법

• + additions는 오른쪽(수정본)에만 존재하는 라인 수입니다.
• - deletions는 왼쪽(원본)에만 존재하는 라인 수입니다.
• 변경(changed) 한 줄은 내부적으로 삭제 1 + 추가 1로 집계됩니다.

비교 전에 정규화하면 잡음이 줄어드는 경우

diff 결과에 "실제로는 바뀐 게 없는" 줄이 대량으로 표시된다면, 대부분 아래 세 가지가 원인입니다. 비교 전에 한쪽 기준으로 맞추면 의미 있는 변경만 남습니다.

특히 API 응답 비교에서 JSON 키 순서 문제가 자주 발생합니다. 서버는 키 순서를 보장하지 않으므로, 정렬 없이 비교하면 실제 값 변경을 찾기 어렵습니다.

Git diff와 무엇이 다른가

이 도구는 Git과 같은 계열의 알고리즘(diff-match-patch)을 사용하지만 용도가 다릅니다. Git diff는 커밋된 스냅샷 간 비교이고, 이 도구는 저장소에 없는 텍스트—메일로 받은 수정본, CMS에서 복사한 본문, 협력사가 보낸 설정 파일—를 즉석에서 비교할 때 씁니다. 저장소 커밋 이력으로 남기기 전 단계의 검토, 또는 Git을 쓰지 않는 문서 작업에서 가장 효율이 좋습니다. diff가 차이를 찾아내는 LCS·Myers 알고리즘의 동작 원리는 Diff 알고리즘 가이드에서 자세히 다룹니다.

자주 묻는 질문