AI WEB WORKSHOP · 01 / 06

네 가지 도구의 역할

AI WEB WORKSHOP · 02 / 06

세 가지 연결 이해하기

AI WEB WORKSHOP · 03 / 06

처음 한 번 설정하기

01

💻

준비하기

Git·VS Code를 설치하고 GitHub·Vercel 계정을 준비합니다.

02

📂

코드 가져오기

자기 GitHub 저장소 주소를 복사 → VS Code에서 Git: Clone → 폴더 열기.

03

🤖

Claude Code 연결

확장 기능에서 Claude Code 설치 → 이용 가능한 계정으로 로그인.

04

🔗

Vercel 연결

GitHub 저장소를 가져와 프로젝트 설정을 확인하고 최초 배포합니다.

05

🌐

웹사이트 확인

생성된 주소를 열어 제목·이미지·버튼이 표시되는지 확인합니다.

처음 한 번 연결하면, 이후에는 수정 → 검토 → 업로드 → 배포를 반복합니다.

Claude Code는 이용 가능한 구독·Console 등의 인증이 필요합니다. GitHub 저장소를 자기 계정에 준비한 상황을 기준으로 합니다.

AI WEB WORKSHOP · 04 / 06

웹사이트 수정에서 배포까지

01

🎯

수정 목표

하회마을 관광지 카드를 추가하기

02

🤖

AI에 요청

위치·내용·디자인 조건을 구체적으로 전달

03

🔎

미리보기 검토

글자·이미지·버튼·모바일 배치 점검

04

💾

저장

내 컴퓨터의 파일에 반영

05

📌

Commit

변경 내용을 하나의 버전으로 기록

06

☁️

Push

기록한 변경을 GitHub에 업로드

07

✅

배포 확인

Vercel 배포 성공과 실제 사이트 확인

저장 ≠ Commit ≠ Push ≠ 배포

운영 브랜치의 변경은 운영 배포, 다른 브랜치의 변경은 보통 미리보기 배포로 이어집니다. 프로젝트 설정을 확인하세요.

AI WEB WORKSHOP · 05 / 06

어디에서 멈췄을까요?

01

🤔

AI가 수정했는데 그대로?

내 컴퓨터의 파일 저장 → Commit → Push 여부를 확인합니다.

02

📌

Commit했는데 GitHub에 없다?

Commit은 로컬 기록입니다. Push했는지 확인합니다.

03

🌐

GitHub만 바뀌었다?

Vercel 배포 상태·연결 저장소·브랜치·확인 중인 주소를 점검합니다.

04

🧩

내 컴퓨터에서만 된다?

배포 환경 차이를 살펴보고 Vercel 빌드·실행 오류를 확인합니다.

05

👥

팀원 수정이 안 보인다?

Pull로 원격 저장소의 최신 변경을 가져옵니다.

Clone = 처음 가져오기 / Pull = 이후 변경 가져오기

AI WEB WORKSHOP · 06 / 06

관광 수업 실습: 안동 안내 사이트

01

🎨

첫 화면 제목 수정

누구를 위한 사이트인가?
확인: 제목에서 대상 관광객이 드러나는가?

02

🏘️

관광지 카드 추가

관광객에게 필요한 정보는?
확인: 관광지명·설명·위치가 정확한가?

03

📱

모바일 화면 수정

스마트폰에서 읽기 편한가?
확인: 글자 잘림·버튼 겹침이 없는가?

제출: 수정 전후 화면 + GitHub 변경 기록 + 실제 배포 주소

AI에게 요청한 내용과 직접 검토한 결과를 짧게 적어봅시다.

공식 문서 보기

VS Code · Git 시작하기 · Claude Code 확장 · Vercel · GitHub 연결