58 lines
2.7 KiB
Markdown
58 lines
2.7 KiB
Markdown
# Architecture — Gravity Web
|
|
|
|
> AI 에이전트는 구현 전 이 문서를 반드시 확인합니다.
|
|
|
|
## 프로젝트 개요
|
|
|
|
Antigravity IDE(Google의 AI-powered IDE) 여러 인스턴스를 웹 브라우저에서 원격으로 연결하여 세션을 전환하며 채팅/명령을 주고받는 대시보드.
|
|
|
|
## 아키텍처
|
|
|
|
```
|
|
┌─────────────────┐ HTTP/WS ┌──────────────────┐ CDP ┌──────────────┐
|
|
│ 웹 브라우저 │ ◄──────────────► │ Gravity Web │ ◄───────► │ Antigravity │
|
|
│ (Dashboard) │ :3300 │ Server (Node.js) │ :9000 │ IDE #1 │
|
|
└─────────────────┘ │ │ :9001 │ IDE #2 │
|
|
└──────────────────┘ └──────────────┘
|
|
```
|
|
|
|
## 디렉토리 구조
|
|
|
|
```
|
|
gravity_web/
|
|
├── server/
|
|
│ ├── package.json # 의존성
|
|
│ ├── index.js # Express + WebSocket 서버
|
|
│ ├── cdp-client.js # CDP 연결/스크래핑/입력
|
|
│ └── session-manager.js # 다중 세션 관리
|
|
├── public/
|
|
│ ├── index.html # SPA 대시보드
|
|
│ ├── css/style.css # 다크 테마
|
|
│ └── js/
|
|
│ ├── app.js # WebSocket + 이벤트 라우팅
|
|
│ ├── session-panel.js # 세션 목록 UI
|
|
│ └── chat-panel.js # 채팅 UI
|
|
├── extension/ # Extension Bridge (승인/거절 기능)
|
|
├── .agents/ # AI 에이전트 설정
|
|
└── docs/ # 문서
|
|
```
|
|
|
|
## 핵심 모듈
|
|
|
|
| 모듈 | 파일 | 역할 |
|
|
|------|------|------|
|
|
| Express 서버 | `server/index.js` | HTTP + WebSocket 서버 (port 3300) |
|
|
| CDP 클라이언트 | `server/cdp-client.js` | Chrome DevTools Protocol로 Antigravity 연결 |
|
|
| 세션 매니저 | `server/session-manager.js` | 다중 Antigravity 인스턴스 관리 |
|
|
| 앱 컨트롤러 | `public/js/app.js` | WebSocket + 이벤트 라우팅 |
|
|
| 세션 패널 | `public/js/session-panel.js` | 세션 목록 UI |
|
|
| 채팅 패널 | `public/js/chat-panel.js` | 채팅 인터페이스 |
|
|
|
|
## CDP (Chrome DevTools Protocol) 동작 원리
|
|
|
|
1. Antigravity.exe를 `--remote-debugging-port=9000`으로 실행
|
|
2. 서버가 CDP 포트에 연결
|
|
3. DOM 스크래핑 (1초 간격 폴링)
|
|
4. `Runtime.evaluate` + `Input.dispatchKeyEvent`로 메시지 전송
|
|
5. `Page.captureScreenshot`으로 미리보기
|