바이브코딩 5단계: ACCL 특강 수업 가이드

시작 전: 어떤 도구로 시작할까?

Antigravity 2.0

Gemini 내장
폴더형 AI 에디터
→ L1 시작점

Claude 데스크탑

Claude 내장
대화 + 파일 연결
→ L1~L5 전 구간

Codex

GPT-4o 기반
터미널 중심
→ L3 이상

💡 Antigravity에 Claude 확장프로그램을 설치하면 Gemini + Claude를 동시에 활용할 수 있습니다. 두 AI가 서로 다른 관점으로 코드를 확인합니다.

온라인의 내 집을 짓는 다섯 계단

소개 페이지
랜딩

신청·저장
Supabase

결제·지도
외부 API

실시간
라이브 세션

인증·권한
SSO

소개 페이지 · 랜딩

내 이름·이야기·연락처가 담긴 첫 번째 웹사이트. 오늘 완성합니다.

▾

Antigravity Next.js Git GitHub Vercel

강사 경험담 "처음에 저도 이게 진짜 될까 싶었어요. 그냥 한 줄 썼습니다. '나는 어르신 디지털 교육을 하는 강사야. 내 소개 페이지 만들어줘.' 30초 뒤에 진짜 작동하는 Next.js 코드가 나왔어요. 그때 처음으로 '이건 도구가 아니구나'를 느꼈습니다."

STEP BY STEP: Claude와 이렇게 대화하세요

나의 첫 번째 프롬프트

나는 [직업/역할]을 하는 [이름]이야. 내 소개 페이지를 Next.js로 만들어줘. 들어갈 내용: - 이름: [이름] - 한 줄 소개: [한 줄 소개] - 내가 하는 일: [하는 일 2~3가지] - 연락처: [연락처] - 색상 분위기: [따뜻한/차가운/모던한/...]

Claude 답변 패턴: src/app/page.tsx 파일을 만들어드립니다. 아래 코드를 복사하세요...
→ 파일 구조 + 완성 코드가 통째로 나옵니다

수정 요청 (이게 바이브코딩의 핵심)

글씨가 너무 작아. 이름은 화면 가득 크게 보여줘. 배경은 흰색, 폰트는 굵게.

포인트: "크게", "흰색", "굵게" 같은 일상 언어로 말해도 됩니다.
CSS 수치를 몰라도 됩니다. 느낌을 말하면 됩니다.

배포 요청

GitHub에 올리고 Vercel로 배포하는 방법을 터미널 명령어 순서대로 알려줘. 처음이야.

Claude 답변 패턴: git init → git add . → git commit → GitHub 연결 → vercel deploy 순서로 복붙 가능한 명령어가 나옵니다

✓ 결과: 인터넷 주소가 생깁니다

이 레벨에서 만들 수 있는 것들

✓강사·교수 소개 페이지
✓컨설팅 랜딩 페이지
✓포트폴리오 페이지
✓강의 일정 안내 페이지
✓나의 디지털 명함

신청 받기 · 데이터 저장

누군가가 무언가를 신청하면, 그게 내 데이터베이스에 쌓입니다.

▾

Antigravity · Next.js · Git · GitHub · Vercel Supabase (DB + Auth)

이 레벨부터 알아야 할 것: 내 코드가 인터넷에 올라가는 흐름

내 컴퓨터
:3000 → git push → GitHub
소스 보관 → 자동 빌드 → Vercel
.app URL

포트 3000 = 내 컴퓨터 전용 창구 · 443 = 인터넷 정문(HTTPS) · git push 한 순간 Vercel이 자동 감지해서 배포합니다

강사 경험담 "강의 신청을 카카오폼으로 받다가, 직접 만들어보고 싶었어요. Supabase가 뭔지 몰랐어요. Claude한테 '신청 받고 싶어, 어디다 저장해?' 라고 물었더니 Supabase를 알려줬고, 계정 만들고 테이블 만드는 것까지 전부 Claude가 설명해줬어요. 그날 밤에 다 됐어요."

