구 웹사이트를 새 웹사이트로 교체할 때 텍스트 콘텐츠는 보통 담당자가 꼼꼼히 검수하지만, 이미지는 흔히 '겸사겸사 옮기는' 부분으로 취급됩니다. 그런데 막상 오픈하고 나면 제품 이미지가 흐릿하거나, 사례 이미지가 빠져 있거나, 배너 크기가 바뀌어 잘려 있거나, 출처를 전혀 알 수 없는 이미지가 발견되곤 합니다. 이미지 리소스 문제는 사이트가 열리지 않게 만들지는 않지만, 방문자가 기업에 갖는 첫인상에 직접 영향을 주고 이후 유지보수에도 부담을 남깁니다.
아래에서는 리뉴얼이 실제로 진행되는 순서에 따라 이미지 리소스의 흔한 문제를 몇 가지 유형으로 나눠 설명합니다. 각 유형마다 실행 가능한 점검 항목을 제시하니, 진행 중인 프로젝트에 하나씩 대조해 보시기 바랍니다.
1. 목록 작성 단계: 구 사이트 이미지 목록이 없어 나중에 기억에 의존
리뉴얼에서 가장 흔한 실수는 구 사이트 이미지를 체계적으로 정리하지 않고 바로 첫 페이지를 열어 캡처하거나 다른 이름으로 저장하는 것입니다. 구 사이트가 몇 년간 운영되면 이미지가 게시글 본문, 제품 상세, 섹션 헤더, 팝업, 푸터 등 여러 위치에 흩어져 있어 사람이 페이지를 넘기며 찾다 보면 빠뜨리기 쉽습니다.
더 안정적인 방법은 먼저 이미지 목록을 만드는 것입니다. 구 사이트에 제품, 사례, 뉴스라는 세 가지 주요 섹션이 있다고 가정하고 다음 항목으로 정리할 수 있습니다.
- 이미지가 있는 페이지 주소 또는 섹션
- 페이지 내 이미지 위치(헤더, 본문 삽입, 썸네일 등)
- 로컬에 원본 파일이 있는지 여부
- 이 이미지가 새 사이트에도 필요한지 여부
- 처리 결론: 유지, 교체, 삭제, 확인 필요
목록은 복잡하게 만들 필요 없이 표 하나면 충분합니다. 핵심은 '어떤 이미지를 옮기고 어떤 이미지를 옮기지 않을지'를 오픈 직전에 임기응변으로 정하는 것이 아니라 체크 가능한 목록으로 만드는 것입니다. 판단 기준은 단순하게 잡아도 됩니다. 현재 비즈니스와 여전히 관련 있는 이미지는 유지하고, 판매가 끝난 제품 이미지, 지난 이벤트 이미지, 확연히 시대에 뒤처진 팀 단체 사진 등은 삭제 또는 교체로 표시할 수 있습니다.
2. 파일 이름: 중국어 이름, 깨진 이름, 그리고 'IMG_0231'
구 사이트 이미지에는 '위챗 이미지_20230512.jpg', '제목 없음-1.png' 또는 숫자 나열 같은 이름이 흔합니다. 이런 파일은 이전할 때 큰 문제는 없지만 새 사이트로 옮기고 나면 관리가 어렵습니다. 운영 담당자가 특정 제품 이미지를 찾으려면 하나씩 열어봐야 하죠.
리뉴얼은 이미지 이름을 다시 정하기 좋은 시점입니다. '섹션-내용-번호' 형식의 영문 또는 병음 소문자 형태를 권장합니다. 예를 들어 제품 페이지 이미지는 product-a-01.jpg, 사례 이미지는 case-hangzhou-02.jpg처럼 지을 수 있습니다. 이름 규칙이 고급스러울 필요는 없고, 팀원 몇 명이 알아보고 키워드로 검색할 수 있으면 됩니다.
동시에 파일 이름에 공백, 중국어 문장 부호, 특수 기호가 들어가지 않도록 주의하세요. 이런 문자는 서로 다른 시스템 간에 전송될 때 깨지기 쉽고, 백엔드에 업로드한 뒤에도 비정상적으로 표시될 수 있습니다. 이름을 통일해 두면 이후 이미지 교체와 버전 확인이 훨씬 수월해집니다.
3. 크기와 형식: 새 사이트 레이아웃이 구 사이트와 다름
구 사이트 이미지 크기는 예전 템플릿에 맞춰 잘라둔 것이라, 새 사이트에서 레이아웃이 바뀌면 같은 이미지를 넣어도 늘어나거나 잘리거나 여백이 생길 수 있습니다. 흔한 증상은 헤더 이미지 양쪽이 잘리거나, 제품 이미지 비율이 변형되거나, 모바일에서 이미지 중간 일부만 보이는 것입니다.
이런 문제를 해결하려면 먼저 새 사이트에서 각 이미지 위치가 실제로 표시되는 크기와 비율을 확인한 뒤, 구 이미지를 그대로 쓸지 다시 내보낼지 결정해야 합니다. 새 사이트 첫 페이지 헤더가 와이드 비율인데 구 사이트 헤더가 거의 정사각형에 가깝다면, 이 이미지는 억지로 넣기보다 다시 자르거나 소재를 교체해야 합니다.
형식 측면에서 사진류 이미지는 일반적으로 JPG, 아이콘·로고·투명 배경이 필요한 이미지는 PNG를 사용합니다. 리뉴얼 중 구 사이트에 용량이 큰 이미지가 많다면 다시 내보낼 때 일괄 압축할 수 있지만, 압축 정도는 육안으로 뚜렷한 흐림이 느껴지지 않는 선에서 해야 합니다. 용량을 줄이려다 제품 디테일을 뭉개면 안 됩니다.
4. 이미지 링크: 도메인 변경 후 구 이미지 주소失效
새 사이트가 새 도메인이나 새 디렉터리 구조를 사용하면 구 사이트 이미지의 접근 주소가 바뀝니다. 이미 게시된 글, 외부 플랫폼에서 참조하는 이미지, 검색엔진에 수집된 구 사이트 이미지 페이지 등이 열리지 않을 수 있습니다. 사용자는 빈 박스나 깨진 이미지를 보게 되어 경험이 나빠집니다.
리뉴얼 전에 구 사이트의 주요 이미지 URL 목록을 내보내고, 오픈 후 하나씩 열어 어떤 이미지가 아직 접근 가능한지, 어떤 이미지가失效했는지 확인할 수 있습니다. 여전히 유지해야 할 구 이미지는 새 사이트에서 비슷한 경로를 유지하거나 대응하는 리디렉션을 설정하는 것이 좋습니다. 더 이상 사용하지 않는 이미지는 최소한 해당 이미지를 참조하는 페이지가 이미 업데이트되었는지 확인해야 합니다.
또한 본문에 이미지를 참조하는 방식도 점검해야 합니다. 일부 오래된 글은 이미지 주소를 직접 붙여 넣은 경우가 있어, 사이트를 옮기면 이 주소가 자동으로 업데이트되지 않으므로 다시 업로드하고 교체해야 합니다. 이런 문제는 글이 많을 때 빠뜨리기 쉬우므로 첫 페이지만 보지 말고 섹션별로 나눠 점검하는 것이 좋습니다.
5. 저작권과 출처: 출처가 불분명한 이미지는 그대로 옮기지 말 것
구 사이트 이미지의 출처는 매우 다양할 수 있습니다. 디자인 회사에서 제공한 것, 직원이 직접 찍은 것, 스톡 사이트에서 다운로드한 것, 다른 웹사이트에서 저장한 것 등이죠. 리뉴얼할 때 그대로 새 사이트로 옮기면 출처가 불분명한 이미지를 계속 유지하는 셈이 됩니다.
더 안정적인 처리 방식은 목록에 '출처' 열을 추가하는 것입니다. 자체 촬영이거나 사용 권한을 구매한 것이 확인되면 정상 이전하고, 출처가 불분명하거나 다른 브랜드 워터마크가 뚜렷하거나 인터넷에서 무작위로 저장한 이미지는 교체를 권장합니다. 특히 첫 페이지 헤더, 제품 메인 이미지처럼 눈에 띄는 위치에는 출처가 불분명한 소재를 사용하지 마세요.
기업에 전용 이미지 라이브러리가 없다면 리뉴얼할 때 내부 이미지 폴더를 정리해 사용 가능한 이미지를 한곳에 모으고 용도와 출처를 표시해 두는 것도 좋습니다. 이후 다시 리뉴얼하거나 이벤트를 할 때 이미지를 처음부터 찾아 헤맬 필요가 없습니다.
6. 백엔드 관리: 이미지 업로드 후 아무도 관리하지 않음
새 사이트 오픈 후 이미지 관리 방식도 바뀝니다. 어떤 백엔드는 미디어 라이브러리를 지원하고, 어떤 백엔드는 섹션별로 따로 업로드해야 합니다. 흔한 문제는 같은 로고를 열 번 넘게 중복 업로드하거나, 이미지 제목과 대체 텍스트가 모두 기본 파일명으로 되어 있어 시간이 지나면 어느 것이 최신 버전인지 아무도 모르게 되는 것입니다.
오픈 후에는 간단한 이미지 관리 습관을 정해 두는 것이 좋습니다. 업로드 전에 이름 규칙에 따라 파일명을 정리하고, 업로드할 때 의미 있는 이미지 제목이나 대체 텍스트를 입력해自己和 동료가 검색하기 쉽게 하며, 더 이상 사용하지 않는 이미지를 주기적으로 정리해 미디어 라이브러리가 어지러워지지 않게 합니다. 대체 텍스트는 길게 쓸 필요 없이 이 이미지가 무엇을 찍은 것인지, 어디에 쓰이는지만 설명하면 됩니다.
팀에서 여러 명이 업데이트를 담당한다면 보관 규칙을 정하는 것이 좋습니다. 예를 들어 '제품 이미지는 제품 폴더에, 이벤트 이미지는 연도별로 보관' 같은 식입니다. 규칙이 단순할수록 실행하기 쉽고, 복잡한 계층 디렉터리는 오히려 아무도 지키지 않게 됩니다.
오픈 전에 따라 할 수 있는 이미지 점검
리뉴얼 마무리 단계에서 이미지 관련 점검은 한 번에 집중해서 할 수 있습니다.
- 새 사이트를 페이지별로 열어 깨진 이미지, 빈 이미지, 로딩 실패한 플레이스홀더가 없는지 확인합니다.
- 첫 페이지, 섹션 페이지, 제품 상세 페이지, 게시글 본문의 이미지가 온전히 표시되고 비율이 정상인지 점검합니다.
- 모바일에서 다시 보며 헤더 이미지와 제품 이미지의 핵심 부분이 잘리지 않았는지 중점적으로 확인합니다.
- 구 사이트에서 유지해야 할 이미지 주소가 정상 접근되는지 확인합니다.
- 이미지 출처를 한 번 대조하고 출처가 불분명한 이미지를 교체합니다.
- 백엔드 미디어 라이브러리의 이미지 이름과 분류를 확인해 이후 동료가 바로 찾을 수 있게 합니다.
이미지 리소스 문제는 대부분 기술적 난제가 아니라 리뉴얼할 때 전담하는 사람이 없어서 생깁니다. 텍스트 콘텐츠만큼 중요한 이전 대상으로 보고 미리 목록을 만들고 규칙을 정하며 오픈 전에 집중 점검하면, 오픈 후 재작업을 많이 줄일 수 있습니다.
