카페24 VS Code로 FTP 연결하는 방법

카페24 스마트 에디터를 이용하여 사이트를 수정하는 것은 꽤나 번거로운 일입니다. 이 글에서는 VS Code에서 SFTP 플러그인을 이용해 카페24 서버와 바로 연결하는 방법을 소개하려고 합니다. 이 방법을 활용하면 VS Code에서 코드를 작성하면서 동시에 서버에 실시간으로 업로드할 수 있어 훨씬 효율적입니다.

VS Code에 SFTP 플러그인 설치

가장 먼저 해야 할 일은 SFTP 확장 프로그램 설치입니다.
1. VS Code의 왼쪽 사이드바의 Extensions(확장) 아이콘을 클릭합니다.
2. 검색창에 SFTP 플러그인을 찾아 설치합니다.

카페24 FTP 정보 확인

SFTP 연결을 위해 카페24 웹호스팅 관리 페이지에서 아래 정보를 확인합니다.
• 호스트 (Host): 쇼핑몰 아이디.ftp.cafe24.com
• 포트 (Port): 21 (SFTP의 경우 22)
• 사용자명 (Username): 쇼핑몰 아이디
• 비밀번호 (Password): 쇼핑몰 비밀번호

sftp.json 설정 파일 생성

VS Code에서 Ctrl+Shift+P(커멘트 팔레트)을 열어 SFTP: Config를 선택하면 자동으로 .vscode/sftp.json 파일이 생성됩니다. 파일을 아래와 같이 수정합니다. 

{
    "name": "쇼핑몰명(자유)",
    "host": "쇼핑몰 아이디.ftp.cafe24.com",
    "protocol": "ftp",
    "port": 21,
    "username": "쇼핑몰 아이디",
    "password": "쇼핑몰 비밀번호"
    "remotePath": "/sde_design/xxx", //사용하려는 스킨 위치 
    "uploadOnSave": true, //자동 저장 기능 활성화  
}

SFTP 연결 및 파일 수정 작업

vscode

설정이 완료되었으면, 이제 실제 연결을 시도해봅니다.

  • VS Code 왼쪽 사이드바에 SFTP 아이콘을 클릭하여 해당 폴더/파일이 나오면 정상적으로 연결이 된 것 입니다.
  • Ctrl+Shift+P(커멘트 팔레트)를 열어 Download를 눌러 전체 소스를 로컬에 다운로드합니다.
  • Config 설정이 "uploadOnSave": true이고, 로컬에 다운로드를 했다면 실서버에 실시간 수정이 가능합니다.

SFTP 연결을 해두면, 수정할 때마다 저장만 해도 서버에 바로 반영되기 때문에 개발 속도가 크게 향상됩니다.
또한, 같은 프로젝트 폴더에서 로컬과 서버 파일을 비교하거나 백업하는 데도 활용할 수 있습니다.

스마트 에디터와 VS Code 작업을 함께 한다면

동시에 작업을 할 경우, 스마트 에디터의 수정 반영이 잘 안되는 경우, VS Code FTP 연결이 먹통이 경우가 있는데요. 스마트 에디터에서 작업 후 반드시 SFTP: Download 하여 최신 것으로 다운로드가 하는 것이 필요합니다. 이 작업을 하지 않고 수정할 경우, 에디터 작업 내용이 사라질 수 있고, VS Code가 먹통이 될 경우가 있습니다.


팁: 안전한 실무 루틴

왔다갔다 할 경우 새로 연동해야 하는 번거로움과 실서버 반영이 제대로 안되는 이슈가 있기 때문에 아래와 같이 작업하는 것을 추천합니다.

  • 1단계: 스마트 에디터를 활용한 섹션 구성
  • 2단계: VS Code에서 SFTP 다운로드하여 동기화
  • 3단계: 코드 수정 작업
  • 4단계: 실서버 반영

마무리

VS Code와 SFTP 조합은 웹 개발자라면 꼭 써봐야 할 필수 기능입니다. 기존의 웹 FTP 방식보다 훨씬 빠르고, VS Code의 익숙한 환경 안에서 바로 서버와 연결할 수 있다는 점이 큰 장점이죠.
카페24 쇼핑몰을 사용하는 분들이라면 오늘 소개한 방법을 꼭 한번 시도해보시길 추천드립니다. 실제로 작업 시간을 줄이고, 생산성을 높이는 데 큰 도움이 될 거예요.

ALL RIGHTS ARE RESERVED.
magnifiercrossmenucross-circle