AI Herb Lab 전시 인터랙션

인터랙티브한 미디어아트를 만들어줘
1번 이미지를 기반으로 한 인터랙티브 화면을 만들고 싶은데 엄청나게 큰 vast 흰 스페이스가 있고 거기에 매우 많은 수의 5개의 가전들이 마치 밤하늘의 별처럼 일정한 거리를 두고 놓여져 있어. 공간감이 느껴지게
약간 볼록렌즈로 본 것처럼 중앙에 놓인 가전이 제일 크고 선명하게, 가장자리에 놓인 가전일수록 크기가 작고 햐얗게 보이게
[...]
모든 인터랙션은 매우 매끄럽고 부드럽게
화면의 왼쪽 중앙에는 인물의 모습이 보이는 웹캠 화면이 작게 보이게 만들어줘
mediapipe 연동해서 실제 pinch 제스처로 화면 이동할 수 있게 해줘

5단계 "식물 키우기/개화" 인터랙션을 개선해줘. 현재는 "손을 올려 키우라"고 안내하지만 실제로는 손에 반응하지 않고 3초 후 자동재생되는 연출이라, 시킨 동작에 피드백이 없어서 관람객이 혼란스러워해. 손 높이가 실제로 꽃 성장에 반영되도록 바꿔줘.

[1] 영상 제어 방식 (중요 — 직접 스크럽 금지)
AI 생성 영상이라 역방향·임의 시킹(currentTime 임의 점프) 시 버벅이므로, 손 높이로 영상을 직접 스크럽하지 말 것. 대신:
손 높이가 "목표 지점(targetTime)"을 정하고, 영상은 정방향 재생으로만 그 지점까지 따라간다
손을 멈추면 영상도 일시정지, 손을 내려도 역방향 재생하지 않고 현재 프레임 유지
[...]
[2] 손 높이 → 성장 단계 매핑 + 잠금
거울 피드 안에 관람객 몸 기준 3개의 가로 목표 라인 표시 (허리 / 가슴 / 머리 위)
손이 한 라인을 통과하면 그 라인이 빛나며 사라지고, 영상이 다음 단계까지 진행 후 그 지점 잠금(아래로 역행 안 됨)
[...]
[4] 머리 위 라인 통과 → 개화 확정 + 클라이맥스
손이 머리 위(마지막) 라인을 통과하면 손 추적을 OFF하고 영상 8~12.3초(완성 구간)를 자동 재생
문구 전환: "이제 손을 내려도 괜찮습니다. 꽃이 피어납니다"
handdown 사운드 재생
만개 파티클 + 빛 연출
[...]

인트로/온보딩 전체를 개선해줘. 현재는 인트로가 '읽기만 하는' 자동 슬라이드라, 가전 선택에서 갑자기 손 조작이 시작될 때 처음 온 관람객이 "손을 써야 하는 줄 몰랐다"고 헷갈려해. 손 조작을 단계적으로 자연스럽게 학습시키는 흐름으로 바꿔줘. walk-up 전시(처음·짧음·직원 안내 없음)가 최우선 기준이야.

[전체 흐름]
Idle → 웰컴 게이트(첫 손 인터랙션) → 인트로 본문(자동) → 마무리 → 가전 선택
[1] Idle — 시작 안내
사람이 감지되고 손바닥이 인식되면 [...] 메인 화면에 커서(점/빛)가 즉시 붙어 따라다님
손이 일정 시간 안정적으로 인식되면 웰컴 게이트로 전환
[2] 웰컴 게이트 — 첫 손 인터랙션
손 커서를 버튼 위에 일정 시간 머무르면(dwell) 선택 확정
시작할게요: 2.5초 dwell → Intro 진행
X: 3.5초 dwell → Idle 복귀
유령 데모(튜토리얼 카드) 1회
[...]
[학습 곡선 의도]
Idle(손 인지) → 웰컴 게이트(dwell 첫 연습) → 인트로(존재 반영 유지) → 가전 선택(dwell 본격 사용)으로 손 조작이 점진적으로 학습되게 하는 것이 핵심.

