DAY 02. Claude Code 및 웹 개발환경 구축

1.수업 구성

수업 난이도

코딩 경험이 거의 없는 초급자 중심의 교육내용

수업방식

Claude 주요 기능 이해 + Claude Code · VS Code · Git · GitHub 실습

핵심목표

AI 코딩도구와 개발도구의 역할을 이해하고 VS Code에서 Claude Code를 활용하여 실제 웹프로젝트를 제작할 수 있는 기본 작업환경 구성하기

2.이번 수업에서 무엇을 배우는가

오늘 집중할 내용

Claude의 주요 기능 간단하게 살펴보기

Claude 사용량 한도와 사용 크레딧 이해하기

Claude와 Claude Code의 차이 이해하기

웹 Claude Code와 VS Code Claude Code 비교하기

VS Code를 사용하는 이유 이해하기

VS Code 개발환경 구성하기

VS Code 필수 확장 프로그램 설치하기

Git을 설치하는 이유 이해하기

Git과 GitHub의 차이 구분하기

GitHub Repository와 VS Code 연결하기

Claude Code로 실제 프로젝트 파일 생성·수정하기

Git · GitHub로 작업내용 기록하고 저장하기

오늘 수업의 전체 흐름

Claude 기본기능 확인부터 GitHub 저장까지의 전체 12단계

1 Claude 기본 기능 확인하기

2 Claude 사용량 한도 이해하기

3 Claude Code 이해하기

4 웹 Claude Code / VS Code 환경 비교하기

5 VS Code 개발환경 준비하기

6 필수 확장 프로그램 설치하기

7 Git 설치하기

8 GitHub와 VS Code 연결하기

9 Claude Code로 웹페이지 제작하기

10 브라우저에서 결과 확인하기

11 Git으로 작업내용 기록하기

12 GitHub에 저장하기

AI에게 코드를 받는 것에서 끝나는 것이 아닌 실제 개발환경 안에서 AI와 함께 웹사이트를 제작하고 관리하는 과정 경험하기

3.Claude 주요 기능 간단하게 살펴보기

Claude란?

자연어로 질문하거나 원하는 작업을 요청하여 텍스트·코드·문서·아이디어 등의 결과를 생성할 수 있는 생성형 AI

웹코딩 활용 예시

웹사이트 아이디어 정리하기 사이트 구성 기획하기 코딩 개념 질문하기 코드 설명받기 오류 원인 확인하기 디자인 방향 제안받기

기본 화면에서 확인할 것

채팅 입력창

→ Claude에게 질문과 작업 요청하기

대화 목록

→ 이전에 진행했던 대화 다시 확인하기

파일 / 이미지 첨부

→ 문서·코드·이미지 등을 함께 전달하기

Projects

→ 하나의 프로젝트에 필요한 자료와 작업지침 관리하기

결과물 창 (Artifacts)

→ Claude가 생성한 코드나 결과물을 별도의 결과 형태로 확인하기

오늘 수업에서는

Claude 웹의 세부기능을 하나하나 학습하는 것이 목적이 아니라
기본 기능만 확인한 후 실제 웹제작은 VS Code와 Claude Code를 중심으로 진행합니다.

4.Claude 사용량 한도와 사용 크레딧 이해하기

Claude는 무제한으로 사용할 수 있는가?

Claude는 사용하고 있는 플랜에 따라 사용할 수 있는 양에 제한이 있습니다. 단순히 "하루에 질문 100번" 처럼 메시지 개수만으로 정해지는 방식은 아닙니다.

사용량에 영향을 주는 요소

대화의 길이 입력한 내용의 양 첨부파일 사용하는 모델 생각의 깊이 설정 사용하는 기능 대화에 누적된 내용 Claude Code 작업량

Claude 웹과 Claude Code 등 같은 Claude 계정에서 사용하는 서비스의 사용량은 동일한 플랜 사용량 한도에 함께 포함될 수 있습니다.

주요 사용량 한도

5시간 사용량 한도

일정 시간 동안 사용할 수 있는 사용량

→ 일반적인 유료 플랜에서는 5시간 단위의 사용량 한도 적용