STEP BY STEP

Supabase 연결 요청

기존 소개 페이지에 강의 신청 폼을 추가하고 싶어. 이름, 연락처, 희망 날짜를 입력받고 Supabase에 저장해줘. Supabase 계정은 있는데 테이블 어떻게 만드는지 모르겠어.

Claude 답변 패턴: Supabase SQL 에디터에 붙여넣을 CREATE TABLE 문과 .env 설정법, 폼 컴포넌트 코드가 함께 나옵니다

관리자 목록 페이지 요청

/admin 경로로 들어가면 신청자 목록을 표로 볼 수 있게 해줘. 날짜 최신순으로.

에러가 났을 때 이렇게 물어보세요

이 에러가 났어: [에러 메시지 복붙] 어디가 문제야? 고쳐줘.

핵심 습관: 에러 메시지를 그대로 복붙합니다. 해석하려 하지 마세요.
Claude가 읽고 고쳐줍니다.

✓ 결과: 신청 데이터가 내 DB에 쌓입니다

이 레벨에서 만들 수 있는 것들

✓강의 수강 신청 폼
✓컨설팅 상담 예약 시스템
✓행사 참가 등록 폼
✓회원 로그인 + 마이페이지
✓게시판 / 후기 게시판

결제 · 지도 · 외부 서비스 연결

내 사이트가 세상과 연결됩니다. 돈이 들어오기 시작합니다.

▾

기본 세트 + Supabase 토스페이먼츠 카카오맵 API Resend(이메일)

강사 경험담 "컨설팅 신청 폼에 결제를 붙이고 싶었어요. 토스 API 문서를 보다가 머리가 아팠는데, Claude한테 그냥 넘겼어요. '토스페이먼츠 연동해줘. 상품명은 AI 코드 세팅, 금액은 100만원.' 환경변수 어디서 받는지까지 알려줬고, 하루 만에 실제 결제까지 됐어요."

STEP BY STEP

API 연동: 핵심 프롬프트 패턴

기존 신청 페이지에 [서비스명] 연동해줘. [서비스명] 개발자 계정은 있고 API 키도 있어. 환경변수 어디다 넣어야 해?

Claude 답변 패턴: .env.local 설정 → API 호출 코드 → 에러 처리까지 순서대로 나옵니다.
"API 키를 직접 코드에 넣지 마세요"라는 보안 안내도 함께 줍니다.

결제 완료 후 이메일 자동 발송

결제 완료되면 신청자 이메일로 확인 메일 자동으로 보내줘. Resend 쓸게. 내 도메인은 smartact.kr이야.

✓ 결과: 사이트에서 돈이 들어옵니다

이 레벨에서 만들 수 있는 것들

✓유료 강의 결제 시스템 (토스/카카오페이)
✓강의실 위치 지도 (카카오맵)
✓신청 완료 확인 이메일 자동 발송
✓AI 챗봇 상담 (OpenAI 연동)
✓카카오 소셜 로그인

실시간 · 라이브 세션

강사가 슬라이드를 넘기면 학생 화면이 동시에 바뀝니다. 지금 저희 강사허브가 이 레벨입니다.

▾

기본 세트 + Supabase Supabase Realtime WebSocket 구독

강사 경험담: 강사허브 라이브섹션 "수업 중에 학생들이 실시간으로 답을 내면 제 화면에 바로 보이게 하고 싶었어요. 슬라이드를 넘기면 학생 화면도 같이 넘어가는 것도요. Claude에게 '실시간 구독'을 물었고, Supabase에 그 기능이 있다는 걸 알게 됐어요. channel()과 postgres_changes. 단어 몰라도 됩니다. Claude가 다 써줬어요."

STEP BY STEP

실시간의 개념을 먼저 물어보세요

강사가 현재 슬라이드를 바꾸면 학생 브라우저에도 즉시 반영되게 하고 싶어. Supabase로 어떻게 해?

