텍스트 비교 Text Diff (광고없음)
온라인 Text Diff로 두 텍스트의 차이점 비교하기
두 문서나 텍스트를 비교하면서 어떤 내용이 추가되고 삭제되었는지 직접 확인하는 일은 생각보다 번거롭습니다.
특히 텍스트가 길거나 일부 단어와 글자만 변경된 경우에는 차이점을 찾기가 더욱 어렵습니다.
이러한 작업을 편리하게 할 수 있도록 두 텍스트의 차이점을 줄, 단어, 글자, 문장 단위로 분석하고 비교해 주는 Text Diff 서비스를 만들었습니다.
서비스 주소
https://coffeetalk.co.kr/textdiff
1. 다양한 텍스트 비교 모드
텍스트의 특성과 비교 목적에 따라 네 가지 비교 단위를 선택할 수 있습니다.
줄 단위 비교
각 줄을 기준으로 추가, 삭제, 수정된 부분을 감지합니다.
단어 단위 비교
텍스트를 단어 단위로 나누어 변경된 내용을 비교합니다.
글자 단위 비교
글자 하나하나를 기준으로 미세한 차이까지 비교합니다.
문장 단위 비교
문장 구조를 기준으로 두 텍스트의 차이를 분석합니다.
2. 비교 상세 옵션
비교 결과에 포함할 차이의 범위를 설정할 수 있습니다.
대소문자 무시
영문 대문자와 소문자의 차이를 구분하지 않고 텍스트의 흐름을 비교합니다.
줄바꿈 및 공백 무시
공백이나 빈 줄의 차이를 제외하고 의미 있는 텍스트의 차이만 추출합니다.
3. 시각적인 비교 결과 뷰어
비교 결과는 좌우 보기와 한눈에 보기 방식으로 확인할 수 있습니다.
좌우 보기
원본 Base 텍스트와 비교할 Contrast 텍스트를 화면 양옆에 나란히 배치하여 보여줍니다.
스크롤 동기화
한쪽 비교 화면을 스크롤하면 반대쪽 화면도 같은 위치로 자동 이동합니다.
두 텍스트의 동일한 위치를 함께 확인할 때 편리합니다.
수정된 줄 내부의 세부 차이 표시
줄 단위 비교에서 수정된 줄이 발견되면 해당 줄 안에서 구체적으로 어떤 단어가 변경되었는지 다시 비교하여 강조 표시합니다.
한눈에 보기
두 텍스트의 변경 이력을 하나의 화면에 합쳐 위아래로 보여줍니다.
추가된 텍스트는 초록색의 +, 삭제된 텍스트는 빨간색의 -로 표시됩니다.
4. 차이점 분석 및 빠른 이동 사이드바
Diff Sidebar는 줄 단위 비교 모드에서 동작합니다.
차이점 통계
비교 결과를 추가됨, 삭제됨, 수정됨으로 분류하고 각각의 개수를 보여줍니다.
카테고리별 필터링
추가, 삭제, 수정 항목을 각각 활성화하거나 비활성화하여 원하는 종류의 차이점만 목록에서 확인할 수 있습니다.
빠른 위치 이동
사이드바에 표시된 차이점 항목을 클릭하면 본문의 해당 위치로 부드럽게 스크롤하여 이동합니다.
5. 내장 텍스트 에디터 기능
각 입력 영역은 TextEditorPage를 활용한 텍스트 에디터로 구성되어 있습니다.
실행 취소와 다시 실행
작성 내용을 이전 상태로 되돌리거나 다시 적용할 수 있습니다.
파일 불러오기 및 저장
컴퓨터에 있는 텍스트 파일을 불러올 수 있으며, 작성 중인 내용을 파일로 내보내거나 다른 이름으로 저장할 수 있습니다.
찾기와 바꾸기
검색 패널을 이용하여 원하는 텍스트를 찾거나 다른 내용으로 바꿀 수 있습니다.
선택된 줄 정렬
선택한 여러 줄을 정렬할 수 있습니다.
특정 줄과 열로 이동
원하는 줄이나 열 위치를 지정하여 바로 이동할 수 있습니다.
문서 인쇄
현재 작성하거나 비교 중인 텍스트를 인쇄할 수 있습니다.
문서 통계 확인
공백을 제외한 글자 수, 단어 수, 줄 수, 전체 길이 등의 정보를 실시간으로 확인할 수 있습니다.
자동 줄바꿈과 읽기 전용 모드
자동 줄바꿈 기능을 켜거나 끌 수 있으며, 편집을 방지하기 위한 읽기 전용 모드로 전환할 수 있습니다.
기본 편집 기능
전체 선택, 잘라내기, 복사, 붙여넣기 기능을 아이콘으로 제공합니다.
단축키 지원
다음과 같은 에디터 단축키를 사용할 수 있습니다.
Ctrl + S 저장
Ctrl + O 파일 열기
Ctrl + G 특정 줄로 이동
6. 원본과 비교 텍스트 교체
Swap 기능을 사용하면 원본 Base 텍스트와 비교 Contrast 텍스트의 내용을 서로 바꿀 수 있습니다.
7. 예시 데이터 제공
예시 데이터 버튼을 누르면 Text Diff 기능을 체험할 수 있는 샘플 텍스트가 자동으로 입력됩니다.
별도의 비교 문장을 준비하지 않아도 각 비교 모드의 결과를 바로 확인할 수 있습니다.
8. 입력 내용 자동 저장
사용자가 입력한 원본 텍스트와 비교 텍스트는 브라우저 로컬 스토리지에 자동으로 저장됩니다.
페이지를 새로고침하거나 페이지에서 벗어난 뒤 다시 돌아와도 마지막 작업 상태를 유지할 수 있습니다.
9. 비교 결과 내보내기
분석한 비교 결과는 두 가지 방식으로 내보낼 수 있습니다.
비교 결과 복사
변경 결과를 Git Diff 형식 등의 텍스트 형태로 클립보드에 복사할 수 있습니다.
분석 보고서 다운로드
비교 결과와 통계가 포함된 JSON 형식의 분석 보고서를 다운로드할 수 있습니다.
다운로드 파일명은 다음과 같습니다.
text-diff-report.json
10. 다크 모드와 라이트 모드
다크 모드와 라이트 모드를 지원합니다.
화면에서 원하는 테마를 선택하여 전환할 수 있습니다.
11. 한국어와 영어 지원
다국어 기능을 적용하여 한국어와 영어 화면을 모두 지원합니다.
브라우저 환경에 맞게 언어를 변환하여 사용할 수 있습니다.
마무리
이번에 구현한 Text Diff 서비스는 두 텍스트의 차이점을 줄, 단어, 글자, 문장 단위로 비교할 수 있습니다.
좌우 보기와 한눈에 보기, 스크롤 동기화, 수정된 줄 내부 비교, 차이점 통계와 빠른 위치 이동 기능도 함께 제공합니다.
또한 파일 열기와 저장, 찾기와 바꾸기, 문서 통계, 자동 저장, 비교 결과 복사와 JSON 보고서 다운로드 등 텍스트 비교 작업에 필요한 다양한 기능을 사용할 수 있습니다.
아래 페이지에서 Text Diff 기능을 확인할 수 있습니다.
https://coffeetalk.co.kr/textdiff
