happybell80
725ad0876c
- 모든 .md, .html 파일 권한을 644로 정상화 - .gitignore 파일 권한도 644로 수정 - 문서 파일에 실행 권한은 불필요하고 보안상 바람직하지 않음 - deprecated 아이디어 폴더 생성 및 레벨별 UI 변경 아이디어 이동
165 lines
5.7 KiB
Markdown
165 lines
5.7 KiB
Markdown
# 프론트엔드 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
|
|
**문서 유형**: 아키텍처 설계 |