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