카페24 디자인 수정하기

카페24 ) 파일질라 FTP 로 이미지 배너 넣기 - 2

어띠 2020. 9. 3. 21:56

 

 

이전 포스팅에서 파일질라 ftp 프로그램을 이용하여 이미지 파일을 업로드하고 해당 이미지를 불러와 카페24 쇼핑몰 메인에 넣어보았습니다.

이때, 쇼핑몰에 배너가 정상적으로 보이지 않고 엑박으로 뜨는 경우가 있습니다.

이번 포스팅에서는 ftp로 업로드한 이미지가 확인되지 않을 때 체크해야 할 항목들에 대해 알아보겠습니다.

 

 

 

 

 

 

 

#1 '업로드한 경로 = 작성한 이미지 태그 내 경로' 일치 여부

/web/upload/test 파일에 업로드해놓고는 이미지 태그에서는 src="/web/upload/text/~" 로 적을 수 있습니다.

소스를 작성하다 보면 이렇게 간혹 오타가 나기 마련입니다.

 

정확한 소스 작성을 위해서는 타이핑 대신 파일질라에서 경로를 바로 복사하여 붙여 넣을 수 있도록 습관을 들이는 것이 좋습니다.

 

 

 

 

 

 

 

#2 '업로드한 파일명 = 작성한 이미지 태그 내 파일명' 일치 여부

작성한 파일명이 실제 업로드한 파일명과 일치하는지도 확인해봐주세요.

 

타이핑 대신 업로드한 이미지 파일명을 복사하여 붙여 넣기를 권장합니다.

 

 

 

 

 

 

 

#3 파일명에 확장자 중복 여부

이 또한 빈번하게 일어나는 실수입니다.

만약 포토샵에서 이미지 파일 저장하는 경우 확장자는 자동으로 붙게 되기 때문에 확장자를 제외한 순수 파일명만 입력해주어야 합니다.

 

이때, 순수 파일명이 아닌 파일명.jpg 로 저장하면 결국 파일명.jpg.jpg 가 되는 것입니다.

 

 

 

 

 

 

 

#4 이미지 자체가 업로드되지 않는 경우

간혹 이미지가 업로드 되지 않거나 되었더라도 파일 크기가 '0' 로 표시되는 경우가 있습니다.

이때는 FTP 서버 용량을 확인해봐야 합니다.

카페24에서는 최초 200MB의 용량이 할당되며, 해당 용량의 80% 이상을 사용했을 때 용량 추가 신청을 할 수 있습니다.

별도 비용 없이 무제한으로 추가가 가능하지만 용량 추가는 현재 주어진 용량의 80% 이상을 사용했을 때에만 가능합니다.

 

 

 

카페24 쇼핑몰 관리자페이지 메인에서도 용량 확인이 가능하며, 추가신청 버튼을 클릭해 서버 용량 신청 페이지로 이동할 수 있습니다. 

카페24 웹 FTP는 익스플로러에서만 이용이 가능하지만 FTP 서버 용량 추가는 크롬 등의 브라우저에서도 가능합니다.

 

 

 

 

 

 

 

#5 캐시 삭제

위 1) ~ 4) 에 해당되지 않는다면 캐시 문제일 확률이 높습니다. 우선 '캐시'가 무엇인지부터 이야기해보겠습니다.

브라우저는 빠른 로딩을 위해 파일명이 동일하다면 계속 동일한 파일로 인식하는 경향이 있습니다.

예를 들어 main_banner01.jpg 라는 파일을 만들고 업로드 한 다음, 막상 사이트에서 확인해보니 이미지가 마음에 들지 않았다면 우리는 이미지를 수정하고 다시 FTP에 접속해 파일을 업로드(덮어씌우기)하겠지요.

이때 사이트를 확인해보면 수정한 이미지가 아닌 수정 전 이미지가 노출됩니다. 이미지는 수정하였지만 결국 파일명 자체는 이전과 동일하기 때문에 빠른 로딩이 중요시되는 브라우저는 이를 동일한 파일로 간주하고 수정 전 이미지를 그래도 띄워버리는 것입니다.

이렇게 임의 저장된(수정 전) 이미지를 캐시이미지라고 하며, 덮어쓰기한 이미지를 확인하기 위해서는 사용하는 브라우저의 캐시를 삭제해주어야 합니다.

 

 

 

이용 중인브라우저를 열어둔 상태에서 ctrl + shift + del 를 누른 다음

- 익스플로러 : 임시 인터넷 파일 및 웹사이트 파일

- 크롬 : 캐시 된 이미지 또는 파일

을 선택, 기록 삭제를 진행해주면 됩니다.

맥에서 사파리를 이용하는 경우에는 option + command + E 를 누르시면 캐시 된 이미지가 삭제됩니다.

모바일에서의 앱 역시 마찬가지로 확인하는 각 앱의 설정에서 캐시를 삭제해주어야 합니다.

카카오톡에서 모바일 사이트 확인시

- 아이폰 : 카카오톡 앱 > 설정 > 기타 > 저장공간 관리 > 저장된 캐시 데이터 삭제

- 안드로이드 : 핸드폰 설정 > 애플리케이션 관리 > 카카오톡 > 캐시 삭제

을 진행하면 캐시가 삭제됩니다.

 

* 캐시이미지 삭제의 한계

이미지를 새로 업로드한 사람은 캐시 삭제를 통해 새로 변경된 이미지를 확인할 수 있지만 실제 사이트 사용자에게는 여전히 변경 전 이미지가 노출될 수 있습니다. 캐시를 일부러 삭제하지 않는 이상 캐시가 만료되는 데에는 적어도 하루 이상이 소요되기 때문입니다.

이 때문에 변경한 이미지가 바로 반영되길 원한다면 이전 파일명과 다른 파일명으로 저장해주는 것이 좋습니다.

앞서 메인 배너 이미지를 최초에 main_banner01.jpg 로 저장했다면 이후 재업로드시에는 main_banner11.jpg 와 같은 이름으로 저장해주는 것입니다.

이때 당연히 이미지 태그도 변경해주어야 합니다.

 

 

 

이번 포스팅에서는 ftp로 업로드 시 유의해야 할 부분들에 대해 알아보았습니다.