시스템 아키텍처 (소프트웨어 + 클라우드)

━━━ 테이블 (실시간) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

[카메라] → [미니PC / TouchDesigner]
              ├─ 물체 인식 (음식, 접시, 손)
              ├─ 리액티브 프로젝션 매핑
              ├─ 사운드 반응
              └─ 세션 녹화 (영상 + 오디오)
                      │
                      ▼
━━━ 식사 완료 시 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

              MP4 렌더링 (30~60초 하이라이트)
                      │
                      ▼
              클라우드 업로드 (S3/R2)
                      │
                      ▼
              고유 URL 생성 → QR 코드 생성
                      │
                      ▼
              마지막 테이블에 QR 프로젝션
                      │
━━━ 관람객 스마트폰 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

                      ▼
              QR 스캔 → 웹 뷰어 (모바일 최적화)
              ├─ 내 식사 비주얼 영상 재생
              ├─ "저장" 버튼 → 카메라 롤 저장
              └─ "인스타 스토리 공유" 버튼

미니PC                      클라우드
  │                           │
  │  POST /sessions           │
  ├──────────────────────────→│  세션 생성 → 고유 ID 발급
  │                           │
  │  PUT /sessions/{id}/video │
  ├──────────────────────────→│  MP4 업로드 (presigned URL)
  │                           │
  │  GET /sessions/{id}/qr    │
  ├──────────────────────────→│  QR 코드 이미지 반환
  │                           │
  │  QR을 테이블에 프로젝션     │
  │                           │

sessions
├─ id (UUID)
├─ table_number (int)
├─ created_at (timestamp)
├─ expires_at (timestamp, +7일)
├─ video_url (string, R2 presigned)
├─ video_duration (int, 초)
├─ status (uploading | ready | expired)
└─ metadata (json, 인식된 음식 목록 등)

secondtaste.app/s/{session-id}
┌──────────────────────────┐
│                          │
│   ┌──────────────────┐   │
│   │                  │   │
│   │   내 식사 영상    │   │
│   │   (자동 재생)     │   │
│   │                  │   │
│   └──────────────────┘   │
│                          │
│   2026.02.23 · 테이블 3   │
│   세컨테이스트             │
│                          │
│   ┌────────┐ ┌────────┐  │
│   │ 저장    │ │ 공유    │  │
│   └────────┘ └────────┘  │
│                          │
│   ┌──────────────────┐   │
│   │ 인스타 스토리 공유 │   │
│   └──────────────────┘   │
│                          │
└──────────────────────────┘

// Web Share API 예시
async function shareToInstagram() {
  const response = await fetch(videoUrl);
  const blob = await response.blob();
  const file = new File([blob], 'secondtaste.mp4', { type: 'video/mp4' });
 
  if (navigator.canShare?.({ files: [file] })) {
    await navigator.share({
      files: [file],
      title: '세컨테이스트에서의 나의 식사',
    });
  } else {
    // 폴백: 다운로드
    downloadVideo();
  }
}

테이블           TouchDesigner + YOLOv8 + Python
통신             OSC (테이블 간) / HTTPS (클라우드)
클라우드 API     Next.js API Routes (Vercel)
파일 저장소      Cloudflare R2
DB               Supabase (PostgreSQL)
웹 뷰어          Next.js (같은 프로젝트)
QR 생성          서버사이드 qrcode 라이브러리
인스타 공유      Web Share API + 폴백 다운로드

본인 (바이브코딩)          미디어아트 엔지니어
├─ 웹 뷰어 전체            ├─ TouchDesigner 비주얼
├─ 클라우드 API            ├─ YOLOv8 모델 학습
├─ Supabase DB             ├─ 카메라 캘리브레이션
├─ QR 생성                 ├─ 프로젝션 매핑
├─ 인스타 공유             ├─ TD ↔ Python 통합
└─ 세션 관리               └─ TD → 클라우드 업로드 연동