DOCS/troubleshooting/250729_happybell80_프론트엔드재설계.md

5.8 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 스타일의 인터페이스 적용

현재 상태 분석:

  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. 점진적 확장이 핵심

    • 한번에 모든 기능을 구현하지 말고 레벨별로 해금
    • 리소스 사용량도 점진적으로 증가

오후 8시 00분

서버 구조 변경 및 auth-server 설정 수정

서버팀 메시지 내용:

  • 51123 서버: nginx, Gitea, frontend-base, auth-server, PostgreSQL
  • 51124 서버: 로빙 서비스들, 스킬 서비스들, ChromaDB
  • PostgreSQL은 51123 서버 호스트에서 실행 중
  • auth-server Docker 컨테이너가 호스트 PostgreSQL 연결 불가 문제

해결 작업:

  1. auth-server의 docker-compose.yml 수정

    • DATABASE_URL 기본값을 host.docker.internal 사용하도록 변경
    • 이미 extra_hosts 설정은 있었음
  2. 서버 아키텍처 문서 업데이트

    • server-architecture.md에 변경된 서버 구조 반영
    • auth-server와 PostgreSQL이 51123에 추가된 것 문서화

실수 및 교훈:

  • Git 작업 시 디렉토리 구조 실수 반복
    • ivada는 git 저장소가 아님, 각 하위 폴더가 개별 저장소
    • cd 명령 전 현재 위치 확인 필수
  • CLAUDE.md에 디렉토리 구조 주의사항 추가함

오후 8시 10분

51123 서버 서비스 정리 및 auth-server 실행

서버 관리 작업 (admin@51123):

  1. 서비스 이전 작업:

    • 51123에서 실행 중이던 서비스들 중지 및 제거:
      • skill-email → 51124로 이전
      • rb8001 → 51124로 이전
      • hj_rb10408_test → 51124로 이전
    • Docker 이미지도 정리 완료
  2. auth-server 실행 문제 해결:

    • 문제: Docker 컨테이너에서 localhost가 호스트 PostgreSQL에 연결 불가
    • 원인: 컨테이너 내부의 localhost는 컨테이너 자신을 가리킴
    • 해결 과정:
      • docker-compose.yml에 host.docker.internal 설정 추가 (로컬 개발자 수행)
      • .env 파일의 DATABASE_URL도 host.docker.internal로 수정 (서버에서 직접 수정)
    • 결과: auth-server 포트 9000에서 정상 실행 중
  3. 최종 51123 서버 상태:

    • nginx (80/443)
    • Gitea (3000)
    • frontend-base (8000)
    • auth-server (9000)
    • PostgreSQL (5432)
    • Actions Runner

교훈:

  • Docker 네트워킹: 컨테이너에서 호스트 서비스 접근 시 localhost 대신 host.docker.internal 사용
  • .env 파일은 gitignore에 있어 서버에서 직접 수정 필요
  • PostgreSQL은 이미 호스트에서 실행 중이므로 컨테이너 추가 불필요

작성 완료: 2025-07-29 20:05