Architecture

시스템 아키텍처

┌─────────────────┐     HTTP/WS      ┌──────────────────┐    CDP     ┌──────────────┐
│  웹 브라우저     │ ◄──────────────► │ Gravity Web      │ ◄───────► │ Antigravity  │
│  (localhost:3300)│                  │ Server (Node.js) │  :9000    │ IDE          │
└─────────────────┘                  └──────────────────┘           └──────────────┘

서버 구성

파일 구조

server/
├── index.js              # Express + WebSocket 서버 (port 3300)
├── cdp-client.js          # CDP 연결, DOM 스크래핑, 메시지 전송
├── session-manager.js     # 다중 세션 CRUD + 연결 관리
└── package.json

REST API

Method	Endpoint	설명
GET	/api/sessions	세션 목록
POST	/api/sessions	세션 등록 {name, host, cdpPort}
DELETE	/api/sessions/:id	세션 제거
POST	/api/sessions/:id/reconnect	재연결
GET	/api/health	서버 상태

WebSocket (/ws)

// 서버 → 클라이언트: 채팅 업데이트
{"type": "chat_update", "sessionId": "s1", "html": "..."}

// 클라이언트 → 서버: 메시지 전송
{"type": "send_message", "sessionId": "s1", "text": "..."}

// 클라이언트 → 서버: 세션 전환
{"type": "switch_session", "sessionId": "s2"}

CDP 분석 결과

Antigravity IDE 구조

플랫폼: Electron 기반 (Chrome/145.0.7632.160)
실행 파일: C:\Users\Certes\AppData\Local\Programs\Antigravity\Antigravity.exe
CLI 래퍼: antigravity.cmd — ELECTRON_RUN_AS_NODE=1 설정 후 cli.js 실행 (CDP 미동작)

CDP 연결 조건 (검증 결과)

실행 방법	CDP 동작	이유
`antigravity .`	❌	ELECTRON_RUN_AS_NODE=1 → Node 모드, Electron 렌더러 없음
`antigravity . --remote-debugging-port=9000`	❌	위와 동일
`Antigravity.exe --remote-debugging-port=9000` (단독)	⚠️ 미검증	기존 인스턴스 없이 실행 필요
`Antigravity.exe --remote-debugging-port=9000` (기존 인스턴스 존재)	❌	기존 메인 프로세스에 합류

발견된 포트 현황

9222: Chrome 브라우저의 기본 디버깅 포트 (Antigravity가 아닌 Chrome 자체)
9000: Antigravity.exe에 전달했으나 열리지 않음
8000, 8080: 기존 서비스용 포트 (CDP 아님)

다음 단계

모든 Antigravity 종료 후 Antigravity.exe --remote-debugging-port=9000 실행하여 CDP 포트 열림 확인
열리면 chrome://inspect에서 DOM 구조 확인
채팅 컨테이너 CSS 셀렉터를 cdp-client.js에 반영

프론트엔드 구성

public/
├── index.html             # SPA 메인 페이지
├── css/style.css          # 다크 스페이스 테마 디자인 시스템
└── js/
    ├── app.js             # WebSocket + 이벤트 라우팅
    ├── session-panel.js   # 세션 목록 UI
    └── chat-panel.js      # 채팅 표시/입력 UI

디자인 특징

딥 스페이스 다크 테마 (--bg-primary: #0a0e1a)
Inter + JetBrains Mono 폰트
세션 카드별 연결 상태 인디케이터 (색상 + 애니메이션)
글래스모피즘 모달
자동 스크롤, 자동 높이 조절 입력창