02기본과정180분 (이론 60 + 실습 120)

환경 만들고 첫 배포까지

“오늘 만든 걸 오늘 링크로 보낸다”

02이 차시를 마치면

1.프로젝트 폴더와 파일이 어떤 구조로 이루어지는지 읽을 수 있다.
2.VS Code를 설치하고 Claude Code 확장을 연결해 실습 환경을 스스로 갖출 수 있다.
3.Git으로 변경 이력을 기록하고, 필요할 때 이전 상태로 되돌릴 수 있다.
4.GitHub 저장소를 만들어 내 프로젝트를 업로드할 수 있다.
5.GitHub Pages로 배포해 인터넷에 공개된 URL을 손에 넣을 수 있다.

03왜 필요한가

01차시에서 대화만으로 자기소개 페이지를 완성했지만, 그 페이지는 지금 내 컴퓨터 화면 안에만 존재한다고 해보자. 친구나 동료에게 '한번 봐줘'라고 보여주려면 파일을 통째로 압축해 메일로 보내야 하고, 상대는 그걸 받아 다시 압축을 풀고 파일을 더블클릭해야 겨우 볼 수 있다. 그 사이 AI에게 몇 번 더 수정을 요청하다가 페이지가 이상하게 망가지기라도 하면, 되돌아갈 이전 버전이 없어 처음부터 다시 설명해야 하는 상황과 마주친다.

만든 걸 보여주려면 항상 파일을 전달하고 여는 방법까지 설명해야 한다.
무언가 잘못돼도 몇 분 전, 어제의 정상 상태로 돌아갈 방법이 없다.
'완성됐다'는 게 오직 내 컴퓨터 안에서만 사실이라, 정말 완성인지 남에게 확인받을 길이 없다.
실습실 컴퓨터가 바뀌면 매번 환경을 처음부터 다시 갖춰야 한다.

04개념 설명

폴더와 파일 구조 읽는 법

웹페이지 하나는 결국 폴더 하나다. 그 안에 화면을 그리는 파일(index.html), 꾸미는 파일(style.css), 동작을 담당하는 파일(script.js) 등이 나뉘어 담긴다. VS Code 왼쪽 탐색기는 이 폴더 안의 파일 목록을 나무 모양(파일 트리)으로 보여준다.

01차시에서는 이 구조를 몰라도 AI가 알아서 만들어줬지만, 앞으로는 'index.html에 있는 제목을 바꿔줘'처럼 파일 이름을 직접 언급하며 요청하는 경우가 늘어난다. 오늘은 그 이름들이 눈에 익숙해지는 것부터 시작한다.

my-project/

index.htmlstyle.cssscript.js

index.html = 브라우저가 가장 먼저 여는 화면

폴더 = 프로젝트 하나
index.html = 브라우저가 가장 먼저 여는 화면
파일 이름과 확장자(.html, .css, .js)만 구분해도 오늘 실습은 충분하다

왜 메모장이 아니라 VS Code인가

VS Code는 코드 파일을 여닫는 것 이상의 일을 한다. 파일 구조를 트리로 보여주고, 터미널을 안에 품고 있고, 무엇보다 Claude Code 같은 AI 확장을 사이드바에 붙여 화면을 옮겨 다니지 않고 대화하고 결과를 바로 확인할 수 있게 해준다.

이 과정이 VS Code를 공통 편집기로 고정하는 이유도 여기에 있다. 기본과정은 사이드바 대화 위주로 쓰고, 이후 중급과정에서는 같은 화면 안에서 통합 터미널 비중만 늘려간다 — 중간에 도구를 바꾸는 학습 마찰이 없다.

메모장

파일 하나만 연다

구조·터미널·AI 없이 텍스트만

VS Code

파일 트리 + 터미널 + AI 사이드바

화면을 옮겨 다니지 않고 대화하고 바로 확인

Git — 되돌릴 수 있는 상태를 만든다

Git은 프로젝트의 상태를 시점별로 저장해두는 사진첩에 가깝다. '커밋(commit)'이라는 동작으로 지금 이 순간의 파일 상태를 한 장 찍어 남겨두면, 나중에 무언가 잘못돼도 그 사진(커밋) 시점으로 되돌아갈 수 있다.

지금까지는 '되돌릴 방법이 없다'는 게 가장 큰 불안이었다면, Git을 쓰기 시작하는 순간부터는 마음 놓고 AI에게 과감한 수정을 요청할 수 있다 — 잘못되면 되돌리면 그만이기 때문이다.

01파일 수정

02커밋지금 상태를 사진처럼 저장

03문제 생기면이전 커밋으로 되돌리기

커밋 = 지금 상태를 찍어두는 사진 한 장
커밋을 자주 할수록 되돌아갈 지점이 촘촘해진다
커밋 메시지는 그 사진에 붙이는 짧은 설명표

