프로젝트 완성 및 확장
학습 목표
- 프로젝트를 Git으로 관리할 수 있다
- 추가 기능을 구현할 수 있다
- 프로젝트를 공유할 수 있다
1. 프로젝트 Git 저장
1.1 Source Control로 커밋
Chapter 9에서 배운 Source Control을 활용하여 프로젝트를 저장합니다.
- Agent Side Panel 하단의 "Review Changes" 클릭
- "Source Control" 탭으로 전환
- 변경된 파일 확인:
index.htmlstyle.cssscript.js
- 모든 파일 스테이징
- 커밋 메시지 입력: "Todo 앱 초기 버전 완성"
- 커밋 실행
그림 10-10: Source Control로 커밋
1.2 Git 저장소 초기화 (처음인 경우)
좌측 깃 아이콘을 눌러 깃 초기화 버튼을 클릭하거나, 터미널에서 초기화합니다.
git init
git add .
git commit -m "Todo 앱 초기 버전 완성"
2. 추가 기능 구현
기본 기능이 완성되었으면 Agent에게 추가 기능을 요청해봅시다.
2.1 기능 1: 할 일 편집
Todo 앱에 편집 기능을 추가해주세요.
- 할 일 항목을 더블클릭하면 편집 모드로 전환
- 수정 후 Enter를 누르면 저장
- ESC를 누르면 취소
2.2 기능 2: 필터링
Todo 앱에 필터 기능을 추가해주세요.
- "전체", "진행중", "완료" 버튼 추가
- 각 버튼 클릭 시 해당 항목만 표시
- 현재 선택된 필터 강조 표시
2.3 기능 3: 완료 항목 일괄 삭제
완료된 항목을 한 번에 삭제하는 버튼을 추가해주세요.
- "완료 항목 삭제" 버튼 추가
- 클릭 시 완료된 모든 항목 삭제
- 삭제 전 확인 메시지 표시
2.4 기능 4: 다크 모드
Todo 앱에 다크 모드를 추가해주세요.
- 헤더에 토글 버튼 추가
- 클릭 시 라이트/다크 모드 전환
- 사용자 설정 로컬 스토리지에 저장
그림 10-11: 추가 기능이 구현된 Todo 앱
3. Walkthrough 활용
추가 기능을 구현한 후 Walkthrough Artifact를 확인합니다.
3.1 Walkthrough 내용
| 섹션 | 내용 |
|---|---|
| 변경 요약 | 추가된 기능 설명 |
| 수정된 파일 | 변경된 파일 목록 |
| 주요 변경점 | 코드 변경 하이라이트 |
| 스크린샷 | Browser 작업 시에만 포함 |
💡 스크린샷이 없는 경우
Walkthrough에 스크린샷이 포함되려면 Browser Subagent가 웹 페이지 작업을 수행해야 합니다. 코드 수정만 진행한 경우에는 스크린샷 없이 변경 요약만 표시됩니다.
3.2 변경 사항 검토
- Walkthrough에서 변경 내용 확인
- Review Changes에서 코드 상세 확인
- Browser에서 동작 테스트
- 문제 없으면 커밋
4. 프로젝트 정리
4.1 최종 파일 구조
todo-app/
├── index.html
├── style.css
├── script.js
└── .git/ ← Git 저장소(보이지 않을 수도 있습니다.)
4.2 코드 정리 요청
Agent에게 코드 정리를 요청할 수 있습니다.
현재 코드를 정리해주세요.
- 불필요한 주석 제거
- 코드 포맷팅 통일
- 변수명 명확하게 수정
5. 프로젝트 공유
5.1 방법 1: 폴더 공유
todo-app폴더 전체를 압축- 압축 파일 공유
- 받는 사람은 압축 해제 후
index.html열기
5.2 방법 2: GitHub에 업로드
- GitHub에서 새 저장소 생성
- 터미널에서 연결
git remote add origin https://github.com/사용자명/todo-app.git
git push -u origin main
5.3 방법 3: GitHub Pages로 배포
GitHub Pages를 사용하면 웹에서 바로 접근할 수 있습니다.
- GitHub 저장소 Settings 이동
- Pages 섹션에서 Source를 "main" 브랜치로 설정
- 잠시 후 URL 생성:
https://사용자명.github.io/todo-app
그림 10-12: GitHub Pages로 배포된 Todo 앱
6. 학습 정리
6.1 이 프로젝트에서 활용한 기능
| 기능 | 활용 내용 |
|---|---|
| 워크스페이스 | 프로젝트 폴더 관리 |
| Planning 모드 | 체계적인 프로젝트 진행 |
| Task List | 진행 상황 추적 |
| Implementation Plan | 구현 계획 검토 |
| Review Changes | 코드 변경 확인 |
| Browser | 웹 앱 테스트 |
| Browser Subagent | 자동화된 테스트 |
| Source Control | Git 커밋 관리 |
| Walkthrough | 결과 요약 확인 |
| Knowledge | Agent가 프로젝트 패턴 학습 |
💡 Knowledge 활용
프로젝트를 진행하면서 Agent는 자동으로 Knowledge를 생성합니다. 코딩 스타일, 자주 사용하는 패턴, 해결한 문제의 해결책 등을 학습하여 다음 대화에 활용합니다. Agent와 대화를 많이 나눌수록 더 효율적인 협업이 가능해집니다.
6.2 배운 점
- 구체적인 요청: Agent에게 명확하게 요청하면 원하는 결과를 얻을 수 있다
- 계획 검토: Implementation Plan을 검토하면 문제를 미리 방지할 수 있다
- 단계별 테스트: 각 기능을 테스트하며 문제를 빠르게 발견할 수 있다
- 코드 이해: "작동한다"를 수락하기 전에 왜, 어떻게 작동하는지 확인하면 나중에 수정이 쉬워진다
- 반복 개선: Agent와 대화하며 점진적으로 앱을 개선할 수 있다
7. 다음 도전
Todo 앱을 완성했다면 다음 프로젝트에 도전해보세요.
| 프로젝트 | 난이도 | 설명 |
|---|---|---|
| 계산기 앱 | ⭐ | 사칙연산 계산기 |
| 날씨 앱 | ⭐⭐ | API 연동 날씨 조회 |
| 메모 앱 | ⭐⭐ | 마크다운 지원 메모장 |
| 퀴즈 앱 | ⭐⭐⭐ | 문제 풀이 및 점수 계산 |
새 프로젝트를 시작할 때도 같은 방식으로 진행하면 됩니다.
- 워크스페이스 준비
- Planning 모드로 요청
- Implementation Plan 검토
- 테스트 및 개선
- Git으로 저장
8. 마무리
축하합니다! Google Anti-Gravity의 핵심 기능을 모두 활용하여 웹 애플리케이션을 완성했습니다.
이제 여러분은 Anti-Gravity를 사용하여 아래와 같은 기능을 사용할 수 있습니다.
- Agent와 협업하며 코드를 작성하고
- 체계적으로 프로젝트를 관리하고
- 효율적으로 테스트하고 개선할 수 있습니다
더 많은 프로젝트를 만들며 Anti-Gravity와 함께 성장해보세요!