화면이 한 번 정상으로 보였다고 바로 내려받으면, 의도하지 않은 파일 변경이나 모바일 오류를 나중에 발견할 수 있습니다. 저장, Diff, 미리보기, history는 각각 다른 문제를 찾는 도구입니다. 내려받기 전에 짧은 순서로 묶어 사용하면 실수를 줄일 수 있습니다.
이 글의 목표는 수정 내용을 저장하고, 바뀐 파일과 다섯 화면 크기를 확인한 뒤, 되돌릴 지점을 확보해 완성 사이트를 내려받는 것입니다.
이 글의 화면은 실제 고객 사이트가 아닌 가상 실습 사이트 ‘온담 베이커리’입니다. 최종 화면 확인일: 2026년 8월 29일.
1. 저장과 임시저장의 역할을 나눕니다
작업 중에는 작은 단계마다 임시저장을 사용하고, 한 기능이 끝났을 때 일반 저장으로 기준점을 남기는 방식이 이해하기 쉽습니다. 예를 들어 제목 수정, 메뉴 추가, 게시판 연결이 각각 끝났을 때 저장점을 나누면 문제가 생긴 단계를 찾기 쉽습니다.
- 제목과 버튼 수정 완료
- 오시는 길 메뉴와 페이지 연결 완료
- 공지사항 게시판 연결 완료
2. Diff에서 바뀐 범위를 확인합니다
Diff는 이전 상태와 현재 상태의 차이를 보여줍니다. 모든 코드를 이해하지 못해도 수정한 파일 이름과 변경된 줄의 위치를 보면 예상 밖의 변경을 찾을 수 있습니다.
첫 화면 제목만 수정했는데 여러 페이지 파일이 함께 바뀌었다면 바로 내려받지 말고 이유를 확인합니다. 메뉴 추가처럼 공통 헤더가 바뀌는 작업은 여러 페이지에 영향을 줄 수 있으므로, 의도한 공통 변경인지 구분하는 것이 중요합니다.
3. 다섯 화면 크기에서 핵심만 확인합니다
사이트빌더 미리보기에는 576, 768, 992, 1200, 1500 화면 크기가 있습니다. 모든 글자를 다시 읽기보다 다음 네 가지를 같은 순서로 확인하세요.
- 상단 메뉴가 잘리거나 겹치지 않는가
- 첫 제목과 버튼이 이미지 밖으로 나가지 않는가
- 새로 만든 오시는 길 페이지가 가로로 밀리지 않는가
- 게시판 목록을 손가락으로 읽고 누를 수 있는가
4. history와 백업에서 되돌릴 지점을 확인합니다
내려받기 전 마지막 저장점의 시간과 작업 내용을 기억해 둡니다. history나 백업 목록이 있다면 방금 저장한 항목이 보이는지 확인합니다. 문제가 발견됐을 때 무작정 코드를 지우기보다 정상으로 확인한 저장점으로 돌아가는 편이 안전합니다.
5. 마지막 미리보기 후 완성 파일을 내려받습니다
PC와 모바일에서 핵심 흐름을 확인했다면 내려받기를 실행합니다. 내려받은 파일은 그대로 올리면 열리는 사이트 구성으로 제공되므로, 별도 폴더에 풀어 첫 화면 파일과 이미지·CSS 폴더가 포함됐는지 확인합니다.
이 단계에서는 서버에 바로 덮어쓰지 않습니다. 기존 사이트가 있다면 백업과 설치 위치를 먼저 확인해야 합니다. 실제 호스팅 업로드 방법은 기존 글 “다운받은 웹페이지 소스, 내 호스팅에 올리는 법”으로 이어서 확인할 수 있습니다.
완료 확인표
- 기능 단위로 저장점을 나눴다.
- Diff에서 예상한 파일만 변경됐는지 확인했다.
- 576·768·992·1200·1500 화면을 확인했다.
- history 또는 백업에서 되돌릴 지점을 확인했다.
- 마지막 미리보기와 같은 상태의 파일을 내려받았다.
이 순서를 습관으로 만들면 기능을 많이 추가하지 않아도 “정상으로 확인한 상태”를 계속 남길 수 있습니다. 사이트 제작은 한 번에 완성하는 작업보다, 작은 변경을 안전하게 이어 가는 작업에 가깝습니다.
