AI 코딩도구

Google Antigravity 실전 튜토리얼

wins007 2025. 12. 23. 22:56

아래는 블로그에 바로 올릴 수 있는 ‘실전 튜토리얼형’ 완성본입니다.
👉 프롬프트 / 검증 체크리스트 / 권장 설정값까지 템플릿화해서, 그대로 따라 치면 되게 구성했습니다.


🧠 Google Antigravity 실전 튜토리얼

프롬프트 · 검증 체크리스트 · 설정값 템플릿까지 한 번에

이번 글은 **Google Antigravity**를
👉 *“처음 설치한 날 바로 실무에 쓰는 방법”*에 초점을 맞춘 실전 가이드입니다.

  • 무엇을 눌러야 하는지
  • 어떤 프롬프트를 치면 되는지
  • 결과를 어떻게 검증해야 하는지

까지 템플릿으로 정리했습니다.


0️⃣ 이 글의 사용법 (중요)

✔️ Antigravity 처음 써보는 분
✔️ Cursor 쓰다가 병렬 작업/브라우저 자동화가 궁금한 분
✔️ “AI가 실제로 일하게 만들고 싶은 분”

👉 아래 순서 그대로 따라 하시면 됩니다.


1️⃣ 최초 설정 템플릿 (가장 중요)

🔧 권장 프리셋 (안전 + 생산성 균형)

Development Mode

  • ✅ Agent-assisted development (권장)

Terminal Execution

  • ✅ Auto
    (에이전트가 판단해서 실행 / 무작정 자동 아님)

Review Policy

  • ✅ Agent Decides
    (중요 변경만 승인 요청)

File Access

  • ❌ Workspace 외 파일 접근: OFF
  • ✅ Auto-open edited files: ON

👉 처음엔 이 조합이 가장 스트레스 적습니다.


2️⃣ 실전 워크플로우 전체 그림

[Plan 모드] → 설계 검토
        ↓
[Proceed] → 구현 자동 진행
        ↓
[Browser 연동] → UI/콘솔 검증
        ↓
[Checklist] → 결과 확인

3️⃣ 실전 튜토리얼 ①

새 프로젝트 생성 (Plan 모드)

📌 프롬프트 템플릿

Create a new React TypeScript project using Vite.

Requirements:
- Tailwind CSS
- React Router
- Recommended folder structure
- Clean initial setup

✅ 체크 포인트

  • Plan 단계에서 디렉터리 구조 제안이 있는가
  • 패키지 설치 목록이 명확한가
  • Proceed 전에 수정/코멘트 가능 여부 확인

👉 수정하고 싶으면 Review에서 바로 코멘트 추가


4️⃣ 실전 튜토리얼 ②

컴포넌트 생성 (Fast 모드)

📌 프롬프트 템플릿

Create a responsive navigation bar component.

Requirements:
- Logo on the left
- Menu items centered
- Dark mode toggle on the right
- Mobile hamburger menu
- Tailwind CSS

✅ 체크 포인트

  • 반응형 breakpoint 고려 여부
  • 컴포넌트 분리 상태
  • Tailwind class 난잡하지 않은지

👉 마음에 안 들면:

Refactor this component for readability and reuse.

5️⃣ 실전 튜토리얼 ③

브라우저 자동화 & UI 검증 (핵심 기능)

📌 프롬프트 템플릿

Open localhost:5173 in the browser.

→ Chrome 확장 설치 안내가 나오면 Setup 진행


📌 UI + 콘솔 자동 검증

Check the browser console for errors and fix them.

📌 UI 문제 자동 수정

Inspect the UI layout and fix any visual issues.

✅ 체크 포인트

  • 브라우저 자동 실행 여부
  • 콘솔 에러 캡처 후 수정 여부
  • 스크린샷 기반 설명 제공 여부

👉 이 부분이 Cursor와 가장 큰 차이점


6️⃣ 실전 튜토리얼 ④

Agent Manager로 병렬 작업

📌 병렬 작업 예시

Workspace A

Review this project for architectural issues and improvements.

Workspace B

Generate test cases for the main components.

Workspace C

Create a walkthrough.md explaining how to run and maintain this project.

👉 Inbox에서 3개 작업을 동시에 확인 가능


7️⃣ 결과 검증 체크리스트 (복붙용)

[ ] 프로젝트 빌드 정상
[ ] 에러 없는지 (콘솔/터미널)
[ ] 파일 구조 일관성
[ ] 중복 코드 여부
[ ] README / Walkthrough 생성 여부
[ ] 다음 작업 제안 포함 여부

8️⃣ 실무에서 자주 쓰는 프롬프트 모음

🔹 리팩토링

Refactor this code to improve readability and maintainability.

🔹 코드 리뷰

Review this code and point out potential bugs or improvements.

🔹 성능 점검

Analyze this code for performance bottlenecks.

🔹 문서 생성

Add JSDoc comments and generate documentation.

9️⃣ Antigravity를 잘 쓰는 핵심 요령 5가지

1️⃣ 큰 작업 = Plan / 작은 작업 = Fast
2️⃣ 병렬 작업은 무조건 Agent Manager
3️⃣ UI는 반드시 브라우저 연동으로 검증
4️⃣ “고쳐줘”보다 “기준을 명시”한 프롬프트가 결과 좋음
5️⃣ 무료 프리뷰일수록 작업을 잘게 나누기


🔚 결론 (한 줄 요약)

Antigravity는 “AI에게 코드 짜달라”가 아니라
“AI에게 일을 시키는 IDE”에 가깝다.

  • Cursor = 즉각적인 코딩 보조
  • Antigravity = 작업 단위 자동화 + 병렬 에이전트

👉 둘을 상황에 따라 병행하면 가장 강력합니다.