1. Git이란?

Git은 코드의 변경 이력을 기록하고 관리하는 버전 관리 시스템입니다.

1.1 Git을 사용하는 이유

2. Antigravity Editor 소스 컨트롤 시작하기

Antigravity Editor에는 Git을 쉽게 사용할 수 있는 소스 컨트롤 기능이 내장되어 있습니다.

2.1 소스 컨트롤 패널 열기

Antigravity Editor 왼쪽 사이드바에서 소스 컨트롤 아이콘을 클릭하세요.

2.2 Git 저장소 초기화하기

처음 소스 컨트롤을 열면 다음과 같은 화면이 나타날 수 있습니다.

그림 9-1: Git 저장소가 없을 때 나타나는 화면

이 화면은 현재 폴더에 Git 저장소가 없다는 의미입니다. Git을 사용하려면 먼저 저장소를 초기화해야 합니다.

방법 1: Initialize Repository

1. Initialize Repository 버튼 클릭
2. 현재 폴더가 Git 저장소로 변환됨
3. 이제 소스 컨트롤 기능을 사용할 수 있음

방법 2: Publish to GitHub

GitHub에 바로 연결하고 싶다면 아래와 같이 진행하면 됩니다.

1. Publish to GitHub 버튼 클릭
2. GitHub 계정 로그인 (처음 사용 시)
3. 저장소 이름 입력
4. 공개(Public) 또는 비공개(Private) 선택
5. 자동으로 GitHub 저장소가 생성되고 연결됨

2.3 소스 컨트롤 화면 구성

소스 컨트롤 패널을 열면 다음과 같은 화면이 나타납니다.

┌─────────────────────────────────┐
│  소스 컨트롤                      │
├─────────────────────────────────┤
│  메시지 입력란                    │  ← 커밋 메시지 작성
│  [✓ 커밋] 버튼                   │  ← 커밋 실행
├─────────────────────────────────┤
│  변경 사항 (Changes)              │
│    M  index.html                 │  ← 수정된 파일
│    M  style.css                  │  ← 수정된 파일
│    U  script.js                  │  ← 새로 추가된 파일
└─────────────────────────────────┘

2.4 파일 상태 표시

3. 변경 사항 확인하기 (Diff)

3.1 파일 클릭으로 변경 내용 보기

소스 컨트롤에서 파일을 클릭하면 변경 전후를 비교할 수 있습니다.

1. 소스 컨트롤 패널에서 변경된 파일 클릭
2. 편집기에 비교 화면(Diff)이 열림
3. 왼쪽: 이전 코드 / 오른쪽: 현재 코드

3.2 Diff 화면 읽는 법

- <h1>Hello</h1>        ← 빨간색: 삭제된 코드
+ <h1>Hello World!</h1> ← 초록색: 추가된 코드

4. 커밋하기: 변경 사항 저장

커밋(Commit)은 변경 사항을 Git에 저장하는 것입니다. 마치 게임의 세이브 포인트와 같습니다.

4.1 커밋하는 방법

1단계: 파일 스테이징하기

커밋할 파일을 선택합니다.

• 파일 옆의 + 버튼 클릭 → 해당 파일만 스테이징
• 변경 사항 옆의 + 버튼 클릭 → 모든 파일 스테이징

┌─────────────────────────────────┐
│  변경 사항 (Changes)              │
│    M  index.html    [+]          │  ← + 클릭하여 스테이징
│    M  style.css     [+]          │
├─────────────────────────────────┤
│  스테이징된 변경 사항              │
│    (스테이징한 파일이 여기로 이동)   │
└─────────────────────────────────┘

2단계: 커밋 메시지 작성

무엇을 변경했는지 설명을 입력합니다.

버튼 클릭 시 현재 시간 표시 기능 추가

3단계: 커밋 실행

• ✓ 커밋 버튼 클릭
• 또는 Ctrl + Enter (Windows/Linux) / Cmd + Enter (Mac)

5. Antigravity Editor의 Review Changes

Antigravity Editor에서도 변경 사항을 확인하고 관리할 수 있습니다.

5.1 Review Changes 열기

Agent가 코드를 작성하면, Agent Side Panel 하단에 Review Changes 버튼이 나타납니다.

1. Agent Side Panel 하단 확인
2. Review Changes 클릭
3. 변경 내용을 보여주는 패널이 열림