모든 유령 데모(WelcomeGate, SeedSelect, Bloom)의 연출을 "튜토리얼 카드" 방식으로 통일해서 개선해줘.
[공통 연출 구조]
예고 진입: 데모 시작 시 화면 중앙에 인트로 카드 [...] 페이드인
카드 내 시연: 카드 안에서 작은 화면처럼 유령 데모 재생
확장 전환: 시연이 끝나면 카드가 은은하게 풀스크린으로 확장
실전 시작: 확장 완료와 함께 실제 손 커서 활성화 + 안내 문구 표시
[시연 카드 디자인 — 연구실 모티프]
얇은 메탈/글래스 베젤 + 모서리 크롭 마크
상단 모노스페이스 라벨
하단 미세 계측 텍스트
[...]

WelcomeGate의 유령 데모를 "손바닥 들기"부터 보여주는 3단계로 개선해줘.
손바닥 들기캡션: "손바닥을 펴서 화면을 향해 드세요"

커서 이동캡션: "손을 움직여 화면 속 점을 옮겨요"

dwell 선택캡션: "「시작할게요」 위에 잠깐 멈추면 시작돼요"

[...]
3단계 시연 후 카드가 풀스크린 확장 → 실제 인터랙션 활성화 → 본문 안내 "이제 직접 해보세요"

AI Herb Lab의 현장 운영 안정성을 위해 아래 항목을 추가/보강해줘.
기존 동작·타이밍은 유지하고 안전망과 복구 로직만 추가하는 것.

[1] 이탈 시 일시정지 → 자동 리셋 (2단계)
인터랙션 단계에서 사람 미감지가 20초 지속되면 일시정지 화면 진입
손이 다시 인식되거나 [계속하기]를 선택하면 멈춘 지점부터 재개
추가 20초 미감지 시 Idle로 자동 복귀 + 세션 리셋
[3] 다중 인물 추적 안정화 (hysteresis)
추적 대상으로 한번 선정된 인물을 일정 시간 고정 유지
원래 대상이 명확히 사라진 경우에만 전환
[6] 장시간 가동 안정성
Idle 상태가 일정 시간 이상 무활동으로 지속되면 자동 페이지 새로고침
[7] 웹캠 끊김 복구
웹캠 스트림이 끊기면 감지해 자동 재연결 시도
재연결 실패 시 "카메라를 확인해주세요" 복구 안내 화면 표시
[8] 영상 프리로드
Analyzing 구간 동안 다음 단계의 씨앗 심기 영상과 개화 영상을 미리 로드
[...]

현장 테스트에서 발견된 성능·버그 문제를 수정해줘. 아래 항목들을 처리하고, 기존 인터랙션 로직·타이밍·플로우는 유지할 것.
[1] 전체 버벅임 / 낮은 프레임레이트 (최우선)
매 프레임 렌더링되는 무거운 요소를 [...] 줄일 것
MediaPipe 추론 빈도와 렌더링 루프를 분리하고 [...] throttle
requestAnimationFrame 기반으로 렌더 루프 정리
목표: 전 구간에서 부드러운 프레임 유지
[3] Idle — 손 들고 3초 유지가 작동 안 함
손이 안정적으로 인식된 상태가 연속 3초간 유지되어야만 다음으로 전환
진입 게이지가 실제 경과 시간과 정확히 연동
시간 기반 카운트로 처리
[4] 폰트 적용 안 됨 + 타이포 줄바꿈 깨짐
한글 폰트로 Pretendard를 /assets/fonts/에 로컬 번들
폰트 스택: 'LGEIHeadline', 'Pretendard', sans-serif
word-break: keep-all 적용
[...]