GitHub과 GitHub Pages — 내 컴퓨터 밖으로 내보내기

GitHub은 Git으로 찍어둔 사진첩(저장소)을 인터넷 어딘가에 보관해주는 서비스다. 내 컴퓨터가 꺼져 있어도, 다른 컴퓨터에서도 같은 사진첩에 접근할 수 있게 된다.

GitHub Pages는 그 저장소 안의 HTML 파일을 그대로 웹페이지로 공개해주는 기능이다. 별도의 서버를 마련하거나 복잡한 설정을 할 필요 없이, 저장소 설정 하나만 켜면 '깃허브아이디.github.io/저장소이름' 형태의 주소가 생긴다. 오늘은 이 방식이 가장 쉬운 배포 경로이기 때문에 쓰고, 서버 기능이 필요한 서비스를 만들 때 쓸 다른 선택지(Vercel 등)는 10차시에서 다룬다.

01로컬 저장소Git으로 커밋

02GitHub에 올리기인터넷에 보관

03Pages 켜기저장소 설정 하나

04주소 생성아이디.github.io/저장소

05실습 가이드

1. VS Code 설치하기
- 공식 사이트(code.visualstudio.com)에서 Windows용 설치 파일을 내려받는다.
- 설치 파일을 실행하고 기본 옵션 그대로 '다음'을 눌러 설치를 마친다.
- 설치가 끝나면 VS Code를 한 번 실행해 정상적으로 열리는지 확인한다.
예상 결과 — VS Code가 실행되어 빈 시작 화면이 보인다.
안 될 때 — 설치 파일이 실행되지 않으면 다운로드가 중간에 끊긴 것일 수 있다. 파일을 다시 내려받는다. 회사 컴퓨터라면 관리자 권한 문제일 수 있으니 담당 부서에 설치 권한을 먼저 확인한다.
2. Claude Code 확장 설치하고 로그인하기
- VS Code 왼쪽 사이드바의 확장(Extensions) 아이콘을 눌러 'Claude Code'를 검색해 설치한다.
- 설치 후 안내에 따라 계정으로 로그인한다.
- 사이드바에 대화창이 뜨는지, 메시지를 보내면 응답이 오는지 확인한다.
예상 결과 — Claude Code 대화창이 열리고 정상적으로 응답을 주고받을 수 있다.
안 될 때 — 확장이 안 보이면 검색어 철자를 확인한다. 로그인이 안 되면 인터넷 연결과 계정 상태를 확인하고, 그래도 안 되면 VS Code를 껐다 켠다.
3. 01차시 프로젝트 폴더 열기
- VS Code 메뉴에서 '파일 → 폴더 열기'를 선택해 01차시에서 만든 자기소개 페이지 폴더를 연다.
- 탐색기에 index.html 등 지난 차시에 만든 파일이 그대로 보이는지 확인한다.
예상 결과 — 지난 차시 결과물이 담긴 폴더가 VS Code에 열려 있다.
안 될 때 — 01차시 폴더를 찾을 수 없다면, 이번 차시용으로 새 폴더를 만들고 Claude Code에게 '지난 차시와 같은 자기소개 페이지를 다시 만들어줘'라고 요청해도 실습을 이어갈 수 있다.
4. Git 초기화하고 첫 커밋 남기기
- Claude Code 대화창에 P2-1 프롬프트로 이 폴더를 Git으로 관리하게 해달라고 요청한다.
- VS Code 왼쪽의 소스 제어(Source Control) 아이콘을 눌러, 변경된 파일 목록과 커밋 내역이 보이는지 확인한다.
예상 결과 — 소스 제어 화면에 첫 커밋 기록이 하나 생긴다.
안 될 때 — 'git이 설치되어 있지 않다'는 메시지가 뜨면 git-scm.com에서 Git을 먼저 설치한 뒤 VS Code를 재시작하고 다시 시도한다.
5. GitHub 계정 만들고 새 저장소 만들기
- github.com에서 계정이 없다면 새로 가입한다.
- 오른쪽 위 '+' 버튼으로 새 저장소(Repository)를 만든다. 이름은 알아보기 쉬운 영문(예: my-intro-page)으로 하고, Public(공개)으로 설정한다.
- 저장소가 생성되면 표시되는 저장소 주소(URL)를 복사해둔다.
예상 결과 — GitHub에 비어 있는 새 저장소가 생기고, 그 주소를 손에 넣었다.
안 될 때 — 저장소 이름에 한글이나 띄어쓰기를 넣으면 오류가 날 수 있다. 영문과 하이픈(-)만 사용한다.
6. 로컬 프로젝트를 GitHub에 올리기
- P2-2 프롬프트에 5단계에서 복사한 저장소 주소를 넣어 Claude Code에게 연결과 업로드(push)를 요청한다.
- GitHub 저장소 페이지를 새로고침해 내 파일들이 올라와 있는지 확인한다.
예상 결과 — GitHub 저장소 페이지에 index.html 등 내 프로젝트 파일이 보인다.
안 될 때 — 인증 창이 뜨면 GitHub 계정으로 로그인해 권한을 허용한다. 그래도 실패하면 에러 메시지 전문을 P2-4(복구 프롬프트)로 붙여 다시 요청한다.
7. GitHub Pages 활성화하기
- GitHub 저장소 페이지에서 'Settings → Pages'로 이동한다.
- Branch를 main(또는 master)으로 선택하고 저장한다. 화면 구성은 실습 시점에 따라 이 교재와 다를 수 있다.
- P2-3 프롬프트로 지금 화면에서 무엇을 눌러야 하는지 Claude Code에게 다시 한번 확인받아도 좋다.
예상 결과 — Pages 설정 화면에 배포된 사이트 주소가 표시된다.
안 될 때 — 설정 후에도 주소가 안 보이면 1~2분 정도 기다렸다가 페이지를 새로고침한다.
8. 배포된 URL 접속해서 확인하기
- 표시된 주소(예: 깃허브아이디.github.io/저장소이름)를 브라우저 주소창에 입력해 접속한다.
- 01차시에서 만든 자기소개 페이지가 그대로 보이는지 확인하고, 이 주소를 다른 기기(휴대폰 등)에서도 열어본다.
예상 결과 — 인터넷 어디서든 접속 가능한 내 자기소개 페이지 URL이 완성된다.
안 될 때 — '404 페이지를 찾을 수 없음'이 뜨면 몇 분 더 기다리거나, 저장소에 index.html이라는 이름의 파일이 정확히 있는지(대소문자 포함) 확인한다.

