실전 코딩 (Antigravity)
기획한 내용을 바탕으로 Antigravity에게 명령을 내립니다.
1. PRD.md 파일 작성하기
코딩을 시작하기 전, PRD(Product Requirements Document) 파일을 작성합니다.
📄 PRD(제품 요구사항 설명서)란?
제품 요구사항 문서(Product Requirements Document)의 약자로,
만들고자 하는 웹사이트나 앱의 핵심 기능, 사용자의 이용 흐름, 그리고 디자인적 가이드라인을 구체적으로 명시한 기획 설계도입니다. 개발팀(혹은 AI 개발 파트너)과 기획자가 서로 오해 없이 동일한 방향을 바라보고 개발할 수 있도록 기준점을 제공해 줍니다.
PRD.md 파일에 프로젝트의 목표, 기능 명세, 디자인 가이드라인 등을 정리해두면 AI가 일관된 방향으로 작업을 수행합니다.
💡 Tip: PRD는 AI를 통해서 구체적으로 작성해달라고 요청하면, 편하게 작성할 수 있습니다.
📝 PRD.md 필수 포함 항목
- 프로젝트 개요 및 목표
- 핵심 기능 목록
- 디자인 컨셉 (색상, 폰트, 레퍼런스 링크)
- 기술 스택 (Next.js, Tailwind 등)
2. 프롬프트 작성하기
Antigravity를 실행하면 화면 우측에 프롬프트 입력창이 나타납니다.
여기에 작업 관련 명령을 입력하면 AI가 자동으로 코드를 작성해줍니다.
💬 프롬프트 작성 팁
- 구체적으로 작성: "이쁘게 만들어줘"보다 "PRD.md 명세에 따라 메인 페이지를 만들어줘"처럼 명확하게
- 파일 참조: "@PRD.md 참고해서 작업해줘"처럼 @ 기호로 파일을 직접 참조 가능
- 단계별 요청: 한 번에 너무 많은 작업을 요청하지 말고, 기능 단위로 나눠서 요청
- 수정 요청: 결과물이 마음에 안 들면 "헤더 높이를 80px로 줄여줘"처럼 구체적으로 수정 요청
🎨 디자인이 어렵다면?
디자인 감각이 부족하다고 느껴진다면, 지디웹(GDWEB)에서 레퍼런스를 찾아보세요.
최소 100개 이상의 웹사이트 디자인을 눈에 익히면, 자연스럽게 "좋은 디자인"이 무엇인지 감이 잡힙니다.
3. 에러 해결
에러가 발생하면 당황하지 마세요. 터미널의 에러 메시지를 복사해서
Antigravity나 Perplexity에게 물어보면 10초 만에 해결책을 줍니다.