cc0bc34fd5
- 프론트엔드 게임 스타일 UI 방향 반영 - GUI 공유 아키텍처 문서 추가 - 서버 구조 변경 반영 (51123/51124 역할 분리) - 불필요한 구식 문서 제거
3.5 KiB
3.5 KiB
프론트엔드 재설계 및 GUI 공유 아키텍처 논의
날짜: 2025-07-29
작업자: happybell80 & Claude
관련 프로젝트: frontend-customer, 로빙 GUI 공유 시스템
오후 6시 7분
세션 시작 문제
Claude가 세션 시작 시 규칙을 제대로 따르지 않음. CLAUDE.md 재확인 후 규칙 준수.
교훈:
- 세션 시작 시 항상 CLAUDE.md 규칙 재확인 필요
- 간결한 응답 원칙 준수
오후 6시 30분
프론트엔드 커스터머 대대적 개편 계획
목표:
- 기존 React 기반 frontend-customer를 모바일 게임 UI처럼 개편
- Merge Restaurant 스타일의 인터페이스 적용
현재 상태 분석:
-
프로젝트 구조
- React 18 + TypeScript + Vite
- Tailwind CSS + shadcn/ui
- 2가지 뷰 모드: 관리 대시보드, 캐릭터 대시보드
-
발견된 문제
- @shared/schema import 존재하지만 실제 파일 없음
- 이미지 경로 하드코딩
- API URL 환경변수 미사용
DOCS 문서 검토:
- PERSONOS 프로토콜: 감정 공명, 상호기억 시스템
- 외부도구 아이템화 방안
- PRD: 3개월 MVP 계획
오후 7시 00분
로빙 컨테이너 GUI 공유 아키텍처 설계
핵심 개념: 로빙이 컨테이너에서 실행하는 모든 GUI를 사용자가 웹으로 볼 수 있게 함
기술 스택:
-
VNC/noVNC 방식 (선택)
- Xvfb + x11vnc + noVNC
- Slack 인증 불필요
- 리소스: 300MB~1GB
-
레벨별 단계적 해금
- Lv.1-4: 스크린샷 (300-400MB)
- Lv.5-9: 반응형 스크린샷
- Lv.10-14: 영상 스트리밍 (500-700MB)
- Lv.15-19: 읽기 전용 VNC (800MB-1GB)
- Lv.20: 완전 제어 VNC (1GB+)
리소스 최적화:
- qutebrowser, surf 등 경량 브라우저 사용
- 세션 수명 제한
- 독립 스킬 컨테이너 분리
오후 7시 20분
SaaS에서 독립 GUI로의 확장 전략
철학: 초기에는 SaaS API만 사용하다가 레벨업하면서 독립 GUI 도구 해금
단계별 확장:
- Lv.1-4: Gmail, Notion API
- Lv.5-9: Google Docs, Figma API
- Lv.10-14: Playwright로 SaaS 화면 공유
- Lv.15-19: PDF 리더, 로그 뷰어 등 독립 앱
- Lv.20: LibreOffice, 터미널 도구
GUI 프레임 최적화:
- 창 관리자 없이 Xvfb 직접 실행
- xdotool로 불필요한 UI 제거
- 이미지 크롭으로 콘텐츠만 추출
오후 7시 30분
웹 인터페이스 3분할 설계
데스크톱: GUI 화면 | 채팅창 | 상태창 (가로 3분할) 모바일: 슬라이드 전환 방식
기술 스택 비교:
-
React 기반 (권장)
- 게임풍 UI 구현 용이
- Framer Motion, Lottie 활용
-
Rails 기반
- 빠른 개발 가능
- GUI 스트리밍과 통합 어려움
- 복잡한 UI 표현 한계
결론: React + 애니메이션 라이브러리로 게임 스타일 UI 구현
교훈
-
GUI 공유는 리소스와 신뢰의 트레이드오프
- 레벨이 낮을 때는 최소한의 리소스로 관찰만
- 신뢰가 쌓이면 더 많은 리소스를 투자해 제어 권한 부여
-
SaaS 우선, GUI는 보조
- 대부분의 작업은 API로 해결 가능
- GUI 공유는 투명성과 신뢰 구축용
-
기술 스택은 목적에 맞게
- 게임풍 UI가 목표라면 React가 Rails보다 적합
- 하지만 핵심 기능은 기존 스택 유지 가능
-
점진적 확장이 핵심
- 한번에 모든 기능을 구현하지 말고 레벨별로 해금
- 리소스 사용량도 점진적으로 증가
작성 완료: 2025-07-29 19:35