✅ 6/16: 기존 구조 분석 및 MediaPipe 통합 준비
- 기존 hand_recognition.py는 Flask에서 OpenCV + MediaPipe를 사용해 로컬 웹캠 직접 접근하는 구조.
- 정상적으로 손 모양 인식은 되지만, cv2.imshow() 창이 뜨지 않아 디버깅 진행.
- 보안/UX 문제로 React에서 카메라 켜고 → MediaPipe로 손 관절 추출 → Flask에 좌표 전송 구조로 변경하기로 결정.
- 가상환경 세팅: IFITV-React/backend 기준으로 Flask 서버 실행, 필요한 라이브러리 설치:
pip install flask opencv-python mediapipe scikit-learn
npm install @mediapipe/hands @mediapipe/drawing_utils
✅ 6/17: 실시간 손 제스처 인식 구조 완성 + 기능 통합 준비
- React에서 손 인식 처리:
- <video>로 사용자 웹캠 연결
- MediaPipe로 손 관절 21개 좌표 추출
- 추출된 관절 데이터를 Flask로 POST 전송
- Flask 서버에서는:
- 관절 좌표 → 벡터 계산 → 각도 계산
- KNN 모델로 제스처 예측 → JSON 응답
- 예측 실패 시 다음 프레임으로 넘기도록 개선해 UX 안정성 확보.
- 이후 통합을 위해 profiles 테이블에 gesture 컬럼 추가, 프로필 생성 시 제스처 선택 가능하게 수정.
✅ 6/18: 제스처 기반 프로필 진입 기능 구현
- 홈 진입 전 ProfileSelectPage에서 카메라 모달(GestureModal) 팝업
- 사용자가 손 모양을 보여주면 → 예측된 제스처로 매핑된 프로필 자동 선택
- 자동 진입 후 /home으로 리디렉션
- 추가로:
- 앱 새로 실행 시 로그인 유지 기능 구현
- 앱 시작 시 제스처 인식 자동 실행
- 설정 아이콘 + 드롭다운 메뉴 구현 (로그아웃, 프로필 수정)
✅ 6/19: 전체 디자인 리뉴얼 + 회원 인증 리팩터링
- 회원가입/로그인 UI 리디자인
- users 테이블 직접 생성 (기존 Django 기본 auth_user 사용 안 함)
- 사용자 참조 방식 변경: username → user_id
- 관련 로직 전체 점검 및 버그 수정
- 프로필 수정 기능 구현 + React UI 적용
✅ 6/20: 프로필 생성 흐름 최종 완성
- SelectContentPage까지 포함한 프로필 생성 단계 전체 프론트 코드 구현 완료
- 페이지 구성:
1. CreateProfilePage: 이름, 나이, 성별, 제스처 선택
2. SelectSubgenresPage: 선호 서브장르 선택
3. SelectContentPage: 콘텐츠 미리보기 선택
🚀 회고 및 인사이트
- MediaPipe를 React로 옮겨 처리하면서 UX와 보안 모두 향상
- 손 제스처를 UI 입력 수단으로 확장하면서 멀티 프로필 UX 차별화
- 전반적인 코드 흐름을 React + Flask → Django 전환 전 실험 구조로 정리