소프트웨어 플로우 다이어그램 가이드
작성일: 2026-02-23 목적: 하드웨어 플로우 도면과 대응하는 소프트웨어 플로우 다이어그램 제작 가이드
다이어그램 구조: 3-레인 구성
하드웨어 도면의 단일 구역과 달리, 소프트웨어는 3개 레인(구역)으로 나눠 데이터 흐름을 표현한다.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
LANE 1: 테이블 미니PC (TouchDesigner) 실시간 처리
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Depth IR Camera
│
│ Orbbec SDK / RealSense SDK
▼
┌──────────┐ ┌──────────────┐ ┌──────────────────┐
│ 카메라 │ │ 물체 인식 │ │ 프로젝션 매핑 │
│ 프레임 │───→│ YOLOv8 │───→│ Kantan Mapper │──→ HDMI → 프로젝터
│ 수신 │ │ (Python CHOP)│ │ 좌표 → 비주얼 매핑│
└──────────┘ └──────┬───────┘ └────────┬─────────┘
│ │
│ 인식 결과 │ 렌더 프레임
▼ ▼
┌──────────────┐ ┌──────────────────┐
│ 사운드 엔진 │ │ 세션 녹화 │
│ 음식 → 사운드 │ │ Movie File Out │
│ 매핑 │ │ (전체 세션 캡처) │
└──────┬───────┘ └────────┬─────────┘
│ │
▼ │
Speaker │
│
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━│━━━━━━━━━━━━━━
LANE 2: 식사 완료 → 클라우드 업로드 │ 후처리
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━│━━━━━━━━━━━━━━
│
▼
┌──────────────────┐
│ 하이라이트 편집 │
│ Python (moviepy) │
│ 30~60초 MP4 │
└────────┬─────────┘
│
│ HTTPS
▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ QR 코드 생성 │←───│ 세션 등록 │←───│ MP4 업로드 │
│ qrcode lib │ │ POST /session│ │ Presigned URL│
└──────┬───────┘ │ Supabase DB │ │ Cloudflare R2│
│ └──────────────┘ └──────────────┘
│
│ QR 이미지 (PNG)
▼
테이블에 QR 프로젝션
(TouchDesigner로 복귀)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
LANE 3: 관람객 스마트폰 소비/공유
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
QR 스캔
│
▼
┌──────────────────┐ ┌──────────────┐ ┌──────────────┐
│ 웹 뷰어 │ │ 저장 │ │ 인스타 공유 │
│ secondtaste.app │───→│ 카메라 롤 │ │ Web Share API│
│ /s/{session-id} │ │ 다운로드 │ │ → 스토리 업로드│
│ │ └──────────────┘ └──────────────┘
│ Next.js (Vercel) │ ▲
│ 영상 자동재생 │──────────────┘
└──────────────────┘
│
│ 7일 후 자동 만료
▼
(세션 삭제)각 노드의 기술 상세
Lane 1: 실시간 처리
| 노드 | 기술 | 입력 | 출력 |
|---|---|---|---|
| 카메라 프레임 수신 | Orbbec SDK / pyrealsense2 | Depth IR Camera (Ethernet) | RGB + Depth 프레임 |
| 물체 인식 | YOLOv8 (TD Python Script CHOP) | RGB 프레임 | 바운딩박스 + 클래스 + 좌표 |
| 프로젝션 매핑 | TD Kantan Mapper / Stoner | 인식 좌표 + 비주얼 에셋 | HDMI 출력 → 프로젝터 |
| 사운드 엔진 | TD Audio CHOP | 인식 결과 (음식 종류) | 오디오 출력 → Speaker |
| 세션 녹화 | TD Movie File Out TOP | 렌더 프레임 + 오디오 | 로컬 비디오 파일 |
Lane 2: 후처리 + 클라우드
| 노드 | 기술 | 입력 | 출력 |
|---|---|---|---|
| 하이라이트 편집 | Python (moviepy) | 전체 세션 비디오 | 30~60초 MP4 |
| MP4 업로드 | HTTPS + Presigned URL | MP4 파일 | Cloudflare R2 저장 |
| 세션 등록 | Next.js API → Supabase | 테이블 번호, 타임스탬프 | 세션 ID (UUID) |
| QR 코드 생성 | 서버사이드 qrcode lib | 세션 URL | QR PNG 이미지 |
Lane 3: 소비/공유
| 노드 | 기술 | 입력 | 출력 |
|---|---|---|---|
| 웹 뷰어 | Next.js (Vercel) | 세션 ID | 영상 재생 페이지 |
| 저장 | 브라우저 다운로드 API | MP4 URL | 카메라 롤 저장 |
| 인스타 공유 | Web Share API / 폴백 다운로드 | MP4 파일 | 인스타그램 스토리 |
화살표 위 프로토콜/기술 라벨
다이어그램 화살표 위에 표기할 기술명:
| 구간 | 라벨 |
|---|---|
| 카메라 → 미니PC | Orbbec SDK 또는 RealSense SDK |
| 물체 인식 → 프로젝션 매핑 | 인식 좌표 (x, y, class) |
| 물체 인식 → 사운드 엔진 | 인식 결과 (class, confidence) |
| 프로젝션 매핑 → 프로젝터 | HDMI |
| 세션 녹화 → 하이라이트 편집 | 로컬 파일 (RAW) |
| 하이라이트 → 클라우드 | HTTPS (Presigned URL) |
| 클라우드 → QR | HTTPS (API Response) |
| QR → 테이블 | PNG → TD Texture |
| QR 스캔 → 웹 뷰어 | HTTPS (secondtaste.app) |
| 웹 뷰어 → 인스타 | Web Share API |
디자인 스타일 가이드 (하드웨어 도면 매칭)
하드웨어 도면의 비주얼 스타일에 맞추기 위한 가이드:
| 요소 | 하드웨어 도면 | 소프트웨어 도면 대응 |
|---|---|---|
| 구역 배경 | 밝은 회색 박스 1개 | 3개 레인 (색상 구분: 테이블=파랑, 클라우드=보라, 스마트폰=초록) |
| 실선 화살표 위 텍스트 | Ethernet, HDMI | Orbbec SDK, HTTPS, Web Share API |
| 점선 화살표 | 물리 연결 | 비동기 처리 (업로드, QR 반환) |
| 장비 아이콘/로고 | 서버, 카메라, 프로젝터 사진 | 소프트웨어 로고 (TouchDesigner, YOLOv8, Next.js, Supabase, R2) |
| 오른쪽 참고 이미지 | 음식 사진 2장 | 웹 뷰어 목업, 인스타 스토리 목업 |
| 제목 스타일 | ”세컨테이스트 하드웨어 플로우" | "세컨테이스트 소프트웨어 플로우” |
추천 제작 도구
| 도구 | 추천도 | 비고 |
|---|---|---|
| Figma | 최고 | 하드웨어 도면과 동일 스타일 유지, 가장 깔끔 |
| draw.io | 좋음 | 무료, 박스+화살표 다이어그램에 강함 |
| Mermaid | 보통 | 텍스트 기반 자동 생성, 빠르지만 레이아웃 제어 제한 |