# 프론트엔드 GUI 공유 아키텍처

## 개요
로빙이 컨테이너 내부에서 실행하는 GUI 애플리케이션을 외부 사용자에게 단계적으로 공유하는 아키텍처. 레벨 기반 권한 시스템과 연동하여 스크린샷부터 완전 제어까지 점진적으로 기능을 해금한다.

## 1. GUI 공유 기술 스택

### 1.1 기본 구성
- **Xvfb**: 가상 디스플레이 서버 (GUI 애플리케이션 실행 환경)
- **x11vnc**: VNC 서버 (Xvfb 화면을 스트리밍)
- **noVNC**: HTML5 기반 VNC 뷰어 (웹 브라우저에서 접속 가능)
- **websockify**: WebSocket-TCP 프록시 (noVNC 연결용)

### 1.2 전체 흐름
```
[로빙 컨테이너 내부]
  ├─ GUI 앱 (브라우저, 로그뷰어, Office 등)
  ├─ Xvfb (가상 디스플레이)
  ├─ x11vnc (VNC 스트리밍)
  └─ noVNC (웹소켓 서버)

[외부 사용자]
  └─ 웹 브라우저 → https://ro-being.com/view-session/abc123
```

## 2. 레벨별 단계적 해금 시스템

| 레벨 | 기능 | 구현 방식 | 리소스 사용량 |
|------|------|-----------|---------------|
| Lv.1~4 | 정적 스크린샷 | page.screenshot() → Slack DM | 300-400MB |
| Lv.5~9 | 반응형 스크린샷 | 버튼 클릭시 새 이미지 | 300-400MB |
| Lv.10~14 | 저프레임 영상 | page.video() + ffmpeg | 500-700MB |
| Lv.15~19 | 읽기 전용 VNC | noVNC 뷰어 (조작 불가) | 800MB-1GB |
| Lv.20 | 완전 제어 | VNC + 마우스/키보드 허용 | 1GB+ |

### 2.1 플래그 기반 스킬 관리
```json
{
  "gui_share": {
    "level_required": 1,
    "mode": "screenshot",
    "upgrade_path": [
      { "level": 5, "mode": "interactive_screenshot" },
      { "level": 10, "mode": "video_stream" },
      { "level": 15, "mode": "vnc_readonly" },
      { "level": 20, "mode": "vnc_control" }
    ]
  }
}
```

## 3. 리소스 최적화 전략

### 3.1 경량 브라우저 대안
- **qutebrowser**: Qt 기반 초경량 브라우저 (150-300MB)
- **surf**: suckless 계열 최소 브라우저 (100MB 미만)
- **headless-chromium**: 스크린샷/영상만 필요시 (100MB)

### 3.2 컨테이너 의존성 관리
| 목적 | 필수 패키지 | 용량 |
|------|-------------|------|
| 스크린샷 | playwright, libx11, fonts | 300-500MB |
| 영상 스트리밍 | + ffmpeg, webm tools | +200MB |
| VNC 공유 | + Xvfb, x11vnc, noVNC | +300MB |
| GUI 제어 도구 | + xdotool, wmctrl | +50MB |

### 3.3 최적화 방안
- 세션 수명 제한 (5-10분)
- 독립 스킬 컨테이너 분리 (skill-gui-viewer)
- 멀티 스테이지 빌드
- idle 상태시 리소스 해제

## 4. SaaS에서 독립 GUI로의 확장

### 4.1 단계별 도구 확장
| 레벨 | 도구 유형 | 예시 |
|------|-----------|------|
| Lv.1~4 | SaaS API | Gmail, Notion, Slack |
| Lv.5~9 | SaaS 웹 UI | Google Docs, Figma |
| Lv.10~14 | 브라우저 자동화 | Playwright로 SaaS 조작 |
| Lv.15~19 | 독립 GUI 앱 | PDF 리더, 로그 뷰어 |
| Lv.20 | 복잡한 도구 | LibreOffice, 터미널 도구 |

### 4.2 GUI 프레임 최적화
- 창 관리자 없이 Xvfb 직접 실행
- xdotool로 불필요한 UI 요소 숨김
- 이미지 크롭으로 콘텐츠 영역만 추출

## 5. 사용자 인터페이스 설계

### 5.1 웹 인터페이스 구성 (3분할)
```
┌─────────────┬─────────────┬─────────────┐
│  GUI 화면    │  채팅창      │  상태창      │
│ (공유 화면)  │ (대화 기록)  │ (스탯/레벨)  │
└─────────────┴─────────────┴─────────────┘
```

### 5.2 모바일 대응
- 슬라이드 전환 방식 (스와이프 제스처)
- CSS scroll-snap 또는 React 캐러셀
- 반응형 레이아웃 자동 전환

### 5.3 기술 스택 옵션

#### React 기반 (권장)
- **장점**: 컴포넌트 기반, 상태 관리 용이, 생태계 풍부
- **UI 라이브러리**: Framer Motion, Lottie, Three.js
- **게임풍 UI**: CSS 애니메이션 + Canvas 활용

#### Rails 기반
- **장점**: 빠른 개발, Hotwire로 실시간 업데이트
- **단점**: GUI 스트리밍과 느슨한 통합, 복잡한 UI 표현 한계
- **구현**: iframe으로 VNC 임베드, Turbo Streams로 상태 갱신

## 6. 보안 및 접근 제어

### 6.1 인증 방식
- 일회용 토큰 + 만료 시간 (10분)
- UUID 기반 비공개 URL
- Slack DM으로만 URL 전달

### 6.2 권한 관리
- 레벨 기반 기능 제한
- 읽기 전용 vs 완전 제어 구분
- 세션별 격리 (컨테이너 분리)

## 7. 구현 로드맵

### Phase 1: 기본 스크린샷 공유 (Lv.1~4)
- Playwright headless 스크린샷
- Slack DM 이미지 전송
- 주기적 캡처 (3-5초)

### Phase 2: 영상 스트리밍 (Lv.10~14)
- ffmpeg 기반 인코딩
- HLS 또는 WebM 스트리밍
- 1-2fps 저프레임 영상

### Phase 3: VNC 기반 실시간 공유 (Lv.15~20)
- Xvfb + x11vnc 구성
- noVNC 웹 뷰어 통합
- 단계적 조작 권한 부여

## 8. 예상 과제 및 해결 방안

### 8.1 리소스 관리
- **문제**: 멀티 세션시 메모리/CPU 급증
- **해결**: 세션 제한, 타임아웃, 독립 컨테이너

### 8.2 네트워크 지연
- **문제**: VNC 스트리밍 딜레이
- **해결**: 압축 설정, 지역별 엣지 서버

### 8.3 모바일 최적화
- **문제**: 작은 화면에서 GUI 가독성
- **해결**: 반응형 줌, 주요 영역 포커싱

## 9. 결론
로빙의 GUI 공유 시스템은 신뢰 기반 점진적 권한 확대를 통해 단순 관찰에서 완전 제어까지 발전한다. 기술적으로는 Xvfb/VNC/noVNC 조합으로 구현 가능하며, 레벨 시스템과 연동하여 자원 효율성과 보안을 동시에 달성할 수 있다.

---
**작성일**: 2025-07-29  
**작성자**: happybell80 & Claude  
**문서 유형**: 아키텍처 설계