Diff 알고리즘의 작동 원리
이 페이지의 모든 diff 보기는 Myers 알고리즘에 의해 생성됩니다 — 1986년 Eugene W. Myers가 두 토큰 시퀀스 사이의 최단 편집 스크립트를 O((N+M)D) 시간에 찾는 기술로, D는 편집 거리입니다. 이 알고리즘은 최장 공통 부분열 문제를 기반으로 하며, 엔진은 오픈 소스 jsdiff 라이브러리를 사용해 브라우저에서 완전히 실행됩니다.
- 입력 토큰화 — 비교 전에 알고리즘이 각 입력을 토큰 시퀀스로 분리합니다. 줄 세분도는 개행 문자로 분리하고, 단어 세분도는 공백과 구두점 경계로 분리하며, 문자 세분도는 모든 Unicode 코드 포인트를 자체 토큰으로 처리합니다.
- 편집 그래프 구성 — Myers 알고리즘은 비교를 2D 격자를 통과하는 경로로 모델링합니다. 오른쪽으로 이동은 "원본에서 삭제", 아래로 이동은 "변경본에 삽입", 대각선으로 이동은 "두 곳 모두에서 토큰 일치"를 의미합니다. 알고리즘은 가장 짧은 대각선 중심 경로를 찾습니다.
- LCS 추출 — 최단 경로의 대각선 이동이 최장 공통 부분열 — 동일한 상대적 순서로 두 입력에 모두 나타나는 토큰들 — 을 추적합니다. LCS의 모든 토큰은 "변경 없음"이고, 나머지는 추가 또는 삭제입니다.
- 전처리 옵션 적용 — "대소문자 무시"를 활성화하면 LCS 처리 전에 두 입력이 모두 소문자로 변환되어 "HELLO"와 "hello"가 동일하게 처리됩니다. "공백 무시"는 여러 공백을 하나로 축소합니다. "각 줄 앞뒤 공백 제거"는 비교 전에 각 줄의 앞뒤 공백을 제거합니다.
- 선택된 보기 렌더링 — 출력은 세 가지 방식으로 표시되는 동일한 LCS 결과입니다: 나란히 보기는 왼쪽에 원본, 오른쪽에 변경본을 빨간색과 초록색 행 강조와 함께 두 열로 표시합니다. 통합 보기는
git diff출력처럼 − 및 + 접두사 줄이 있는 단일 열로 표시합니다. 인라인 보기는 동일한 텍스트 흐름 내에서 삭제는 빨간색 취소선, 추가는 초록색 밑줄로 표시합니다. - 요약 표시줄 계산 — 렌더링 후 도구가 추가, 제거, 변경 없는 토큰의 수를 세고 유사도를 변경 없는 토큰과 두 입력 길이 중 더 큰 값의 비율로 계산합니다. 유사도 100%는 전처리 옵션 적용 후 두 입력이 동일함을 의미합니다.
Diff 체커를 사용하는 이유
- Git 클라이언트 없이 코드 리뷰 — 설정 파일, SQL 마이그레이션 또는 셸 스크립트의 두 버전을 붙여 넣어 저장소를 클론하거나 브랜치를 바꾸거나 CI 파이프라인을 기다리지 않고 무엇이 변경되었는지 확인하세요. 이 도구는 페어 프로그래밍 중 빠른 검토, Git 히스토리를 공유하지 않은 외주 업체 인수인계, 버전 관리 이전의 레거시 코드베이스에서 유용합니다. 통합 보기는 채팅 스레드나 티켓에 바로 복사할 수 있는 출력을 생성합니다.
- 계약서 및 문서 수정 추적 — 단어 단위 diff는 Word의 변경 내용 추적 패널보다 계약서 초안 간에 어떤 조항이 변경되었는지 더 빠르게 보여줍니다. 첫 번째 초안에서 조항 A를, 최종 계약서에서 조항 B를 붙여 넣으면 변경된 정확한 문구가 빨간색-초록색으로 강조됩니다. 법무 담당자와 구매 팀은 계약이 서명되기 전에 막바지 수정이 검토를 통과했는지 확인하는 데 이것을 사용합니다.
- 에세이 및 초고 수정 — 첫 번째 초고와 편집된 버전을 비교하는 작가는 단어 세분도로 전환하여 두 원고를 다시 읽지 않고 모든 대체, 삽입, 삭제를 볼 수 있습니다. 동일한 워크플로우가 원본 텍스트에 대한 변경 사항을 감사하는 번역가, 카피 편집이 작가의 목소리를 보존했는지 확인하는 편집자, 게재된 기사와 제출된 초고를 조율하는 저널리즘 팀에게도 작동합니다.
- 로그 및 설정 비교 — 두 서버 설정 스냅샷, 두 Cron 스케줄 또는 두
ps aux출력을 비교하는 시스템 관리자는 줄 세분도를 사용해 200줄 파일에서 변경된 단일 파라미터를 초 내에 찾을 수 있습니다. 공백 무시 옵션과 함께 사용하면 노이즈가 많은 정렬 전용 diff가 실제로 중요한 파라미터 변경 사항으로 축소됩니다.
일반적인 활용 사례
텍스트 diff는 글쓰기, 개발, 운영 작업의 모든 편집 주기 끝에 등장합니다.
- 풀 리퀘스트 검토: 브랜치를 체크아웃하는 부담 없이 두 함수 구현을 나란히 붙여 넣어 승인 전에 로직 변경을 이해합니다.
- 국제화 QA: 영어 원본 문자열과 번역된 것을 단어 단위로 비교하여 번역자가 도입했을 수 있는 삽입, 누락 또는 용어 교체를 감지합니다.
- 인시던트 분석: 두 Kubernetes 매니페스트 스냅샷 또는 두 "docker inspect" 출력을 줄 단위로 diff하여 장애 이전의 설정 변경 사항을 분리합니다.
실전 예시
다섯 줄 서버 설정을 살펴보겠습니다. 원본: host=localhost, port=5432, dbname=app_db, user=app, password=secret. 변경됨: host=db.prod.example.com, port=5432, dbname=app_db, user=app_prod, password=secret. 줄 세분도와 나란히 보기에서 1번 줄은 왼쪽에 빨간색(host=localhost), 오른쪽에 초록색(host=db.prod.example.com), 4번 줄은 빨간색(user=app)과 초록색(user=app_prod), 2, 3, 5번 줄은 양쪽 모두 변경 없이 표시됩니다. 요약 표시줄은 추가 2, 삭제 2, 변경 없음 3, 유사도 60%를 보고합니다 — 다섯 줄 중 세 줄 유지. 단어 세분도로 전환하면 diff가 더 좁아집니다: 1번과 4번 줄에서 = 오른쪽 값만 강조되고, 키는 변경 없이 유지되며, LCS가 이제 host, user 및 주변 구두점을 유지된 것으로 세어 유사도가 약 85%로 올라갑니다.
브라우저에서 실행되나요?
예. 전체 diff 계산은 페이지와 함께 로드된 오픈 소스 jsdiff 라이브러리를 사용해 클라이언트 측에서 실행됩니다. 타이핑, 붙여 넣기 또는 비교하는 어떤 것도 서버로 전송되지 않습니다. 직접 확인할 수 있습니다: 브라우저 DevTools를 열고 Network 탭으로 전환하고 로그를 지우고 비교를 클릭하여 비교 단계에 대한 네트워크 요청이 없음을 확인하세요.
유사도 퍼센트는 무엇을 의미하나요?
유사도는 변경 없는 토큰 / max(원본 총 토큰, 변경본 총 토큰)으로 계산됩니다. 100%는 전처리 옵션(대소문자 변환, 공백 축소, 줄 앞뒤 공백 제거) 적용 후 두 입력이 동일함을 의미합니다. 0%는 입력 간에 공유되는 토큰이 없음을 의미합니다. 이 지표는 편집 거리의 대략적인 근사치입니다 — 빠른 게이지로 유용하지만 표절이나 독창성 점수가 아닙니다.
JSON / YAML / XML을 의미론적으로 diff할 수 있나요?
이 도구에서는 불가능합니다. 텍스트 수준의 diff이므로 JSON이나 XML의 공백만 다른 재포맷은 데이터가 논리적으로 동일해도 여전히 많은 변경 사항을 보여줍니다. JSON에서 객체 키 순서를 바꾸는 것도 대부분의 파서가 키 순서를 무의미하게 처리하더라도 변경 사항으로 표시됩니다. 파싱된 객체 트리를 비교하고 키 순서와 포맷을 무시하는 진정한 의미론적 diff를 위해 전용 JSON Diff 도구를 계획 중입니다. 지금은 여기에 붙여 넣기 전에 두 입력을 동일한 들여쓰기와 키 순서로 정규화하세요.
통합 보기와 나란히 보기는 어떻게 다른가요?
나란히 보기는 두 열로 렌더링합니다: 왼쪽에 원본, 오른쪽에 변경본, 제거된 줄은 왼쪽에 빨간색, 추가된 줄은 오른쪽에 초록색으로 강조됩니다. 변경 없는 줄은 같은 행에 정렬되어 양쪽 열에 나타납니다. 통합 보기는 단일 열로 렌더링합니다. 제거된 줄에는 − 접두사와 빨간색 배경, 추가된 줄에는 + 접두사와 초록색 배경이 붙습니다 — 터미널에서 git diff가 출력하는 것과 동일한 레이아웃입니다. 결과를 패치 파일로 복사하거나 코드 리뷰 스레드에 붙여 넣으려면 통합 보기를 사용하세요. 무엇이 무엇을 대체했는지 시각적 정렬이 중요할 때는 나란히 보기를 사용하세요.
왼쪽에 원본을, 오른쪽에 변경된 버전을 붙여 넣고, 보기와 세분도를 선택하면 비교가 밀리초 내에 나타납니다. 실시간 모드를 켜면 어느 쪽을 편집하든 키를 누를 때마다 diff가 다시 실행됩니다. git apply가 직접 소비하는 표준 통합 .patch 파일로 결과를 다운로드하세요. 업로드 없음, 계정 없음, 벤더 API 키 없음, 할당량 없음.