Before
로컬(내 컴퓨터, localhost:4321)에서만 보이던 학습허브 사이트를 드디어 인터넷에 올리기로 했다. 그런데 Git이 뭔지, Vercel이 뭔지, 로컬 사이트랑 배포된 사이트가 뭐가 다른 건지 하나도 몰랐다. “가입만 하면 되는 거 아니야?” 싶었는데, 실제로는 계정 두 개 + 터미널 명령어 여러 개가 필요한 일이었다. 코딩을 모르니 명령어는 당연히 AI한테 맡기기로 했다.
어떻게 했나
1. 계정 두 개부터 만들기 (내가 직접 한 유일한 부분)
AI한테 이렇게 요청했다.
나는 코딩을 모르는 비개발자야. 오늘 내 사이트를 인터넷에 올릴 거야.
그러려면 GitHub와 Vercel에 가입(로그인)이 필요하다고 들었어.
아직 계정이 없어. 두 곳에 어떻게 가입하는지 순서대로 안내해줘.
Vercel은 GitHub 계정으로 바로 로그인하는 게 편하다고 하던데, 그 방법으로 부탁해.
가입하다 막히면 내가 화면을 캡처해서 보여줄게.
복사AI가 실제 가입 화면을 먼저 열어서 최신 절차를 확인한 뒤, 입력할 항목을 순서대로 짚어 줬다. GitHub 가입 → Vercel에서 “Continue with GitHub” 버튼으로 로그인, 이렇게 두 단계로 끝났다.
📸 여기에 GitHub 가입 완료 화면 스크린샷을 넣으면 좋아요.
2. 폴더 전체를 GitHub에 올리기 (여기부턴 AI가 실행)
지금 이 폴더(내 학습허브 사이트)를 통째로 GitHub에 올려줘.
Git으로 해줘. 나는 코딩을 몰라서 명령어를 직접 못 쳐, 네가 대신 실행해줘.
- GitHub에 새 저장소(repository)를 하나 만들어서, 이 폴더 내용을 전부 올려줘.
- 처음이라 GitHub 로그인/인증이 필요하면, 뭘 어디서 해야 하는지 알려줘.
- 다 올라가면 GitHub에서 내 사이트 주소(저장소 링크)를 알려줘.
복사AI가 필요한 프로그램(GitHub CLI)을 알아서 설치하고, 로 그인용 코드 한 줄을 보여줬다. 그 코드를 내가 GitHub 로그인 화면에 입력해서 “허용” 누르는 것까지만 내가 했고, 저장소 생성부터 업로드까지는 전부 AI가 처리했다.
3. Vercel로 실제 배포하기
방금 GitHub에 올린 이 사이트를 Vercel로 배포해줘. Vercel CLI로 해줘.
나는 코딩을 몰라서 명령어를 직접 못 쳐, 네가 대신 실행해줘.
- Vercel CLI가 없으면 "깔까요?"라고 되묻지 말고 바로 설치해줘.
- 처음이라 Vercel 로그인이 필요하면, 아까 만든 GitHub 계정으로 로그인하게 안내해줘.
- 방금 올린 그 GitHub 저장소를 배포하는 거야.
- 배포가 끝나면 내 사이트 URL(주소)을 알려줘.
복사이번에도 로그인 확인 코드 한 번만 내가 눌러줬고, 나머지(설치·로그인·저장소 연결·배포)는 AI가 다 했다.
막힘 → 해결
Vercel 가입할 때 “팀 이름” 칸에 아무리 타이핑해도 아무것도 안 써졌다. → 알고 보니 그 칸은 영문·숫자·하이픈만 되는 칸이었다. 한글로 치니까 그냥 씹혔던 것. 영문으로 바꿔 치니 바로 됐다.
GitHub 로그인 인증이 중간에 두 번이나 “시간 초과”로 끊겼다. → AI가 대기 시간을 넉넉하게 늘려서 다시 시도했고, 새로 받은 코드로 다시 입력하니 세 번째에 성공했다. (인증이 한 번에 안 될 수도 있다는 걸 알게 됐다 — 당황하지 않아도 됨)
기존에 강사님 템플릿 저장소로 연결돼 있던 것을 AI가 발견해서, 그건 끊고 내 계정 저장소로 새로 연결해줬다. (몰랐으면 계속 남의 저장소를 보고 있었을 뻔)
After
배포된 주소(https://my-learning-hub-phi.vercel.app)로 실제 접속해서, 로컬 화면이랑 글자 하나까지 똑같은지 AI랑 같이 확인까지 마쳤다. 이제 이 폴더에서 작업하고 GitHub에 새로 올릴 때마다 사이트가 자동으로 다시 갱신된다.
📸 여기에 배포된 사이트 첫 화면 스크린샷을 넣으면 좋아요.
배운 것 / 재사용 자산
가입 안내 요청 프롬프트: “나는 코딩을 모르는 비개발자야. OO에 어떻게 가입하는지 순서대로 안내해줘. 막히면 화면 캡처해서 보여줄게.” — 어떤 서비스든 이 문장으로 시작하면 순서대로 짚어준다.
대신 실행 요청 프롬프트: “명령어를 직접 못 쳐, 네가 대신 실행해줘. 필요한 프로그램 없으면 되묻지 말고 바로 설치해줘.” — 이 한 문장이면 설치부터 로그인 안내까지 AI가 알아서 진행한다.
로그인 인증 = 코드 한 줄 입력이 거의 전부: 비밀번호를 직접 어딘가에 치는 게 아니라, AI가 보여주는 코드를 공식 로그인 화면에 입력하고 “허용”만 누르면 된다는 걸 알게 됐다.
막힘 체크리스트: 입력 칸에 뭘 쳐도 안 써지면 → 한글/특수문자 제한 의심, 인증이 끊기면 → 그냥 코드 다시 받아서 재시도하면 됨.
