Webcam Face Detector

브라우저에서 얼굴을 감지해 사진을 촬영하는 데모 앱. 모든 처리는 클라이언트에서만 이루어지며 서버로 이미지가 전송되지 않는다.

왜 만들었나

얼굴 감지 기반 UX를 검토해보기 위한 학습용 데모다. 얼굴 검출과 인식률 표시를 서버 전송 없이 클라이언트에서만 처리하도록 구현해서, 개인정보 이슈를 애초에 발생시키지 않는 방식이 실제로 성립하는지 실험해봤다.

동작 방식

• react-webcam으로 카메라 스트림을 띄우고, face-api.js(TinyFaceDetector + FaceLandmark68Tiny)로 얼굴을 실시간 감지한다.
• 원형 프레임 위에 인식률(confidence)을 시계방향 진행률로 표시한다.
• 얼굴이 감지된 상태에서 촬영하면 스크린샷을 /result 페이지로 넘겨 다운로드/공유할 수 있다.

라우트

• / (src/components/CameraPage.tsx) - 카메라 화면, 얼굴 인식, 촬영
• /result (src/components/ResultPage.tsx) - 촬영 결과 확인, 다운로드, 공유

시작하기

yarn install
yarn dev

• yarn build - 타입체크 후 프로덕션 빌드
• yarn lint - eslint
• yarn preview - 빌드 결과 로컬 프리뷰

카메라 권한이 필요하므로 브라우저에서 허용해야 한다. public/models에 face-api.js 모델 파일이 포함되어 있어 별도 다운로드는 필요 없다.

스택

React 19, TypeScript, Vite, Tailwind CSS, react-router-dom, face-api.js, react-webcam