[HTML 코드 공유] SmartCompare - 웹 기반 줄 단위 파일 비교 & 편집 도구

👉 SmartCompare 실행 / 다운로드
위 코드를 '다른 이름으로 링크 저장...'을 눌러서 사용자 PC의 바탕화면에 내려 받아서 사용해도 되고, 위 코드 링크를 눌러 실행해도 됩니다. 이 경우 사용자 파일은 사용자의 PC에서만 실행되며, 어떤 외부 서버로도 전송되지 않으므로 보안문제는 안심해도 됩니다.

소개

SmartCompare는 설치 없이 웹 브라우저에서 바로 실행되는 줄단위 텍스트 비교·편집 도구입니다.
HTML 파일 하나로 동작하며, 외부 서버 연결 없이 완전히 로컬에서 실행됩니다.

UltraCompare의 화면 배치를 참고하여 양쪽 두 파일을 나란히 비교하는 구조를 갖추고 있으며,
VSCode의 Diff Viewer처럼 직관적인 차이 표시 기능을 제공합니다.
하지만 일반 에디터가 아니라, 줄 단위의 비교·복구·정리 작업에 특화된 도구라는 점이 가장 큰 특징입니다.

제작 취지

일반적인 파일 비교 도구들은 다음과 같은 문제점이 있습니다:

• UltraCompare, BeyondCompare 등 유명 도구들은 대부분 유료이며 설치가 필요함
• 기능이 지나치게 많아 버전 관리나 간단한 라인 비교·수정만 필요한 사용자에게는 과함
• 일반 에디터처럼 글자 단위 편집이 가능해, 원본을 실수로 잘못 수정하는 실수가 발생하기 쉬움

SmartCompare는 이러한 문제를 해결하기 위해 만들어졌습니다.

설계 철학

1. 줄단위 버전 관리 중심
   두 파일에서 "어떤 줄이 바뀌었는지"를 파악하며 수정해야 하는 작업에 최적화되어 있습니다.
2. 원본 보호
   좌측 파일은 항상 읽기 전용이며, 실수로 편집되는 일이 없습니다.
3. 안전한 편집 방식
   • 좌측 원본에서 정상 라인을 우측으로 복사
   • 우측에서 잘못된 라인을 삭제
   • 우측 파일은 복사 후 직접 편집 가능 (줄 단위)세 가지 안전한 방식을 제공하여 실수 발생 가능성을 최소화했습니다.
4. 가볍고 즉시 실행 가능
   • 설치 필요 없음
   • 브라우저만 있으면 바로 실행
   • 인터넷 연결 없이 오프라인에서도 동작
5. 무료·오픈소스
   누구나 검증 가능하고, 수정·배포가 자유로운 MIT 라이선스입니다.핵심 기능
6. 주요 기능

• 두 파일의 차이점을 색상으로 시각화하는 Diff 기능
• 좌측(원본)은 읽기 전용, 우측은 편집 가능
• 좌측 → 우측 라인 복사 (한 줄 또는 여러 줄)
• 우측 라인 삭제
• 우측 라인 직접 편집 (복사 후 활성화)
• 대소문자·정규식 지원 찾기 기능
• 자동 저장 기능 (1~20분 주기 설정 가능)
  변경이 있을 때만 타임스탬프 파일로 자동 백업
• Undo / Redo (최대 50단계)
• 양쪽 스크롤 동기화
• 디버그 로그 확인 기능
• 편의 기능
• Ctrl+S : 저장
• Ctrl+Z / Ctrl+Y : 실행 취소·재실행
• Ctrl+F : 검색
• Ctrl+클릭 : 다중 선택
• Shift+클릭 : 범위 선택

실행 방법 1: HTML 파일 다운로드 후 실행 (권장)

• SmartCompare.html 파일을 다운로드
• 브라우저에 드래그하거나 더블클릭하여 실행
• 즉시 사용 가능

실행 방법 2: 링크로 바로 실행

• 제공된 링크 클릭
• 별도 설치 없이 즉시 실행

모든 기능은 로컬에서만 동작하며, 파일이 서버로 전송되지 않습니다.

파일 비교

1. 좌측 패널에서 원본 파일 선택 (파일 열기 버튼)
2. 우측 패널에서 수정 대상 파일 선택 (파일 열기 버튼)
3. 파일이 로드되면 자동으로 Diff 결과가 표시됩니다.2. 색상 의미

• 🟢 녹색 : 우측에만 존재 → 추가된 라인
• 🔴 빨강 : 좌측에만 존재 → 삭제된 라인
• 🟡 노랑 : 동일 위치지만 내용 다름 → 변경된 라인
• ⚪ 흰색 : 동일한 라인
• 3. 줄 선택 방법
• 단일 클릭 : 줄 번호 클릭
• Ctrl + 클릭 : 여러 줄 선택 (다중 선택)
• Shift + 클릭 : 범위 선택
• 4. 줄단위 편집 (핵심)

