카페24 디자인 수정하기

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

어띠 2020. 8. 29. 13:49

 

 

 

내가 만든 이미지 배너를 쇼핑몰에 사용하기 위해서는 서버(파일 저장 공간)에 파일을 업로드해야 합니다.

이때 내 컴퓨터와 서버 간 파일 전송을 도와주는 서비스를 FTP라고 합니다.

카페24 쇼핑몰 관리자 페이지에서도 웹 FTP를 제공하고 있으나 익스플로러에서만 이용이 가능합니다.

그래서 보통 익스플로러 외 크롬, 사파리 등의 브라우저를 이용한다면 FTP 프로그램을 사용해야 하는데, 파일질라는 대표적인 FTP 프로그램 중 하나이며, 윈도우와 맥에서 모두 무료로 사용이 가능하기 때문에 추천하는 프로그램입니다.

 

 

 

 

 

 

 

#1 파일질라 설치하기

구글에서 '파일질라' 라고 검색하여 파일질라 홈페이지로 들어갑니다.

 

 

 

 

일반적인 파일 전송 프로그램을 사용할 것이므로 좌측의 client 용을 클릭해줍니다.

 

 

 

 

다운로드 버튼을 클릭합니다.

 

 

 

 

필수적인 기본 파일질라만 다운로드할 수 있도록 제일 좌측 옵션 아래 다운로드 버튼을 클릭해줍니다.

다운로드한 파일을 설치한 후 파일질라 프로그램에서 서버에 접속해보겠습니다.

 

 

 

 

 

 

 

#2 파일질라에서 카페24 쇼핑몰 서버에 접속하기

카페24 쇼핑몰 서버에 접속하기 위해서는 호스트, 사용자명, 비밀번호 입력 후 빠른 연결 버튼을 클릭해주면 됩니다.

 

 1  호스트: id.cafe24.com (id = 카페24 쇼핑몰 관리자 아이디)

 2  사용자명: id (위 id와 동일)

 3  비밀번호: FTP 비밀번호

FTP 비밀번호를 따로 설정하지 않은 경우에는 카페24 관리자 비밀번호와 동일합니다.

따로 설정했는데 기억이 나지 않는 경우 아래 경로에서 FTP 비밀번호를 변경할 수 있습니다.

 

* 자주 사용하는 사이트 관리자 등록해두기

사이트를 운영하다 보면 거의 매일 하루에도 몇 번씩 FTP에 접속해야 할 수 있습니다.

이때 위 입력했던 정보들을 미리 저장해두면 클릭 두어 번 만에 쇼핑몰 서버에 접속할 수 있습니다.

파일질라 프로그램 상단의 파일 > 사이트 관리자 클릭 > 좌측 하단 새 사이트 버튼 클릭 > 앞서 입력했던 것처럼 호스트, 사용자, 비밀번호를 입력한 후 확인 버튼을 클릭하면 서버 로그인 정보가 저장됩니다. (로그온 유형은 '일반'으로 선택)

 

 

 

 

 

 

 

#3 파일질라를 이용해 이미지 업로드하기

파일질라 프로그램 구성을 살펴보겠습니다.

왼쪽의 주황색 박스는 내 컴퓨터의 각 폴더(위)와 선택된 폴더에 있는 파일(아래)을, 오른쪽의 보라색 박스는 서버 내 각 폴더(위)와 선택된 폴더에 있는 파일(아래)을 나타냅니다.

오른쪽 보라색 박스를 보시면 서버에 아무것도 업로드하지 않은 상태에서도 이렇게 폴더가 이미 존재하고 있습니다.

이는 스킨 관련 소스 및 쇼핑몰 구성에 필요한 기본 소스입니다.

 

FTP 프로그램 사용방법 자체는 간단합니다.

내 컴퓨터에서 서버로 (왼쪽 → 오른쪽) 폴더 또는 파일을 업로드, 서버에서 내 컴퓨터로 (왼쪽 ← 오른쪽) 폴더 또는 파일을 다운로드할 수 있습니다.

쇼핑몰에 띄우고 싶은 배너 하나를 내 쇼핑몰 서버에 업로드해보겠습니다.

 

 

 

 

 1  내 컴퓨터(왼쪽박스)에 있는 main_banner01.jpg 파일을 선택한 후

 2  마우스 오른쪽 버튼을 클릭하고 업로드를 클릭하면

 3  서버(오른쪽박스)에 파일이 업로드됩니다.

저는 서버에 업로드 시 /web/upload/test 폴더에 들어가서 파일을 업로드하였습니다.

 

 

 

 

 

 

 

#4 업로드 한 이미지를 쇼핑몰에 넣어보기

파일질라를 이용해 업로드한 이미지를 내 쇼핑몰 메인 페이지 상단에 배너로 등록해보겠습니다.

카페24 기본 스마트 디자인 스킨에서 수정을 진행하였습니다.

쇼핑몰 메인 페이지에 이미지 태그를 작성한 후 저장해주었습니다.

<img src="경로/파일명">

 

 

 

 

쇼핑몰 메인 화면에 배너 이미지가 정상적으로 업로드된 것을 확인할 수 있습니다.

 

 

 

혹시 파일을 업로드했는데 사이트에서 확인이 되지 않나요?

몇 가지 예상되는 상황이 있습니다.

다음 포스팅에서는 이 부분에 대해 다뤄보도록 하겠습니다.