COMPAREDIFFFORMATTING

텍스트 디프 체커

두 개의 텍스트나 소스 코드 파일을 비교하여 추가되거나 삭제된 차이점을 시각적으로 보여줍니다.

Original Text

Modified Text

Sync Scroll

1-// Enter your original code or text here

2-function greet(name) {

3- console.log("Hello, " + name);

6-greet("World");

1+// Enter your modified code or text here

2+function greetUser(name, title = "Developer") {

3+ console.log(`Hello, ${title} ${name}!`);

6+greetUser("Antigravity");

도구 설명 및 사용 방법

두 개의 텍스트나 소스 코드 스니펫을 비교하여 변경점을 식별합니다. 라인별/문자별로 추가(Green) 및 삭제(Red)된 내용을 강조 표시하여 데이터의 무결성을 빠르게 확인하도록 돕습니다.

사용 단계

왼쪽 입력 칸에 원본(Original) 텍스트를 기입하고, 오른쪽 입력 칸에 수정본(Modified) 텍스트를 붙여넣습니다.

상단의 보기 모드에서 병렬 비교(Split View) 또는 한 줄에 모아보기(Unified View)를 토글 선택합니다.

실시간으로 각 텍스트 줄 and 단어 단위의 세밀한 추가/삭제 변경점이 하이라이트 표시됩니다.

"Sync Scroll" 기능을 통해 어느 쪽 에디터를 스크롤하더라도 반대편이 동기화되어 스크롤되므로 비교가 간편합니다.

작동 원리 및 상세 설명

디프 체커(Diff Checker)는 두 개의 텍스트나 소스 코드 파일 사이의 미세한 텍스트 줄(Line)과 단어(Character) 차이점을 계산하고 이를 시각적으로 하이라이트 해주는 도구입니다. 버전 관리 도구(Git)의 diff 메커니즘과 유사하며 리팩토링 전후의 영향 분석, 코드 리뷰, 두 설정 파일 간 비교 시 매우 유용합니다. 이 도구는 대표적인 최장 공통 부분 수열(LCS, Longest Common Subsequence) 이론을 근간으로 하는 마이어스 차이 알고리즘(Myers' Diff Algorithm)을 사용하여 작동합니다. 두 입력 텍스트 간의 최소 수정 편집 거리(Edit Distance)를 경로 탐색 기법으로 산출하여 가장 효율적으로 변경된 지점(추가/삭제)을 찾아냅니다. 각 수정본의 줄번호를 실시간 매칭하는 것 외에도, 줄 내부의 단어 수준 차이점을 추적하여 추가된 부분(초록색)과 삭제된 부분(빨간색)을 픽셀 및 글자 레벨로 미세 하이라이트함으로써 가시성을 극대화합니다.

자주 묻는 질문 (FAQ)

대소문자 구분을 포함해 공백 차이점도 걸러낼 수 있나요?

예, 디프 체커는 줄바꿈, 띄어쓰기, 탭(Tab) 기호 및 대소문자 차이점을 한 글자씩 철저히 판별합니다.

대용량 소스 코드를 넣어도 동작에 문제가 없나요?

수천 줄 분량의 소스 코드 비교도 브라우저 내부 메모리 내에서 최적화 알고리즘(Myers' Diff Algorithm)을 사용하여 매우 빠르게 연산합니다. 다만 수만 줄 이상의 거대 파일은 브라우저 렌더링 한계로 인해 일시적으로 느려질 수 있습니다.

코드 사용 예시

Git Diff 예시 구조

diff

 const appConfig = {
-  debug: true,
-  port: 8080
+  debug: false,
+  port: 3000,
+  env: "production"
 };

라인 단위 수정 및 추가(plus)와 삭제(minus)를 시각화한 diff 마크다운 표기 예시입니다.