쇼핑몰 메인 배너 문구 하나를 바꾸고 싶은데 카페24 관리자 화면에서는 길이 보이지 않을 때가 있습니다. 디자인 설정 메뉴 안을 아무리 뒤져도 원하는 부분이 안 나오는 경우죠. 이럴 때는 서버에 직접 접속해 파일을 고치거나 스마트디자인의 코드 편집기를 여는 방법이 있습니다. 비개발자에게는 낯선 영역이지만, 작업 순서만 익혀두면 생각보다 어렵지 않습니다. 이 글에서는 파일질라(FileZilla)로 FTP에 접속하는 과정부터 코드 편집기로 직접 수정하는 단계까지 차례대로 짚어보겠습니다. 화면 속 빨간 동그라미 번호를 함께 보면 따라 하기 쉽습니다.
FTP가 필요한 이유
FTP(File Transfer Protocol)는 내 컴퓨터와 쇼핑몰 서버 사이에 파일을 주고받는 통로입니다. 카페24 관리자 화면에서 제공하는 디자인 편집 기능으로 대부분의 수정이 가능하지만, 특정 파일을 통째로 교체하거나 여러 파일을 한꺼번에 옮겨야 할 때는 서버에 직접 접속하는 편이 빠릅니다. 이미지 파일을 대량으로 올리거나 백업본을 내려받아 보관하는 작업도 FTP로 처리합니다.
FTP에 접속하려면 전용 프로그램이 필요합니다. 무료로 쓸 수 있고 사용자가 많은 파일질라를 기준으로 설명하겠습니다.
파일질라 설치하기
파일질라는 공식 홈페이지에서 받을 수 있습니다. 설치 과정에서 선택지가 몇 번 나오는데, 무엇을 고를지만 알면 막힐 일이 없습니다.
운영체제에 맞는 버전 내려받기
파일질라 다운로드 페이지에 접속하면 사용 중인 운영체제에 맞는 다운로드 버튼이 보입니다. 윈도우 64비트가 가장 일반적입니다. 초록색 Download FileZilla Client 버튼을 눌러 설치 파일을 받습니다.
에디션 선택
설치를 진행하면 어떤 에디션을 쓸지 묻는 화면이 나옵니다. 표를 보면 무료 버전과 유료 버전(Pro)의 기능 차이가 정리되어 있습니다.
| 기능 | 무료 버전 | Pro 버전 |
|---|---|---|
| 기본 파일 전송 (FTP, SFTP) | 지원 | 지원 |
| 상세 매뉴얼 | 없음 | 지원 |
| 클라우드 연동 | 없음 | 지원 |
표 가장 왼쪽 열의 ① 위치에 있는 무료 버전(Download) 버튼을 누르면 됩니다. 쇼핑몰 파일을 올리고 내려받는 일반적인 작업이라면 이걸로 충분합니다. 클라우드 동기화 같은 기능이 따로 필요할 때만 오른쪽 유료 버전을 고려하면 됩니다.
카페24 FTP 정보로 접속하기
설치를 마쳤다면 이제 쇼핑몰 서버에 연결할 차례입니다. 접속에 필요한 정보는 카페24 쇼핑몰 관리자에 로그인해 확인하고 변경할 수 있습니다. FTP 주소, 사용자 아이디, 비밀번호 이렇게 세 가지를 미리 메모해두면 작업이 수월합니다.
사이트 관리자에 접속 정보 입력
파일질라 상단 메뉴에서 파일을 누르면 사이트 관리자(Site Manager)가 열립니다. 화면의 번호를 따라가며 입력하면 됩니다.
- 왼쪽 위 ① 툴바의 사이트 관리자 아이콘을 눌러 창을 엽니다.
- 왼쪽 아래 ② 새 사이트 버튼을 눌러 항목을 추가합니다.
- ③ 프로토콜을 FTP로 두고, 호스트 칸에 카페24에서 발급한 FTP 주소(예: 아이디.ftp.cafe24.com)를 입력합니다.
- 로그온 유형을 일반으로 바꾼 뒤 ④ 사용자 칸에 FTP 아이디를 넣습니다.
- ⑤ 비밀번호 칸에 FTP 비밀번호를 입력합니다.
- 모든 정보를 확인하고 오른쪽 아래 ⑥ 연결 버튼을 누릅니다.
처음 연결할 때 보안 인증서를 신뢰할지 묻는 창이 뜨면 확인을 눌러 진행합니다. 접속 정보를 사이트 관리자에 저장해두면 다음부터는 클릭 한 번으로 연결됩니다.
서버 폴더 구조 이해하고 파일 다루기
연결에 성공하면 화면이 좌우로 나뉩니다. 왼쪽은 내 컴퓨터(로컬 사이트), 오른쪽은 카페24 서버(원격 사이트)입니다. 파일을 옮기는 작업은 이 두 영역 사이에서 이루어집니다.
수정할 파일이 어디 있는지 찾기
오른쪽 위 ① 영역이 카페24 서버의 폴더 구조입니다. 쇼핑몰 디자인 파일은 보통 sde_design 폴더 안에 들어 있고, 그 아래로 base(PC 화면용), mobile(모바일용)처럼 용도별 폴더가 나뉩니다. 폴더를 선택하면 오른쪽 아래 ② 영역에 그 안의 파일 목록이 나타납니다. 메인 페이지를 고치려는 거라면 여기 보이는 index.html 파일이 대상인 경우가 많습니다. 엉뚱한 폴더의 파일을 건드리면 다른 화면까지 영향을 받을 수 있으니, 어느 위치를 수정하는지 먼저 확인하는 습관이 중요합니다.
내려받고 올리는 순서
왼쪽 아래 ⑤ 영역은 내 컴퓨터의 파일입니다. 파일을 옮길 때는 한쪽에서 다른 쪽으로 끌어다 놓으면 됩니다. 오른쪽 서버의 파일을 왼쪽으로 끌면 내려받기, 반대로 끌면 올리기가 됩니다. 작업이 진행되면 위쪽 ④ 상태 영역에 전송 성공 메시지가, 아래쪽 ③ 전송 큐에 진행 상황이 표시됩니다. 실제 순서는 이렇습니다.
- 수정할 파일을 서버에서 내 컴퓨터로 내려받습니다.
- 내려받은 파일을 복사해 원본을 따로 보관합니다.
- 편집 프로그램으로 내용을 고칩니다.
- 고친 파일을 같은 위치에 다시 올립니다.
2번에서 원본을 따로 챙겨두는 이유가 있습니다. 수정한 내용에 문제가 생겼을 때 보관해둔 원본을 그대로 올리면 곧바로 되돌릴 수 있기 때문입니다. 파일 하나를 바꾸는 작은 작업이라도 이 과정을 거치면 마음이 놓입니다.
수정 전에 디자인 보관함에서 백업하기
FTP로 직접 코드를 건드리기 전에 한 단계를 더 권합니다. 카페24 관리자 화면의 디자인 보관함에서 지금 상태를 통째로 저장해두는 일입니다. FTP 백업이 파일 단위라면, 디자인 보관함 백업은 화면 전체를 한 시점으로 묶어두는 방식이라 복원이 간편합니다.
관리자 화면 왼쪽 메뉴에서 ① 디자인 보관함에 들어간 뒤, 상단의 ② PC 탭을 선택합니다. 목록에는 ③ 디자인 섬네일과 번호가 나오고, 각 디자인 오른쪽의 ④ 디자인 편집과 미리보기로 작업할 수 있습니다. 새 디자인 추가 버튼을 눌러 현재 디자인을 백업으로 저장해두면, 문제가 생겼을 때 원하는 시점으로 복원하면 됩니다. 코드를 수정한 뒤에는 상단의 ⑤ 사이트 캐시 삭제를 눌러야 변경 내용이 실제 화면에 제대로 반영됩니다.
백업본에는 이름과 날짜를 붙여 구분하는 편이 좋습니다. 어떤 작업을 하기 전에 저장한 것인지 나중에 헷갈리지 않습니다. 여러 사람이 함께 디자인을 관리할 때는 이렇게 시점을 기록해두는 습관이 작업 충돌을 줄여줍니다.
스마트디자인 코드 편집기로 바로 수정하기
파일질라를 쓰지 않고도 수정할 수 있는 방법이 있습니다. 카페24 스마트디자인의 코드 편집기를 이용하면 별도 프로그램 없이 관리자 화면 안에서 HTML과 CSS를 바로 고칠 수 있습니다.
편집 화면 열기
스마트디자인 편집 화면에 들어가면 왼쪽에 ③ 레이아웃 화면 목록이 보입니다. 메인화면, 상품분류처럼 화면별로 나뉘어 있어, 고치려는 화면을 여기서 고릅니다. 화면을 선택하면 위쪽 ① 미리보기 영역에 실제 화면이 나타나고, 아래쪽 ② HTML 영역에 그 화면의 코드가 표시됩니다. 배너 문구를 바꾸고 싶다면 코드 영역에서 그 텍스트가 들어간 줄을 찾아 내용을 고친 뒤, 상단의 저장 버튼을 누르면 곧바로 쇼핑몰에 반영됩니다.
코드 편집기와 파일질라, 언제 무엇을 쓸까
두 방법은 쓰임새가 다릅니다. 텍스트 몇 줄이나 간단한 스타일을 고치는 정도라면 코드 편집기가 빠릅니다. 프로그램을 설치하거나 파일을 내려받을 필요 없이 바로 작업하니까요. 반대로 여러 파일을 한꺼번에 옮기거나 이미지를 대량으로 올리는 작업, 백업과 복원을 반복하는 작업이라면 파일질라가 흐름을 더 명확하게 보여줍니다.
정리하며
어느 방법이 더 낫다고 단정하기는 어렵습니다. 수정 범위가 작으면 스마트디자인 코드 편집기에서 바로 처리하는 게 효율적이고, 옮길 파일이 많거나 되돌릴 일이 잦다면 파일질라 쪽이 안정적입니다. 운영 중인 쇼핑몰이라면 어떤 작업이든 손대기 전에 백업부터 해두는 습관이 가장 든든한 보험입니다. 두 방법을 모두 익혀두고 작업 성격에 맞게 골라 쓰면, 외부에 맡기지 않고도 웬만한 수정은 직접 처리할 수 있습니다.