현장 테스트 후 수정 사항을 반영해줘. 명시 안 한 기존 동작·플로우는 유지.
[1] 데모 모드 중 실제 커서 숨기기
[...]
[2] 개화 영상 — 손=트리거, 정속 재생
손 높이로 영상을 빨리 감지 말 것
손을 올려 단계 라인을 통과하면 해당 구간이 원래 속도로 정상 재생
머리 라인 통과 시 손 추적 OFF + 완성 구간 정속 자동 재생
[3] 엔딩 토큰 회전 안 됨
손 움직임에 토큰이 반응하지 않거나 둔함. Three.js 회전 입력 매핑과 민감도를 점검
관성 + 스무딩 유지
[...]

아래 카피 수정, 엔딩 멘트 위계, 민감도 조정을 반영해줘. 나머지 동작·플로우는 유지.
[2] 엔딩(Card) 멘트 위계
1순위 / 상단 중앙 / 크게:
"당신만의 씨앗이 완성되었습니다.
QR을 스캔해 분양 증서를 받아 집에서 심어보세요."
2순위 / 토큰 옆·아래 / 작게:
"손을 움직여 돌려보세요"
3순위 / 하단 구석 / 가장 작게:
"처음 화면으로 돌아갑니다" + 카운트다운
[3] Seed Select — 캐러셀 회전 민감도
손 좌우 움직임에 캐러셀이 더 잘 반응하도록 민감도 상향
중앙 데드존 유지
회전 멈출 때 가장 가까운 가전으로 부드럽게 스냅
[4] Card — 회전 민감도
손 움직임에 토큰이 더 잘 반응하도록 민감도 상향
관성 + 스무딩 적용, 너무 빠르게 돌지 않도록 감속 처리

추적 대상 표시(WebcamFeed.js)를 "감시 박스"에서 "정밀 계측" 톤으로 리디자인해줘.
네모 박스 제거 → 대상의 네 모서리에 얇은 코너 브래킷([ ] 형태)만 표시
"TRACKING" 텍스트 제거 → 작은 모노스페이스 라벨로 교체
포즈 스켈레톤 살짝
컬러는 흰색 + 반투명으로 통일
기존 LabFrame HUD와 톤 통일
기존 0.5초 히스테리시스 + CSS 트랜지션 부드러운 이동은 유지

현장 테스트에서 발견된 UX 문제 3가지를 개선해줘.
[4] 추적 대상이 누구인지 화면에 표시
현재 추적 중인 사람에게 [...] 시각적으로 명확히
코너 브래킷, 포즈 스켈레톤, "SUBJECT 01" 마커 등
히스테리시스로 깜빡임 방지
[7] 유령 데모를 능동형 튜토리얼로
튜토리얼 카드에서 고스트가 시범 → 카드가 풀스크린 확장 → 관람객이 직접 [...] dwell 성공시켜야 다음으로 진행
"보여주기 → 따라 하기 → 성공 시 진입"
[8] 개화(Bloom) 인터랙션
손 높이 가이드를 메인 화면 한쪽 가장자리에 세로 게이지로 표시
손 위치 인디케이터를 메인 화면에도 작고 반투명하게 표시
중앙의 꽃 개화 영상은 가리지 않고 온전히 보이도록
[...]

인터랙션 전체의 텍스트(타이포그래피)를 하나의 시스템으로 정리·통일해줘.
[1] 폰트 통일
한글: Pretendard
영문/숫자: LGEIHeadline
'LGEIHeadline', 'Pretendard', sans-serif
모든 한글 텍스트에 word-break: keep-all 적용
[2] 텍스트 위계 정의 (4단계)
타이틀
본문/안내
보조
계측/시스템
[3] 위치 규칙 통일
메인 타이틀/안내는 화면 내 일관된 위치
보조 텍스트는 관련 요소 주변 배치
[...]