주간 사용량 한도

한 주 동안 사용할 수 있는 전체 사용량

→ 플랜에 따라 사용 가능한 양 차이 발생

그 외 서비스 상황이나 플랜에 따라 추가적인 모델별·기능별 제한이 적용될 수 있습니다.

주의

Claude의 기본 사용량을 "일간 + 주간 + 월간의 세 가지 고정 한도"라고 단순하게 이해하지 않기.
"5시간 한도 + 주간 한도 + 플랜별 추가 제한" 형태로 이해하기

사용 크레딧이란?

기본 사용량을 모두 사용했을 경우

지원되는 유료 Claude 플랜에서는 기본 사용량을 모두 사용한 이후 사용 크레딧(Usage Credits)을 이용하여 추가 비용을 지불하고 계속 사용할 수 있습니다.

기본 플랜 사용량

사용량 한도 도달

사용 크레딧 사용

추가 사용량에 대해 종량제 방식으로 계속 이용

(사용 크레딧을 사용하지 않는 경우 → 기본 사용량이 다시 초기화된 후 이용)

Claude는 무제한 서비스가 아닙니다. 현재 사용량을 확인하면서 작업하기.
특히 여러 파일을 읽고 수정하는 Claude Code 작업은 단순한 짧은 질문보다 사용량이 빠르게 증가할 수 있습니다.

5.Claude와 Claude Code의 차이

Claude

일반적인 AI 대화와 다양한 작업에 활용

주요 활용

질문하기 아이디어 정리하기 자료 분석하기 글 작성하기 코딩 개념 질문하기 간단한 코드 생성하기

쉽게 표현하면 "AI에게 질문하고 결과를 받는 공간"

Claude Code

실제 개발 프로젝트의 코드와 파일을 다루도록 만들어진 AI 코딩도구

주요 활용

프로젝트 구조 확인하기 여러 파일 함께 읽기 새로운 파일 만들기 기존 코드 수정하기 오류 원인 찾기 여러 파일 한 번에 수정하기 터미널 명령 실행하기 Git 작업 지원하기

쉽게 표현하면 "실제 프로젝트 안에서 함께 일하는 AI 개발 파트너"

6.웹 Claude Code / VS Code Claude Code 비교

Claude Code는 웹에서도 사용할 수 있는데 왜 VS Code를 사용할까?

웹 Claude Code에서는 GitHub Repository를 연결한 뒤 브라우저에서 원하는 개발작업을 요청할 수 있습니다. 웹 Claude Code는 내 컴퓨터가 아닌 Anthropic이 제공하는 원격 Cloud 환경에서 코드를 실행하고 수정합니다.

GitHub Repository 선택

작업내용 입력

Claude가 원격 개발환경에서 작업

변경내용 생성

결과 확인 및 검토

웹 Claude Code의 큰 장점

내 컴퓨터에 개발환경을 만들지 않고도 작업 가능내 컴퓨터에 직접 Clone하거나 개발환경을 모두 구성하지 않아도 GitHub Repository만 연결하면 작업 가능
작업을 맡겨두고 다른 일을 할 수 있음요청 후 원격 환경에서 작업하는 동안 사용자는 다른 일을 진행하고 완료 후 결과만 검토
여러 작업을 동시에 진행하기 편리서로 다른 작업을 각각 독립적인 환경에서 실행 가능
명확하게 정해진 작업에 강점특정 오류 수정, 반복적인 코드 정리, 작은 기능 추가, 파일 리팩터링 등

작업내용을 명확하게 전달하고 결과를 나중에 확인하는 방식에 강점

웹 Claude Code의 큰 단점

내 컴퓨터의 실제 개발환경과 분리됨내 컴퓨터의 파일·설정·설치 프로그램·내 컴퓨터에서 미리보기 등을 그대로 사용하는 환경과 차이 발생
작은 수정이 반복되는 작업에는 상대적으로 불편글자 크기 수정 → 확인 → 이미지 크기 수정 → 확인처럼 작은 변경과 확인이 계속 반복되는 웹디자인 작업에 불리
초급자에게는 작업과정이 잘 보이지 않을 수 있음어떤 파일이 만들어지고 수정되었는지 확인하며 학습하기 어려울 수 있음

