바이브코딩 4회 과정 · 1회차 / 4

폴더 만들기부터 세상에 보이기까지
한 사이클을 천천히 돌립니다

시간 3시간 (10분 휴식 1회)
준비물 기관 PC(안티그래비티·Node.js·Git 설치 완료), GitHub·Vercel 계정
만들 것 정말 짧은 한 페이지짜리 사이트
오늘의 약속. 새로운 기능 0개. 오늘은 “폴더 만들기 → 글자 한 줄 → 깃 → 깃허브 → 배포” 이 한 바퀴를 손에 익을 때까지 천천히 두 번 돌리는 게 전부입니다. 외울 필요 없어요. 이 책을 옆에 두세요.

0큰 그림 — 다섯 친구의 역할 10분

오늘 우리는 다섯 친구의 손을 거칩니다. 한 명씩 무엇을 해주는 사람인지 한 줄씩만 외워두면 됩니다.

집짓기 비유
오늘 가장 중요한 한 문장. 우리는 터미널 명령어를 외우지 않습니다. 안티그래비티의 AI에게 “이거 해줘”라고 말하면, AI가 대신 명령어를 입력해줍니다. 우리는 그게 잘 됐는지만 봅니다.

1안티그래비티에서 폴더 정해주고, AI에게 권한 주기 25분

AI 목수에게 “이 작업장에서 일하세요”라고 알려주는 단계입니다. 아무 폴더에서나 일하게 두면 다른 파일을 망가뜨릴 수 있어요. 그래서 이 프로젝트만을 위한 빈 폴더를 먼저 만들고, 거기에서만 일하게 합니다.

1-1. 빈 폴더를 하나 만든다3분
  1. 바탕화면(Desktop)에 마우스 우클릭 → 새 폴더
  2. 이름은 영어 소문자로 짧게: 예) my-first-site
  3. 한글·띄어쓰기·특수문자는 피하세요. 나중에 깃이 싫어합니다.
바탕화면에 my-first-site라는 빈 폴더가 보이면 OK.
1-2. 안티그래비티에서 그 폴더를 연다3분
  1. 안티그래비티 실행
  2. 왼쪽 위 메뉴 → File → Open Folder…
  3. 방금 만든 my-first-site 폴더 선택 → 열기
화면 왼쪽에 폴더 이름이 뜨고, 안에는 아무 파일도 없는 상태.
1-3. “이 폴더 작성자를 신뢰합니까?” 창이 뜨면2분

안티그래비티가 한 번 묻습니다. “Do you trust the authors?” — 우리가 만든 폴더이니 우리를 믿습니다.

  • “Yes, I trust the authors” 클릭
주의. 다른 사람이 보낸 폴더를 열 때는 함부로 신뢰 누르지 마세요. 오늘은 우리가 직접 만든 빈 폴더라 안전합니다.
1-4. AI에게 권한 주기 — 첫 인사 프롬프트7분

오른쪽(또는 아래쪽)에 AI 채팅창이 있습니다. 첫 메시지로 이렇게 적어보세요.

안녕! 이 폴더는 비어 있어. 지금부터 너는
"이 폴더 안에서만" 작업해줘. 폴더 밖의 파일은 절대 만지지 마.

먼저 여기에 가장 단순한 Next.js 프로젝트를 만들어줘.
- 타입스크립트, App Router, Tailwind 사용
- 만들기 전에 무엇을 할 건지 5줄로 먼저 알려주고,
  내가 "좋아"라고 답하면 그때 진행해줘

AI가 “이런 것들을 깔겠다, 시간이 좀 걸린다”고 안내할 거예요. “좋아”라고 답하면 진행합니다.

왜 “먼저 알려주고”가 중요한가. AI에게 곧바로 뭐든 시키면 자기 마음대로 파일을 잔뜩 만듭니다. 항상 “계획 먼저 → 진행은 내 허락 받고”로 약속을 박아두세요.
몇 분 뒤, 왼쪽 폴더 트리에 app/, package.json, tailwind.config.ts 같은 파일들이 자동으로 생기면 성공.
  • 아무 변화가 없다 → AI가 “명령어 실행” 버튼을 눌러달라고 했을 수 있어요. 채팅창을 다시 보세요.
  • “권한” 관련 빨간색 알림이 뜬다 → Allow 또는 Yes를 누르면 됩니다.
  • 그래도 모르겠으면, AI에게 그대로 적으세요: 지금 어디서 멈춰 있어? 한국어로 알려줘.

