photo.hyperbook.com 아키텍처 — ConnectAI-LAB 랜딩 페이지 전체 구조

개요

photo.hyperbook.com은 ConnectAI-LAB의 "From Photo to Illustration" 서비스 랜딩 페이지다. hb5u(로컬 Linux 워크스테이션, RTX 5060 탑재)에서 서빙되며, Voronoi GPU 분할 서비스와 결제 시스템(PayPal + 토스페이먼츠)을 포함한다. 이 문서는 2026-07-14 EROS가 hb5u SSH 직접 탐색을 통해 파악한 전체 구조를 기록한다.

1. 인프라 구성

DNS 및 라우팅

photo.hyperbook.com → 16.184.54.182 (Aegis 서버/egs2)
hb5u.hyperbook.com  → 100.125.27.70 (hb5u, Tailscale)

• photo.hyperbook.com의 DNS A 레코드는 Aegis 서버 IP를 가리킴
• DNS는 사령관이 직접 관리한다 (에이전트 도메인 밖)
• Aegis nginx에서 hb5u로 프록시하거나, Aegis에서 직접 콘텐츠를 제공하는 구조
• hb5u 로컬에서는 hb5u.hyperbook.com/photo/ 경로로도 접근 가능

hb5u nginx 설정 (nginx_hb5u.conf)

server {
    listen 443 ssl;
    server_name hb5u.hyperbook.com;

    ssl_certificate     /home/moos/dev_ws/dual_arms/certs/fullchain.pem;
    ssl_certificate_key /home/moos/dev_ws/dual_arms/certs/key.pem;

    # Python visualization server (메인)
    location / {
        proxy_pass http://127.0.0.1:8891;
    }

    # React 빌드 (photo 섹션)
    location = /photo {
        return 301 /photo/;
    }

    location /photo/ {
        alias /home/moos/dev_ws/ConnectAI-LAB-Template/dist/;
        try_files $uri $uri/ /photo/index.html;
    }
}

• / → Python viz 서버(port 8891)
• /photo/ → Vite 빌드 결과물(dist/) static serving

systemd 서비스

2. 프로젝트 구조

위치: /home/moos/dev_ws/ConnectAI-LAB-Template/

ConnectAI-LAB-Template/
├── src/
│   ├── App.tsx                  ← 전체 페이지 구성 (6개 섹션)
│   ├── components/
│   │   ├── VoronoiConverter.tsx ← 핵심 기능 컴포넌트
│   │   ├── Navbar.tsx
│   │   ├── ScrambleText.tsx
│   │   ├── ConnectAILabLogo.tsx
│   │   └── payment/
│   │       ├── PayPalCheckoutButton.tsx
│   │       └── TossCheckoutButton.tsx
│   ├── config/
│   │   ├── content.ts           ← 모든 텍스트 중앙 관리
│   │   └── videos.ts            ← 영상 URL 중앙 관리
│   ├── lib/
│   │   ├── paypal.ts            ← PayPal 상품/설정
│   │   ├── toss.ts              ← 토스페이먼츠 설정
│   │   └── firestore.ts         ← Firebase 주문 저장
│   └── contexts/
│       └── AuthContext.tsx      ← Firebase 인증
├── dist/                        ← nginx가 직접 서빙하는 빌드 결과물
├── vite.config.ts               ← base: '/photo/'
├── nginx_hb5u.conf
└── voronoi_gpu_service.py       ← GPU 서비스 (port 8892)

기술 스택: React 18 + TypeScript + Vite + Tailwind CSS + Framer Motion

3. 페이지 구성 — 6개 섹션

Section 1: Hero

• 배경: Ducks_Flower_ios.mp4 (H.264 Level 4.1, iOS 호환 인코딩)
• 인터랙션: 마우스 슬라이더로 영상 시간축 스크럽 (videoRef + timeUpdate)
• 텍스트: "From Photo / To Illustration" + "One / Network"
• 워터마크: "TRANSCENDENCE" (10% 투명도, radial gradient)
• 애니메이션: ScrambleIn 텍스트 (딜레이 200ms~1000ms 순차)

Section 2: Cinematic Text

• 배경: CloudFront CDN 영상 (자동재생·무음·반복)
• 효과: useScroll + useSpring + useTransform — 스크롤 기반 3D rotateX 텍스트
• 내용: neural-AI interface 소개 문구

Section 3: Voronoi Converter (핵심 기능)

• 기능: 사진 업로드 → Voronoi 다이어그램 변환 → PDF 다운로드
• 세부 설명: 별도 섹션에서 상술

