# Antigravity 셋업 & 사용 가이드 코드 경험 없는 디자이너를 위한 Antigravity 시작 가이드입니다. --- ## Antigravity가 뭔가요? Google이 만든 **AI 개발 도구**입니다. 대화로 지시하면 AI가 코드를 작성하고, 브라우저에서 결과를 바로 확인합니다. ``` "포트폴리오 사이트 만들어줘" → AI가 코드 작성 → 바로 미리보기 ``` 코드를 직접 쓸 필요 없습니다. 대화만으로 웹사이트를 만듭니다. --- ## 1단계: 설치 ### Mac ``` 방법 1: antigravity.google 접속 → Download → Mac 선택 방법 2: 터미널에서 brew install --cask antigravity ``` ### Windows ``` antigravity.google 접속 → Download → Windows 선택 → 설치 파일 실행 ``` 설치 후 Antigravity를 실행하면 초기 설정 화면이 나옵니다. --- ## 2단계: 초기 설정 처음 실행하면 몇 가지를 선택합니다. ``` 1. 테마 선택 → 아무거나 OK (나중에 변경 가능) 2. 개발 방식 → "Agent-driven development" 선택 3. 구글 계정 로그인 4. 모델 선택 → Gemini 3 Pro 권장 (무료 크레딧 포함) ``` ### 모델 선택 팁 | 모델 | 특징 | 추천 | |------|------|------| | **Gemini 3 Pro** | 빠르고 무료 크레딧 넉넉 | 실습용 추천 | | **Claude Opus 4.6** | 가장 높은 코드 품질, 복잡한 구조에 강함 | 완성도 높은 결과물 | | Claude Sonnet 4.5 | 빠르고 코드 품질 좋음 | API 키 필요 | | GPT-OSS 120B | 범용 | API 키 필요 | **처음에는 Gemini 3 Pro로 시작하세요.** 별도 결제 없이 바로 쓸 수 있습니다. 완성도를 높이고 싶으면 **Claude Opus 4.6**이 가장 정확합니다. > 개인적으로는 **Claude Opus 4.6**을 추천합니다. 코드 품질과 디자인 이해도가 가장 높습니다. ### 초기 설정 옵션 팁 처음 실행하면 여러 설정 옵션이 나옵니다. 아래를 참고하세요. **Delegation (위임) 설정:** ``` "Allow AI to run commands automatically?" 같은 질문이 나옵니다. → "Auto-run" 또는 "Always allow" 선택 AI가 파일 생성, 패키지 설치 등을 자동으로 진행합니다. 매번 "허용하시겠습니까?" 팝업이 안 떠서 편합니다. → 걱정되면 "Ask every time" 선택 매 작업마다 확인을 거칩니다. 안전하지만 느립니다. ``` **추천 설정 조합:** | 설정 항목 | 추천 선택 | 이유 | |----------|----------|------| | 테마 | 아무거나 | 나중에 변경 가능 | | 개발 방식 | Agent-driven | AI가 주도적으로 작업 | | 파일 실행 권한 | Auto-run (자동 허용) | 작업 흐름이 끊기지 않음 | | 터미널 명령 권한 | Auto-run (자동 허용) | Git, 서버 실행 등 자동 처리 | | 브라우저 미리보기 | 자동 열기 | 결과를 바로 확인 | **설정은 나중에 바꿀 수 있습니다.** 처음에는 "전부 자동 허용"으로 시작하는 게 편합니다. --- ## 3단계: 프로젝트 만들기 ### 새 프로젝트 시작 ``` 1. File → New Project (또는 Cmd+Shift+N) 2. 폴더 위치 선택 (바탕화면에 "my-portfolio" 폴더 생성) 3. 채팅창에 프롬프트 입력 ``` ### 첫 프롬프트 예시 ``` 포트폴리오 웹사이트를 만들어줘. [구조] - Hero: 이름 + 직함 - About: 자기소개 - Work: 프로젝트 3개 - Contact: 이메일 [디자인] - 배경: 어두운 색 (#0a0a0a) - 강조색: 노란색 (#FFD600) - 폰트: Pretendard - 미니멀한 스타일 - 스크롤 애니메이션 ``` AI가 계획을 보여주면 **"진행해줘"** 또는 **"좋아, 시작해"** 라고 답하세요. --- ## 4단계: 미리보기 & 수정 ### 결과 확인 AI가 코드를 완성하면 브라우저 미리보기가 자동으로 열립니다. 마음에 안 드는 부분이 있으면 대화로 수정합니다. ### 수정 프롬프트 패턴 **구체적으로 말할수록 정확합니다.** ``` ❌ "좀 바꿔줘" ✅ "Hero 섹션 배경을 어두운 남색(#0a1628)으로 바꿔줘" ❌ "이상해" ✅ "프로젝트 카드 사이 간격을 더 넓혀줘, 24px → 48px" ❌ "모바일도 되게 해줘" ✅ "768px 이하에서 프로젝트 카드를 1열로 바꿔줘" ``` ### 자주 쓰는 수정 요청 | 카테고리 | 프롬프트 | |---------|---------| | **색상** | "강조색을 파란색(#3B82F6)으로 바꿔줘" | | **폰트** | "제목을 세리프체로 바꿔줘" | | **여백** | "섹션 사이 간격을 더 넓혀줘" | | **레이아웃** | "프로젝트를 2열 그리드로 바꿔줘" | | **애니메이션** | "스크롤하면 페이드인 되게 해줘" | | **이미지** | "Hero에 배경 이미지 넣어줘" | | **반응형** | "모바일에서도 잘 보이게 해줘" | | **다크모드** | "다크/라이트 모드 토글 추가해줘" | --- ## 5단계: GitHub 연동 & 배포 ### GitHub 연동 ``` 이 프로젝트를 GitHub에 연결해줘. 저장소 이름: 내username.github.io ``` AI가 Git 초기화 → GitHub 저장소 생성 → 푸시까지 처리합니다. ### 배포 (GitHub Pages) ``` GitHub Pages로 배포해줘. ``` 배포 후 `https://내username.github.io` 에서 확인 가능합니다. ### 업데이트 수정 후 다시 올리고 싶으면: ``` 변경사항 저장하고 GitHub에 올려줘. 커밋 메시지: "디자인 수정" ``` --- ## 최적화 팁 ### 1. 작은 단위로 요청하기 ``` ❌ "포트폴리오 만들어줘. Hero에는 이름이랑 직함 넣고 About은 2단으로 하고 프로젝트는 카드형으로..." ✅ 1단계: "포트폴리오 기본 구조 만들어줘 (Hero, About, Work, Contact)" 2단계: "Hero에 이름과 직함 넣어줘" 3단계: "프로젝트 섹션을 카드형 그리드로 바꿔줘" ``` ### 2. 되돌리기 활용하기 마음에 안 들면 되돌리세요: ``` "방금 수정한 거 취소해줘" "이전 버전으로 돌려줘" ``` ### 3. 스크린샷 활용 레퍼런스 사이트 스크린샷을 보여주면 더 정확합니다: ``` "이 스크린샷처럼 만들어줘" (+ 이미지 첨부) ``` ### 4. 파일 구조 깔끔하게 ``` "파일 구조를 정리해줘. HTML, CSS, JS 분리하고 이미지는 img 폴더에 넣어줘" ``` ### 5. 성능 챙기기 완성 후 마지막에 요청: ``` "이미지 최적화하고, 불필요한 코드 정리해줘. 로딩 속도 빠르게 만들어줘." ``` --- ## 문제 해결 | 상황 | 해결 | |------|------| | AI가 멈춤 | 새 채팅 시작하고 다시 요청 | | 결과가 이상함 | "취소하고 다시 해줘" + 더 구체적으로 요청 | | 미리보기 안 열림 | "브라우저에서 미리보기 열어줘" | | 에러 발생 | "에러 해결해줘" (AI가 에러 로그를 읽고 수정) | | 크레딧 부족 | 모델을 Gemini 3 Pro (Low)로 변경 | --- ## 실습 순서 정리 ``` 1. antigravity.google에서 설치 2. 구글 계정 로그인 3. 새 프로젝트 생성 4. PRD 템플릿 붙여넣기 (prd-template-a.md 참고) 5. AI가 만든 결과 확인 6. 대화로 수정 (색상, 폰트, 레이아웃) 7. GitHub 연동 + 배포 8. URL로 내 사이트 확인 ```