바이브코딩 · 10회차 마무리 워크북

서로 보여주고, 다음 걸음
— 갤러리 워크와 수료

시간 약 80분
준비물 완성된 내 사이트(라이브 주소), 1회차에 적은 한 문장 기획서
만들 것 1분 발표 + 동료 사이트 둘러보기 + 다음 계획
10주의 마지막 날입니다. 오늘은 내가 만든 사이트를 자랑하고, 동료의 사이트를 둘러보고, 앞으로의 계획을 세웁니다.

0큰 그림 — 10주의 끝, 그리고 시작 5분

1회차에 종이에 적었던 한 문장 기획서를 꺼내보세요. 그 한 줄이 오늘 화면에 켜져 있는 라이브 사이트가 됐습니다.

10주의 여정

우리는 빈 폴더에서 시작했습니다. 한 줄 기획서 → 첫 페이지 → 사진과 색 → 저장과 배포 → 도메인 → 검색 등록까지.

오늘은 그 사이트를 세상에 처음 공개하는 날입니다. 평가가 아니라 — 서로 보여주는 자리입니다.

오늘 코딩은 없습니다. 안티그래비티를 열지 않아도 됩니다. 오늘은 내가 만든 것을 이야기하고, 동료의 것을 듣는 시간입니다.

1발표 준비 — 내 사이트 1분 소개 15분

1분 발표는 거창하지 않습니다. 딱 세 가지만 말하면 됩니다.

1분 발표 = 세 가지외울 것 하나
  1. 무엇을 — 내 사이트는 어떤 사이트인가
  2. 누구를 위해 — 누구의 어떤 불편을 해결하는가
  3. 어떻게 — 사이트에 들어가면 무엇이 보이는가

예시: "제 사이트는 저희 어머니처럼 약 먹는 시간을 자꾸 잊는 분들을 위한 거예요. 들어가면 오늘 먹을 약 목록이 바로 보입니다."

"잘 만든 것" 기준이 없습니다. 코드 줄 수도, 기능 개수도 아닙니다. 오늘 기준은 딱 하나 — 내가 기획한 것이 화면에 있는가.
아래 칸에 내 발표 한 문장을 직접 적어보세요. "제 사이트는 _____ 을/를 위한 것입니다."
무엇을 / 누구를 위해:
사이트에 들어가면 보이는 것:
완성된 내 발표 한 문장:
발표가 정말 어려우면? 짝꿍이 대신 1분 소개해주는 옵션이 있습니다. 강요하지 않습니다. 짝꿍과 미리 한 번 연습해도 됩니다.

2갤러리 워크 — 서로의 사이트 둘러보기 25분

전시회 오프닝 비유

오늘 우리는 작가이고, 동료는 첫 관람객입니다.

전시회 오프닝에서 작가는 자리를 지키고, 관람객이 돌아다니며 작품을 봅니다. 오늘도 똑같습니다 — 자유롭게 돌아다니며 동료의 사이트를 봅니다.

오늘은 평가가 아닙니다. 봐주는 자리입니다.

갤러리 워크 방법자유롭게
  1. 자리에서 일어나 동료 옆으로 이동합니다
  2. 동료의 라이브 사이트를 화면에서 직접 봅니다
  3. 포스트잇 한 장에 칭찬 한 줄을 적어 붙입니다
  4. 동료 사이트를 3개 이상 둘러봅니다
포스트잇에 뭘 쓸지 모르겠으면? 이 중 하나를 그대로 씁니다 — "아이디어가 신선해요" / "이거 진짜 필요했을 것 같아요" / "디자인이 깔끔하네요"
내가 둘러본 동료 사이트를 아래에 기록해 보세요. (라이브 주소 또는 주제 메모)
① 본 사이트 (주제 또는 주소):
한 줄 느낌:
② 본 사이트 (주제 또는 주소):
한 줄 느낌:
③ 본 사이트 (주제 또는 주소):
한 줄 느낌:

31분 발표 — 한 사람씩 20분

라이브 주소를 화면에 띄우고, 발표합니다. 1분입니다 — 짧아도 됩니다.

발표 순서와 방법부담 없이
  • 발표 순서는 자발·랜덤·가위바위보 중 편한 방식으로
  • 라이브 주소를 화면에 띄우고 — "내 사이트는 ___를 위한 것입니다"
  • 1분 타이머 (강사 휴대폰)
  • 발표가 끝나면 박수 한 번
강사 멘트

"여러분 한 분 한 분이 작가입니다. 우리는 평가하러 온 게 아니라 — 서로 작품을 봐주러 온 거예요."

"1분 발표는 자랑하는 시간이에요. '저 잘했어요' 말하기 어색하시면 — '제가 만든 사이트는 ___를 위한 거예요' 한 줄만 해도 충분합니다."

짝꿍 대신 소개 옵션. 발표가 부담스러우면 — 짝꿍이 "이분이 만든 사이트는요…"로 대신 소개해도 됩니다. 강요는 없습니다.

4다음 단계 계획 10분

사이트는 만들었습니다. 이제 다음 걸음을 정합니다. 크지 않아도 됩니다 — 한 가지씩.

아래 네 칸을 채워보세요. 모른다면 "아직 모름"이라고 써도 됩니다.
① 도메인 갱신·유지 — 언제까지인지 확인했나요? (연장 예정 / 확인 필요 / 무료 도메인 유지):
② 사이트를 계속 다듬을 것 — 가장 먼저 고치고 싶은 것 한 가지:
③ 다음에 만들고 싶은 것 — 새 사이트 또는 기능:
④ 더 배우고 싶은 것 — 궁금한 키워드나 기술:
도메인을 가족·친구에게 알리세요. 오늘 만든 사이트는 여러분이 인터넷에 처음 내놓은 공간입니다. 주소를 공유하는 것이 진짜 완성입니다.

