플레이그라운드

해 본 것

• navigator.mediaDevices.getUserMedia()로 전면 카메라를 받아 4:3으로 잘라 거울처럼 좌우 반전해 캔버스에 그림
• MediaPipe Tasks Vision(@mediapipe/tasks-vision@1.1.0, CDN)
  • Selfie Segmenter: 사람 영역 확률 마스크로 배경 바꾸기 (흐림 · 파스텔 · 스튜디오)
  • Face Landmarker: 얼굴 랜드마크(478점)로 스티커 붙이기 (고양이 귀·수염 · 동그란 안경 · 볼터치 · 빠직 💢), 최대 4명
  • 모델은 그 효과를 처음 고를 때만 내려받음. GPU가 안 되면 CPU로 다시 만듦
• 타이머(없음/3초/5초)로 촬영 → 찍을 때마다 오른쪽 네컷 판(세로 1×4 또는 2×2, 프레임 4색)의 빈 칸에 바로 들어감 → PNG 저장 · 공유(Web Share, 지원 기기만). 타이머 없음은 누를 때마다 한 컷, 촬영 중에는 배치·프레임·타이머·처리 잠금(배경·스티커·피사체는 변경 가능)
• 피사체 두기: 사진을 올리면 MediaPipe 분할(IMAGE 모드)로 사람만 오려 화면에 세움. 끌어서 이동(Pointer Events), 크기, 내 앞/뒤, 좌우 뒤집기, 삭제
• 카메라 끄기/켜기 (MediaStreamTrack.stop으로 장치를 실제로 끔, 찍던 컷은 유지)
• PWA: manifest.webmanifest + 서비스 워커. 앱 화면은 설치 때, MediaPipe 라이브러리·모델은 처음 받을 때 캐시해서 이후 오프라인에서도 동작
• 사진은 기기 밖으로 나가지 않음 (서버 없음)
• 처리 장치 선택(자동 / CPU만)과 모델별 처리 시간(ms) 표시: 폰 CPU 기준 성능을 재 보려고 추가

잘 된 것

• 두 모델 모두 GPU로 올라가고, 첫 로딩(라이브러리 + 모델 다운로드)은 약 7~8초
• 효과를 켜도 화면이 끊기지 않음. 측정값은 아래 조건의 참고치: 헤드리스 Chrome + 소프트웨어 GPU(SwiftShader) + 가짜 카메라(사진 1장, 640×480)에서 효과 없음 60fps, 배경 + 스티커 동시 14~18fps. 실제 노트북·폰 GPU에서는 [아직 재지 않음]
• 단체 사진(아이 4명)에서 얼굴 3명에 스티커가 정확히 따라붙음, 안경 위치가 눈에 잘 맞음
• 네 컷 합성본: 2×2는 1350×1122, 세로 1×4는 696×2110 PNG (둘 다 실제로 찍어 확인)
• 같은 헤드리스 환경에서 자동(GPU) 배경 20ms·얼굴 69ms, CPU만 배경 16ms·얼굴 63ms (얼굴 3명). 이 환경의 GPU는 소프트웨어 흉내라 비교 의미 없음 → 실제 기기에서 다시 재야 함

안 된 것 · 막힌 점

• 처음 쓴 @mediapipe/tasks-vision@0.10.22 주소가 CDN에서 404 → 최신 1.1.0으로 바꿈 (API는 같음: FilesetResolver, segmentForVideo, detectForVideo)
• 모델 불러오기 실패 문구가 1초마다 갱신되는 fps 표시에 덮여 안 보임 → 실패 문구를 따로 보관해 계속 표시
• 고양이 귀가 눈 위에 거꾸로 그려짐: 화면을 거울로 뒤집으면 랜드마크의 왼눈·오른눈이 화면에서 좌우가 바뀌어 얼굴 기울기 각도가 180° 틀어짐 → 화면 x 좌표로 왼쪽·오른쪽 눈을 다시 정함
• 고개를 숙인 작은 얼굴(맨 앞 아이)은 얼굴 랜드마크가 못 찾음
• 배경 분할 경계가 머리카락·옷 가장자리에서 거칠고, 뒤쪽 사람 일부가 남음
• 시험은 가짜 카메라로만 함: Chrome 가짜 카메라는 JPEG를 못 읽어 검은 화면 → 사진을 Y4M 영상으로 바꿔 넣음
• 폰에서 열려면 HTTPS가 필요 (getUserMedia는 localhost 아니면 HTTPS에서만 동작)
• hidden 속성이 버튼 CSS(display)에 덮여 "공유"·"앱 설치"가 늘 보이던 버그 → [hidden]{display:none!important}로 해결

다음에 해 볼 것

• 실제 웹캠·폰에서 fps 재기, 폰 설치 (HTTPS 배포: 허브 웹 사이트에 포함, 전용 주소 ai-4cut-mnmms.vercel.app)
• 분할 마스크 경계 부드럽게 (마스크 블러, 이전 프레임과 섞기)
• 스티커를 그림 파일(PNG)로 바꾸고 고르기, 컷마다 다른 포즈 안내
• 데모 그림은 수업 실습 자료 사진(family.jpg, 출처 미확인)으로 만든 것 → 공개 전에 직접 찍은 사진으로 교체