텍스트 비교 (Diff)

두 텍스트를 비교해 무엇이 추가되었고, 삭제되었고, 그대로인지를 정확히 보여 줍니다. "줄 단위"는 한 줄을 하나의 단위로 봐요 — 한 줄이 통째로 바뀌는 소스 코드나 설정 파일에 잘 맞습니다. "단어 단위"는 공백을 기준으로 나누므로, 토큰 단위의 편집을 보고 싶은 일반 문장(산문)에 더 알맞아요.

예시

텍스트 A:

function greet(name) {
  console.log("Hello, " + name);
}

텍스트 B:

function greet(name) {
  if (!name) name = "world";
  console.log(`Hello, ${name}!`);
}

줄 단위 비교 결과:

  function greet(name) {
+   if (!name) name = "world";
-   console.log("Hello, " + name);
+   console.log(`Hello, ${name}!`);
  }

자주 겪는 문제와 해결법

똑같아 보이는 줄이 바뀐 것으로 표시된다면, 거의 대부분 눈에 보이지 않는 글자나 대소문자 차이가 원인이에요. 자주 걸리는 경우들을 모아봤어요.

• CRLF vs LF 줄바꿈. 윈도우는 줄 끝을 \r\n으로, 유닉스는 \n으로 처리합니다. 한 글자 차이라도 모든 줄이 바뀐 것으로 표시돼요. "공백 무시"를 켜거나, dos2unix 또는 에디터 설정으로 맞춰 주세요.
• 줄 끝 공백. "foo "와 "foo"는 공백을 무시하지 않으면 다른 것으로 봐요. 저장할 때 줄 끝 공백을 자동으로 없애는 설정이 있으면, 건드린 줄마다 바뀐 것처럼 보일 수 있어요.
• 탭 vs 스페이스. 들여쓰기를 탭에서 스페이스로(또는 그 반대로) 바꾸면, 정확히 일치 모드에서는 들여쓰기가 있는 모든 줄이 달라 보여요. "공백 무시"를 켜거나, 먼저 양쪽을 같은 방식으로 포매팅해 주세요.
• BOM(바이트 순서 표시). UTF-8 with BOM으로 저장된 파일은 맨 앞에 보이지 않는  문자가 붙어요. BOM이 없는 파일과 비교하면 첫 줄이 항상 바뀐 것으로 표시됩니다. 에디터나 헥스 에디터에서 BOM을 제거한 뒤 붙여 넣어 주세요.
• 스마트 따옴표나 줄바꿈 없는 공백. 워드 프로세서에서 복사해 오면 "가 "로, 일반 공백이 줄바꿈 없는 공백으로 바뀌어 있을 수 있어요. 눈으로는 같아 보여도 코드 포인트가 달라요. 비교 전에 일반 ASCII로 정리해 주세요.
• 대소문자만 다른 경우. API와 api는 "대소문자 무시"를 켜지 않으면 서로 다른 문자열이에요. 비교만 느슨해질 뿐, 화면에 표시되는 원본 텍스트는 그대로 보여 드립니다.

줄 단위와 단어 단위는 어떻게 다른가요?

줄 단위는 한 줄씩 비교해요 — 한 줄에서 한 글자만 바뀌어도 그 줄 전체가 A에서 삭제되고 B에서 추가된 것으로 표시됩니다. 단어 단위는 공백 기준으로 나눠서 더 세밀하게 비교하므로 일반 문장에 잘 맞아요. 소스 코드나 설정 파일은 거의 항상 줄 단위가 적절합니다.

똑같아 보이는 줄이 왜 바뀐 것으로 표시되나요?

보통 세 가지 중 하나예요. 줄바꿈 방식(윈도우의 CRLF vs 유닉스의 LF), 줄 끝 공백, 파일 맨 앞의 BOM(바이트 순서 표시). 앞의 두 가지는 "공백 무시"를 켜면 해결됩니다. BOM은 붙여 넣기 전에 에디터나 헥스 에디터에서 제거해 주세요.

글자 단위로도 비교하나요?

아니요. 줄 단위에서는 줄, 단어 단위에서는 공백으로 구분된 토큰 기준으로 비교해요. 글자 단위 비교는 대부분의 실제 텍스트에서 결과가 너무 지저분합니다. 짧은 문자열을 글자 단위로 보고 싶다면 단어 단위 모드에 붙여 넣어 보세요 — 공백이 없으면 각 글자가 사실상 별개의 토큰이 됩니다.

입력은 얼마나 커도 되나요?

비교는 메모리에서 이뤄지므로 사실상의 한계는 브라우저 메모리예요. 한쪽이 몇 MB 정도까지는 문제없고, 수십 MB가 되면 하이라이트 HTML을 그리는 데 비교 자체보다 시간이 더 걸려 탭이 잠시 멈출 수 있어요. 아주 큰 파일은 로컬에서 GNU diff나 git diff로 돌리시는 편이 편합니다.

대소문자나 공백을 무시할 수 있나요?

네, 툴바에 토글이 있어요. "공백 무시"는 연속된 공백을 모두 같은 것으로 보므로 포매팅이 달라진 코드에 유용해요. "대소문자 무시"는 "Hello"와 "hello"를 같은 것으로 봅니다. 비교 기준만 느슨해질 뿐, 화면에 표시되는 원본 텍스트는 그대로예요.

두 상자에 붙여 넣은 텍스트를 저장하나요?

아니요. "변경 전" 텍스트도, "변경 후" 텍스트도 저희 쪽에 남지 않아요. 페이지를 닫거나 새로고침하면 비교하신 내용이 그 즉시 사라집니다. 로그도, 입력 내용 분석도 없어요. 불안하시다면 브라우저 개발자 도구에서 직접 확인해 보셔도 됩니다.