그림 9-2: Editor의 Review Changes

5.2 Review Changes에서 할 수 있는 것

5.3 코드에 피드백 남기기

Artifacts에 댓글을 다는 것처럼, 파일 diff에도 댓글을 남길 수 있습니다.

1. 수정이 필요한 코드 줄 선택(드래그)
2. Edit 또는 Chat 클릭
3. 피드백 내용 입력
4. Agent가 피드백을 확인하고 수정

피드백 예시:

이 함수명은 'handleSubmit'이 더 명확할 것 같아요.

여기에 에러 처리를 추가해주세요.

6. Agent Manager의 Review Changes

Agent Manager에서도 동일한 기능을 사용할 수 있습니다.

1. Agent Manager에서 대화 선택
2. 오른쪽 상단의 Review Changes 버튼 클릭
3. Source Control 버튼 클릭

그림 9-3: Agent Manager의 Review Changes

7. 실습: Agent 작업 후 Git 커밋하기

7.1 실습 목표

1. Agent에게 코드 작성 요청
2. Review Changes로 변경 사항 확인
3. 소스 컨트롤로 커밋

7.2 1단계: Agent에게 코드 작성 요청

버튼을 클릭하면 현재 시간을 표시하는 기능을 만들어주세요.
HTML, CSS, JavaScript로 만들어주세요.

7.3 2단계: Review Changes로 확인

Agent 작업이 완료되면

1. Review Changes 클릭
2. 생성된 파일 확인
3. Diff로 코드 내용 검토

코드에서 수정이 필요하면 댓글로 피드백을 남기세요.

7.4 3단계: 소스 컨트롤로 커밋

만족스러운 결과가 나오면

1. Ctrl + Shift + G로 소스 컨트롤 열기
2. 변경된 파일 확인
3. + 버튼으로 파일 스테이징
4. 커밋 메시지 입력: 시간 표시 기능 추가
5. ✓ 커밋 버튼 클릭

┌─────────────────────────────────┐
│  시간 표시 기능 추가              │  ← 커밋 메시지
│  [✓ 커밋]                        │
├─────────────────────────────────┤
│  스테이징된 변경 사항              │
│    A  index.html                 │
│    A  style.css                  │
│    A  script.js                  │
└─────────────────────────────────┘

8. 변경 사항 되돌리기

8.1 소스 컨트롤에서 되돌리기

실수로 코드를 잘못 수정했다면 되돌릴 수 있습니다.

1. 소스 컨트롤에서 해당 파일 찾기
2. 파일 옆의 ↺ (Discard Changes) 아이콘 클릭
3. 확인 팝업에서 Discard Changes 선택

8.2 모든 변경 되돌리기

모든 파일의 변경을 한 번에 되돌리려면

1. 소스 컨트롤 상단의 ⋯ (더보기) 메뉴 클릭
2. Changes → Discard All Changes 선택

9. 좋은 커밋 습관

9.1 작업 단위로 커밋하기

하나의 기능을 완료할 때마다 커밋하세요.

❌ "여러 기능 추가"
✅ "로그인 폼 UI 구현"
✅ "로그인 유효성 검사 추가"

9.2 명확한 커밋 메시지 작성

무엇을 변경했는지 알 수 있게 작성하세요.

❌ "수정"
❌ "버그 픽스"
✅ "버튼 클릭 시 폼 중복 제출 방지"
✅ "모바일 화면에서 네비게이션 정렬 수정"

9.3 커밋 전 확인 체크리스트

커밋하기 전에 Diff를 확인하세요.

• 의도하지 않은 변경이 없는가?
• 디버깅용 코드(console.log 등)가 남아있지 않은가?
• 코드가 정상적으로 동작하는가?

10. 작업 흐름 정리

1. Agent에게 작업 요청
        ↓
2. Review Changes로 결과 확인
        ↓
3. 문제 있으면 → 피드백으로 수정 요청
   문제 없으면 → 다음 단계로
        ↓
4. 소스 컨트롤 열기 (Ctrl+Shift+G)
        ↓
5. 파일 스테이징 (+ 버튼)
        ↓
6. 커밋 메시지 작성
        ↓
7. 커밋 (✓ 버튼)

11. 정리

12. 다음 단계

코드 리뷰와 변경 관리 방법을 익혔다면, 다음 챕터에서 실제 프로젝트를 진행해봅시다.

실전 프로젝트