faceBlendshapes
표정으로 조종하기
해결하는 문제
손을 쓰기 어려운 사람도 얼굴 표정으로 화면을 조작하게 하고 싶다.
얼굴 점 478개와 표정 수치 52가지를 읽어, 입을 벌리면 점프하는 게임, 표정 계기판, 얼굴에 씌우는 소방 헬멧을 만듭니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것카메라 영상
브라우저가 하는 일얼굴 그물망과 표정 수치(눈 감기, 입 벌림 등) 계산
나오는 것표정 기반 명령, 얼굴 위 장식
쓰는 브라우저 기술
getUserMediaCanvas 2D
라이브러리와 모델
MediaPipe Tasks (로컬 우선 로딩)face_landmarker.task (약 4MB)
바꿀 수 있는 옵션
- outputFaceBlendshapes: 표정 수치 받기
- numFaces
- 표정별 기준값
자주 막히는 곳
- 안경 반사나 옆모습에서는 눈 수치가 부정확하다
- 사람마다 표정 크기가 달라 기준값 조정이 필요하다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 집중도·피로도 측정
- 표정 연습 코치
웹 서비스
- 접근성 입력 도구
- 행사용 얼굴 필터
피지컬 AI
- 졸음 감지 시 진동 알림 장치
- 표정으로 로봇 표정 따라 하기
넓히는 방법
- 눈 깜빡임 클릭 (접근성)
- 졸음 감지
- 얼굴 필터 사진 부스
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
MediaPipe FaceLandmarker의 표정 수치로 입을 벌리면 캐릭터가 점프해 장애물을 넘는 게임을 만들어줘.
같은 분류의 능력
04 브라우저 속 AI에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md