홈페이지 대표 사진을 새로 올렸는데 화면은 그대로라면, 대부분 사진 자체보다 현재 페이지가 가리키는 이미지 경로를 먼저 확인해야 합니다. 이 글에서는 CodeBuilder에서 사용 중인 파일을 찾고, 새 사진을 WebP로 준비해 연결한 뒤, 캐시와 모바일 잘림까지 확인하는 순서를 따라갑니다.
이 글의 목표는 첫 화면 대표 사진 한 장을 안전하게 바꾸고 1200·768·576 화면에서 같은 결과를 확인하는 것입니다.
예시는 실제 고객 사이트가 아닌 가상 실습 사이트 ‘온담 베이커리’입니다. CodeBuilder와 이미지 에디터 화면은 2026년 8월 30일 확인했으며, 실습 사진은 이 글을 위해 새로 생성한 이미지입니다.
사진을 올렸는데 홈페이지가 바뀌지 않는 이유
웹페이지는 폴더 안의 모든 사진을 자동으로 보여주지 않습니다. HTML의 <img src="..."> 또는 CSS의 background-image: url(...)에 적힌 경로만 불러옵니다. 새 사진을 업로드해도 기존 경로가 남아 있으면 화면에는 이전 사진이 계속 보입니다.
따라서 첫 순서는 “새 사진 업로드”가 아니라 현재 대표 사진이 어느 파일을 가리키는지 확인하는 것입니다. 처음 가져온 템플릿의 파일 구조가 낯설다면 사이트 템플릿을 가져온 뒤 확인할 세 가지부터 살펴보세요.
1. ‘이 페이지의 이미지’에서 현재 파일을 찾습니다
CodeBuilder 상단의 이미지 버튼을 누르면 ‘이 페이지의 이미지’ 창이 열립니다. 이 목록은 현재 페이지에서 실제로 불러오는 일반 이미지와 배경 이미지를 찾는 데 도움이 됩니다.
- 대표 사진이 보이는 페이지 파일을 먼저 엽니다.
- 상단의 이미지 버튼을 누릅니다.
- 목록에서 대표 사진의 미리보기와 파일명을 확인합니다.
- 같은 사진이 여러 곳에 쓰이는지 안내 문구도 확인합니다.
이 창에서 파일을 그대로 교체하면 코드와 경로를 바꾸지 않아도 빠르게 반영할 수 있습니다. 다만 같은 파일을 여러 영역에서 사용 중이라면 그 영역들이 모두 함께 바뀔 수 있습니다.
이미지 목록이 0개라면 이렇게 확인합니다
목록이 비어 있다고 해서 대표 사진이 없는 것은 아닙니다. 다음 경우에는 자동 목록에서 바로 찾기 어려울 수 있습니다.
- 수정한 페이지 파일을 아직 저장하지 않은 경우
- 사진이 외부 주소나 데이터 주소로 연결된 경우
- CSS 파일이나
<style>안의 배경 이미지로 지정된 경우 - 현재 열어 둔 파일이 실제 첫 화면 파일이 아닌 경우
코드 검색에서 기존 파일명의 일부, src=, background-image, url(을 찾아보세요. 예를 들어 src="images/hero-old.jpg"가 보인다면 images 폴더의 hero-old.jpg가 현재 대표 사진입니다.
2. 새 사진은 같은 비율의 WebP로 준비합니다
대표 사진의 비율이 크게 달라지면 제목 옆 공간이 무너지거나 모바일에서 핵심 피사체가 잘릴 수 있습니다. 기존 사진의 가로·세로 비율을 먼저 보고, 새 사진도 같은 비율로 자르는 편이 안전합니다.
이미지 에디터에서 필요한 영역을 자른 뒤 WebP로 내보내세요. 품질은 90부터 확인하고, 눈으로 보기에 차이가 없다면 조금씩 낮춰 파일을 가볍게 만듭니다. 이 실습에서는 블로그용 안내 이미지 기준으로 300KB 이하를 목표로 했지만, 실제 홈페이지 사진은 크기와 디테일에 따라 적정 용량이 달라질 수 있습니다.
자르기와 용량 조절을 더 자세히 따라 하려면 무료 이미지 에디터로 홈페이지 사진을 준비하는 방법을 함께 보세요.
3. 빠른 교체와 안전한 교체 중 하나를 선택합니다
빠른 교체는 ‘이 페이지의 이미지’ 창에서 기존 파일을 새 사진으로 바꾸는 방법입니다. 경로를 수정하지 않아 간단하지만, 같은 파일을 쓰는 다른 영역도 함께 바뀌고 브라우저 캐시에 이전 사진이 남을 수 있습니다.
안전한 교체는 새 사진을 설명형 파일명으로 올리고 코드의 경로를 새 파일명으로 바꾸는 방법입니다. 예를 들어 hero-old.jpg 대신 ondam-bakery-morning-bread.webp처럼 사진 내용을 알 수 있는 이름을 사용합니다. 이전 파일을 바로 지우지 않으면 비교와 복구가 쉽고, 주소가 달라져 캐시 문제도 줄어듭니다.
- 새 WebP 파일을 기존 이미지와 같은 폴더에 업로드합니다.
- 코드에서 기존
src또는url()경로를 찾습니다. - 파일명만 새 이름으로 바꾸고 저장합니다.
- 미리보기에서 대표 사진이 바뀌었는지 확인합니다.
첫 화면처럼 중요한 사진은 새 파일명으로 연결하는 방법을 권합니다. 파일명에는 사진의 주제와 용도를 짧게 담고, 한글·공백보다 영문 소문자와 하이픈을 쓰면 경로 오류를 줄이기 쉽습니다.
4. 1200·768·576 화면에서 사진 잘림을 확인합니다
CodeBuilder의 화면크기 메뉴에서 1200, 768, 576을 차례로 선택합니다. 대표 사진은 화면 폭에 따라 자동으로 잘릴 수 있으므로 사진이 보이는지만 확인하지 말고 다음 세 가지를 봅니다.
- 1200: 제목과 사진의 비율이 처음 의도와 맞는가
- 768: 사진과 버튼이 겹치거나 세로 공간이 지나치게 길지 않은가
- 576: 사람·제품처럼 중요한 피사체가 중앙 크롭 안에 남아 있는가
사진이 계속 예전 모습일 때 확인할 것
- 경로 오타: 폴더명과 파일명의 대소문자, 확장자까지 실제 파일과 같은지 확인합니다.
- 캐시: 새로고침 후에도 같으면 Windows에서는
Ctrl + F5로 다시 불러옵니다. - 같은 이름 덮어쓰기: 브라우저가 이전 파일을 기억하면 새 파일명으로 올려 경로를 바꿉니다.
- CSS 배경: HTML의
src가 아니라 CSS의background-image인지 확인합니다. - 다른 페이지 수정: 미리보기 중인 파일과 수정한 파일이 같은지 확인합니다.
완료 확인표
- 현재 대표 사진의 실제 경로를 확인했다.
- 새 사진을 같은 비율의 WebP로 준비했다.
- 다른 영역의 공용 파일인지 확인한 뒤 교체 방법을 선택했다.
- 1200·768·576 화면에서 피사체 잘림을 확인했다.
- 새로고침과 파일 경로를 다시 확인했다.
교체가 끝났다면 바로 내려받기보다 현재 상태를 저장하고 변경 범위를 한 번 더 확인하세요. 저장·Diff·모바일 검수 순서는 사이트를 내려받기 전 3분 점검 방법에서 이어서 확인할 수 있습니다.