이번 수업의 목적: 사이트를 빠르게 완성하는 것이 아닌 실제로 어떻게 만들어지는지 이해하기

구분	웹 Claude Code	VS Code + Claude Code
코드 실행 위치	Anthropic Cloud 환경	내 컴퓨터
프로젝트 기준	GitHub Repository	내 컴퓨터의 프로젝트
개발환경 설치	부담 적음	초기 환경 구성 필요
작업 방식	맡기고 결과 확인	함께 보면서 반복 수정
내 컴퓨터 설정 사용	제한적	직접 사용 가능
수정과 확인	완료 후 검토에 유리	즉시 수정·확인에 유리
브라우저 확인	내 컴퓨터와 분리	내 컴퓨터에서 바로 미리보기
학습 과정	자동화 비중 높음	파일·코드·Git 과정 확인 가능
적합한 작업	명확한 작업·백그라운드 작업	제작·디자인·학습·반복 수정

웹 Claude Code

"이 작업 해놓고 결과를 보여줘."

VS Code + Claude Code

"나와 같이 보면서 하나씩 만들어보자."

이번 수업에서는 VS Code + Claude Code 중심으로 진행합니다.

웹 Claude Code의 기능이 부족해서가 아니라, 웹사이트 제작과 수정과정을 직접 확인하고 학습하기 위해 내 컴퓨터의 개발환경을 사용합니다.

7.VS Code와 Claude Code, 개발환경 준비하기

건물과 직원으로 이해하기

VS Code

실제 프로젝트 파일을 열고 작성·수정하는 코드 편집 프로그램

쉽게 표현하면 "회사 건물 / 작업실" — 실제 업무가 이루어지는 공간

이 안에 있는 개발도구

프로젝트 파일 코드 Terminal Git 확장 프로그램

Claude Code

VS Code 안에서 프로젝트 파일을 분석하고 코드 생성·수정을 지원하는 AI 코딩도구

쉽게 표현하면 "그 건물에서 함께 일하는 AI 직원"

사용자가 자연어로 작업을 지시하면 프로젝트를 확인하고 필요한 작업을 직접 수행합니다.

예시로 이해하기

사용자

"메인페이지에 자기소개 영역을 하나 추가해줘."

Claude Code (AI 직원)

프로젝트 파일 확인하기

수정할 파일 찾기

필요한 코드 작성하기

변경내용 적용하기

사용자 — 결과 확인하기

꼭 기억하기 — VS Code와 Claude Code는 서로 대체하는 프로그램이 아니라, VS Code라는 작업공간 안에서 Claude Code를 함께 사용하는 방식입니다. Claude Code의 VS Code 확장 프로그램은 코드와 파일을 직접 참고하고 무엇이 바뀌었는지 비교해서 확인할 수 있도록 지원합니다.

수업에서 필요한 프로그램과 계정

Claude Code를 사용할 수 있는 Claude 계정 GitHub 계정 VS Code Git 웹브라우저

VS Code 설치하기

VS Code(Visual Studio Code)란 Microsoft에서 무료로 제공하는 코드 편집기 프로그램입니다. Windows, Mac 등 대부분의 컴퓨터에서 사용할 수 있으며, 회원가입 없이 누구나 다운로드하여 설치할 수 있습니다.

공식 홈페이지 접속하기 (code.visualstudio.com)

사용 중인 운영체제(Windows / Mac)에 맞는 다운로드 버튼 클릭하기

다운로드된 설치파일 실행하기

라이선스 동의 후 기본값 그대로 [다음] 계속 누르기

설치 완료 후 VS Code 실행하기

초기 화면(Welcome 탭)이 열리면 설치 완료

설치 시 참고할 옵션

설치 과정 중 "Add to PATH", "Create a desktop icon" 같은 체크박스가 나타나면 기본값(선택된 상태) 그대로 두고 진행해도 됩니다.