06실전 프롬프트

P2-1Git으로 관리하기 시작하기

사용 시점 — 실습 4단계 — 폴더를 처음 Git으로 관리하게 만들 때

이 폴더를 git으로 관리하고 싶어.

1. git 저장소로 초기화해줘
2. 지금 있는 파일들을 전부 첫 커밋으로 남겨줘
3. 커밋 메시지는 '첫 페이지 완성'처럼 알아보기 쉽게 적어줘

나는 git이 처음이니까, 지금 뭘 한 건지도
한 문단으로 쉽게 설명해줘.

기대 결과 — 저장소 초기화와 첫 커밋이 완료되고, 방금 한 작업에 대한 쉬운 설명을 받는다.

P2-2GitHub 저장소에 연결해서 올리기

사용 시점 — 실습 6단계 — 만든 GitHub 저장소에 로컬 프로젝트를 업로드할 때

방금 GitHub에 새 저장소를 만들었어. 주소는 이거야.

[GitHub 저장소 URL]

이 로컬 프로젝트를 저장소에 연결하고,
지금까지 만든 커밋을 전부 올려줘(push).

로그인 창이 뜨면 내가 뭘 눌러야 하는지도 알려줘.

기대 결과 — 로컬 저장소가 GitHub 저장소와 연결되고, 커밋 내용이 업로드된다.

P2-3GitHub Pages로 배포하기

사용 시점 — 실습 7단계 — 저장소를 웹페이지로 공개할 때

이 GitHub 저장소를 GitHub Pages로 배포해서
누구나 URL로 접속할 수 있게 만들고 싶어.

지금 GitHub 저장소 설정 화면에서
어느 메뉴에 들어가서 무엇을 클릭해야 하는지
순서대로 알려줘.

배포가 끝나면 최종 주소가 어떤 모양이 되는지도 미리 알려줘.

기대 결과 — 설정 화면 진입 경로와 클릭 순서, 최종 배포 주소의 형태를 안내받는다.

P2-4push나 배포 중 에러가 났을 때 복구용

사용 시점 — 실습 6~7단계 — 명령이 실패하거나 처음 보는 에러 메시지가 뜰 때

방금 시킨 작업을 하다가 이런 에러가 났어.

[에러 메시지 전체를 그대로 붙여넣기]

내가 한 것: [직전에 실행하거나 클릭한 순서]

무엇이 문제인지 먼저 설명하고, 어떻게 고치면 되는지
다시 순서대로 알려줘.

기대 결과 — 원인 진단과 함께 재시도할 수 있는 정확한 절차를 안내받는다.

P2-5커밋 이전 상태로 되돌리기

사용 시점 — 수정하다가 오히려 이상해져서 이전 상태로 돌아가고 싶을 때

방금 수정한 뒤로 페이지가 오히려 이상해졌어.
바로 직전 커밋 상태로 되돌리고 싶어.

1. 지금까지 커밋 목록을 보여줘
2. 어느 커밋으로 되돌리면 좋을지 추천해줘
3. 되돌리는 방법을 안전한 방법으로 알려줘(원본 기록은 남기고)

