웹사이트 클릭을 명령어 한 줄로
— gh · Vercel · Supabase CLI 연동

안티그래비티에서 내 프로젝트 폴더를 연 상태로, 아래를 채팅창에 붙여넣습니다.

내 컴퓨터(운영체제 먼저 확인해줘)에 아래 세 개가 깔려 있는지 확인해줘.
- GitHub CLI (gh)
- Vercel CLI (vercel)
- Supabase CLI (supabase)

안 깔린 건 내 운영체제에 맞는 공식 방법으로 설치해줘.
명령어는 네가 직접 실행하고, 끝나면 세 개의 버전 번호를 한국어로 정리해서 보여줘.

참고로 AI가 쓰게 될 표준 설치 명령어는 아래와 같습니다. 외울 필요는 없고, "아 이런 걸 실행하는구나" 정도만 보세요.

$ gh --version
gh version 2.62.0 ...
$ vercel --version
Vercel CLI 39.x
$ supabase --version
2.x.x

이건 대화형(질문에 답하는 방식)이라 직접 하는 게 편합니다. 안티그래비티 아래쪽 터미널(Terminal) 탭에서 아래를 입력하세요.

$ gh auth login

그러면 몇 가지를 화살표 ↑↓ + 엔터로 고르게 됩니다. 이렇게 답하세요.

마지막에 여덟 자리 코드(예: AB12-CD34)가 나옵니다. 이걸 복사해두고 엔터를 누르면 브라우저가 열립니다. 그 코드를 붙여넣고 Authorize를 누르면 끝.

내 프로젝트 폴더가 열린 상태에서, 안티그래비티에 부탁합니다.

이 폴더를 gh로 GitHub에 새 저장소로 올려줘.
- 저장소 이름: [my-project]  ← 내 폴더 이름으로 바꾸기
- 공개 범위: public (나중에 Vercel 무료 연결 위해)
- 저장소 만들면서 remote(origin)로 등록하고, 지금까지의 커밋을 push까지 해줘.
- 아직 커밋이 하나도 없으면 먼저 "처음 시작" 커밋부터 만들어줘.
명령어는 네가 직접 실행하고, 끝나면 저장소 주소를 알려줘.

AI가 실행하는 명령어는 이 한 줄입니다(참고용).

$ gh repo create my-project --public --source=. --remote=origin --push

이 한 줄이 4회차에서 손으로 했던 일곱 단계를 전부 대신합니다.

터미널에서:

$ vercel login

이메일로 할지 GitHub로 할지 물어봅니다. Continue with GitHub를 고르면 (2-1에서 GitHub 로그인을 해뒀으니) 브라우저가 열리고 Authorize 한 번으로 끝납니다.

프로젝트 폴더에서 안티그래비티에 부탁합니다.

이 폴더를 Vercel에 배포해줘.
- 처음이면 프로젝트를 새로 연결(link)해줘. (질문이 나오면 기본값 그대로 엔터로 진행)
- 우선 미리보기(preview)로 배포해서, 나오는 주소를 알려줘.
명령어는 네가 실행해줘.

AI가 실행하는 명령어는 그냥 vercel 한 단어입니다. 처음이면 이런 걸 물어봐요(대부분 엔터).

미리보기가 잘 나왔으면, 이제 진짜 공개용 주소로 올립니다.

미리보기 잘 나왔어. 이제 프로덕션(진짜 공개)으로 배포해줘.

$ vercel --prod   # --prod 하나 붙으면 "진짜 공개" 배포

먼저 로그인(내 손으로):

$ supabase login   # 브라우저가 열려서 접근 토큰을 자동 등록

다음, 내 컴퓨터 폴더를 어느 Supabase 프로젝트에 연결할지 지정합니다. 이때 필요한 게 프로젝트 ref(프로젝트마다 붙는 고유 아이디)예요. supabase.com에서 내 프로젝트 → Settings → General → Reference ID에서 복사하거나, 프로젝트 주소 app.supabase.com/project/여기가-ref 에서 가운데 부분입니다.

이 폴더를 내 Supabase 프로젝트에 연결해줘.
프로젝트 ref는 [여기에 복사한 ref 붙여넣기] 야.
필요하면 supabase init부터 하고, link까지 해줘.

$ supabase link --project-ref [내-프로젝트-ref]

마우스로 테이블 만드는 대신, "이런 테이블을 만들어라"라는 설계서 파일을 만들고 그걸 원격 DB에 밀어 넣습니다. AI에게 통째로 부탁하는 게 가장 편합니다.

supabase CLI로 방명록(guestbook) 테이블 마이그레이션을 만들어줘.
- 컬럼: name(글쓴이), message(내용), created_at(작성시각, 기본값 지금)
- 보안(RLS)을 반드시 켜고, "누구나 읽기 / 누구나 쓰기" 정책을 넣어줘
- 마이그레이션 파일을 만든 다음, 원격 DB에 push까지 해줘 (supabase db push)
명령어는 네가 실행하고, 만들어진 SQL 파일 내용을 한국어로 설명해줘.

AI가 밟는 두 단계는 이렇습니다.

$ supabase migration new create_guestbook   # 빈 설계서 파일 생성
# → supabase/migrations/XXXX_create_guestbook.sql 안에 아래 SQL 채움
$ supabase db push                           # 원격 DB에 실제 반영

설계서(SQL) 안에는 이런 내용이 들어갑니다. 읽어만 두세요.

create table public.guestbook (
  id bigint generated always as identity primary key,
  name text not null,
  message text not null,
  created_at timestamptz not null default now()
);

alter table public.guestbook enable row level security;  # 보안 ON
create policy "누구나 읽기" on public.guestbook for select using (true);
create policy "누구나 쓰기" on public.guestbook for insert with check (true);

마지막으로 두 가지를 붙이면 진짜 풀스택 연결이 완성됩니다.

① 타입 파일 — DB 구조를 코드가 알아듣는 파일로 뽑아둡니다. 그러면 AI가 코드를 짤 때 컬럼 이름 오타 같은 실수가 크게 줍니다.

$ supabase gen types typescript --linked > types/database.types.ts

② 키 연결 — 화면이 DB와 통화하려면 URL과 anon 키가 필요합니다. supabase.com → Settings → API에서 Project URL과 anon public 키를 복사해, §3의 vercel env add로 넣고 로컬 .env.local에도 둡니다.

Supabase의 Project URL과 anon 키를 아래에 줄게.
- URL: [붙여넣기]
- anon key: [붙여넣기]
이 둘을 NEXT_PUBLIC_SUPABASE_URL / NEXT_PUBLIC_SUPABASE_ANON_KEY 이름으로
Vercel 환경변수에 등록하고, 내 .env.local에도 같은 값을 넣어줘.
그리고 이 키로 방명록을 읽고 쓰는 화면을 만들어줘.