119 lines
4.7 KiB
Markdown
119 lines
4.7 KiB
Markdown
# Gravity Web — Antigravity IDE 원격 제어 대시보드
|
|
|
|
Antigravity IDE(Google의 AI-powered IDE) 여러 인스턴스를 웹 브라우저에서 원격으로 연결하여 세션을 전환하며 채팅/명령을 주고받는 대시보드.
|
|
|
|
## 아키텍처
|
|
|
|
```
|
|
┌─────────────────┐ HTTP/WS ┌──────────────────┐ CDP ┌──────────────┐
|
|
│ 웹 브라우저 │ ◄──────────────► │ Gravity Web │ ◄───────► │ Antigravity │
|
|
│ (Dashboard) │ :3300 │ Server (Node.js) │ :9000 │ IDE #1 │
|
|
└─────────────────┘ │ │ :9001 │ IDE #2 │
|
|
└──────────────────┘ └──────────────┘
|
|
```
|
|
|
|
### 핵심 기술
|
|
|
|
| 레이어 | 기술 |
|
|
|--------|------|
|
|
| 서버 | Node.js + Express + WebSocket (`ws`) |
|
|
| CDP 클라이언트 | `chrome-remote-interface` |
|
|
| 프론트엔드 | Vanilla HTML/CSS/JS (SPA) |
|
|
| 통신 | REST API + WebSocket (실시간) |
|
|
|
|
### CDP (Chrome DevTools Protocol) 동작 원리
|
|
|
|
Antigravity는 Electron 기반 앱이므로 `--remote-debugging-port` 플래그로 CDP 포트를 열 수 있습니다. Gravity Web 서버가 이 CDP 포트에 연결하여:
|
|
|
|
1. **DOM 스크래핑**: 채팅 영역의 HTML을 1초 간격으로 폴링
|
|
2. **입력 포워딩**: `Runtime.evaluate` + `Input.dispatchKeyEvent`로 메시지 전송
|
|
3. **스크린샷**: `Page.captureScreenshot`으로 미리보기
|
|
|
|
## 실행 방법
|
|
|
|
### 1. Antigravity를 디버그 모드로 실행
|
|
|
|
```powershell
|
|
# 방법 1: 직접 실행 (권장)
|
|
"C:\Users\Certes\AppData\Local\Programs\Antigravity\Antigravity.exe" --remote-debugging-port=9000
|
|
|
|
# 방법 2: 배치 파일 사용
|
|
launch-antigravity-debug.bat
|
|
```
|
|
|
|
> ⚠️ **주의**: `antigravity .` 명령은 CLI 모드(`ELECTRON_RUN_AS_NODE=1`)로 실행되어 CDP가 동작하지 않습니다. 반드시 `Antigravity.exe`를 직접 실행하세요.
|
|
|
|
> ⚠️ **주의**: 여러 Antigravity 인스턴스가 이미 실행 중이면 새 인스턴스가 기존 메인 프로세스에 합류하여 CDP 포트가 열리지 않습니다. **모든 Antigravity를 종료 후** 디버그 모드로 단일 실행해야 합니다.
|
|
|
|
### 2. 서버 시작
|
|
|
|
```powershell
|
|
cd server
|
|
cmd /c npm install # 최초 1회
|
|
cmd /c node index.js
|
|
# → http://localhost:3300
|
|
```
|
|
|
|
### 3. 대시보드 접속
|
|
|
|
1. 브라우저에서 `http://localhost:3300` 접속
|
|
2. + 버튼 → 세션 이름, 호스트(`localhost`), CDP 포트(`9000`) 입력
|
|
3. "연결" 클릭
|
|
|
|
## 파일 구조
|
|
|
|
```
|
|
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
|
|
├── launch-antigravity-debug.bat
|
|
├── .gitignore
|
|
└── README.md
|
|
```
|
|
|
|
## 개발 로드맵
|
|
|
|
### Phase 1: 텍스트 채팅 인터페이스 ✅ (서버/UI 구축 완료)
|
|
- [x] Node.js 서버 + WebSocket
|
|
- [x] CDP 클라이언트 모듈
|
|
- [x] 세션 매니저
|
|
- [x] 다크 테마 대시보드 UI
|
|
- [ ] CDP 실제 연결 검증 (DOM 셀렉터 조정 필요)
|
|
|
|
### Phase 2: 전체 UI 미러링 (향후)
|
|
- [ ] `Page.screencastFrame` 실시간 화면 스트림
|
|
- [ ] 마우스/키보드 이벤트 원격 전달
|
|
- [ ] 모바일 반응형 레이아웃
|
|
|
|
## 알려진 이슈
|
|
|
|
### CDP 연결 조건
|
|
- Antigravity.exe를 직접 `--remote-debugging-port=9000`으로 실행해야 함
|
|
- `antigravity .` CLI 래퍼는 `ELECTRON_RUN_AS_NODE=1`을 설정하여 CDP 비활성화
|
|
- 기존 Antigravity 프로세스가 있으면 새 인스턴스가 합류하여 별도 CDP 포트 열리지 않음
|
|
- Antigravity의 CDP 지원은 일부 불안정 보고 있음 (커뮤니티 참조)
|
|
|
|
### 참고 프로젝트
|
|
- [Antigravity Phone Connect](https://github.com/krishnakanthb13/antigravity_phone_chat) — CDP 기반 모바일 원격 제어 (참고 가능)
|
|
|
|
## 서비스 연동
|
|
|
|
| 서비스 | URL |
|
|
|--------|-----|
|
|
| Git (Gitea) | https://git.variet.net/Variet/gravity_web.git |
|
|
| Tasks (Vikunja) | https://plan.variet.net/projects/9 |
|
|
|
|
## 라이선스
|
|
|
|
Internal project — Variet
|