되돌린 다음에 내가 뭘 확인하면 되는지도 알려줘.

기대 결과 — 커밋 목록 확인 → 되돌릴 지점 추천 → 안전한 되돌리기 절차 → 확인 방법까지 안내받는다.

07이것만은 주의

.gitignore 없이 올려서 원치 않는 파일이 공개된다

무슨 일이 생기나 — 설정 파일이나 개인 메모, 큰 임시 파일까지 실수로 GitHub에 함께 올라갈 수 있다. 한 번 올라간 뒤 삭제해도 커밋 이력에는 그대로 남는다.

대처 — 저장소를 만들 때 .gitignore부터 챙기는 습관을 오늘부터 들인다. 무엇을 제외해야 할지 모르겠으면 Claude Code에게 '이 프로젝트에 맞는 .gitignore를 만들어줘'라고 요청한다.

Public과 Private을 헷갈린다

무슨 일이 생기나 — 저장소를 Public(공개)으로 만들면 전 세계 누구나 코드를 볼 수 있다. 배우는 중이라 아직 공개하고 싶지 않은 내용도 실수로 함께 공개될 수 있다.

대처 — 지금 실습은 자기소개 페이지라 공개해도 무방하지만, 앞으로 개인정보나 회사 자료가 섞인 프로젝트는 반드시 Private으로 만든다. GitHub Pages 무료 공개 배포는 Public 저장소 기준이라는 점도 함께 기억해둔다.

배포 후 바로 안 보인다고 실패로 착각한다

무슨 일이 생기나 — GitHub Pages 설정을 마친 직후 바로 접속하면 '404 페이지를 찾을 수 없음'이 뜬다. 이걸 실패로 판단하고 설정을 다시 만지다가 오히려 꼬인다.

대처 — 배포에는 보통 몇 분 정도 반영 시간이 걸린다. 1~2분 기다렸다가 새로고침해보고, 그래도 안 되면 그때 파일 이름(index.html 철자, 대소문자)부터 확인한다.

커밋 메시지를 대충 남겨 나중에 못 찾는다

무슨 일이 생기나 — '수정', '테스트'처럼 의미 없는 커밋 메시지를 반복해서 남기면, 정작 문제가 생겼을 때 어느 시점으로 되돌아가야 할지 커밋 목록만 봐서는 알 수 없다.

대처 — 커밋할 때마다 '무엇을 했는지'를 한 문장으로 남기도록 AI에게 요청한다. 아직 손에 안 익었다면 Claude Code에게 커밋 메시지 작성까지 맡기고, 저장 전에 한 번 읽어본다.

08자가 점검

0 / 6 완료0%

내 컴퓨터에 VS Code와 Claude Code 확장이 설치되어 있다
01차시 프로젝트 폴더가 Git 저장소로 관리되고 있다
GitHub에 내 프로젝트 저장소가 만들어져 있다
GitHub Pages를 통해 배포된 URL을 손에 넣었다
다른 기기(휴대폰 등)에서도 그 URL로 접속해 페이지가 보이는 것을 확인했다
커밋을 되돌리는 방법을 한 번 이상 직접 해봤다

09과제

오늘 배포한 자기소개 페이지에 작은 수정(문구 하나, 색 하나 등)을 더한 뒤, 다시 커밋하고 push해서 같은 URL이 자동으로 바뀌는지 확인한다. 그리고 그 URL을 지인 한 명에게 보내 실제로 열리는지 확인받는다.

제출 형식 — ① GitHub 저장소 링크 ② 배포된 페이지 URL ③ 지인이 접속해 확인해준 화면 캡처(또는 메시지 캡처)를 하나의 문서로 정리해 제출한다.

10더 알아보기

GitHub Pages 공식 문서 — 배포 옵션과 커스텀 도메인 연결 방법까지 확인 가능 — 10차시에서 다시 참조
Git 기초 안내(공식 가이드) — 커밋·브랜치·되돌리기 명령어의 의미를 더 깊이 이해하고 싶을 때

커밋(Commit): — 특정 시점의 파일 상태를 저장해두는 기록 단위. 필요하면 이 시점으로 되돌아갈 수 있다.
저장소(Repository): — Git으로 관리되는 프로젝트 파일과 그 변경 이력이 함께 저장되는 공간.
푸시(Push): — 내 컴퓨터에 있는 커밋 기록을 GitHub 같은 원격 저장소로 업로드하는 동작.

다음 차시 예고 — 다음 차시에서는 오늘 배운 대화 방식을 한 단계 더 다듬어, 같은 질문도 어떻게 구성하느냐에 따라 결과가 달라지는 이유와 나만의 프로젝트 규칙 파일을 만드는 법을 다룹니다.