Keras 얼굴 마스크 분류기, 브라우저에서 TensorFlow.js로 구현하기

핵심 기술

이 글은 Keras로 개발된 얼굴 마스크 분류 모델을 TensorFlow.js를 사용하여 웹 브라우저에서 직접 실행하는 과정을 상세히 설명합니다. 백엔드 인프라 없이 클라이언트 측에서 ML 추론을 수행함으로써 프라이버시 강화, 비용 절감, 즉각적인 데모 제공 등의 이점을 얻습니다.

기술적 세부사항

• 모델 변환: Keras v3 포맷은 TensorFlow.js에서 직접 지원되지 않아, Keras v2 .h5 포맷으로 모델을 다시 저장 후 tensorflowjs_converter CLI를 사용하여 브라우저 호환 포맷(model.json 및 가중치 파일)으로 변환했습니다.
• 얼굴 탐지: 원본 YOLOv3 모델은 브라우저에서 무거워 TensorFlow.js에서 제공하는 경량화된 사전 학습된 얼굴 탐지 모델을 사용했습니다.
• 파이프라인: 웹캠 피드에서 얼굴을 탐지하고, 해당 얼굴 영역을 잘라내어 분류기 모델에 입력한 후, 예측 결과를 화면에 표시하는 실시간 클라이언트 측 파이프라인을 구축했습니다.
• 도구 제약: SageMaker Canvas 및 Rekognition Custom Labels의 모델은 TensorFlow.js 호환 포맷으로 직접 내보낼 수 없거나 모델 자체를 다운로드할 수 없어 클라이언트 측 실행 목표에 부합하지 않았습니다.
• 프론트엔드 구현: React로 초기 데모를 구축했으며, 이후 Solid.js, Tailwind CSS, daisyUI, auto-animate, solid-transition-group 등을 사용하여 성능과 사용자 경험을 개선했습니다.
• 인프라 구축: Terraform을 사용하여 S3 버킷, CloudFront 배포, IAM 역할 등의 인프라를 프로비저닝하고, GitHub Actions를 통해 CI/CD 파이프라인을 자동화하여 코드 푸시 시 자동으로 빌드 및 배포되도록 구성했습니다.
• 모바일 한계: 모델 크기가 커서 모바일 기기에서의 원활한 브라우저 실행에 어려움이 있었습니다.

개발 임팩트

• 비용 절감: 서버리스 추론으로 24/7 서버 운영 비용이 발생하지 않습니다.
• 프라이버시 강화: 웹캠 피드가 사용자 로컬 머신에 머물러 데이터 유출 위험을 줄입니다.
• 즉각적인 데모: 별도의 API 호출이나 인프라 설정 없이 누구나 바로 체험 가능한 라이브 데모를 제공합니다.
• 재현 가능한 배포: Terraform과 GitHub Actions를 통해 인프라 구축 및 배포 과정을 자동화하고 재현 가능하게 만들었습니다.

커뮤니티 반응

글 본문에는 직접적인 커뮤니티 반응에 대한 언급은 없으나, Keras 모델을 TensorFlow.js로 변환하는 과정에서 발생하는 어려움(Keras v2/v3 호환성, 모델 크기)에 대한 경험을 공유하며 동종 경험을 가진 개발자들의 공감을 얻을 것으로 예상됩니다.