Add "Architecture"

Architecture.md

@@ -0,0 +1,93 @@
+# 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)
+
+```json
+// 서버 → 클라이언트: 채팅 업데이트
+{"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 아님)
+
+### 다음 단계
+
+1. **모든 Antigravity 종료 후** `Antigravity.exe --remote-debugging-port=9000` 실행하여 CDP 포트 열림 확인
+2. 열리면 `chrome://inspect`에서 DOM 구조 확인
+3. 채팅 컨테이너 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 폰트
+- 세션 카드별 연결 상태 인디케이터 (색상 + 애니메이션)
+- 글래스모피즘 모달
+- 자동 스크롤, 자동 높이 조절 입력창