바이브코딩 · 2회차 핸즈온 워크북

안티그래비티로 첫걸음
— 내 첫 페이지 "안녕하세요"

시간 약 75분
준비물 안티그래비티가 설치된 컴퓨터, 1차시에 적은 한 문장 기획서
만들 것 내 컴퓨터에 뜨는 첫 페이지
오늘의 약속. 오늘은 AI 목수에게 작업장을 정해주고, 같이 첫 페이지를 띄웁니다. 화면에 "안녕하세요, OOO입니다" 한 줄이 뜨면 성공.

0큰 그림 — 오늘 만나는 친구 둘 5분

오늘 우리 옆에는 딱 두 친구가 있습니다. 각자 한 가지 역할만 합니다.

집짓기 비유
오늘 가장 중요한 한 문장. 명령어는 안 외웁니다. 안티그래비티의 AI에게 한국어로 부탁하면, AI가 대신 명령어를 입력해줍니다. 우리는 그게 잘 됐는지만 확인합니다.
git·GitHub·배포는 오늘 하지 않습니다. 그 내용은 4·5차시에서 다룹니다. 오늘은 내 컴퓨터 화면에 첫 페이지가 뜨는 것까지가 목표입니다.

1빈 폴더 만들고 안티그래비티에서 열기 12분

AI 목수에게 "여기에서만 일하세요"라고 알려주는 단계입니다. 아무 데서나 일하게 두면 다른 파일을 건드릴 수 있어요. 이 프로젝트만을 위한 빈 폴더를 먼저 만들고, 거기에서만 일하게 합니다.

1-1. 바탕화면에 빈 폴더 만들기4분
  1. 바탕화면 빈 곳에서 마우스 우클릭 → 새 폴더(또는 Mac이라면 Ctrl+클릭 → 새 폴더)
  2. 이름은 영어 소문자로 짧게: 예) my-first-site
  3. 한글·띄어쓰기·특수문자는 피하세요
바탕화면에 my-first-site라는 이름의 빈 폴더가 보이면 OK.
Mac에서 바탕화면에 폴더 만들기가 안 된다면 → Finder를 열고 바탕화면 항목을 찾아 거기서 새 폴더를 만들어도 됩니다.
1-2. 안티그래비티에서 그 폴더 열기5분
  1. 안티그래비티 실행
  2. 왼쪽 위 메뉴 → File → Open Folder…
  3. 방금 만든 my-first-site 폴더 선택 → 열기
화면 왼쪽에 폴더 이름이 보이고, 안에 아무 파일도 없는 상태가 보이면 OK.
1-3. "작성자를 신뢰합니까?" 창이 뜨면3분

안티그래비티가 한 번 물어봅니다. "Do you trust the authors of the files in this folder?" — 우리가 방금 직접 만든 빈 폴더이므로 신뢰합니다.

  • "Yes, I trust the authors" 클릭
주의. 다른 사람이 이메일이나 USB로 보낸 폴더를 열 때는 함부로 "신뢰"를 누르지 마세요. 오늘은 우리가 직접 만든 빈 폴더라 안전합니다.

2AI에게 권한 주고 프로젝트 만들기 18분

오른쪽(또는 아래쪽)에 AI 채팅창이 보입니다. 여기에 한국어로 부탁합니다. 첫 메시지에서 두 가지 약속을 박아두는 것이 핵심입니다 — "이 폴더 안에서만 일해"와 "계획 먼저, 내 허락 받고 진행".

2-1. 첫 인사 프롬프트 — 권한 + 프로젝트 생성 요청10분

아래 내용을 AI 채팅창에 그대로 붙여넣고 전송하세요.

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

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

AI가 "이런 것들을 설치하겠다, 시간이 좀 걸린다"고 안내할 거예요. 내용을 읽어보고 괜찮으면 "좋아"라고 답하면 AI가 진행합니다.

왜 "계획 먼저"가 중요한가. 이 약속 없이 그냥 시키면 AI가 자기 마음대로 파일을 잔뜩 만들거나, 예상치 못한 일을 할 수 있습니다. 항상 "계획 먼저 → 진행은 내 허락 받고"로 약속을 박아두세요.
2-2. 진행 확인 — 파일 생성 지켜보기8분

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

몇 분 뒤, 왼쪽 폴더 트리에 app/, package.json, tailwind.config.ts 같은 파일들이 자동으로 생기면 성공.
  • 아무 변화가 없다 → AI가 "명령어를 실행할까요?" 버튼을 보여줬을 수 있어요. 채팅창을 다시 확인하세요.
  • "권한(Allow)" 관련 알림창이 뜬다 → Allow 또는 Yes를 누르면 됩니다.
  • 그래도 모르겠으면 AI에게: 지금 어디서 멈춰 있어? 한국어로 알려줘.

