InteractiveSegmenter
눌러서 물체 오려내기
해결하는 문제
사진에서 물체만 오려 내려면 그래픽 프로그램이 필요하다.
사진에서 오리고 싶은 물체를 한 번 누르면 AI가 테두리를 찾아 배경 없는 PNG로 오려 줍니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것사진과 누른 위치
브라우저가 하는 일누른 점을 기준으로 물체 영역 계산
나오는 것배경 없는 PNG
쓰는 브라우저 기술
Canvas 2DPointer Eventscanvas.toDataURL
라이브러리와 모델
MediaPipe Tasks (로컬 우선 로딩)magic_touch.tflite (약 6MB)
바꿀 수 있는 옵션
- 누른 점 (keypoint)
- 분류 마스크 출력
- 결과 반전 처리
자주 막히는 곳
- 배경과 색이 비슷한 물체는 경계가 섞인다
- 큰 사진은 줄여서 처리해야 빠르다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 제품 사진 자동 정리
웹 서비스
- 쇼핑몰 상품 이미지 도구
- 교육 자료 그림 만들기
피지컬 AI
- 분류 로봇용 물체 영역 표시
넓히는 방법
- 여러 점을 눌러 영역 다듬기
- 오린 물체를 다른 배경에 합성
- 상품 사진 일괄 누끼
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
MediaPipe InteractiveSegmenter로 사진에서 누른 물체만 오려 배경이 투명한 PNG로 저장하는 웹페이지를 만들어줘.
같은 분류의 능력
03 미디어 처리에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md