본문으로 건너뛰기

Advanced Diff Checker

두 텍스트의 차이점을 시각적으로 비교합니다. 코드 리뷰, 문서 비교, 변경사항 추적에 유용합니다.

Text 1 (Original)
Text 2 (Modified)

주요 기능​

  • 2가지 표시 모드: Unified(통합), Side by Side(양면 비교)
  • 고급 옵션: 공백 무시, 대소문자 무시
  • 실시간 통계: 추가/삭제/변경 없음 라인 수
  • 구문 강조: 변경된 라인 시각적 표시
  • 라인 번호: 각 라인의 번호 표시

표시 모드​

1. Unified (통합 모드)​

모든 변경사항을 하나의 뷰에서 표시합니다.

특징:

  • 🟩 초록색: 추가된 라인 (+)
  • 🟥 빨간색: 삭제된 라인 (-)
  • ⬜ 흰색: 변경 없음

사용 시기:

  • Git diff 스타일 선호
  • 전체 변경사항 한눈에 파악
  • 작은 화면에서 사용

2. Side by Side (양면 비교)​

원본과 수정본을 나란히 표시합니다.

특징:

  • 왼쪽: 원본 텍스트
  • 오른쪽: 수정된 텍스트
  • 🟨 노란색 배경: 변경된 라인

사용 시기:

  • 직관적인 비교 필요
  • 전체 컨텍스트 확인
  • 큰 화면 사용

고급 옵션​

Ignore Whitespace (공백 무시)​

들여쓰기나 공백 변경을 무시하고 내용만 비교합니다.

예시:

// 공백 무시 활성화 시 동일하게 인식
function hello() {
    console.log("hi");
}

function hello() {
  console.log("hi");
}

사용 시기:

  • 코드 포맷팅 변경 무시
  • 들여쓰기 스타일 차이 무시
  • 실제 내용 변경만 확인

Ignore Case (대소문자 무시)​

대문자와 소문자를 구분하지 않고 비교합니다.

예시:

// 대소문자 무시 활성화 시 동일하게 인식
Hello World
HELLO WORLD
hello world

사용 시기:

  • 텍스트 내용 비교
  • 대소문자 변경 무시
  • 일반 문서 비교

사용 시나리오​

시나리오 1: 코드 리뷰​

// Original (리뷰 전)
function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  }
  return total;
}

// Modified (리뷰 후)
function calculateTotal(items) {
  return items.reduce((total, item) => total + item.price, 0);
}

분석:

  • 🟥 삭제: 4줄
  • 🟩 추가: 1줄
  • 리팩토링으로 코드 간소화

시나리오 2: 설정 파일 비교​

# Production
server:
  port: 8080
  host: 0.0.0.0
database:
  name: prod_db
  user: admin

# Development
server:
  port: 3000
  host: localhost
database:
  name: dev_db
  user: dev

분석:

  • 환경별 설정 차이 확인
  • 프로덕션 vs 개발 환경 비교

시나리오 3: 문서 버전 비교​

# Version 1.0
This is the original documentation.

# Version 2.0
This is the updated documentation with new features.

분석:

  • 문서 변경사항 추적
  • 버전 간 차이 확인

통계 정보​

도구는 다음 통계를 제공합니다:

Additions (추가)​

  • 새로 추가된 라인 수
  • 🟩 초록색으로 표시

Deletions (삭제)​

  • 삭제된 라인 수
  • 🟥 빨간색으로 표시

Unchanged (변경 없음)​

  • 동일한 라인 수
  • ⬜ 흰색으로 표시

실전 활용 팁​

1. Git Diff 결과 확인​

Git에서 생성한 diff를 복사하여 확인:

git diff > changes.diff
# changes.diff 내용을 도구에 붙여넣기

2. Pull Request 리뷰​

  • GitHub PR의 변경사항 복사
  • 도구에서 Side by Side로 확인
  • 전체 맥락 파악

3. 설정 파일 검증​

  • 프로덕션 설정 복사
  • 개발 설정과 비교
  • 차이점 확인 및 검증

4. 문서 업데이트 추적​

  • 이전 버전 문서
  • 새 버전 문서
  • 변경사항 하이라이트

비교 알고리즘​

이 도구는 라인 기반 비교를 사용합니다:

  1. 라인 분리: 텍스트를 줄 단위로 분리
  2. 옵션 적용: 공백/대소문자 무시 설정 적용
  3. 라인 비교: 각 라인을 순차적으로 비교
  4. 결과 분류:
    • 동일: 변경 없음
    • 차이: 삭제 + 추가로 표시

제한사항​

현재 지원하지 않는 기능​

  • ❌ 단어 수준 diff (현재는 라인 수준만)
  • ❌ 3-way merge
  • ❌ 패치 파일 생성
  • ❌ 바이너리 파일 비교

향후 추가 예정​

  • ✅ 단어 단위 하이라이팅
  • ✅ 블록 이동 감지
  • ✅ 더 정교한 알고리즘
  • ✅ 내보내기 기능

모범 사례​

✅ 권장사항​

  1. 의미 있는 비교

    • 관련 있는 텍스트 비교
    • 동일한 포맷의 파일 비교

  2. 적절한 옵션 사용

    • 코드 비교: 공백 무시
    • 텍스트 비교: 대소문자 무시

  3. 표시 모드 선택

    • 작은 변경: Unified
    • 큰 변경: Side by Side

❌ 피해야 할 사항​

  1. 너무 긴 텍스트

    • 성능 저하 가능
    • 파일 크기: 1MB 이하 권장

  2. 다른 형식의 파일

    • JSON vs YAML
    • XML vs JSON

  3. 바이너리 데이터

    • 이미지, 실행 파일 등

키보드 단축키​

현재 버전에서는 마우스 조작만 지원하지만, 향후 버전에서 다음 단축키가 추가될 예정입니다:

  • Ctrl+Enter: 비교 실행
  • Ctrl+S: Swap
  • Ctrl+C: Clear
  • Ctrl+I: Ignore Whitespace 토글
  • Ctrl+K: Ignore Case 토글

관련 도구​

추가 자료​