Git 없이 HTML 파일 버전 관리하는 법
Finipage 가이드 · HTML 파일을 코드 없이 고치는 편집기. Finipage 열기
언젠가는 "지난주 화요일 버전으로 돌려 주세요"라는 요청을 받게 됩니다. 고객이 예전 제목이 더 낫다고 하거나, 내가 고친 부분 때문에 레이아웃이 깨졌는데 고치기 전 모습이 기억나지 않는 경우입니다. 폴더 안에 index.html, index_최종.html, index_최종2.html, index_진짜최종.html이 나란히 있다면 그때부터는 짐작으로 찾아야 합니다. 간단한 습관 몇 가지면 이런 일을 막을 수 있고, 작은 사이트라면 Git을 배우지 않아도 됩니다.
알아서 정렬되는 이름 붙이기
"최종"은 두 번째 쓰는 순간 의미가 없어집니다. 날짜는 그렇지 않습니다. 이름 앞쪽에 연-월-일 순서로 날짜를 넣으면 파일 목록이 저절로 시간순으로 정렬됩니다.
landing_2026-11-03
landing_2026-11-07_가격표변경
landing_2026-11-11_고객피드백
몇 가지를 더 지키면 나중에 찾기가 훨씬 쉽습니다.
2026-11-07형식으로 씁니다.11.7이나261107처럼 쓰면 연도가 바뀌거나 자릿수가 섞일 때 순서가 엉킵니다.- 무엇을 바꿨는지 두세 단어를 붙입니다. "v4"보다 "가격표변경"이 훨씬 찾기 쉽습니다.
- 같은 날 두 번 저장한다면
2026-11-07b처럼 글자나 시각을 덧붙입니다. - 나중에 인터넷에 올릴 수도 있는 파일과 폴더 이름에는 띄어쓰기, 특수문자, 한글을 피하는 편이 안전합니다. 하이픈과 밑줄은 어디서나 문제없습니다. 보관용 폴더 이름의 한글은 괜찮습니다.
날짜는 HTML 파일이 아니라 폴더에 붙이십시오. 실제로 올라갈 페이지는 계속 index.html이어야 합니다. 웹 호스팅이 기본으로 보여 주는 이름이라서, 파일 이름을 바꿔 두면 올릴 때마다 다시 고쳐야 합니다.
원본은 그대로 두고, 폴더째 복사하기
HTML 페이지는 파일 하나로 끝나는 경우가 드뭅니다. 이미지, 스타일시트, 글꼴 폴더, 스크립트를 가리키고 있습니다. index.html만 복사해 두면 글은 남지만 그 시점의 이미지는 남지 않습니다. 나중에 hero.jpg를 다른 사진으로 바꾸면 옛 버전을 열어도 새 사진이 보이고, 이름을 바꿨다면 이미지가 깨집니다. 파일끼리 어떻게 연결되는지는 HTML 파일 구조에 설명해 두었습니다.
그래서 버전을 남기는 단위는 폴더입니다. 예를 들면 이렇게 둡니다.
my-site/
00_original/ 처음 받은 그대로의 파일
2026-11-03_첫수정/
2026-11-07_가격표변경/
current/ 지금 작업하는 폴더
규칙은 두 가지입니다. 첫째, 00_original은 절대 고치지 않습니다. 템플릿이든 AI 도구든 이전 담당자든, 처음 받은 파일이 무엇이었는지 증명해 주는 폴더이고, 이후 버전이 모두 잘못됐을 때 돌아갈 곳입니다. Windows에서는 폴더를 마우스 오른쪽 버튼으로 눌러 속성에서 읽기 전용을 체크해 두면 실수를 줄일 수 있습니다. 둘째, 통째로 되돌리고 싶을 수 있는 작업(새 섹션 추가, 색 구성 변경, 고객 수정 요청 한 차례) 전에는 먼저 current를 날짜 폴더로 복사하고 나서 고칩니다.
구글 드라이브와 원드라이브의 버전 기록
작업 폴더가 동기화되는 클라우드 드라이브 안에 있다면, 따로 하지 않아도 안전장치가 하나 더 생깁니다. 두 서비스 모두 바뀐 파일의 이전 버전을 보관합니다.
구글 드라이브. HTML, CSS, 이미지처럼 구글 문서가 아닌 파일은 drive.google.com에서 파일을 열고 더보기, 파일 정보, 버전 관리 순으로 들어갑니다. 여기서 이전 버전을 내려받거나 새 버전을 올릴 수 있습니다. 구글 도움말에 따르면 이전 버전은 30일이 지나거나 더 새 버전이 100개 쌓이면 영구 삭제될 수 있고, 해당 버전 메뉴에서 영구 보관을 고르면 지워지지 않습니다. 메뉴 이름은 화면 언어에 따라 조금 다를 수 있으니 영어 화면에서는 More, File information, Manage versions, Keep forever를 찾으십시오.
원드라이브. onedrive.com에서, 또는 원드라이브 앱이 동기화 중이라면 파일 탐색기에서 파일을 마우스 오른쪽 버튼으로 누르고 버전 기록을 고릅니다. 원하는 버전 옆의 줄임표(...)에서 복원하면 그 버전이 현재 버전이 되고, 바뀌기 전 파일은 목록에 남습니다. 마이크로소프트 도움말은 이 기능이 모든 파일 형식에 적용되고 버전 기록은 30일 동안 보관된다고 안내합니다. 회사나 학교 계정은 관리자가 정책을 정합니다.
웹사이트에 쓰기에는 한계가 두 가지 있습니다. 버전 기록은 파일 단위입니다. 폴더 전체를 7일 상태로 되돌리는 버튼은 없어서, 페이지와 스타일시트와 이미지 세 장을 되돌리려면 하나씩 복원해야 합니다. 그리고 보관 기간이 짧습니다. 클라우드 버전 기록은 최근 실수를 되돌리는 용도이고, 진짜 보관소는 날짜 폴더입니다.
두 버전 비교하기
두 벌 사이에 무엇이 바뀌었는지 알아야 할 때는 눈으로 나란히 놓고 읽기보다 차이를 표시해 주는 도구를 쓰는 편이 정확합니다.
- VS Code(무료): 탐색기 패널에서 첫 번째 파일을 오른쪽 버튼으로 눌러 Select for Compare(비교할 항목 선택)를 고르고, 두 번째 파일에서 Compare with Selected(선택한 항목과 비교)를 고릅니다. 바뀐 줄이 양쪽 칸에 색으로 표시됩니다. 터미널에서는
code --diff old.html new.html로 같은 화면을 열 수 있습니다. - Windows의 WinMerge 같은 무료 비교 도구는 폴더 두 개를 통째로 비교해 어떤 파일이 다른지 목록으로 보여 줍니다. 바뀐 것이 HTML인지, CSS인지, 이미지인지 모를 때 편합니다.
비교 결과가 지나치게 많이 바뀐 것처럼 나올 때가 있습니다. 한쪽을 다른 편집기로 저장했다면 눈에 보이는 내용은 거의 그대로여도 줄마다 띄어쓰기, 줄바꿈 방식, 문자 인코딩이 바뀌었을 수 있습니다. 예를 들어 Finipage는 UTF-8로 저장하면서 meta charset 줄도 UTF-8로 바꾸기 때문에, 예전 EUC-KR 파일과 저장본을 비교하면 바뀐 줄이 많이 나옵니다. 띄어쓰기 차이는 대부분의 비교 도구에 있는 공백 무시 옵션으로 줄일 수 있습니다.
Git이나 GitHub Desktop이 필요한 시점
Git은 버전 관리 시스템입니다. 커밋할 때마다 폴더 전체의 스냅숏을 짧은 메모와 함께 기록하고, 어느 두 시점 사이든 파일마다 무엇이 바뀌었는지 정확히 보여 줍니다. GitHub Desktop은 이 작업을 명령어 대신 버튼으로 하게 해 주는 Windows·macOS용 무료 앱입니다.
이런 경우라면 배워 둘 만합니다.
- 페이지가 여러 개이고 여러 파일이 함께 바뀌는 사이트
- 1년에 두 번이 아니라 매주 고치는 사이트
- 두 사람 이상이 파일을 고치는 경우
- 이미 GitHub Pages로 올리고 있어서 파일이 어차피 Git 저장소에 있는 경우 (HTML 페이지를 인터넷에 올리는 방법 참고)
한 달에 한 번 손대는 랜딩 페이지 하나라면 날짜 폴더가 더 단순하고, 다음 담당자에게 설명하기도 쉽습니다.
브라우저 자동 백업이 지켜 주는 것과 못 지키는 것
브라우저에서 돌아가는 편집기 중에는 작업 내용을 브라우저 안에 계속 저장해 두는 것이 많습니다. Finipage도 몇 초마다 브라우저에 자동 백업을 해 두기 때문에, 실수로 탭을 닫거나 브라우저가 멈춰도 편집기를 다시 열면 고친 내용이 돌아옵니다. 작업 중에는 Ctrl+Z로 50단계까지 되돌릴 수도 있습니다. 둘 다 유용하지만 어느 쪽도 버전 보관소는 아닙니다.
브라우저 저장 공간은 기기 한 대의 브라우저 하나에 묶여 있습니다. 회사 PC에서 시작한 작업이 집 노트북으로 따라오지 않고, 같은 컴퓨터라도 다른 브라우저에서는 보이지 않습니다. 인터넷 사용 기록이나 사이트 데이터를 삭제하면 함께 지워지는데, 일부 정리 프로그램이나 회사 보안 정책은 이것을 자동으로 하기도 합니다. MDN에 따르면 디스크가 거의 찼을 때 브라우저가 사이트 데이터를 지울 수 있고, 사파리는 크로스 사이트 추적 방지가 켜져 있으면 7일 동안 상호작용이 없었던 사이트의 스크립트 저장 데이터를 삭제합니다.
그러니 자동 백업은 창을 닫는 실수에 대한 대비일 뿐이고, 진짜 사본은 디스크에 저장한 파일입니다. current 폴더에 저장하고, 다음 큰 작업 전에는 그 폴더를 날짜 폴더로 복사해 두십시오.
current를 날짜 폴더로 복사하고, 고친 뒤 저장합니다. 폴더가 구글 드라이브나 원드라이브 안에 있다면 최근 실수는 버전 기록으로도 되돌릴 수 있습니다.다음 수정은 편집기에서 파일을 열어 시작하면 됩니다. 처음이라면 코딩 몰라도 HTML 파일 고치는 방법부터 읽어 보십시오.
내 파일로 바로 해 보려면 Finipage 편집기를 여세요. 브라우저에서 돌아가고 파일은 내 기기 밖으로 나가지 않습니다.