Wed Oct 1 9:30 PM(ing : 0s)
Face Health Monitor
프로젝트 개요성별과 나이 입력만으로 rPPG 기반 건강 데이터를 제공하는 모바일 전용 웹앱으로, 간편한 사용성과 모바일 최적화된 UI/UX를 갖춘 헬스케어 서비스
프로젝트 과정1인 단독 프로젝트로 진행하였으며, 기획, 설계, 개발, 테스트, 배포까지 전체 과정을 직접 수행
기술 스택Vite 기반 환경에서 Mediapipe를 활용한 얼굴 인식 기능, Lottie 애니메이션 구현, 암호화 처리 기능을 포함하고, 코드 품질 관리를 위해 ESLint와 Prettier를 적용한 경량 모바일 전용 웹앱 프로젝트
담당 업무

- 프로젝트의 초기 환경 설정부터 전체 개발 과정을 단독 수행

- 주요 기능 구현 및 UI 개발 전반 담당

- ESLint 및 Prettier를 적용하여 코드 품질과 일관성 관리

트러블 슈팅
모바일 로컬 테스트 시 카메라 접근 문제문제

모바일 기기에서 로컬 개발 서버(localhost)로 접속하여 테스트할 때, 브라우저 보안 정책(CORS, HTTPS 요구 등)으로 인해 카메라 접근이 차단되어 기능 테스트가 불가능했음.

특히 WebRTC(MediaDevices API)에서는 HTTPS 연결이 아니거나 localhost가 아닐 경우, 모바일 브라우저가 카메라 접근을 차단하는 문제가 발생함.

원인 분석

모바일 환경에서는 보안을 위해 HTTPS가 아니면 WebRTC 기반 카메라 접근이 차단됨.

기존 로컬 개발 서버(localhost)는 모바일 브라우저에서 신뢰할 수 없는 연결로 간주되어 MediaDevices API 사용이 불가능했음.

문제 해결 및 성과

로컬 개발 환경에서도 HTTPS처럼 접근할 수 있도록 서버 URL 설정 방식을 수정

→ Vite의 define 옵션을 활용해 API 서버 URL을 동적으로 정의

process.env.VITE_SERVER_URL이 설정된 경우 해당 서버를 사용하고, 설정되지 않은 경우 기본 HTTPS 기반 API URL을 사용하도록 처리

→ 모바일에서도 안전하게 API 및 카메라 접근 가능

로컬 서버를 모바일에서 테스트할 때도 카메라 접근 차단 없이 정상적인 기능 테스트 가능

→ HTTPS 환경이 필수인 기능(rPPG 신호 추출 등)도 안정적으로 개발 및 디버깅 가능해짐