VS Code로 서버 접속해서 파일 올리기 비전공자 / 처음 사용하는 학생용 가이드

이 문서는?
VS Code(코드 에디터)를 이용해서 우리 수업 서버에 접속하고, 자기 폴더에 HTML 파일을 올리는 방법을 단계별로 정리한 안내입니다.
처음 보는 친구도 위에서부터 차근차근 그대로 따라 하면 됩니다.

1. 사전 준비

① VS Code 설치

이미 VS Code가 설치되어 있다면 이 단계는 건너뛰기
없다면 구글에 VS Code 다운로드 검색 → 설치

② 우리 서버 접속 정보 (고정값)

※ 아래 정보는 강사님이 말해준 내용과 같습니다.

서버 주소: estcamp.site
포트 번호: 22 (기본값이라 따로 적지 않습니다)
사용자 이름: eststu번호 (아래 표 참고)
비밀번호: est12345

③ 내 계정 번호 확인

각 학생에게는 eststu번호 계정이 하나씩 배정되어 있습니다.

eststu1 → 이유정
eststu2 → 신예지
eststu3 → 김대철
eststu4 → 허준
eststu5 → 박주혁
eststu6 → 김지수
eststu7 → 박지호
eststu8 → 임종찬
eststu9 → 김혜리
eststu10 → 이시호
eststu11 → 박선우
eststu12 → 고소정

TIP 본인 이름에 해당하는 eststu번호를 꼭 기억해 두세요. 앞으로 접속할 때 계속 사용하게 됩니다.

2. VS Code에 Remote - SSH 설치

1 확장(Extension) 열기

VS Code 실행
왼쪽 사이드바에서 네모 4개 아이콘 (Extensions / 확장) 클릭

2 Remote - SSH 검색 및 설치

검색창에 Remote - SSH 입력
Remote - SSH (Microsoft) 확장을 찾아서 Install(설치) 버튼 클릭
이미 설치되어 있다면 이 단계는 넘어가도 됩니다.

3. SSH 호스트(서버 주소) 추가하기

1 Remote Explorer 열기

왼쪽 사이드바에서 Remote Explorer 아이콘 클릭 (원격 탐색기)
상단 드롭다운에서 SSH Targets 선택

2 새 SSH 호스트 추가

+ 버튼(또는 Add New SSH Host...) 클릭
아래 형식으로 입력

ssh eststu1@estcamp.site

위 예시는 이유정 학생(계정: eststu1) 기준입니다.
다른 학생은 eststu번호만 자신의 번호로 바꿔서 입력합니다.

예시:
김지수 → ssh eststu6@estcamp.site
임종찬 → ssh eststu8@estcamp.site

Enter를 누르면 “어느 설정 파일에 저장할까요?” 라는 문구가 나옵니다.
기본 설정 파일(처음 나오는 선택지) 선택 → Enter

4. 서버에 실제로 접속하기

1 SSH Targets에서 내 서버 선택

다시 Remote Explorer > SSH Targets로 이동
방금 추가한 내 계정 주소를 찾습니다.
예: ssh eststu1@estcamp.site
그 위에 마우스를 올리면 ▶ 모양 아이콘이 나타납니다.
▶ 클릭 → Connect to Host in New Window(새 창에서 연결) 선택

2 처음 접속 시 선택 사항

오른쪽 아래나 상단에 “이 시스템은 어떤 OS인가요?” 라는 질문이 나오면 Linux 선택

3 비밀번호 입력

상단에 비밀번호 입력 창이 뜨면 비밀번호: est12345 입력
Enter 키를 눌러 접속

주의 비밀번호를 잘못 입력하면 접속이 되지 않습니다.
한/영, 대소문자, 숫자 키패드 여부를 꼭 확인하세요.

5. 내 작업 폴더 열기

이제 서버에 접속이 되었으니, 내가 HTML 파일을 올릴 폴더를 열어야 합니다.

1 Open Folder(폴더 열기)

VS Code 왼쪽 상단의 EXPLORER(탐색기) 영역에서 Open Folder 또는 폴더 열기 버튼 클릭

2 경로 직접 입력

나오는 창에서 경로를 직접 입력합니다.

기본 경로 형식

/var/www/esthtml/자기이름

예를 들어 이름이 “이유정”이면 → /var/www/esthtml/이유정
이름이 “김지수”이면 → /var/www/esthtml/김지수

