실전 코딩 (Antigravity)

기획한 내용을 바탕으로 Antigravity에게 명령을 내립니다.

1. GitHub 연동하기

코딩을 시작하기 전, GitHub 레포지토리를 먼저 만들고 연동하세요.
GitHub 사이트에서 직접 레포지토리를 생성한 후, 아래 명령어를 터미널에서 입력하면 됩니다.

🔗 GitHub 연동 순서

GitHub에서 새 레포지토리 생성 (Public/Private 선택)
Antigravity에서 로컬 프로젝트 폴더 생성 및 열기 (File > Open Folder)
터미널에서 아래 명령어 순서대로 실행

# Git 초기화
git init

# .gitignore 생성
echo "node_modules/" > .gitignore
echo "dist/" >> .gitignore
echo "build/" >> .gitignore
echo ".env" >> .gitignore
echo ".DS_Store" >> .gitignore

# README 생성
echo "# 프로젝트명" > README.md

# 원격 저장소 연결 (GitHub 저장소 URL로 변경)
git remote add origin https://github.com/유저명/저장소명.git

# 파일 추가 및 커밋
git add .
git commit -m "Initial commit"

# 메인 브랜치로 푸시
git branch -M main
git push -u origin main

# 개발 브랜치 생성
git checkout -b develop
git push -u origin develop

💡 연동 후: 그냥 코딩하고, 프롬프트에서 "푸시해줘"라고 하면 됩니다!

2. PRD.md 파일 작성하기

GitHub 연동 후, PRD(Product Requirements Document) 파일을 작성합니다.
PRD.md 파일에 프로젝트의 목표, 기능 명세, 디자인 가이드라인 등을 정리해두면 AI가 일관된 방향으로 작업을 수행합니다.

📝 PRD.md 필수 포함 항목

프로젝트 개요 및 목표
핵심 기능 목록
디자인 컨셉 (색상, 폰트, 레퍼런스 링크)
기술 스택 (Next.js, Tailwind 등)

3. 프롬프트 작성하기

Antigravity를 실행하면 화면 우측에 프롬프트 입력창이 나타납니다.
여기에 작업 관련 명령을 입력하면 AI가 자동으로 코드를 작성해줍니다.

💬 프롬프트 작성 팁

구체적으로 작성: "이쁘게 만들어줘"보다 "PRD.md 명세에 따라 메인 페이지를 만들어줘"처럼 명확하게
파일 참조: "@PRD.md 참고해서 작업해줘"처럼 @ 기호로 파일을 직접 참조 가능
단계별 요청: 한 번에 너무 많은 작업을 요청하지 말고, 기능 단위로 나눠서 요청
수정 요청: 결과물이 마음에 안 들면 "헤더 높이를 80px로 줄여줘"처럼 구체적으로 수정 요청

🎨 디자인이 어렵다면?

디자인 감각이 부족하다고 느껴진다면, 지디웹(GDWEB)에서 레퍼런스를 찾아보세요.

최소 100개 이상의 웹사이트 디자인을 눈에 익히면, 자연스럽게 "좋은 디자인"이 무엇인지 감이 잡힙니다. 마음에 드는 레퍼런스를 PRD.md에 링크로 첨부하면 AI가 그 스타일을 참고합니다.

웹사이트 접근이 어려운 경우, 직접 캡쳐해서 프롬프트창에 붙여넣기 하시면 됩니다.

4. 에러 해결

에러가 발생하면 당황하지 마세요. 터미널의 에러 메시지를 복사해서 Antigravity나 Perplexity에게 물어보면 10초 만에 해결책을 줍니다.