5수료 — 10주를 돌아보며 5분

처음엔 빈 폴더였습니다. 지금은 검색 엔진에도 등록된 내 사이트가 있습니다.

10주 동안 우리가 한 것요약
  1. 한 문장 기획서 — 누구의 어떤 불편을 해결할지 정했다
  2. 첫 페이지 — 빈 폴더에서 "안녕하세요"를 화면에 띄웠다
  3. 사진·색·여백 — 내 페이지를 보기 좋게 다듬었다
  4. git · GitHub — 내 작업을 안전하게 저장했다
  5. Vercel 배포 — 진짜 주소가 생겼다
  6. 도메인 연결 — 내 이름이 붙은 주소로 바꿨다
  7. 검색 등록 — 구글에서 내 사이트를 찾을 수 있게 됐다
  8. 갤러리 워크 — 동료에게 보여주고, 동료의 것을 봤다
마무리

한 줄짜리 기획서가 — 10주 만에 검색되는 사이트가 됐습니다.

코드를 외운 게 아닙니다. AI에게 한국어로 부탁하는 방법을 익혔습니다. 이 방법은 어떤 사이트를 만들어도 똑같이 쓸 수 있습니다.

10주, 수고 많으셨습니다. 그리고 — 이제부터 시작입니다.

✓10주 수료 체크리스트

아래 항목을 하나씩 확인해보세요. 체크가 안 된 항목이 있어도 괜찮습니다 — 다음 단계에서 채우면 됩니다.

전부 체크됐다면 — 10주 완주입니다. 몇 개가 비어 있어도 괜찮습니다. "사이트가 온라인에 있다"는 사실 하나만으로도 오늘은 충분합니다.

★부록 — 더 배우면 좋을 것

이번 10주에서 배운 것은 출발점입니다. 아래 키워드들이 다음 걸음이 됩니다. 지금 몰라도 됩니다 — "이런 게 있구나" 정도만 기억해두세요.

키워드한 줄 설명언제 필요한가
Supabase 사이트에 데이터를 저장하는 무료 데이터베이스 서비스. "사용자가 입력한 내용을 저장하고 싶다"면 필요합니다. 회원가입·댓글·게시판 등
로그인(Auth) 사용자가 계정을 만들고 로그인하는 기능. Supabase와 함께 씁니다. 개인화된 사이트 만들 때
결제(토스페이먼츠) 사이트에서 돈을 받을 수 있는 기능. 유료 서비스로 발전할 때 필요합니다. 유료 서비스·예약 사이트
API 연결 카카오 지도, 날씨, 번역 등 외부 서비스 기능을 사이트에 붙이는 방법. 기능을 더 추가하고 싶을 때
반응형 고도화 모바일·태블릿·PC 화면에서 모두 완벽하게 보이도록 다듬는 것. 사이트를 더 다듬고 싶을 때
SEO 최적화 구글 검색 결과에서 더 위에 뜨도록 만드는 방법. 제목·설명·이미지 alt 등을 다듬습니다. 방문자를 늘리고 싶을 때
Analytics 내 사이트에 하루에 몇 명이 방문하는지 보는 도구. Vercel Analytics나 구글 애널리틱스. 사이트 운영을 시작한 뒤
다음에 만들 사이트는 이번보다 훨씬 빠릅니다. 도구 설치·git·배포 — 한 번 해본 것들은 다음엔 절반도 안 걸립니다. 안티그래비티에 "이전에 만든 방식대로 시작해줘"라고 부탁하면 됩니다.

⌧부록 — 10주에 만난 도구·용어 한눈에 정리

도구 / 용어한 줄 설명
안티그래비티 AI가 내장된 코딩 작업장. 한국어로 부탁하면 AI가 코드를 짜줍니다. 이 수업의 주 도구.
Node.js 사이트를 내 컴퓨터에서 미리 볼 수 있게 해주는 도구. 설치만 하면 됩니다.
localhost 내 컴퓨터 안에서만 볼 수 있는 미리보기 주소. localhost:3000 같은 형태.
git 작업 내용을 저장하고 되돌릴 수 있는 타임머신. "저장의 저장".
commit git으로 지금 상태를 한 장의 스냅샷으로 저장하는 것. "이 시점을 기억해줘."
GitHub 내 작업(git 기록)을 인터넷 창고에 올려두는 곳. 백업이자 배포의 출발점.
push 내 컴퓨터의 git 기록을 GitHub에 올리는 것. "창고에 넣어줘."
Vercel GitHub 코드를 진짜 주소로 세상에 공개해주는 배포 서비스. 무료.
배포(deploy) 내 컴퓨터 안에 있던 사이트를 인터넷에 공개해서 누구나 접근할 수 있게 만드는 것.
도메인 사이트의 인터넷 주소 이름. example.kr 같은 것. 도메인 등록 업체에서 구매합니다.
DNS 도메인과 실제 서버를 연결하는 전화번호부. 도메인 연결할 때 설정합니다.
Google Search Console 구글에 내 사이트를 등록하고 검색 현황을 볼 수 있는 도구. 검색 등록 첫걸음.
sitemap.xml 내 사이트의 페이지 목록을 구글에게 알려주는 파일. 검색 등록 때 제출합니다.
반응형 휴대폰·PC 등 화면 크기가 달라도 안 깨지게 만든 것. 모바일 친화적 사이트의 기본.
바이브코딩 AI에게 한국어로 "이거 해줘"라고 부탁해서 같이 코딩하는 방식. 이 수업 전체의 핵심.
스마택트 Smartact · 바이브코딩 10회차 10주의 끝, 그리고 시작