viewer.csslab.dev

비교 도구 (Diff)

두 텍스트를 나란히 놓고, 바뀐 줄 안에서 바뀐 낱말만 짚어 준다.

Diff 란?

diff 는 한 버전의 텍스트를 다른 버전으로 바꾸는 변경의 묶음이다. 어떤 줄이 늘었고, 어떤 줄이 빠졌고, 어떤 줄이 고쳐졌는지를 말한다. 버전 관리 시스템이 커밋마다 계산하는 그것이고, 이 도구는 저장소 없이 붙여넣은 두 덩어리에 대해 같은 계산을 한다.

줄을 나란히 맞춰 놓고, 고쳐진 줄 안에서는 실제로 달라진 낱말만 칠한다. 긴 줄에서 글자 하나가 바뀐 경우에도 두 줄을 눈으로 대조하지 않고 바로 보인다. 비교는 브라우저 안에서만 일어난다 — 비교 대상이 운영 설정과 스테이징 설정일 때 이 점이 중요해진다.

diff — compare files line by line
POSIX.1-2024, diff 유틸리티

기능

바뀐 줄 안에서 낱말 단위로
대개의 비교 도구는 줄 전체를 다르다고 칠한다. 이 도구는 짝지어진 줄마다 한 번 더 비교해 달라진 낱말만 표시한다. 변화를 알아보는 것과 찾아 헤매는 것의 차이가 여기서 갈린다.
JSON 을 아는 비교
JSON 으로 비교를 켜면 양쪽을 파싱해 키를 정렬하고 다시 직렬화한 뒤 비교한다. 키 순서나 들여쓰기만 다른 두 응답은 같은 것으로 나오고, 진짜 값 차이만 남는다.
공백·대소문자 무시
다시 들여쓰기했거나 줄 끝 공백이 붙었거나 헤더의 대소문자가 바뀐 것 같은 잡음을 빼고, 뜻 있는 수정만 남긴다.
바뀐 줄만 보기
같은 줄을 접는다. 긴 파일에서 바뀐 세 줄을 찾겠다고 수천 줄을 스크롤하는 것이 비교 도구에서 가장 흔한 헛수고다.
업로드하지 않는다
비교는 사용자의 기기에서 자바스크립트로 계산된다. 설정 파일·로그·쿼리 결과를 어느 쪽도 서버에 보내지 않고 견줄 수 있다.

사용법

  1. 1

    두 버전을 붙여넣는다

    왼쪽에 원본, 오른쪽에 바뀐 것을 놓는다.

  2. 2

    양쪽이 JSON 이면 JSON 모드를 켠다

    키를 정렬하고 형식을 맞춘 뒤 비교하므로 진짜 값 차이만 드러난다.

  3. 3

    잡음을 걸러낸다

    다시 포맷해서 결과가 지저분해졌다면 공백이나 대소문자를 무시한다.

  4. 4

    표시된 낱말을 읽는다

    빠진 것은 왼쪽에 빨강, 더해진 것은 오른쪽에 초록으로 표시되고, 줄 안에서 바뀐 낱말이 따로 칠해진다.

똑같아 보이는데 같지 않은 두 한글 문자열

유니코드는 같은 한글 음절을 두 가지로 적을 수 있다. 하나로 합쳐진 코드 포인트(NFC, 한 = U+D55C)로 적거나, 자모를 늘어놓아(NFD, U+1112 U+1161 U+11AB) 적는다. 화면에는 똑같이 그려지고 비교하면 다르다. 맥은 오랫동안 파일 이름을 NFD 로 정규화했고 윈도우와 리눅스는 NFC 를 쓰므로, 맥을 한 번 거친 텍스트는 화면상 아무것도 안 바뀐 채로 모든 음절이 원본과 다를 수 있다.

이 비교는 바이트에 충실하므로 그런 줄을 바뀐 것으로 표시한다. 그게 맞다 — 실제로 다른 문자열이다. 알고 싶은 차이가 인코딩이 아니라 뜻이라면 양쪽을 먼저 정규화한다. 자바스크립트는 String.prototype.normalize("NFC"), 파이썬은 unicodedata.normalize 다. 전각과 반각 라틴 문자, 유럽 언어의 결합 악센트도 같은 함정에 걸린다.

자주 묻는 질문

두 JSON 파일을 어떻게 비교하나?

양쪽에 하나씩 붙여넣고 JSON 으로 비교를 켠다. 양쪽을 파싱해 키를 정렬한 뒤 다시 직렬화해 비교하므로 키 순서·들여쓰기·공백 차이는 사라지고 실제 값 차이만 남는다.

똑같아 보이는 두 파일이 전부 다르다고 나온다

대개 줄 끝 문자다. 윈도우에서 저장한 파일은 줄을 CRLF 로 끝내고 유닉스에서 저장한 파일은 LF 로 끝내서, 보이는 글자가 같아도 모든 줄이 다르다. 이 도구는 비교 전에 줄 끝을 맞추므로 그 오작동은 여기서 일어나지 않는다.

텍스트가 서버로 전송되나?

아니다. 비교는 브라우저에서 돌고 이 페이지에는 백엔드가 없다. 양쪽 모두 기기에 남는다. 운영 설정과 스테이징 설정을 견주어도 되는 이유다.

코드도 비교할 수 있나?

된다. 평문을 줄 단위로 비교하므로 소스 파일·로그·CSV 내보내기·설정이 모두 된다. 언어를 파싱하지는 않으므로 두 코드가 의미상 같다는 것까지는 말해 주지 않는다. 글자가 다르다는 것만 말한다.

낱말 단위 표시는 정확히 뭘 하나?

왼쪽 줄과 오른쪽 줄이 짝지어지면 그 짝 안에서 낱말 단위로 한 번 더 비교한다. 줄 전체가 아니라 달라진 낱말만 칠하므로 긴 줄에서 한 글자가 바뀐 경우도 바로 보인다.

크기 제한이 있나?

정해진 상한은 없지만 비교는 최악의 경우 제곱으로 늘어난다. 수십만 줄 같은 아주 큰 입력에서는 화면이 느려진다. 그 정도 파일은 로컬 diff 도구가 맞는 연장이다.

이 도구가 따르는 규격

함께 쓰는 도구