FaceStylizer
얼굴을 스케치로 바꾸기
해결하는 문제
얼굴 사진을 그림체로 바꾸려면 외부 앱에 사진을 올려야 한다.
얼굴 사진을 컬러 스케치 그림으로 바꿉니다. 사진은 기기 안에서만 처리됩니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것얼굴 사진
브라우저가 하는 일얼굴을 찾아 스타일 변환 모델 실행
나오는 것256px 스케치 이미지
쓰는 브라우저 기술
getUserMediaCanvas 2D
라이브러리와 모델
MediaPipe Tasks (로컬 우선 로딩)face_stylizer_color_sketch.task (약 30MB)
바꿀 수 있는 옵션
- 스타일 모델 교체 (색연필, 유화 등)
자주 막히는 곳
- 모델이 커서 처음 준비가 오래 걸린다
- 얼굴이 작거나 기울면 변환에 실패한다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 개인정보 보호형 프로필 그림
웹 서비스
- 행사 사진 부스
피지컬 AI
- 스케치를 펜 플로터로 그리기
넓히는 방법
- 수료 카드에 스케치 얼굴 넣기
- 여러 명 일괄 변환
지원 브라우저
PC 크롬·엣지된다
맥 사파리일부
안드로이드 크롬된다
아이폰 사파리일부
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
MediaPipe FaceStylizer로 카메라로 찍은 얼굴을 스케치 그림으로 바꾸고 PNG로 저장하는 웹페이지를 만들어줘.
같은 분류의 능력
03 미디어 처리에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md