2노드제이에스 — 사이트를 켜는 “보일러” 25분

보일러 비유

아무리 좋은 집을 지어도 보일러가 안 돌아가면 차갑죠. Node.js는 우리가 만든 사이트를 컴퓨터 안에서 “실제로 따뜻하게 돌려주는” 엔진입니다. 우리는 직접 보일러를 만지지 않고, AI에게 “지금 켜줘”라고만 말합니다.

2-1. AI에게 “사이트를 켜달라”고 부탁5분
이제 사이트를 한번 켜보고 싶어.
- 개발 서버를 실행해줘 (npm run dev)
- 브라우저에서 어떤 주소를 열어야 하는지 알려줘
- 만약 포트가 이미 쓰이고 있다고 나오면 다른 포트로 바꿔서 켜줘

AI가 안티그래비티 안의 터미널에서 명령어를 대신 입력합니다. 아래쪽에 까만 화면(터미널)이 열리고 글자가 우르르 나옵니다. 멈출 때까지 기다리세요.

터미널에 Local: http://localhost:3000 비슷한 줄이 보이면 켜진 겁니다.
2-2. 브라우저로 직접 열어보기5분
  1. 크롬(또는 사파리) 새 창을 연다
  2. 주소창에 localhost:3000 입력 → 엔터
  3. Next.js 기본 화면이 나오면 성공
여기서 잠깐. 이 화면은 나만 볼 수 있어요. 인터넷에 올린 게 아니라, 내 컴퓨터 안에서만 켜놓은 상태입니다. 친구는 아직 못 봅니다.
2-3. 아주 작은 한 줄만 바꿔보기5분
지금 메인 페이지(app/page.tsx)에서
가장 큰 글자 한 줄만 "안녕하세요, [내 이름]입니다"로 바꿔줘.
다른 부분은 절대 건드리지 마.
  1. AI가 파일을 고친다
  2. 저장은 자동, 사이트도 자동으로 새로고침
  3. 브라우저 화면에 내 이름이 뜨는지 확인
브라우저에 “안녕하세요, OOO입니다”가 보이면 성공. 여기서 한 사이클의 절반을 끝낸 겁니다.

3깃 — 세이브 포인트 찍기 35분

게임 세이브 비유

깃(Git)은 게임 세이브와 똑같습니다. 잘 되어 있는 지금 상태를 “찰칵!” 찍어두면, 나중에 망가져도 그 시점으로 돌아올 수 있어요. 찍는 행위를 커밋(commit)이라고 부릅니다. 메시지를 같이 적어두면, 나중에 “아, 이때 뭘 했었지” 알아보기 쉽습니다.

3-1. 처음 한 번: 내 이름·이메일 알려주기5분

깃은 “누가 세이브를 찍었는지” 기록합니다. 처음 컴퓨터에서 깃을 쓸 때 한 번만 알려주면 됩니다.

내 컴퓨터에서 git을 처음 쓰는 거야.
- 사용자 이름은 "[내 이름 영문]"
- 이메일은 "[GitHub에 가입한 이메일]"
이렇게 등록해줘. 명령어를 직접 치지 말고 네가 대신 해줘.
끝나면 잘 등록됐는지 확인까지 해서 결과를 보여줘.
이메일 주의. 깃허브에 가입할 때 쓴 이메일과 같은 걸 써야 합니다. 달라도 동작은 하지만, 깃허브에서 “누가 했는지” 표시가 어색해집니다.
3-2. 이 폴더를 “깃이 관리하는 폴더”로 만들기5분
이 폴더를 git 저장소로 초기화해줘 (git init).
그리고 지금 변경된 파일이 어떤 게 있는지 git status로 보여줘.
AI가 “이 파일들이 새로 생겼습니다(Untracked files)”라고 한 무더기 보여주면 성공.
3-3. 첫 번째 세이브 포인트 (커밋) 찍기10분
지금 폴더 전체를 첫 커밋으로 묶어줘.
- 메시지는 한국어로: "처음 시작 — 안녕하세요 페이지 만듦"
- 명령어는 네가 직접 실행
- 끝나면 git log로 잘 찍혔는지 보여줘

