개발노트

고즐의 개발 및 서버 개발 노트

VS Code로 원격 서버 편집 세팅하기 SFTP로 프로젝트 다운로드부터 업로드까지

# vscode # sftp # ftp # editplus # 원격편집

Tips 2025.12.13 10일 전 29 회 읽음 1



원격으로 바로 작업하는 걸 좋아해서 Editplus 와 서버에서 급할 때에는 vi 통해서 수정을 했었다. 대용량 파일을 열 때에는 VS Code 큰 강점이 있어 이전에 vim 사용하다가 VS Code 쓰면서 개발 용도로 함께 사용하려고 한다.


EditPlus에서 VS Code로 전환한 이유와 결론

VS Code는 편집과 탐색, 검색, 자동완성에 강하고 SFTP로 서버 작업까지 연결할 수 있다. 다만 서버 환경에 따라 파일 목록과 프로젝트 다운로드가 잘 되기도 하고 안 되기도 하므로, 되는 서버는 VS Code 중심으로 정리하는 것이 가장 효율적이다.

오늘 목표는 EditPlus처럼 원격 서버 소스를 빠르게 수정하면서도 로컬에 코드가 남아 백업 효과까지 얻는 워크플로우를 만드는 것이었다.

결론은 간단하다. 프로젝트 다운로드가 정상 동작하는 서버는 VS Code SFTP로 작업하고, 그렇지 않은 서버는 FileZilla 같은 전송 도구를 보조로 두는 방식이 실무적으로 가장 안정적이다.


추천 작업 구조 한 번에 정리

기준은 하나다. 소스 편집은 VS Code, 전송은 SFTP, 대용량 폴더는 ignore로 제외, 충돌이 나면 서버 최신을 우선으로 로컬을 맞춘다.
  • 프로젝트 다운로드가 되는 서버는 VS Code SFTP 중심으로 작업
  • 로컬 폴더는 서버별로 분리해서 관리
  • uploads, images 같은 대용량 폴더는 ignore 처리
  • 저장하면 자동 업로드되는 흐름은 편하지만 충돌 방지 규칙이 필요


1단계 로컬 작업 폴더 만들기

서버마다 로컬 폴더를 분리하면 설정이 단순해지고 백업도 쉬워진다.

예시는 아래처럼 서버별로 폴더를 만든다.

C:sftpgoz.kr
C:sftpdut.kr

VS Code에서 해당 폴더를 열어 작업 워크 스페이스로 사용한다.


2단계 SFTP 설정 파일 sftp.json 만들기

VS Code SFTP 확장은 워크스페이스 내 .vscode 폴더의 sftp.json을 읽는다. 프로젝트 다운로드가 되는 서버라면 이 방식이 가장 간단하다.

워크스페이스 폴더 안에 아래 경로로 파일을 만든다.

C:sftpdut.kr.vscodesftp.json

기본 설정 예시는 아래와 같다. 비밀번호는 직접 입력하거나 확장 설정 방식에 맞춰 사용한다.

{
  "name": "dut",
  "host": "dut.kr.co.kr",
    "protocol": "sftp",
    "port": 22,
    "username": "dut.kr",
    "remotePath": "/home1/dut.kr/public_html",
    "uploadOnSave": true,
    "useTempFile": false,
    "openSsh": false,
    "confirm": false,
    "ignore": [
    ".vscode",
    ".git",
    "uploads/**",
    "images/**",
    "media/**",
    "backup/**",
    "*.zip",
    "*.tar.gz",
    "*.tgz",
    "*.sql",
    "*.log"
  ]
}

3단계 프로젝트 다운로드로 로컬 백업 만들기

프로젝트 다운로드가 정상 동작하는 서버는 최초 1회 전체 다운로드를 실행하면 로컬에 코드가 남아 백업 효과까지 얻을 수 있다.

VS Code에서 명령 팔레트를 열고 실행한다.


Ctrl + Shift + P 
SFTP: Download Project

다운로드가 끝나면 로컬 폴더에 서버 소스가 내려온다. 이후 편집은 로컬에서 하고 저장 시 서버로 업로드되는 흐름이 된다.


4단계 저장하면 자동 업로드 되는 흐름 만들기

uploadOnSave 옵션을 사용하면 저장만으로 서버 반영이 된다. 다만 서버와 로컬이 어긋난 상태에서 저장하면 덮어쓰기 사고가 발생할 수 있으므로 규칙을 함께 운영해야 한다.
  • 로컬에서 수정 후 Ctrl + S 하면 서버에 반영
  • 처음에는 confirm true로 확인창을 켜고 안정화되면 조정
  • images, uploads는 ignore로 내려받지 않아 디스크와 시간을 절약


충돌 방지 규칙 서버에서 수정했으면 로컬을 먼저 맞춘다

가장 위험한 상황은 서버에서 먼저 수정한 뒤, 로컬의 오래된 파일을 저장해서 서버 최신을 덮어쓰는 경우다. 이 규칙 하나로 사고를 막을 수 있다.
  • EditPlus에서 서버를 수정했다면 VS Code에서 해당 파일을 저장하지 않는다
  • 먼저 서버 최신본을 로컬로 내려받아 동기화한 뒤 작업한다
  • 다운로드가 안 되는 서버는 FileZilla로 해당 파일만 로컬에 복사한다

실전에서 가장 안전한 규칙은 다음 한 줄이다.

서버에서 수정했으면 먼저 서버 최신을 로컬로 가져온 뒤 작업한다


대용량 이미지 폴더는 압축 백업으로 따로 관리

이미지와 업로드 폴더는 용량이 크고 변경도 잦다. 코드와 분리해 백업하면 속도와 안정성이 좋아진다.

서버에서 이미지 폴더를 tar로 묶고 단일 파일로 다운로드하는 방식이 가장 효율적이다.

cd /home1/dut/public_html tar cvfz images_$(date +%Y%m%d).tar.gz images uploads media

이후 FileZilla나 SFTP로 압축 파일만 내려받아 로컬에 보관한다.


정리 오늘의 최종 워크플로우

프로젝트 다운로드가 되는 서버는 VS Code SFTP 중심으로, 대용량은 ignore, 충돌은 서버 최신 우선, 이미지는 압축 백업으로 분리한다. 이 조합이 가장 실용적이다.
  • 서버별 로컬 폴더 생성 후 VS Code로 열기
  • .vscode/sftp.json 설정
  • SFTP: Download Project로 최초 동기화
  • 로컬 편집 후 저장하면 자동 업로드
  • 서버에서 수정했으면 먼저 로컬을 서버 최신으로 맞추기
  • 이미지는 tar 압축 백업으로 별도 관리

이 방식이면 EditPlus의 빠른 원격 편집 감각을 유지하면서, VS Code의 편집 생산성과 로컬 백업까지 동시에 확보할 수 있다.

문의답변