3사이트 켜기 — Node.js 보일러 12분

보일러 비유

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

3-1. AI에게 "사이트를 켜달라"고 부탁5분
이제 사이트를 한번 켜보고 싶어.
개발 서버를 실행해줘 (npm run dev).
브라우저에서 어떤 주소를 열어야 하는지 알려줘.

AI가 터미널에서 명령어를 대신 입력합니다. 글자가 쭉 올라오다가 멈출 거예요.

터미널에 Local:  http://localhost:3000 비슷한 줄이 보이면 서버가 켜진 겁니다.
  • "Port already in use" 오류 → AI에게 포트가 이미 쓰이고 있다고 나와. 다른 포트로 바꿔서 켜줘.
  • 터미널이 어디 있는지 모르겠다 → 안티그래비티 하단의 Terminal 탭을 클릭하세요.
3-2. 브라우저로 직접 열어보기4분
  1. 크롬(또는 사파리) 새 창을 열기
  2. 주소창에 localhost:3000 입력 → 엔터
  3. Next.js 기본 화면이 나타나면 성공
여기서 잠깐. 이 화면은 나만 볼 수 있어요. 인터넷에 올린 게 아니라, 내 컴퓨터 안에서만 켜놓은 상태입니다. 아직 친구는 볼 수 없습니다.
3-3. dev 서버, 그냥 두면 됩니다3분

터미널은 계속 켜진 채로 두세요. 서버가 돌아가야 브라우저에서 미리 볼 수 있습니다. 실수로 껐다면 AI에게 npm run dev를 다시 실행해줘라고 하면 됩니다.

dev 서버 = "미리 보기 모드". 파일을 수정하면 저장 즉시 브라우저가 자동으로 새로고침됩니다.

4첫 페이지 한 줄 — "안녕하세요, OOO입니다" 15분

지금 브라우저에 뜬 화면은 Next.js 기본 페이지입니다. 이 중 가장 큰 글자 한 줄만 내 이름으로 바꿉니다. 다른 부분은 건드리지 않습니다.

4-1. AI에게 이름 한 줄 바꾸기 부탁8분
지금 메인 페이지(app/page.tsx)에서
가장 큰 글자 한 줄만 "안녕하세요, [내 이름]입니다"로 바꿔줘.
다른 부분은 절대 건드리지 마.

※ [내 이름] 자리에는 본인 이름을 직접 적어서 보내세요.

AI가 파일을 수정하면, 저장은 자동입니다. 브라우저로 가서 화면이 바뀌었는지 확인하세요. (dev 서버가 켜져 있으면 자동 새로고침됩니다. 안 되면 F5 또는 Cmd+R)
브라우저에 "안녕하세요, OOO입니다"가 보이면 성공. 이게 이 차시의 핵심 목표입니다.
  • 브라우저 화면이 그대로 → dev 서버가 켜져 있는지(§3-1), 저장이 됐는지 확인 → F5로 새로고침
  • AI가 너무 많이 바꿨다 → 방금 바꾼 거 취소해줘. 이름 한 줄만 바꾸고 나머지는 그대로 둬.
4-2. 보인다면 — 잠깐 멈추고 박수7분

화면에 내 이름이 보인다면, 잠깐 멈추세요.

  • 이 페이지는 내가 AI와 함께 만든 첫 번째 웹 페이지입니다
  • 아직 인터넷에는 올라가지 않았지만, 진짜로 작동하는 페이지입니다
  • 다음 단계에서는 여기에 소개 문장 한 줄을 더 추가합니다
코드를 직접 보고 싶다면. 안티그래비티 왼쪽 사이드바에서 app/page.tsx를 클릭해보세요. 내 이름이 들어간 부분이 어디인지 눈으로 확인할 수 있습니다. 외울 필요는 없습니다.

5내 페이지답게 한 줄 더 8분

1차시에 적어온 한 문장 기획서를 꺼내세요. 그 문장을 제목 아래에 소개 문장으로 넣겠습니다.

5-1. 소개 문장 추가 부탁8분
방금 만든 "안녕하세요, [내 이름]입니다" 제목 아래에
소개 문장 한 줄을 추가해줘.
문장 내용은: "[1차시에 적은 한 문장 기획서 내용]"
디자인은 제목보다 조금 작고 차분하게 해줘.

