초보자를 위한 AI로 만든 서비스 인터넷에 올리는 첫 단계 | 깃허브 사용법

AI로 만든 서비스는 처음에는 내 노트북 안에서만 열립니다. 주소가 localhost로 시작한다면 그 주소를 카톡으로 보내 친구 휴대폰에서 눌러도 "사이트에 연결할 수 없음"이 뜹니다. 친구에게 보여 주려면 먼저 내 코드를 깃허브에 올려야 합니다. 서비스를 누구나 주소로 열 수 있게 올려 주는 버셀이, 새 프로젝트를 만들 때 깃허브에 올려 둔 프로젝트부터 고르라고 하기 때문입니다. 이 영상에서는 개념 여섯 개(깃허브 · 버셀 · 저장소 · 커밋 · 푸시 · 풀)를 노트북, 깃허브, 버셀, 휴대폰을 잇는 그림 하나 위에서 하나씩 짚습니다. 개념마다 AI에게 그대로 보내면 되는 요청 문장을 같이 드립니다. 영상에서 보낸 문장과, 영상에는 안 나오지만 알아 두면 좋은 문장을 아래에 모아 뒀습니다. ■ 따라하기 가이드 (요청 문장 복사 · 화면별 순서): https://docs.google.com/document/d/1C... ■ 타임라인 0:00 지금 주소창을 보세요 1:01 왜 깃허브부터일까 2:10 깃허브에 처음 올리기 3:55 고치면 바로 바뀔까 5:20 깨졌을 때 되돌리기 6:18 다른 컴퓨터에서 이어 할 때 7:09 다시 그 주소창 ■ 순서 1. github.com 에 가입합니다 (무료. 나만 볼 수 있는 비공개 저장소도 무료입니다) 2. 서비스를 만든 AI 코딩 도구에 아래 P1을 보냅니다. 처음 쓰는 컴퓨터라면 깃허브 로그인 창이 한 번 뜰 겁니다. 로그인하고 허용을 누르면 됩니다 3. vercel.com 에서 새 프로젝트 → GitHub → 방금 올린 저장소 고르기(Import) → 배포(Deploy) 4. 생긴 주소를 카톡으로 보내 휴대폰에서 엽니다 5. 그다음부터는 고칠 때마다 P4 한 문장이면 버셀이 사이트를 다시 만듭니다 ■ 영상에서 AI에게 보낸 문장 (나온 순서) P1 처음 한 번: 이 프로젝트를 내 깃허브에 비공개 저장소로 올려 줘. 비밀번호나 API 키 같은 건 올라가지 않게 해 줘. P4 고칠 때마다: 여기까지 커밋하고 깃허브에 푸시해 줘. P5 화면이 깨졌을 때: 마지막 커밋 상태로 되돌려 줘. 그 전에 뭐가 사라지는지 먼저 알려 줘. P8 다른 컴퓨터에서 작업을 시작할 때(풀): 깃허브에서 최신 거 받아와 줘. ■ 더 알아 두면 좋은 문장 (영상에는 안 나옴) P2 커밋만 따로 할 때: 여기까지 커밋해 줘. P3 푸시만 따로 할 때: 깃허브에 푸시해 줘. P6 마지막 커밋보다 더 전으로 돌아가야 할 때: 최근 커밋 목록 보여 줘. (언제 무엇을 바꿨는지 한 줄씩 나오면, 돌아갈 커밋을 골라 말하면 됩니다) P7 새 컴퓨터에서 처음 가져올 때: 내 깃허브에 있는 저장소를 이 컴퓨터로 가져와 줘. (이걸 클론이라고 합니다. 새 컴퓨터에 프로젝트가 아직 없을 때 한 번만 보내고, 그다음부터는 P8로 최신 내용만 받아옵니다) P9 친구들이 쓰는 중에 큰 기능을 붙일 때: 결제 기능 작업용 브랜치 만들어 줘. (버셀은 메인이라는 기본 작업 줄기의 코드로 사이트를 만듭니다. 덜 만든 기능이 사이트에 올라가지 않게, 메인에서 갈라져 나온 작업용 줄기인 브랜치에서 만듭니다) P10 큰 기능을 다 만들었을 때: 이 브랜치 메인에 합치고 푸시해 줘. (메인에 합쳐지면 그때 사이트에 올라갑니다) P11 푸시가 거절됐다고 나올 때: 최신 거 받아오고 다시 푸시해 줘. (다른 컴퓨터에서 먼저 올린 내용을 이 컴퓨터가 아직 받지 않았을 때 생깁니다. 깃허브가 덮어쓰지 않으려고 막는 겁니다) P12 충돌이 났다고 나올 때: 충돌 난 곳 보여 주고, 양쪽이 뭐가 다른지 설명해 줘. (두 컴퓨터에서 같은 줄을 서로 다르게 고쳤을 때입니다. 설명을 듣고 남길 쪽을 말하면 AI가 정리해서 다시 올립니다) ■ 안 될 때 푸시가 거절됐다고 나오면(rejected): 깃허브에 내 컴퓨터에 없는 변경이 먼저 올라가 있다는 뜻입니다. P11을 보내세요 충돌이 났다고 나오면(conflict): 어느 쪽을 남길지는 내가 정합니다. P12로 양쪽 차이부터 보세요 P5를 보내면 AI가 바로 되돌리지 않고 사라질 것부터 알려 주고 "진행할까요?"라고 묻습니다. 확인하고 네라고 하면 됩니다 버셀 주소에서 화면은 열리는데 저장 버튼이 오류가 나면: 데이터를 내 컴퓨터 파일에 저장하는 방식이라 그렇습니다. 시연의 투표 페이지도 같았습니다. 화면이 열리는 것과 데이터 저장은 따로 준비해야 합니다 ■ 시연 환경 2026년 10월 19일, AI 코딩 도구는 Claude Code(Opus 5.5), 깃허브 무료 계정, 버셀 무료(Hobby) 플랜. ■ 출처 (수집일 2026년 10월 19일) GitHub 홈 https://github.com/ GitHub 요금제 https://github.com/pricing GitHub 공식 영상 "What is GitHub?"    • What is GitHub?   Vercel 홈 https://vercel.com/ Vercel 문서 "Deploying Git Repositories with Vercel" https://vercel.com/docs/git #깃허브 #GitHub #깃허브사용법 #버셀 #AI코딩