설치 후 확인하기: VS Code를 실행했을 때 왼쪽에 파일 탐색기 아이콘, 위쪽에 메뉴바가 보인다면 정상적으로 설치된 것입니다. 처음 실행하면 대부분 영어로 표시되는데, 다음 단계에서 설치할 Korean Language Pack으로 한국어 화면으로 바꿀 수 있습니다.

기본 세팅 흐름

1 VS Code 설치

2 VS Code 확장 프로그램 설치

3 Git 설치

4 Git 설치 확인

5 Claude Code 로그인

6 GitHub 계정 준비

7 개발환경 완성

※ Claude Code VS Code 확장 프로그램은 Claude 유료 구독으로 로그인하여 사용 가능합니다.

VS Code 필수 확장 프로그램 설치하기

Extension이란 VS Code 기본 프로그램에 새로운 기능을 추가해서 사용할 수 있도록 하는 확장 프로그램입니다.

VS Code 실행 → 왼쪽 Extensions 선택 (또는 Ctrl + Shift + X)

검색창에 확장 프로그램 이름 입력

올바른 제작사인지 확인

Install 선택

1

Claude Code for VS Code

제작사: Anthropic

용도: VS Code 안에서 AI에게 자연어로 코드 생성·수정·분석을 요청하기 위한 확장 프로그램

Extensions → "Claude Code for VS Code" 검색 → Anthropic 제작 확인 → Install → Claude 계정 로그인
Claude Code 확장 프로그램에는 VS Code용 Claude Code가 포함되어 있으므로, 확장 프로그램만 설치하면 바로 사용할 수 있습니다.

2

Korean Language Pack for Visual Studio Code

제작사: Microsoft

용도: VS Code 메뉴와 인터페이스를 한국어로 사용할 수 있도록 변경하는 언어팩

Extensions → "Korean Language Pack" 검색 → Microsoft 제작 확인 → Install → 필요 시 VS Code 재시작
VS Code는 기본적으로 영어 UI를 제공하며 다른 표시 언어는 Language Pack을 통해 사용할 수 있습니다. 초급자가 메뉴와 기능을 쉽게 찾을 수 있도록 설치합니다.

3

Live Server

제작사: Ritwick Dey

용도: 작성한 웹페이지를 내 컴퓨터에서 실행하고 수정한 결과를 브라우저에서 빠르게 확인하기 위한 확장 프로그램

Extensions → "Live Server" 검색 → Ritwick Dey 제작 확인 → Install
HTML 파일 작성 → Live Server 실행 → 브라우저에서 페이지 확인 → 코드 수정 → 브라우저에서 변경내용 확인

VS Code 기본 세팅 정리

VS Code

Claude Code

Korean Language Pack

Live Server

Git

Claude 계정

GitHub 계정

웹 바이브코딩 기본 작업환경 완성

8.Git과 GitHub 이해하기

Git을 설치하는 이유 — VS Code가 있는데 Git은 왜 따로 설치해야 할까?

VS Code에는 Source Control이라는 Git 관리 화면이 기본으로 존재하지만, VS Code 자체가 Git 프로그램을 대신하는 것은 아닙니다. VS Code는 컴퓨터에 설치되어 있는 Git을 이용하여 변경내용 확인 · Stage · Commit · Clone · Push 등의 작업을 수행합니다.

Git = 실제로 기록을 처리하는 엔진 | VS Code Source Control = Git을 조작하는 운전대와 계기판

→ 이번 수업에서 Git을 설치하는 이유: 프로젝트의 변경내용을 기록하고 GitHub와 연결하기 위해서입니다.

Git이란?

프로젝트 파일이 어떻게 변경되었는지 내 컴퓨터에서 기록하고 관리하는 버전 관리 프로그램입니다.

Git을 사용하지 않는 경우

최종.html

최종수정.html

진짜최종.html

진짜진짜최종.html

Git을 사용하는 경우

하나의 프로젝트를 유지하면서 수정한 시점마다 변경내용을 기록합니다.

→ 여러 개의 복사본을 만들지 않고 하나의 프로젝트 안에서 작업이력 관리하기

Git과 GitHub의 차이

Git

내 컴퓨터에서 프로젝트의 변경내용을 기록하는 프로그램

파일 변경 확인하기 작업이력 기록하기 Commit 만들기 이전 변경내용 확인하기