AI가 두 가지를 합니다. ① 모든 파일을 “찍을 준비”에 올리기(git add), ② 메시지와 함께 진짜로 찍기(git commit).

터미널에 “1 file changed” 같은 줄과 함께, git log 결과로 내 메시지가 보이면 성공. 이게 첫 세이브 포인트입니다.
흔한 실수. 메시지를 "수정", ".", "아 몰라"처럼 적어버리면, 한 달 뒤 본인이 못 알아봅니다. “무엇을 왜 바꿨는지” 한 줄.
3-4. 한 번 더 — 이름을 다른 색으로 바꾸고 두 번째 세이브5분
아까 만든 "안녕하세요, [내 이름]입니다" 글자 색을 청록색(#22989D)으로 바꾸고,
변경 사항을 두 번째 커밋으로 찍어줘. 메시지는 한국어로
"이름 글자색 청록으로 변경"으로.
① 브라우저 화면에 청록색 글자가 보인다 ② git log에 두 번째 줄이 늘어난다. 이 흐름이 “수정 → 세이브”의 한 사이클입니다.
🍵 10분 쉬어가기. 화장실·물 한 잔. 노트북 덮지 말고 안티그래비티는 켜둔 채로 잠깐 쉽니다.

4깃허브 — 인터넷 금고에 올리기 35분

금고 비유

지금까지의 세이브 포인트는 내 컴퓨터 안에만 있습니다. 노트북이 망가지면 다 사라져요. 그래서 깃허브(GitHub)라는 인터넷 금고에 사본을 올려둡니다. 올리는 행위를 푸시(push)라고 합니다.

4-1. 깃허브에 빈 저장소(repo) 하나 만들기7분
  1. github.com 로그인 → 오른쪽 위 + → New repository
  2. 저장소 이름: 폴더 이름과 같게 my-first-site
  3. 설명은 비워도 됨
  4. Public 선택 (Vercel 무료 연결을 위해)
  5. 아래 옵션은 전부 체크 안 함 — README/license 등 건드리지 마세요. 빈 저장소가 좋습니다.
  6. Create repository 클릭
“…or push an existing repository from the command line”이라는 안내 화면이 보이면 OK. 이 페이지는 닫지 마세요.
4-2. 내 폴더를 그 깃허브 저장소와 연결8분

깃허브가 보여준 화면에 https://github.com/내아이디/my-first-site.git 같은 주소가 있습니다. 그걸 복사하세요.

방금 GitHub에 빈 저장소를 만들었어. 주소는
[여기에 복사한 주소 붙여넣기]

이걸 우리 폴더의 원격 저장소(remote)로 등록하고,
지금까지의 커밋을 main 브랜치로 푸시해줘.
명령어는 네가 직접 실행. 끝나면 결과를 한국어로 요약해줘.
인증 창이 뜰 수 있어요. 깃허브가 “당신 맞아요?” 물어봅니다. 브라우저로 자동 이동해서 “Authorize” 누르면 됩니다.
4-3. 깃허브 사이트에서 진짜로 올라간 거 확인5분
  1. 아까 깃허브에서 만든 저장소 페이지 새로고침 (F5)
  2. 비어 있던 자리에 app/, package.json 같은 파일들이 우르르 나타나는지 본다
  3. 오른쪽 위 “2 commits” 같은 표시 → 클릭하면 내가 한국어로 적은 커밋 메시지가 보인다
① 파일들이 보인다 ② 한국어 커밋 메시지가 보인다. 축하합니다. 인터넷 금고까지 안전하게 도착했습니다.
  • 여전히 빈 페이지 → 푸시가 안 끝났거나 실패. 안티그래비티에서 지금 push 결과 보여줘 라고 물어보세요.
  • 비밀번호 입력 창이 자꾸 뜬다 → 깃허브는 비밀번호 대신 Personal Access Token을 받습니다. AI에게 “토큰 만드는 법 알려줘”라고 물으세요.

5버셀 — 세상에 자동으로 보여주기 35분

자판기 비유

버셀(Vercel)은 깃허브 금고에 코드가 올라오는 걸 알아서 지켜봅니다. 새 코드가 올라오면 “알았다”하고 즉시 자판기에 새 음료를 채워 넣듯 세상에 보이는 사이트를 자동으로 갈아 끼워줍니다. 우리는 한 번만 연결해두면 끝.

5-1. 버셀과 깃허브 연결하기8분
  1. vercel.com 로그인 (깃허브 계정으로 로그인 추천)
  2. 대시보드에서 Add New… → Project
  3. 방금 만든 my-first-site 저장소 옆 Import 클릭
  4. 설정은 전부 그대로 두고 (Next.js라고 자동 감지) Deploy
처음이라면 권한 화면이 뜹니다. “Vercel이 내 깃허브 보는 거 허락할게요” 한 번 눌러주면 됩니다.
5-2. 1~2분 기다리기 (이때가 제일 짜릿함)5분

화면 가운데 진행 막대가 움직입니다. 끝나면 “🎉 Congratulations” 같은 화면.

  1. 주소(예: my-first-site-abcd.vercel.app)를 클릭
  2. 새 탭으로 내 사이트가 진짜로 인터넷에 보인다
그 주소를 친구한테 보내도 똑같이 보입니다. 이제 세상에 공개된 거예요.
5-3. 휴대폰으로도 한번 열어보기5분

버셀 주소를 카톡으로 본인에게 보내고, 휴대폰에서 그대로 열어보세요. 글자가 잘리거나, 너무 작거나, 색이 이상하면 다음 사이클에서 고치면 됩니다. 오늘은 “보이기만 하면” 됩니다.

5-4. ★ 진짜 핵심 — 한 번 더 사이클 돌리기7분

이제 “수정 → 깃 → 깃허브 → 버셀”이 자동으로 돌아가는지 확인합니다.

메인 페이지에 한 줄만 추가해줘:
"오늘 처음 인터넷에 사이트를 올렸어요!"
글자색은 빨강(#C84726).

그 다음 변경 사항을
1) git add → commit (메시지: "첫 배포 기념 한 줄 추가")
2) GitHub로 push
까지 한 번에 해줘. 명령어는 네가 직접.
  1. 1~2분 기다린다
  2. 버셀 대시보드에 새 빌드가 자동으로 시작되는 걸 확인
  3. 끝나면 같은 주소를 새로고침
  4. 새 빨간 줄이 나타나면 한 사이클 완성!