Claude 답변 패턴: Supabase Realtime의 postgres_changes 구독을 설명하고,
강사용 hook과 학생용 hook을 분리해서 코드를 줍니다.

참여자 응답 실시간 집계

학생들이 답을 제출하면 강사 화면에 실시간으로 응답 수가 올라가게 해줘. 워드클라우드처럼 보여줄 수 있어?

✓ 결과: 교실이 온라인으로 연결됩니다

이 레벨에서 만들 수 있는 것들

✓실시간 설문·투표 시스템 (멘티미터 대체)
✓강사↔학생 동기화 슬라이드
✓실시간 Q&A 워드클라우드
✓다중 참여자 채팅
✓라이브 퀴즈 + 순위판

인증 · 권한 · 여러 사이트 연결

누가 어디까지 볼 수 있는지, 사이트가 시스템이 됩니다. 현재 smartact.kr이 이 레벨입니다.

▾

1~4레벨 전체 역할별 권한 (RLS) SSO (여러 사이트 단일 로그인) OAuth 소셜 로그인

강사 경험담: smartact.kr "강사 허브, 유스, 메인 사이트, 세 군데에 따로 로그인하는 게 불편했어요. Claude에게 'SSO를 만들고 싶어. 한 번 로그인하면 세 사이트 다 되게' 라고 했더니 Supabase Auth 공유 방법을 설명해줬어요. 관리자만 볼 수 있는 페이지, 강사만 쓸 수 있는 기능도 전부 Claude와 한 줄씩 대화하면서 만들었어요. 3개월 걸렸어요. 천천히 가도 됩니다."

STEP BY STEP

역할 분리 요청

로그인한 사용자 중에서 admin 역할인 사람만 /admin 페이지를 볼 수 있게 해줘. Supabase RLS로 해줘.

Claude 답변 패턴: Supabase의 Row Level Security 정책과 미들웨어 코드를 함께 줍니다.
"auth.users의 role 컬럼을 확인하는 방식"을 설명합니다.

주의: 이 단계는 신중하게

Auth 관련 파일 수정할 때는 변경 전에 반드시 먼저 설명해줘. 그리고 어떤 파일을 건드리는지 목록 보여줘.

왜 이렇게 물어봐야 하나: Auth는 한 번 잘못 건드리면 모든 사용자가 로그아웃됩니다.
Claude에게 먼저 계획을 물어보고, 동의한 뒤에 실행시키세요.

✓ 결과: 사이트가 서비스가 됩니다

이 레벨에서 만들 수 있는 것들

✓관리자 / 강사 / 수강생 3단계 권한 분리
✓여러 사이트 단일 로그인 (SSO)
✓구글 / 카카오 / 네이버 소셜 로그인
✓SaaS 구독 + 기능 잠금 시스템
✓강사양성과정 수료증 자동 발급

어느 레벨에서든 통하는 티키타카 원칙 5가지

1. 나를 먼저 소개하세요

"나는 강사야 / 1인 대표야 / 교수야", 역할을 말하면 Claude가 그 맥락으로 맞춤 답변합니다.

2. 에러는 그대로 복붙하세요

해석하지 마세요. 터미널 빨간 글자를 통째로 붙여넣으면 Claude가 읽고 고칩니다.

3. "왜 이렇게 했어?" 를 물어보세요

코드를 이해하지 않아도 됩니다. 하지만 "이 부분이 뭐하는 거야?" 를 물으면 내 것이 됩니다.

4. 작은 것 하나씩 요청하세요

"전부 다 만들어줘"보다 "이것만 먼저 해줘"가 빠릅니다. 한 번에 하나씩 요청하고 확인하는 게 바이브코딩의 리듬입니다.

5. 컨텍스트를 먼저 설정하세요

Claude는 전후 상황(컨텍스트)을 많이 알수록 정확해집니다. "나는 강사야, 지금 L2야, Next.js 쓰고 있어"처럼 상황을 먼저 말하세요. prompt(입력) → context(맥락) → 확인 순서가 막힘 없는 티키타카의 기본입니다.