인터넷이 없어도 내 컴퓨터 안에서 기본적인 작업 기록이 가능합니다.

쉽게 표현하면 "개인 작업일지"

GitHub

Git으로 관리하는 프로젝트를 인터넷에 저장하고 공유하는 온라인 서비스

프로젝트 온라인 저장하기 다른 컴퓨터에서 가져오기 공유하기 협업하기

온라인에서 변경이력을 확인할 수 있습니다.

쉽게 표현하면 "작업일지를 저장하고 공유하는 온라인 공간"

구분	Git	GitHub
형태	프로그램	온라인 서비스
위치	내 컴퓨터	인터넷
핵심 역할	변경내용 기록	프로젝트 저장·공유
대표 기능	Commit	Repository
인터넷	기본 기록에는 불필요	필요

가장 중요한 차이 — Git 설치 = GitHub 설치 X / GitHub 계정 생성 = Git 설치 X

Claude Code · VS Code · Git · GitHub 관계 이해하기

VS Code (작업공간) → Claude Code (생성·수정 지원) → Git (변경내용 기록) → GitHub (온라인 저장)

VS Code에서 Claude Code와 함께 사이트를 만들고 → Git으로 작업을 기록하고 → GitHub에 저장하기

9.VS Code 기본 화면 & Repository 개념 이해하기

VS Code 기본 화면 이해하기

Explorer

프로젝트의 파일과 폴더 확인하기 — 새 파일/폴더 만들기, 파일 이름 변경하기, 프로젝트 구조 확인하기

Editor

HTML · CSS · JavaScript 등 실제 코드 확인 및 수정하기

Claude Code

자연어로 코드 생성·수정·분석 요청하기

Source Control

Git의 변경내용을 화면에서 확인하기 — 변경된 파일 확인, Stage, Commit, Push

Terminal

개발과 관련된 명령어 실행하기

처음부터 모든 메뉴를 외우지 않고 실제 제작에 필요한 영역부터 사용하기

Repository란?

하나의 프로젝트를 저장하고 관리하는 공간 — 쉽게 표현하면 "프로젝트 전용 온라인 저장공간"

my-first-page
├── index.html
├── style.css
└── script.js

내 컴퓨터와 GitHub

VS Code에서 작업하는 프로젝트는 내 컴퓨터에, Push한 프로젝트는 GitHub(온라인)에 저장됩니다.

내 컴퓨터 ↕ Git ↕ GitHub (온라인)

Clone이란?

GitHub에 있는 Repository를 내 컴퓨터로 가져와 직접 작업할 수 있도록 만드는 과정

GitHub Repository

Clone

내 컴퓨터에 프로젝트 생성

VS Code에서 프로젝트 열기

Clone = GitHub 프로젝트를 내 컴퓨터에 작업용으로 가져오기

10.GitHub Repository 만들기 & VS Code 연결하기

GitHub Repository 만들기

GitHub 로그인

New Repository 선택

Repository 이름 작성

Public / Private 선택

Repository 생성하기

Repository 이름 예시

portfolio-site cafe-homepage my-first-page

이름 작성 시 참고

• 프로젝트 내용을 알아볼 수 있도록 작성하기
• 공백 대신 - 활용하기
• 지나치게 긴 이름 피하기
• 간단한 영문 이름 사용하기

GitHub와 VS Code 연결하기

GitHub에서 Repository 생성

VS Code 실행

Clone Repository 선택

GitHub Repository 선택

내 컴퓨터의 저장 위치 지정

프로젝트 열기

VS Code는 컴퓨터에 설치된 Git을 이용하여 Repository를 Clone하고 Source Control에서 변경내용을 관리할 수 있습니다.

11.Claude Code로 첫 번째 웹프로젝트 만들기

기존 방식

Claude 웹에서 코드 요청

코드 복사

VS Code 파일 생성

각 파일에 코드 붙여넣기

오늘부터 사용할 방식

VS Code에서 프로젝트 열기

Claude Code 실행

자연어로 제작 요청

Claude Code가 프로젝트 확인 후 파일 생성·수정

브라우저에서 결과 확인

