Flutter ML Kit FaceMesh 실시간 얼굴 인식 예제

실행 가능한 예제는 최고의 문서다.

 

실행 가능한 예제는 최고의 문서라고 생각하며, 이번 포스팅도 예제 레포지토리를 제공한다.

 

ML Kit 이란?

https://developers.google.com/ml-kit/guides

ML Kit is a mobile SDK that brings Google's on-device machine learning expertise to Android and iOS apps

ML Kit은 Google이 제공하는 사전 학습된 AI 모델을, 앱 개발 환경(on-device)에서 바로 활용할 수 있도록 추상화한 SDK다.

 

Face detection의 경우 두 가지 모델이 있다. 자세한 차이에 대해서는 문서를 한 번 읽어보길 권장한다.

참고) face mesh detection의 경우 Android만 지원한다.

ML Kit vs MediaPipe 비교

Google에 ML Kit과 MediaPipe가 있는데,

앱 이외의 다른 플랫폼까지 고려하거나, ML 백엔드 개발까지 포함한다면 MediaPipe를

앱에서 서비스를 구현하는 것이 주목적이고, 제공된 모델을 그대로 활용한다면 ML Kit이 더 간단하다.

Face Mesh 모델 비교

MediaPipe face mesh 기본 모델(홍채 제외)은 468개의 랜드마크 포인트를 가진다.

ML Kit face mesh도 468개의 랜드마크 포인트를 가진다.

ML Kit, MediaPipe 둘 다 Google 팀이고, 동일한 face mesh 모델을 사용하는 것으로 보인다.(결과도 유사하다.)

 

 

Flutter MLKit FaceMesh 실시간 얼굴 인식

이번 예제에서는 ML Kit Face mesh detection을 플러터에서 활용한다.

https://pub.dev/packages/google_mlkit_face_mesh_detection

안드로이드 네이티브에서 ML Kit을 사용하는 코드를 패키징한 Flutter 플러그인이므로, ML Kit과 마찬가지로 Android만 지원한다.

 

예제 Repository

https://github.com/cornpip/flutter_mlkit_facemesh_example

GitHub - cornpip/flutter_mlkit_facemesh_example

https://github.com/cornpip/flutter_mlkit_facemesh_example/releases

release에서 apk도 다운로드 할 수 있다.

 

Usage

image_1

 

1. 촬영 버튼을 누르면 카메라가 켜지고 face mesh detection이 동작하며 실시간 결과를 볼 수 있다.
2. Face mesh landmark 텍스트 필드 박스에 랜드마크 번호를 입력하면, 해당 랜드마크 간에 선분을 잇는다.

Face mesh 기능이 필요하다면 얼굴 일부를 활용하는 서비스 일 것이고, 랜드마크 번호로 원하는 위치를 얻을 수 있다.

다만, face mesh 랜드마크 이미지에서 원하는 번호나 위치를 찾으려면 번호가 순차적이지도 않고, z축 방향으로 겹치는 부분도 많아 찾기가 어렵다.

 

이럴 땐 저번에 만든 face landmark 3d viewer 사이트를 활용할 수 있다.

MediaPipe Face Landmark 3D Viewer Link

 

2025.08.28 - [Side Project] - MediaPipe Face Landmark 3D Viewer

MediaPipe Face Landmark 3D Viewer

 

예를 들어 image_1 처럼 코 영역이 필요하다면?

1. 코를 감싸는 파란색 구체 하나를 클릭한다. 좌측 패널에 클릭한 랜드마크 숫자가 보인다.
2. 확인한 숫자를 텍스트 필드에 입력한다.
3. 1,2번을 반복하며 빨간색 구체가 원하는 폴리곤을 형성하는지 확인한다.

 

 

---

개발 관련 사항들

 

좌표 및 타입 변환

coordinate 변환은 아래 예제에서 coordinates_translator.dart를 참고했다.

https://github.com/flutter-ml/google_ml_kit_flutter/tree/master/packages/example

google_ml_kit_flutter/packages/example at master · flutter-ml/google_ml_kit_flutter

 

CameraImage -> InputImage 변환은 아래 가이드를 참고했다.

https://github.com/flutter-ml/google_ml_kit_flutter/tree/master/packages/google_mlkit_commons#creating-an-inputimage

google_ml_kit_flutter/packages/google_mlkit_commons at master · flutter-ml/google_ml_kit_flutter

bytes -> InputImage

bitmap -> InputImage

file -> InputImage

기억이 흐릿한데... 다 잘 안됐다. 변환돼도 그 InputImage 로 추론한 결과가 이상했다.

 

 

---

관련 포스팅

2025.04.22 - [Android] - 안드로이드 실시간 얼굴 인식과 바운딩 박스 그리기(CameraX, ML Kit)