카페24 쇼핑몰 2. 개발환경 세팅하기(FTP)

카페24 쇼핑몰 개발을 하려는 분들이면 쇼핑몰 관리자 계정을 생성한 후, "일단 쇼핑몰이 만들어지긴 했는데..." 하는 상태일 것이다. 아니라면 cafe24.com에서 로그인 -> 쇼핑몰 관리자 -> 회원가입을 통해 회원가입을 먼저 하도록 한다.

필자는 회사에서 쓸 쇼핑몰의 스킨을 만들기 위해 개인 계정을 만들어 테스트할 수 있도록 따로 만들어두었다.

 

프로모드로 전환 후 디자인 관리에 들어가면, 기본으로 설정된 디자인이 보이고, 디자인관리 -> 디자인 보관함에 가면 지금 있는 스킨의 목록을 열람할 수 있다.

디자인 관리 -> 디자인 추가로 가면 입맛에 맞는 스킨을 다운로드 할 수 있다.

우리는 직접 디자인을 만드는게 목적이므로 디자인 보관함(위 사진)의 우측 하단 메뉴인 "기본 디자인 추가"를 눌러 기본 디자인을 추가한다.

 

그 다음은 비밀번호를 변경해줘야 한다.

왜 뜬금없이 비밀번호 변경이냐? 하면, 회원가입시 세팅한 비밀번호로는 FTP 활성화가 안되어 있기 때문에, 비밀번호 변경을 통해 FTP를 활성화 할 수 있다.

변경사항 선택에서 FTP만 선택해 전용 패스워드를 설정한다면 더욱 안전하게 통신할 수 있다.

그 다음은 FTP 페이지로 이동한다.

상단 메뉴에 위치해있다.

이미 FTP는 활성화 되어 있다. 웹FTP 접속 메뉴는 필요가 없다. (해본 결과, Windows, IE에서만 동작하는 자체 프로그램으로 FTP에 접속할 수 있게 해주는데, 걍 FileZilla 같은거 쓰면 된다.)

좌측 메뉴에서 웹FTP접속설정에 들어가 접속 제한 설정을 마친다.

원하는대로 설정해준다.

왠진 모르겠지만 SFTP가 안먹혀서 FTP로 접속하기로 했다.

이제 WebStorm으로 간다.

WebStorm이 유료긴 하지만 관련 기능에 있어 뛰어난 확장성을 제공한다.(교육용 무료) 여기선 WebStorm을 기준으로 설명하겠지만, VSCode에서도 대부분의 기능을 플러그인 형태로 제공할 것이니 각자의 방법으로 따라오는 방법도 있다.

Tools -> Deployment -> Configuration에 들어간다. Deployment는 원격 저장소를 동기화하는 옵션을 제공한다. (사진에서는 이미 설정되어 있어 메뉴가 활성화되어 있다.)

좌측 상단 + 버튼을 클릭 후 FTP를 누른다. 그 다음 정보를 입력한다.

host: {쇼핑몰 관리자 ID}.ftp.cafe24.com

User name: {쇼핑몰 관리자 ID}

Password: {아까 설정한 패스워드}

Test Connection에서 정상이라 뜨면, Root path의 폴더 아이콘을 클릭해 최상단 폴더를 지정해준다. (아님 Autodetect)

연결이 안될 경우, Advanced에서 Passive mode가 체크되어 있는지 확인한다.

OK를 누르면 Tools -> Deployment의 메뉴들이 활성화 될 것이다.

Download from {설정_이름}를 눌러 파일을 다운로드 한다.