Claude Code가 어떤 파일을 만드는지, 어떤 파일을 수정하는지, 어떤 코드가 추가되는지 직접 확인하기.
초급자 실습에서는 변경내용을 바로 모두 허용하기보다 Manual 또는 Plan 등의 방식으로 어떤 파일을 수정하는지 먼저 확인하는 습관을 익히세요. Claude Code VS Code 확장 프로그램은 Manual, Plan, Auto 등의 권한 모드를 지원하며, Manual에서는 파일 변경 전 비교 화면을 확인할 수 있습니다.

웹프로젝트 기본 파일 확인하기

my-first-page
├── index.html
├── style.css
└── script.js

index.html

웹페이지 구조와 콘텐츠

style.css

웹페이지 디자인

script.js

기능과 동작

지난 수업과 연결하기 — HTML: 무엇이 있는가 / CSS: 어떻게 보이는가 / JavaScript: 어떻게 움직이는가

Live Server로 웹페이지 확인하기

index.html 파일 열기

Live Server 실행

브라우저에서 웹페이지 열기

확인할 내용

콘텐츠가 정상적으로 표시되는지 CSS 디자인이 적용되었는지 이미지가 정상적으로 보이는지 버튼이 정상적으로 표시되는지 JavaScript 기능이 작동하는지

Claude Code를 활용하여 반복 수정하기

디자인 수정 "현재 구조와 기능은 유지하고 배경색을 밝은 베이지색으로 변경해줘."

요소 수정 "다른 부분은 변경하지 말고 버튼의 모서리만 조금 더 둥글게 만들어줘."

콘텐츠 추가 "자기소개 아래에 취미를 보여주는 영역 하나를 추가해줘."

오류 해결 "버튼을 눌러도 작동하지 않아. 관련 파일을 확인하고 원인을 찾아서 수정해줘."

결과 확인

수정할 부분 찾기

Claude Code에 요청

변경내용 확인

브라우저에서 다시 확인

반복 수정

요청 → 확인 → 수정 → 반복의 바이브코딩 과정을 실제 개발환경에서 경험하기

12.Git으로 작업내용 기록하고 GitHub에 저장하기

Git의 기본 작업 흐름

코드 작성 및 수정

Source Control에서 변경내용 확인

Stage

Commit Message 작성

Commit

Stage

다음 Commit에 어떤 변경내용을 포함할지 준비하는 단계

Stage = 이번 작업기록에 포함할 변경내용 선택하기

Commit

현재 프로젝트의 상태를 하나의 변경기록으로 저장하기

Commit = 현재 상태의 Save Point 만들기

Commit Message 작성하기

X

수정

123

최종

O

메인페이지 기본 구조 생성

버튼 클릭 기능 추가

자기소개 영역 추가

나중에 확인했을 때 어떤 작업이었는지 알아볼 수 있도록 작성하기

Push 이해하기

Push

내 컴퓨터에서 기록한 Commit을 GitHub로 보내기

내 컴퓨터 → GitHub

GitHub에 프로젝트 저장하기

내 컴퓨터에서 작업

Stage

Commit

Push

GitHub Repository 업데이트

Push 이후: GitHub Repository 열기 → 페이지 새로고침 → 프로젝트 파일 확인 → Commit 기록 확인

13.DAY 02 수업내용 정리

DAY 02 전체 작업 흐름

1 Claude 기본 기능 확인

2 Claude 사용량 한도와 사용 크레딧 이해

3 Claude / Claude Code 차이 이해

4 웹 Claude Code / VS Code Claude Code 비교

5 VS Code 설치 & 확장 프로그램 설치

6 Git 설치 및 확인, Git/GitHub 차이 이해

7 GitHub Repository 생성 & Clone

8 Claude Code로 웹페이지 제작 & Live Server 확인

9 Claude Code와 반복 수정

10 Stage → Commit → Push

11 GitHub에서 프로젝트 확인

오늘의 핵심 키워드

Claude

일반적인 질문·기획·분석 등에 활용하는 생성형 AI

사용량 한도

플랜에 따라 일정 기간 사용할 수 있는 Claude의 사용량 범위

