인터넷에 올리기

이번 강에서는 GitHub에 파일을 올립니다

GitHub에 파일을 올리는 일은 원래 명령어(git)로 합니다. 걱정 마세요. Code 탭에서 클로드에게 말로 시키면 클로드가 명령을 대신 실행하고, 여러분은 권한 요청을 읽고 수락만 하면 됩니다. 터미널을 직접 열고 싶은 분을 위한 방법은 아래 '터미널로도 할 수 있어요' 에 그대로 남겨 두었습니다.

두 단계

1. GitHub: 내 파일을 보관하는 인터넷 창고. 백업이자 Vercel이 파일을 가져가는 곳.
2. Vercel: 파일을 받아 24시간 켜진 컴퓨터에 올려주는 서비스. 개인 홈페이지는 무료.

한 번 연결하면 이후로는 git push만 하면 자동으로 새 버전이 올라갑니다.

1. GitHub 계정과 저장소

1. github.com 가입 (무료)
2. 오른쪽 위 + → New repository
3. Repository name: my-site / Public / 나머지는 건드리지 않고 Create repository
4. 화면에 명령어 여러 줄이 뜹니다. "…or push an existing repository from the command line" 아래 세 줄이 있는데, 그 안의 저장소 주소(https://github.com/내아이디/my-site.git)를 복사해 둡니다. 아직 창을 닫지 마세요.

2. 내 컴퓨터와 GitHub 연결

Code 탭 대화창에 복사한 주소를 넣어 시키세요:

🗣️ "이 폴더를 GitHub 저장소 [복사한 주소]에 연결하고, main 브랜치로 처음 올려줘(push). 한 번만 하는 설정이야."

클로드가 명령을 실행하기 전에 권한을 물어봅니다. 어떤 명령인지 읽고 수락하세요. (내부적으로는 아래 세 가지 일을 합니다.)

막히면 Claude Code 대화창에: "git push 했더니 이런 에러가 나: [붙여넣기]"

성공하면 GitHub 페이지를 새로고침하세요. 내 파일들이 보입니다.

터미널로도 할 수 있어요

터미널을 직접 쓰고 싶다면 이렇게 합니다.

터미널 여는 법

터미널이 열리면 my-site 폴더로 이동합니다:

cd ~/Desktop/my-site

Desktop/my-site가 아닌 다른 곳에 폴더를 만들었다면 그 경로를 씁니다. 그다음 GitHub 화면의 세 줄을 순서대로 붙여넣습니다. 이런 모양입니다:

git remote add origin https://github.com/내아이디/my-site.git
git branch -M main
git push -u origin main

3. Vercel 연결 (웹 대시보드)

터미널 없이 클릭만으로 배포합니다.

1. vercel.com → Continue with GitHub 로 가입 (GitHub 계정 연결 승인)
2. Add New… → Project
3. my-site 저장소 옆 Import
4. 설정은 건드리지 않고 Deploy
   • Framework Preset이 "Other"면 정상입니다 (프레임워크 없이 HTML만 쓰니까요)
5. 30초쯤 뒤 축하 화면과 함께 주소가 나옵니다: my-site-xxxx.vercel.app

폰으로 열어보세요. 여러분이 만든 홈페이지가 인터넷 어디서나 보입니다. 친구에게 링크를 보내보세요.

4. 수정 → 반영 리듬

이제부터 수정할 때는:

1. Code 탭 대화창에서 Claude Code에게 고쳐달라고 함
2. 미리보기에서 확인
3. 대화창에서 "지금까지 바뀐 거 커밋하고 push해줘"라고 시키고, 권한 요청을 읽고 수락

push하면 Vercel이 자동으로 알아채고 1분 안에 새 버전을 올립니다.

터미널로도 할 수 있어요

앱 터미널 탭에서 직접 입력해도 됩니다:

git add .
git commit -m "영업시간 수정"
git push

지금 바로 한 번 해보세요. 하단 문구를 하나 바꾸고 → 커밋 → push → 1분 뒤 폰에서 새로고침.

5. 폰에서 실제 점검

PC의 폰 모드와 진짜 폰은 다릅니다. 폰에서 직접:

• 전화번호를 누르면 전화 앱이 열린다
• 인스타그램 링크가 열린다
• 지도가 보이고 손가락으로 움직인다
• 사진이 1~2초 안에 뜬다 (느리면 5강 용량 줄이기 다시)
• 글자를 확대하지 않아도 읽힌다

문제가 있으면 폰 화면을 캡처해서 Claude Code에 붙여넣고 "폰에서 이렇게 보여. 고쳐줘".

Vercel 주소가 마음에 안 든다면

Vercel 프로젝트 → Settings → Domains에서 원하는이름.vercel.app으로 바꿀 수 있습니다 (남이 안 쓴 이름이면). 진짜 내 도메인은 9강에서.

오늘의 실습 체크

다음 강의

9강, 내 도메인. mycafe.kr 같은 진짜 주소를 달고, 구글에서 검색되게 준비합니다.