Til

오늘 한 일

서버 추론을 제거하고 프론트 로컬 추론 구조로 전환. MediaPipe(FaceMesh/Hands)와 TFJS 모델을 로컬 assets로 연결. FOCUS / SLEEP / PHONE / AWAY / SCORE 판정 로직을 프론트에서 전부 처리. 점수 유지(새로고침), 방 재입장 시 초기화 정책 반영. UI(하트 색상, 아바타 눈) 안정화.

기술적으로 배운 점

1. MediaPipe 로컬화 시 중요한 점 CDN 대신 /public/mediapipe/**에 전체 assets 복사해야 정상 동작. locateFile() 경로가 정확해야 WASM/packed assets 로딩 성공. FaceMesh는 onResults를 매 프레임 재등록하면 결과가 꼬일 수 있음 → 1회 등록.
2. TFJS 입력/출력 주의점 tf.browser.fromPixels() 결과는 float이 아닐 수 있어 → tf.cast, tf.div 필요. YOLO계열 모델은 출력 shape(1,5,8400) 기준 파싱해야 정상 작동.
3. 판정 안정화 핵심 졸음은 “눈 깜박임”과 구분 필요 → 최소 눈 감김 시간(0.7s) 추가. 자리비움은 검출 불안정이 많음 → face stable streak + grace window 필요. 폰은 phoneConf가 우선이어야 손/고개 각도에 의존하지 않는다.
4. 실시간 반응성 vs 안정성 판정 주기/윈도우를 줄이면 반응은 빨라지지만 오탐 가능성 증가. 안정화를 위해 grace/hold/window 튜닝이 필수.
5. 점수 유지 정책 새로고침은 sessionStorage로 유지 가능하지만, 탭 크래시/재시작까지 고려하려면 localStorage도 같이 쓰는 게 안전.

문제 해결 경험

SLEEP 오탐 → blink와 졸음을 분리하는 조건 추가. AWAY 오탐 → face 안정화 조건과 grace 강화. PHONE 오탐 → handInteraction 단독 사용 금지, phoneConf 우선. 앞으로 개선 포인트 폰 감지 딜레이 최적화 (PHONE_INTERVAL 재조정). phoneConf 기준을 환경별로 자동 보정하는 로직 고려. 대용량 모델/mediapipe 파일은 Git LFS 사용 여부 검토.