사용 크레딧

기본 사용량을 초과한 뒤 추가 비용으로 계속 이용할 때 사용하는 방식

Claude Code

실제 프로젝트의 파일을 읽고 생성·수정할 수 있는 AI 코딩도구

웹 Claude Code

GitHub Repository를 Cloud 환경에서 처리하며 작업을 맡길 수 있는 방식

VS Code

내 컴퓨터의 프로젝트를 작성하고 관리하는 개발 작업공간

Live Server

웹페이지를 내 컴퓨터에서 실행하고 결과를 빠르게 확인하는 확장 프로그램

Git

내 컴퓨터에서 프로젝트 변경내용과 작업이력을 기록하는 프로그램

GitHub

Git으로 관리한 프로젝트를 온라인에서 저장하고 공유하는 서비스

Repository

하나의 프로젝트를 관리하는 저장공간

Clone

GitHub 프로젝트를 내 컴퓨터로 가져오기

Stage / Commit

Commit에 포함할 변경내용 준비하기 / 현재 작업상태 기록하기

Push

내 컴퓨터의 작업을 GitHub로 보내기

이번 수업에서 가장 중요한 흐름

VS Code에서 Claude Code와 함께 제작 → Live Server로 직접 확인 → 필요한 부분 반복 수정 → Git으로 작업 기록 → GitHub에 저장

예습 가이드

다음 수업 내용 (DAY 03)

• Claude Code를 활용하여 실제 웹페이지 제작하기
• 페이지별 콘텐츠 구성하기
• 이미지와 텍스트 배치하기
• 디자인 수정하기
• 버튼 및 간단한 인터랙션 적용하기
• 청첩장 · 프로필 · 브랜드 소개 등 미니 웹페이지 제작하기

실제 개발환경 안에서 나만의 미니 웹페이지 완성해보기

수강생 확인이 필요합니다

Claude Code 및 웹 개발환경 구축

1.수업 구성

2.이번 수업에서 무엇을 배우는가

오늘 집중할 내용

오늘 수업의 전체 흐름

3.Claude 주요 기능 간단하게 살펴보기

Claude란?

웹코딩 활용 예시

기본 화면에서 확인할 것

4.Claude 사용량 한도와 사용 크레딧 이해하기

Claude는 무제한으로 사용할 수 있는가?

주요 사용량 한도

주의

사용 크레딧이란?

5.Claude와 Claude Code의 차이

Claude

Claude Code

6.웹 Claude Code / VS Code Claude Code 비교

Claude Code는 웹에서도 사용할 수 있는데 왜 VS Code를 사용할까?

웹 Claude Code의 큰 장점

웹 Claude Code의 큰 단점

7.VS Code와 Claude Code, 개발환경 준비하기

건물과 직원으로 이해하기

예시로 이해하기

수업에서 필요한 프로그램과 계정

VS Code 설치하기

기본 세팅 흐름

VS Code 필수 확장 프로그램 설치하기

Claude Code for VS Code

Korean Language Pack for Visual Studio Code

Live Server

8.Git과 GitHub 이해하기

Git을 설치하는 이유 — VS Code가 있는데 Git은 왜 따로 설치해야 할까?

Git이란?

Git과 GitHub의 차이

9.VS Code 기본 화면 & Repository 개념 이해하기

VS Code 기본 화면 이해하기

Repository란?

내 컴퓨터와 GitHub

Clone이란?

10.GitHub Repository 만들기 & VS Code 연결하기

GitHub Repository 만들기

GitHub와 VS Code 연결하기

11.Claude Code로 첫 번째 웹프로젝트 만들기

웹프로젝트 기본 파일 확인하기

Live Server로 웹페이지 확인하기

Claude Code를 활용하여 반복 수정하기

12.Git으로 작업내용 기록하고 GitHub에 저장하기

Git의 기본 작업 흐름

Commit Message 작성하기

Push 이해하기

GitHub에 프로젝트 저장하기

13.DAY 02 수업내용 정리

DAY 02 전체 작업 흐름

오늘의 핵심 키워드

이번 수업에서 가장 중요한 흐름

다음 수업 내용 (DAY 03)