인트로 슬라이드에 나레이션 음성을 넣고, 각 슬라이드 표시 시간을 음성 길이에 맞춰줘.
[1] 음성 파일 배치
인트로 음성 파일들을 프로젝트의 오디오 에셋 폴더로 복사
슬라이드 1~4 + IntroFinale 순서대로 음성 연결
[2] 음성-슬라이드 싱크
각 슬라이드의 음성 재생이 끝나면 다음 슬라이드로 전환
슬라이드 표시 시간 = 해당 음성 길이 (+ 약간의 여유)
음성과 자막이 동시에 시작
[4] 안전 처리
음성 파일 로드 실패 시 기존 고정 시간으로 폴백
[...]

UT에서 발견된 온보딩 문제 3가지를 수정해줘.
[1] 한 손 명시 (두 손 드는 문제)
"손바닥을 펴서" → "한 손을 펴서"로 모든 안내 문구 수정
유령 데모의 시연도 한 손만 드는 모션으로
시스템이 두 손을 감지해도 한 손만 추적하도록 처리
[2] "커서" 용어 제거 (마우스로 오해)
전 화면에서 "커서" 표현을 제거
기본: "손을 움직이면 화면 속 점이 손을 따라 움직여요"
SeedSelect: "손을 움직이면 씨앗이 따라 움직여요"
[3] 유령 데모를 "튜토리얼"로 명시
데모 상단에 직관적인 한글 라벨 표시: "사용 방법" 또는 "따라해보세요"
"지금 보여주는 동작을 따라하면 된다"가 명확히 전달되도록

현장에서 테스트 하신 분들이
지금 큐알 연결이 안되고
가전 캐러셀 파트에서 >>한손으로하몀 원래 인식이 안되나요?? 계속 빠르게
이동만 하고 스탑이 되지않아 두손으로 제어하였습니다
라고 피드백을 주심
그리고 오늘 현장에서 아예 밤새서 완벽하게 구동되는지 현장 데탑으로 클로드
코딩 옮길까해
그걸 내 맥북에서 원격으로 켜서 하려고
이거 셋다 어떻게 할지만 일단 디렉션 정리해서 텍스트로 주고 진행하지는 마

AI Herb Lab에 "코드네임 품종 시스템 + 인물 사진 캡처 + 분양 증서(영수증형)"를 도입해줘. 여러 단계에 걸친 변경이라 아래를 순서대로 반영하고, 명시 안 한 기존 동작은 유지.
[A] 사진 전송 백엔드 (Netlify Functions + Blobs)
분석 단계에서 캡처한 인물 사진을 Netlify Functions로 업로드 → 무작위 짧은 ID 발급
QR URL에 정보 담기: token.html?a=<가전>&c=<코드네임숫자>&d=<날짜>&id=<이미지ID>
이미지는 Netlify Blobs에 저장, 24시간 TTL 자동 삭제
업로드 실패 시 사진 없이 진행
[...]
[B] 웹캠 캡처 + 고지
"체험 중 사진이 촬영되며, 촬영된 데이터는 24시간 후 자동 삭제됩니다"
"씨앗이 당신의 모습을 기록합니다"
"잠시 정면을 바라봐 주세요"
카운트 → 캡처
[...]
[C] 코드네임(품종) 시스템
각 가전에 식물 품종 코드네임을 부여
숫자는 매 세션 랜덤 2자리 생성
A/B variant는 절대 화면에 노출하지 말 것
코드네임은 엔딩(Card)과 모바일 증서에서 처음 공개
[...]
[D] 모바일 증서 페이지 (token.html 재설계)
헤더: "AI HERB LAB" + "CERTIFICATE OF ADOPTION / 씨앗 분양 증서"
DATE / SOURCE / SPECIMEN No.
웹캠 캡처 인물 사진
씨앗 이미지 + 꽃 이미지
코드네임(품종)
VARIANT(A/B) 표기 없음
이미지로 저장
LG전자 제품 보기
[...]