텍스트와 코드 변경점을 비교하는 Diff Viewer 화면 썸네일

요약

보기 모드

Split (좌우) · Unified (한 줄)

문법 강조

12종 (자동 감지 포함)

입력

붙여 넣기 또는 파일 드롭

처리 위치

브라우저 내부

기본 사용 순서

  • 왼쪽 영역에 기존 텍스트를, 오른쪽 영역에 변경된 텍스트를 넣습니다.
  • 붙여 넣는 대신 파일을 각 영역에 끌어다 놓아도 됩니다. 올린 파일 이름이 함께 표시됩니다.
  • 필요하면 좌우를 교체해 비교 방향을 바꿉니다.
  • 결과에서 왼쪽 복사 또는 오른쪽 복사로 한쪽 내용을 그대로 가져옵니다.

보기 모드: Split과 Unified

Split은 기존과 변경본을 좌우로 나란히 놓는 방식입니다. 두 버전의 전체 구조를 함께 봐야 할 때, 예를 들어 함수 하나가 다른 위치로 옮겨졌는지 확인할 때 유리합니다.

Unified는 한 열에 삭제와 추가를 순서대로 쌓는 방식입니다. 변경이 좁은 범위에 몰려 있을 때, 그리고 화면 폭이 좁을 때 읽기 편합니다. 화면 폭이 980px 아래로 내려가면 Split을 선택해 두었어도 자동으로 인라인 형태로 바뀌기 때문에 모바일에서도 깨지지 않습니다.

노이즈를 줄이는 옵션

실제 리뷰에서 가장 방해가 되는 것은 '의미 없는 차이'입니다. 들여쓰기만 바뀌었거나 줄 끝 공백이 정리된 변경이 섞이면, 정작 봐야 할 로직 변경이 묻힙니다. 이 도구에는 그 노이즈를 걷어내는 옵션이 있습니다.

  • 공백 차이 무시 — 앞뒤 공백만 다른 줄을 변경으로 세지 않습니다.
  • 변경 없는 구간 접기 — 바뀌지 않은 긴 구간을 접어 두고 변경 지점만 남깁니다. 필요하면 펼쳐서 문맥을 확인합니다.
  • 줄바꿈 — 긴 줄을 화면 폭에 맞춰 접습니다. 끄면 가로 스크롤로 원래 줄 구조를 유지합니다.
  • 개요 눈금자 — 편집 영역 오른쪽에 전체 변경 분포를 표시해, 문서 어디쯤에 변경이 몰려 있는지 한눈에 보여줍니다.

문법 강조 언어

언어를 지정하면 해당 문법에 맞춰 색이 입혀지고, 자동(Auto)으로 두면 내용에 따라 감지합니다. 선택할 수 있는 항목은 다음과 같습니다.

  • Auto, Plain Text
  • JavaScript, TypeScript, Python, SQL
  • JSON, YAML, XML, HTML, CSS
  • Markdown

데이터 처리

비교는 브라우저 안에서 수행되고, 편집 영역은 읽기 전용으로 동작합니다. 두 영역에 넣은 내용을 원본과 결과 양쪽에서 실수로 수정하는 상황을 막기 위한 설정입니다.

접속 주소

show-diff.igkrap.com