※ 기획서를 아직 안 적었거나 생각이 안 난다면 임시로 이렇게 넣어도 됩니다: "안녕하세요! 이 페이지는 저를 소개하는 첫 번째 사이트입니다."

브라우저에 제목 아래 소개 문장이 한 줄 더 보이면 OK.
추가된 게 너무 크거나 이상해 보이면 → 소개 문장을 제목보다 좀 더 작고 회색 톤으로 바꿔줘.

6오늘 한 일 정리 + 짝꿍 보여주기 5분

6-1. 화면을 짝꿍과 서로 보여주기5분
  1. 브라우저에 내 페이지가 뜬 상태로 옆자리 짝꿍에게 화면을 보여주기
  2. 짝꿍 화면도 보기 — "어떤 소개 문장을 넣었나요?"
오늘의 성취를 말로 표현해보세요. "나는 AI에게 부탁해서 내 이름이 들어간 첫 웹 페이지를 만들었다." 이게 오늘 한 일의 전부이고, 동시에 전부입니다.

✓오늘의 자가 점검

다 체크됐다면 — 오늘 완성입니다. 7개 중 5개 이상 체크됐어도 충분합니다. 체크 못 한 항목은 다음 시간 강사에게 보여주면 같이 해결할 수 있습니다.
중요 — 오늘 만든 폴더를 지우지 마세요. 오늘 만든 페이지는 아직 내 컴퓨터 안에만 있습니다. 다음 시간(3차시)에는 이 페이지를 꾸미고(사진·색·글꼴), 4·5차시에 git으로 저장하고 인터넷에 올립니다. 그때까지 이 폴더를 지우거나 다른 곳으로 옮기지 마세요.

★다음 시간 예고

3차시 — 내 페이지 꾸미기 (사진·색·글꼴). 오늘 만든 첫 페이지에 사진을 넣고, 색과 글꼴을 바꿉니다. 기능은 오늘과 똑같이 0개 — 오직 "보기 좋게" 다듬기만 합니다.

준비물(3차시). 오늘 만든 폴더 + 안티그래비티 + 페이지에 넣고 싶은 사진 1장 (풍경·취미 사진도 OK). 사진 파일 이름은 미리 영어 소문자로 바꿔 두세요 (예: my-photo.jpg).

⌧부록 — 자주 막히는 곳

증상해결
"신뢰" 버튼이 안 보인다 폴더를 닫고(File → Close Folder) 다시 Open Folder로 열어보세요. 안티그래비티를 재시작해도 됩니다.
"Allow" 권한 알림이 반복해서 뜬다 안티그래비티가 터미널 명령어 실행 권한을 요청하는 것입니다. Allow를 눌러주세요. 매 명령마다 한 번씩 뜰 수 있습니다.
프로젝트가 생성됐는데 브라우저에 아무것도 안 나온다 dev 서버(npm run dev)가 켜져 있는지 확인 → 터미널에 localhost:3000이 보이는지 확인 → 주소창에 그 주소 그대로 입력
이름을 바꿨는데 화면이 그대로다 ① 저장됐는지 확인(Cmd+S 또는 Ctrl+S) → ② 브라우저 새로고침(F5) → ③ dev 서버가 켜져 있는지 확인
AI가 너무 많이 바꿔버렸다 방금 바꾼 거 마음에 안 들어. 원래대로 되돌리고 [원하는 것]만 해줘.
dev 서버가 꺼진 것 같다 AI에게 npm run dev를 다시 실행해줘.
오류 메시지가 빨간색으로 나온다 그 빨간 문구를 그대로 복사해서 AI에게 붙여넣고: 이 오류가 나왔어. 어떻게 해결해?

용어오늘의 용어 6개

안티그래비티 AI가 내장된 코드 편집 도구(AI IDE). 한국어로 부탁하면 코드와 명령어를 대신 써준다.
Node.js 웹 사이트를 컴퓨터 안에서 실제로 돌려주는 엔진. 설치만 해두면 우리가 직접 조작할 일은 없다.
localhost "내 컴퓨터 안의 주소". localhost:3000은 나만 볼 수 있는 미리 보기 화면이다.
dev 서버 개발 중에 사이트를 미리 띄워 보는 도구. npm run dev로 켜고, 껐다 켜도 괜찮다.
프롬프트 AI에게 전달하는 한국어 지시문. 길게 쓸수록 AI가 정확하게 움직인다.
Next.js React 기반의 웹 프레임워크. 우리가 직접 배울 필요는 없고, AI에게 "Next.js로 만들어줘"라고 하면 된다.
스마택트 Smartact · 바이브코딩 2회차 AI 목수에게 작업장을 정해주다