ImageSegmenter
가상 배경 만들기
해결하는 문제
화상 회의 프로그램 없이도 배경을 가리거나 바꾸고 싶다.
카메라 영상에서 사람만 픽셀 단위로 오려 배경을 흐리게 하거나 단색·사진·훈련장 그림으로 바꿉니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것카메라 영상
브라우저가 하는 일픽셀마다 사람일 확률(마스크) 계산
나오는 것배경을 바꾼 화면
쓰는 브라우저 기술
getUserMediaCanvas compositing
라이브러리와 모델
MediaPipe Tasks (로컬 우선 로딩)selfie_segmenter.tflite (약 0.25MB)
바꿀 수 있는 옵션
- 확신도 마스크 또는 분류 마스크
- 배경 종류
- 가장자리 부드럽게
자주 막히는 곳
- 사람이 들고 있는 물건은 배경으로 처리될 수 있다
- 움직임이 빠르면 가장자리가 번진다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 배경 지운 인물 사진 자동 제작
웹 서비스
- 설치 없는 가상 배경 녹화 도구
피지컬 AI
- 키오스크 크로마키 사진 부스
넓히는 방법
- MediaRecorder로 배경 바꾼 영상 녹화
- 머리카락·옷 분리 모델로 교체
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
MediaPipe ImageSegmenter의 selfie 모델로 카메라 속 사람만 남기고 배경을 흐리게 하거나 내가 고른 사진으로 바꾸는 웹페이지를 만들어줘.
같은 분류의 능력
03 미디어 처리에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md