경로를 입력한 뒤 OK 또는 확인 버튼 클릭

참고 이 단계에서 비밀번호를 한 번 더 입력하라는 창이 뜰 수 있습니다.
같은 비밀번호 est12345를 다시 입력하면 정상적으로 폴더가 열립니다.

폴더가 열리면, 안에 있는 파일 목록(또는 빈 폴더)이 왼쪽 Explorer에 보입니다.
처음이라 비어 있을 수 있으니 걱정하지 않아도 됩니다.

6. 서버에 새 HTML 파일 만들어 보기

1 새 파일 생성

Explorer(탐색기)에서 내 폴더(/var/www/esthtml/자기이름) 위에 마우스를 올립니다.
새 파일 아이콘(종이 + + 모양) 클릭
파일 이름 입력 → 예: test.html → Enter

2 내용 작성 & 저장

아래 예시처럼 간단한 HTML 코드를 입력해 봅니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>테스트 페이지</title>
</head>
<body>
    <h1>VS Code + SSH 테스트</h1>
    <p>서버에 업로드된 test.html 입니다.</p>
</body>
</html>

Ctrl + S (또는 Mac에서는 ⌘ + S)로 저장
이 파일은 내 컴퓨터가 아니라 서버 안에 저장되는 파일입니다.

7. 내 컴퓨터에 있는 파일을 서버로 올리기

① 드래그 앤 드롭으로 업로드

내 컴퓨터에서 올리고 싶은 파일이 있는 폴더를 엽니다. (예: index.html)
VS Code에서 /var/www/esthtml/자기이름 폴더를 열어둔 상태에서,
내 컴퓨터의 파일을 VS Code 왼쪽 폴더 영역으로 끌어다 놓기(Drag & Drop)
“이 위치에 파일을 복사하시겠습니까?” → 확인

② 복사 / 붙여넣기

내 컴퓨터에서 VS Code로 파일 열기 (로컬)
전체 선택 → 복사 (Ctrl + A → Ctrl + C)
서버 쪽 폴더에 새 파일 만들기 (예: index.html)
붙여넣기 → 저장

8. 접속 종료하기

VS Code 오른쪽 아래 파란 바에서 SSH: ... 부분 클릭
Close Remote Connection 또는 원격 연결 닫기 메뉴 선택
또는 VS Code 프로그램을 그냥 종료해도 접속은 끊어집니다.

9. 자주 나오는 문제 & 확인할 것

① 비밀번호 오류
- 비밀번호 est12345를 정확히 입력했는지 확인
- 한/영, 대소문자, 숫자 키패드 ON/OFF 확인

② 폴더가 안 열리는 경우
- 경로를 다시 확인: /var/www/esthtml/자기이름
- 이름 오타, 띄어쓰기, 슬래시(/) 위치 확인

③ 웹 브라우저에서 403 에러(접근 거부)
- 파일이 /var/www/esthtml/자기이름 안에 있는지 확인
- 파일 이름이 정확한지(대소문자 포함) 확인
- URL을 잘못 입력하지 않았는지 확인

④ 인터넷 끊김 / 시간 초과
- 와이파이, 유선 인터넷 상태 확인 후 다시 접속 시도

ssh접속 에러 발생시 아래의 명령들을 실행 vscode 켜자마자
>ssh
Remote-SSH:Kill Local connection Server For...
Remote-SSH:Clear previous session metadata(used for enhanced error reporting)
Remote-SSH:Uninstall VS Code Server from Host... (비번입력하라 나옴 est12345)

ssh 접속 실행하면 됨.

10. 전체 흐름 한 번 더 정리

VS Code 설치 + Remote - SSH 확장 설치
SSH 호스트 추가 예: ssh eststu1@estcamp.site
SSH Targets에서 내 계정 선택 → Connect to Host in New Window
비밀번호 est12345 입력 → 서버 접속
Open Folder에서 /var/www/esthtml/자기이름 입력 후 열기
새 HTML 파일 만들기 또는 내 컴퓨터 파일을 드래그해서 업로드
저장하면 곧바로 서버에 반영
작업이 끝나면 원격 연결 닫기

마지막 한 마디 처음에는 조금 헷갈릴 수 있지만, 두세 번만 반복해 보면 금방 익숙해집니다.
막히는 부분이 있으면 어디 단계에서 막혔는지 캡처해서 물어보세요.