Google Antigravity Builds FULL Web Apps For You (No Code & Free)

원본 영상: Google Antigravity Builds FULL Web Apps For You (No Code & Free)

한 줄 요약

Google Antigravity로 Google Sheets 데이터를 연결한 영업 분석 대시보드를 무료로 빌드하고, GitHub → Vercel로 라이브 배포하는 노코드 4단계 프로세스.

핵심 내용

1. Planning (계획) — 빌드 전 instructions.md와 rules.md 두 파일을 Antigravity 워크스페이스에 추가. instructions는 목표·비범위·완료 기준·프로젝트 scaffolding 정의. rules는 AI의 행동 규칙(가정 금지, 할루시네이션 금지 등) 계약서 역할.
2. Build (빌드) — 초기 프롬프트에 Google Sheets CSV 공개 링크, 컬럼 설명, UI 참고 스크린샷(Dribbble에서 캡처)을 함께 붙여넣어 전송. Antigravity가 계획 → 필요사항 질문 → 다음 액션 순서로 응답하며, 변경마다 사용자 수락(accept) 요청.
3. Iteration (반복) — 2차 프롬프트로 영업사원별 성과 테이블 추가. 버전을 쌓아가며 원하는 결과에 근접시킴.
4. QA (품질 검증) — 브라우저 개발자 도구의 반응형 뷰로 iPhone·iPad·데스크탑 레이아웃 확인. 문제 발견 시 에이전트에 텍스트로 보고하면 자동 수정.
5. Deploy (배포) — GitHub private 저장소 생성 → Antigravity에 저장소 정보 붙여넣기로 코드 업로드 → Vercel에서 해당 저장소 import 후 Deploy 클릭.

전술·요소

요소	내용
instructions.md	목표, 비범위(인증·결제·DB 제외), 완료 기준, scaffolding 구조 정의
rules.md	AI 행동 계약서 — 가정·할루시네이션 금지 등
데이터 소스	Google Sheets → “파일 > 공유 및 게시 > CSV” 링크
UI 레퍼런스	Dribbble에서 유사 대시보드 스크린샷 캡처 후 프롬프트에 첨부
응답 공식	plan → 필요사항 → next actions (instructions에 명시)
에러 처리	에러 메시지를 에이전트에 그대로 붙여넣으면 자체 수정
반응형 QA	브라우저 개발자 도구 → 디바이스 토글로 픽셀별 확인
배포 스택	GitHub(코드 저장) + Vercel(라이브 호스팅), 둘 다 무료 계정

수치·사례

• Looker Studio로 같은 대시보드를 직접 구현했을 때 약 2개월 소요 → Antigravity로 10~15분 (본인 경험)
• 이 유형의 대시보드 서비스를 클라이언트에게 $2,000~$5,000에 판매한 경험 있음 (본인 실측)
• 빌드 1회차(1차 프롬프트) 소요 시간 약 2분 (영상 내 실측)

도구·워크플로

Google Sheets (CSV 게시)
    ↓ 링크 + Dribbble 스크린샷 + 프롬프트
Google Antigravity (데스크탑 앱)
    ↓ instructions.md / rules.md 로드
    ↓ 1차 프롬프트: 기본 대시보드 빌드
    ↓ 2차 프롬프트: 영업사원 성과 테이블 추가
    ↓ localhost:3001 미리보기
    ↓ GitHub 저장소 정보 붙여넣기 → 코드 푸시
GitHub (private 저장소)
    ↓ import
Vercel → Deploy → 라이브 URL

대시보드 추적 지표 예시: 신규 리드 수, 영업 콜 수, 계약 성사/실패, 콜 전환율, 리드 전환율, 총 매출, 리드 소스별 성과, 영업사원별 성과, 날짜·담당자·리드소스 필터