SmartCompare는 줄 단위 편집기입니다.

가능한 작업

• 좌측 라인을 선택 후 "→ 우측으로 복사" 버튼 클릭
• 우측 라인을 선택 후 "🗑️ 삭제" 버튼 클릭
• 우측 라인을 직접 클릭하여 텍스트 편집 (복사 후 활성화)
• 여러 줄 동시 복사·삭제

편집 방식

• 우측 파일은 초기에는 보호 상태입니다
• 좌측에서 한 번이라도 복사를 하면 우측 파일이 편집 가능 상태로 변경됩니다
• 편집 가능 상태에서는 각 줄을 클릭하여 직접 텍스트를 수정할 수 있습니다
• Enter 키는 차단되어 있어 줄 추가는 불가능합니다 (줄 단위 편집 유지)

불가능한 작업

• Enter를 눌러 새로운 줄 추가
• 줄 순서 변경수동 저장 (Ctrl+S)
• 파일 저장
• 현재 우측 편집본을 브라우저 다운로드 방식으로 저장
• 원본 파일명으로 다운로드 폴더에 저장됩니다
• 양쪽 파일 원본은 수정되지 않습니다
• 자동 저장
• 상단 헤더에서 자동 저장 주기 설정 (1~20분)
• 지정한 시간마다 변경 여부를 확인
• 변경된 경우에만 타임스탬프 파일명으로 자동 백업
• 저장 위치: 브라우저의 다운로드 폴더

파일명 형식

• 수동 저장: 원본파일명.확장자
• 자동 저장: 원본파일명_MMDD_HHMM.확장자

예시

    config.json (수동 저장)  
    config\_1202\_1430.json (자동 저장)  
    config\_1202\_1435.json (자동 저장)

저장 팁

• 브라우저 설정 → 다운로드 → '다운로드 전에 파일의 저장 위치 확인'을 끄면 다운로드 확인 창이 뜨지 않아 편리합니다
• 찾기 기능
• Ctrl+F 또는 상단 🔍 찾기 버튼 클릭
• 좌측 또는 우측 파일에서 검색 가능
• 대소문자 구분, 단어 전체 일치 옵션 지원
• 찾은 결과를 강조 표시하고 이전/다음 버튼으로 이동
• 바꾸기 기능은 없음 (줄 단위 복사/삭제로 정리)
• 실행 취소 / 재실행
• Undo (Ctrl+Z) : 최근 작업 취소
• Redo (Ctrl+Y) : 취소한 작업 재실행
• 최대 50단계까지 기록
• 주의사항

1. F5 새로고침 시 미저장 변경 내용은 모두 사라집니다
   자동 백업이 활성화되어 있어도 마지막 백업 이후의 변경사항은 손실될 수 있으므로
   중요한 작업 후에는 Ctrl+S로 수동 저장을 권장합니다.
2. 원본 파일은 절대 변경되지 않습니다
   좌측, 우측 모두 브라우저에서만 로드되며 원본은 그대로 유지됩니다.
3. 서버 전송 없음
   모든 작업은 브라우저 내에서만 처리되며 외부로 데이터가 전송되지 않습니다.
4. 브라우저 호환성
   Chrome, Edge, Firefox 등 모던 브라우저에서 정상 작동합니다.
5. SmartCompare가 적합한 작업

이런 작업에 최적

• 설정 파일 버전 비교 및 복구
• 로그 파일 비교
• 코드 파일의 특정 라인 비교·수정
• 문서 버전 관리
• 데이터 파일 정리 (CSV, JSON, XML 등)

이런 작업에는 부적합

• 대용량 파일 비교 (수만 줄 이상)
• 복잡한 코드 리팩토링
• 줄 순서를 자유롭게 변경해야 하는 작업
• 일반 텍스트 에디터가 필요한 작업라이선스

버전 정보

현재 버전: V251202_유효열

기술 스택

• 순수 HTML5
• 순수 JavaScript (ES6+)
• CSS3
• 외부 라이브러리 없음
• Myers Diff 알고리즘 구현개발자 노트

SmartCompare는 "실수 없이 안전하게 파일을 비교·수정"하는 것을 최우선 목표로 설계되었습니다.
일반 에디터의 강력한 편집 기능 대신, 제한적이지만 명확하고 안전한 줄 단위 작업에 집중했습니다.

복잡한 기능보다는 직관성과 실수 방지에 초점을 맞췄으며,
누구나 쉽게 사용할 수 있도록 UI/UX를 단순하게 유지했습니다.