이게 오늘의 진짜 능력입니다. 앞으로 무슨 사이트를 만들든 이 다섯 단계를 반복하기만 하면 됩니다. 외우지 말고 손에 익히세요.

6마무리 — 오늘 한 사이클 다시 외우기 15분

순서한 줄로누가 해주나
①빈 폴더 만들고 안티그래비티에서 열기나 (그리고 신뢰 한 번 클릭)
②“Next.js로 시작해줘” → 프로젝트 생성안티그래비티 AI
③“사이트 켜줘 (npm run dev)” → 브라우저에서 확인Node.js (AI가 대신 켬)
④고치고 → 커밋 (세이브 포인트)깃 (AI가 대신 입력)
⑤깃허브에 push → 인터넷 금고로깃허브
⑥자동으로 새 버전 배포 → 친구도 볼 수 있음버셀

가져갈 다섯 문장

  1. “폴더는 영어 소문자, 띄어쓰기 없이.”
  2. “AI에게는 항상 계획 먼저, 진행은 내 허락 받고.”
  3. “커밋 메시지는 한국어로 ‘무엇을 왜’.”
  4. “로컬에서 보였다고 끝이 아니다 — push까지 해야 진짜.”
  5. “막히면 추측 말고 ‘에러 메시지 그대로’ AI에게 전달.”

자가 점검

다음 시간을 위한 숙제(권장). 오늘 만든 사이트의 메인 글자 한 줄만 더 바꿔서, 혼자서 커밋 → push까지 해보세요. 잘 안 되면 그대로 가져오면 됩니다 — 그게 가장 좋은 질문이 됩니다.

전체 4회차 흐름

회차핵심 산출물오늘 위치
1회차버셀 주소로 세상에 보이는 사이트 1개 (한 사이클 완성)오늘 ★
2회차내 이름·사진·소개로 채운 “나의 페이지”다음 주
3회차내가 산 도메인(.kr)으로 접속되는 사이트 + HTTPS—
4회차구글·네이버 검색에 등록된 사이트 + 발표마지막
© 스마택트 · 바이브코딩 핸즈온 워크북
인쇄: 우측 하단 버튼 또는 ⌘P