Skip to Content
🍽️ 예술기술 융합 기반 인터랙티브 F&B 경험 시스템소프트웨어 플로우 다이어그램 가이드

소프트웨어 플로우 다이어그램 가이드

작성일: 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 / pyrealsense2Depth 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 URLMP4 파일Cloudflare R2 저장
세션 등록Next.js API → Supabase테이블 번호, 타임스탬프세션 ID (UUID)
QR 코드 생성서버사이드 qrcode lib세션 URLQR PNG 이미지

Lane 3: 소비/공유

노드기술입력출력
웹 뷰어Next.js (Vercel)세션 ID영상 재생 페이지
저장브라우저 다운로드 APIMP4 URL카메라 롤 저장
인스타 공유Web Share API / 폴백 다운로드MP4 파일인스타그램 스토리

화살표 위 프로토콜/기술 라벨

다이어그램 화살표 위에 표기할 기술명:

구간라벨
카메라 → 미니PCOrbbec SDK 또는 RealSense SDK
물체 인식 → 프로젝션 매핑인식 좌표 (x, y, class)
물체 인식 → 사운드 엔진인식 결과 (class, confidence)
프로젝션 매핑 → 프로젝터HDMI
세션 녹화 → 하이라이트 편집로컬 파일 (RAW)
하이라이트 → 클라우드HTTPS (Presigned URL)
클라우드 → QRHTTPS (API Response)
QR → 테이블PNG → TD Texture
QR 스캔 → 웹 뷰어HTTPS (secondtaste.app)
웹 뷰어 → 인스타Web Share API

디자인 스타일 가이드 (하드웨어 도면 매칭)

하드웨어 도면의 비주얼 스타일에 맞추기 위한 가이드:

요소하드웨어 도면소프트웨어 도면 대응
구역 배경밝은 회색 박스 1개3개 레인 (색상 구분: 테이블=파랑, 클라우드=보라, 스마트폰=초록)
실선 화살표 위 텍스트Ethernet, HDMIOrbbec SDK, HTTPS, Web Share API
점선 화살표물리 연결비동기 처리 (업로드, QR 반환)
장비 아이콘/로고서버, 카메라, 프로젝터 사진소프트웨어 로고 (TouchDesigner, YOLOv8, Next.js, Supabase, R2)
오른쪽 참고 이미지음식 사진 2장웹 뷰어 목업, 인스타 스토리 목업
제목 스타일”세컨테이스트 하드웨어 플로우""세컨테이스트 소프트웨어 플로우”

추천 제작 도구

도구추천도비고
Figma최고하드웨어 도면과 동일 스타일 유지, 가장 깔끔
draw.io좋음무료, 박스+화살표 다이어그램에 강함
Mermaid보통텍스트 기반 자동 생성, 빠르지만 레이아웃 제어 제한