← 기능 섹션으로 돌아가기
Free

디프(Diff) 도구

디프 도구는 두 텍스트 블록을 비교하여 추가, 삭제 및 변경되지 않은 라인을 색상별로 표시합니다. 통합 뷰(Git 스타일)와 좌우 나란히 보기(Side-by-side) 뷰를 지원하며 공백 무시, 대소문자 무시 옵션을 제공합니다. 수정 사항 검증, 설정 파일 비교, API 응답 확인 등에 유용합니다.

두 버전의 텍스트를 비교하는 작업은 설정 파일 변경 사항 검토, API 응답 대조, 문자열 마이그레이션 확인 등 일상적으로 발생합니다. 디프 도구는 이를 깔끔하게 처리합니다. 텍스트 A(원본)와 텍스트 B(수정본)를 붙여넣고 '비교'를 클릭하세요. 결과물은 모든 라인을 추가(초록색, + 표시), 삭제(빨간색, − 표시), 또는 변경 없음으로 분류하여 보여줍니다. 통합 뷰(Git 스타일로 모든 항목을 쌓아서 표시)와 좌우 나란히 보기(두 열을 정렬하여 표시) 모드 중에서 선택할 수 있습니다. 최장 공통 부분 수열(LCS) 알고리즘을 사용하여 단순 라인 비교보다 정밀한 정렬을 제공합니다. 공백 무시 및 대소문자 무시 토글은 의미 없는 서식 차이를 걸러내고 실제 변경 사항에 집중할 수 있게 도와줍니다. 상단의 통계를 통해 추가/삭제/변경되지 않은 라인 합계를 한눈에 확인하세요.

라이브 미리보기
example.com
Diff 도구 +3개 추가됨 −2개 제거됨 5개 변경 없음
통합(Unified) 나란히 보기(Side-by-side)
1 1 function greet(name) {
2 console.log("Hi " + name);
2 + console.log(`Hello, ${name}!`);
3 + console.log(`Welcome back.`);
3 4 }
4 5  
5 greet("world");
6 + greet("Alice");
6 7 greet("Bob");
주요 기능

라인 단위 디프

LCS 알고리즘을 사용하여 모든 라인을 추가, 삭제, 변경 없음으로 분류하고 최적화된 정렬로 보여줍니다.

통합 및 좌우 나란히 보기

Git 스타일의 통합 뷰(모든 항목 누적)와 좌우 나란히 보기(두 열 배치) 레이아웃 중 읽기 편한 방식을 선택하세요.

색상별 출력 표시

추가된 라인은 + 기호와 함께 초록색으로, 삭제된 라인은 − 기호와 함께 빨간색으로 표시됩니다. 변경되지 않은 라인은 중립 색상으로 처리되어 시각적 스캐닝이 빠릅니다.

공백 / 대소문자 무시

사소한 서식 차이를 무시하는 옵션을 통해 의미 있는 변경 사항에만 집중할 수 있습니다.

디프 통계

상단 바에 "+N 추가 −N 삭제 N 변경 없음" 개수가 표시되어 모든 라인을 훑어보지 않아도 요약을 확인할 수 있습니다.

대용량 입력에도 빠른 속도

수천 줄의 텍스트도 밀리초 단위로 처리합니다. 대용량 입력 시에도 UI 응답성을 유지하도록 설계되었습니다.

주요 활용 사례

저장 전 수정 사항 검토

파일을 덮어쓰기 전에 이전 버전과 새 버전을 붙여넣어 의도한 변경 사항만 포함되었는지, 실수로 지워진 부분은 없는지 확인하세요.

API 응답 비교

버그 수정 전후의 API 응답을 캡처하여 비교해 보세요. 변경된 내용이 의도한 부분에 국한되었는지 검증할 수 있습니다.

설정 파일 대조

두 환경의 설정(개발 환경 vs 운영 환경, 이전 vs 신규)을 비교하여 미세한 버그를 유발할 수 있는 차이점을 찾아내세요.

포맷팅된 출력물 검증

포맷터를 실행한 후 원본과 결과물을 비교하여 오직 공백/서식만 바뀌었는지, 즉 의미적 변화(Semantic drift)가 없는지 확인하세요.

텍스트 마이그레이션 확인

페이지나 문서 전체의 문구를 업데이트할 때, 이전본과 새 본을 비교하여 모든 번역이나 수정 사항이 정확하게 반영되었는지 확인하세요.

사용법
1

디프 도구 열기

DevSuite Pro 독에서 디프(Diff) 아이콘을 클릭합니다. 두 개의 텍스트 영역이 나란히 있는 패널이 열립니다.

2

텍스트 A와 B 붙여넣기

텍스트 A 영역엔 원본을, 텍스트 B 영역엔 수정본을 붙여넣으세요. 코드, JSON, 로그, 일반 텍스트 등 모든 형식이 가능합니다.

3

옵션 설정

서식이나 대소문자 차이를 제외하고 싶다면 '공백 무시' 또는 '대소문자 무시'를 활성화하세요.

4

비교 클릭

'비교' 버튼을 누릅니다. 색상별로 구분된 디프 결과와 상단 통계가 즉시 렌더링됩니다.

5

뷰 전환 (선택 사항)

통합 뷰와 좌우 나란히 보기 뷰를 전환해 보세요. 통합 뷰는 좀 더 간결하고, 나란히 보기는 대조 정렬이 더 명확합니다.

시작할 준비가 되셨나요?

DevSuite Pro를 무료로 설치하고 브라우저용 64개 이상의 개발자 도구를 사용해보세요.

Chrome에 추가 Edge에 추가 Firefox에 추가