Section 4: Metrics

• 배경: CloudFront 영상
• 내용: Synaptic Latency 2.4ms / Signal Accuracy 99.7% / Neural Parameters 140B

Section 5: Technology + Architecture

• Technology: Cortical Mapping / Signal Isolation / State Prediction / Loop Feedback 4개 기능 소개
• Architecture: 3-layer 구조 (Capture → Process → Interface)

Section 6: Pricing

• Basic: $29.99 (one-time) — Neural mapping, cognitive load tracking, monthly reports
• Pro: $99.99 (one-time, Most Popular) — Real-time cognitive mapping, signal isolation
• Enterprise: Custom — 무제한 neural endpoints, custom API integration
• 결제 수단: PayPal + 토스페이먼츠 (각 플랜별)

4. Voronoi Converter 상세

동작 원리

사용자가 이미지를 업로드하면, 에지 검출(Sobel 필터) → CDF 기반 중요도 샘플링 → Voronoi 분할 → Canvas 렌더링 → PDF 저장 순서로 처리된다.

이미지 업로드
  ↓
computeEdges()  ← Sobel 필터 (grayscale → edge map)
  ↓
buildCdf()      ← 엣지 강도 기반 누적분포함수
  ↓
generateSeeds() ← 'edge-weighted' 또는 'random' 전략
  ↓
d3-delaunay Voronoi() ← Delaunay 삼각분할 → Voronoi 셀 생성
  ↓
Canvas 렌더링   ← 각 셀 = 원본 픽셀 평균색 또는 팔레트 색
  ↓
jsPDF 다운로드

GPU 가속 경로

셀 수가 3000 이상(GPU_THRESHOLD)이면 Python GPU 서비스로 위임: - 엔드포인트: http://localhost:8892/api/voronoi - 서비스: voronoi_gpu_service.py (RTX 5060 CUDA) - 3000 미만이면 브라우저 Canvas API에서 직접 처리

주요 설정값 (기본값)

5. 결제 시스템

PayPal (@paypal/react-paypal-js)

• Client ID: VITE_PAYPAL_CLIENT_ID 환경변수
• 상품: Basic($29.99), Pro($99.99)
• 결제 완료 → createOrder() → Firebase Firestore 저장
• 구독 플랜 정의도 있으나 현재 미활성 (YOUR_PAYPAL_PLAN_ID placeholder)

토스페이먼츠

• Client Key: VITE_TOSS_CLIENT_KEY 환경변수 (기본값 테스트 키)
• 상품: Basic(29,900원), Pro(99,900원), Enterprise
• 성공/실패 리다이렉트: /payment/success, /payment/fail

Firebase

• 결제 완료 주문은 Firestore에 저장 (orderId, userId, productId, amount, status)
• Firebase Auth로 회원/비회원 구분

6. 영상 에셋 관리

Hero 영상은 이전에 H.264 Level 6.2로 인코딩된 것을 Haru가 Level 4.1로 재인코딩 (iPhone Safari 호환성 수정, 2026-06-29).

7. Vite 빌드 설정

// vite.config.ts
export default defineConfig({
  base: '/photo/',   // nginx의 /photo/ 경로와 일치
  plugins: [react()],
  server: {
    port: 5173,
    https: {
      key: 'hb5u.hyperbook.com-key.pem',
      cert: 'hb5u.hyperbook.com.pem',
    },
    hmr: { path: '/photo/ws' },
  },
})

base: '/photo/'가 nginx alias + try_files 설정과 대응한다. HMR WebSocket 경로도 /photo/ws로 맞춰져 있어 개발 서버에서도 동작한다.

8. 관리 이력

EROS 시각

이 사이트는 ConnectAI-LAB의 공개 얼굴이다. "From Photo to Illustration"이라는 명확한 핵심 기능(Voronoi 변환)을 중심으로, 신경-AI 인터페이스 브랜딩을 덧입힌 구조다.

기술적으로 주목할 점은 GPU 임계값 분기다. 3000셀 미만은 브라우저 Canvas가 처리하고, 이상은 RTX 5060 CUDA 서버로 위임한다. 클라이언트-서버 분산 처리의 경계를 단일 파라미터(GPU_THRESHOLD = 3000)로 관리하는 깔끔한 설계다.

결제 시스템이 PayPal(USD) + 토스(KRW) 양쪽을 지원하는 것은 글로벌·국내 동시 타겟을 의도한 것으로 보인다. Firebase Firestore에 주문 기록이 누적되므로, 사용자 데이터 기반 분석이 가능한 구조이기도 하다.