server-dev-blog

Antigravity 활용기 - VS Code에서 Claude Code 쓰기

Antigravity는 VS Code에 통합된 Claude Code���. 터미널 없이 IDE에서 바로 AI 에이전트를 사용할 수 있다.


1. Antigravity란?

구분Claude Code (터미널)Antigravity (IDE)
실행 환경터미널VS Code
파일 접근OO
코드 수정OO
UI 통합XO
브라우저 제어XO

핵심 차이: IDE 통합으로 더 편리한 워크플로우 제공


2. 설치

  1. VS Code 확장 마켓에서 "Antigravity" 검색
  2. 설치 후 Anthropic 계정 연동
  3. 단축키로 AI 패널 열기 (Cmd+Shift+A 또는 설정)

3. 프로젝트 컨텍스트 관리

Antigravity의 강점은 프로젝트 컨텍스트 파일 관리다.

.agent 폴더 구조

프로젝트/
├── .agent/
│   ├── PROJECT_CONTEXT.md    # 프로젝트 설명
│   ├── workflows/
│   │   ├── start-session.md  # 세션 시작 가이드
│   │   └── deploy.md         # 배포 워크플로우
│   └── rules/
│       └── coding-style.md   # 코딩 스타일 규칙

PROJECT_CONTEXT.md 예시

# 프로젝트 컨텍스트
 
## 개요
- 프로젝트명: server-dev-blog
- 기술 스택: Next.js 15, Tailwind CSS, Prisma
 
## 주요 규칙
- 이모지 사용 지양
- 회사명 언급 X (개인 블로그)
 
## 세션 시작 시
1. 이 파일 먼저 읽기
2. npm run dev 실행 확인

효과: AI가 프로젝트 맥락을 이해하고, 일관된 스타일로 작업


4. 워크플로우 정의

.agent/workflows/ 폴더에 워크플로우를 정의하면 슬래시 커맨드로 실행 가능.

start-session.md 예시

---
description: 세션 시작 시 프로젝트 컨텍스트 파악하기
---
 
# 세션 시작 가이드
 
1. PROJECT_CONTEXT.md 읽기
2. npm run dev 상태 확인
3. 사용자 요청에 맞는 파일 탐색

사용법

채팅창에서 /start-session 입력하면 해당 워크플로우 실행.


5. 슬래시 커맨드

자주 쓰는 작업을 워크플로우로 정의해두면 편리:

커맨드용도
/start-session세션 시작, 프로젝트 파악
/blog-writing블로그 글 작성 가이드
/deploy배포 절차 안내
/test테스트 실행 및 수정

6. 실제 워크플로우

6.1 새 기능 개발

1. /start-session 으로 프로젝트 파악

2. 요청: "검색 기능 추가해줘"

3. Antigravity가:
   - 관련 파일 분석
   - 컴포넌트 생성
   - 스타일 적용
   - 테스트 작성

4. 변경사항 확인 후 커밋

6.2 버그 수정

1. 에러 메시지 복사

2. 요청: "이 에러 수정해줘"
   [에러 메시지 붙여넣기]

3. Antigravity가:
   - 에러 분석
   - 관련 파일 수정
   - 빌드 확인

4. 테스트 후 커밋

6.3 리팩토링

1. 요청: "UserService 리팩토링해줘"

2. Antigravity가:
   - 파일 분석
   - 개선점 제안
   - 코드 수정
   - 관련 파일 함께 수정

3. 테스트 실행 후 커밋

7. Task Mode

복잡한 작업은 Task Mode���서 진행:

  1. 기획 문서 작성 (implementation_plan.md)
  2. 사용자 리뷰 요청
  3. 승인 후 실행
  4. 결과 검증

장점:

  • 큰 작업을 단계별로 진행
  • 사용자가 방향 확인 가능
  • 실수 방지

8. 브라우저 연동

Antigravity는 브라우저 제어��� 가능:

요청: "localhost:3000 열어서 UI 확인해줘"

Antigravity가:
1. 브라우저 열기
2. 스크린샷 캡처
3. UI 문제 분석
4. 코드 수정 제안

개발 서버 확인, UI 테스트에 유용.


9. 팁

9.1 컨텍스트 파일 관리

# PROJECT_CONTEXT.md에 포함할 내용
 
- 프로젝트 개요
- 기술 스택
- 코딩 컨벤션
- 자주 쓰는 명령어
- 주의사항

잘 작성된 컨텍스트 = 더 정확한 AI 응답

9.2 워크플로우 활용

반복되는 작업은 워크플로우로 정의:

# .agent/workflows/blog-writing.md
 
1. /blog-writing-guide 읽기
2. content/posts/에 파일 생성
3. 메타데이터 작성
4. 가이드에 맞게 구조화

9.3 검증 습관

AI 수정 후:
1. git diff 확인
2. npm run build
3. npm run test
4. 브라우저에서 확인

마무리

Antigravity는 IDE에 통합된 AI 에이전트���:

  • 프로젝트 컨텍스트 관리 (.agent/)
  • 슬래시 커맨드로 워크플로우 실행
  • 브라우저 연동으로 UI 확인

핵심:

  • 컨텍스트 파일을 잘 관리하면 AI 정확도 상승
  • 터미널 버전(Claude Code)과 상황에 맞게 조합

Comments

잘못된 부분이 있을 수 있습니다 ! 자유롭게 댓글을 달아주세요 :)