DOCS/300_architecture/340_GUI_공유_아키텍처_레벨기반_권한.md

프론트엔드 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 플래그 기반 스킬 관리

{
  "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
문서 유형: 아키텍처 설계