
브라우저만으로 인물 아웃라인 구현하기: MODNet, MediaPipe, SlimSAM, 광학 흐름(Optical Flow)의 통합
요약
브라우저 기반 동영상 편집기 Timeline Studio에서 인물 아웃라인을 구현하기 위한 멀티 모델 통합 설계 방안을 소개합니다. YOLOS, MODNet, MediaPipe 등을 조합하여 연산 효율성과 시각적 품질을 동시에 확보하는 최적화 전략을 다룹니다.
핵심 포인트
- YOLOS tiny를 활용해 처리할 대상 인물을 고정하여 배경 혼입 방지
- MODNet으로 고품질 Alpha 마스크를 생성하되 ROI 중심 처리로 연산량 절감
- MediaPipe를 소프트 게이트로 활용해 마스크의 정확도와 안정성 향상
- WebGPU 및 WASM을 지원하여 브라우저 내 로컬 추론 성능 최적화
동영상 편집에서 '인물 아웃라인(Person Outline)'은 언뜻 보면 인물의 윤곽에 선을 긋기만 하는 기능처럼 보입니다.
하지만 실제 동영상에서는 다수의 인물, 소파나 쿠션과의 접촉, 머리카락, 손의 움직임, 모션 블러(Motion Blur), 프레임 간의 깜빡임(Flickering) 등 많은 문제들이 동시에 발생합니다. 또한, 브라우저 내에서 처리할 경우에는 추론 속도와 메모리 사용량도 중요합니다.
본고에서는 오픈 소스 브라우저 동영상 편집 소프트웨어인 Timeline Studio에서 현재 구현 중인 인물 아웃라인 기능을 예로 들어, YOLOS tiny, MODNet, MediaPipe, SlimSAM, OpenCV Farneback 광학 흐름(Optical Flow)을 조합한 설계를 소개합니다. 소재는 서버로 업로드하지 않으며, 해석부터 프리뷰까지 브라우저 내에서 완결됩니다.
- GitHub: https://github.com/MartinDelophy/ai-video-editor
- 온라인 데모: https://video-editor.ai-creator.top/
가장 단순한 구현은 동영상의 각 프레임에 MODNet을 실행하여 얻은 Alpha의 외곽선을 그리는 방법입니다. 프로토타입으로는 유효하지만, 실제 에디터에서는 다음과 같은 문제가 발생합니다.
- 25/30 FPS의 모든 프레임에서 모델 추론을 수행하면 처리가 무거움
- 각 프레임이 독립적으로 추론되기 때문에 머리카락이나 의복의 경계가 깜빡임
- 다수의 인물이나 배경의 가구가 인물 마스크에 혼입됨
- 색상이나 폭을 변경하는 것만으로도 설계에 따라 재해석이 필요함
따라서 처리를 '대상 인물의 고정', '키프레임의 고품질 매팅(Matting)', '고속의 주체 제약', '실패 시의 분할 복구', '프레임 간 전파'로 분리했습니다.
동영상 디코딩
↓
YOLOS tiny로 인물을 검출·고정
...
각 모델에는 역할을 하나씩 부여했습니다.
| 기술 | 역할 |
|---|---|
| YOLOS tiny | 어떤 인물을 처리할지 결정 |
| ... |
인물 매팅(Matting)은 '인물다운 픽셀'을 추출할 수 있지만, 여러 명이 있을 경우 어떤 인물을 이펙트 대상으로 할지는 별개의 문제입니다.
먼저 YOLOS tiny로 인물을 검출하고, 신뢰도, 검출 영역의 면적, 전신 포함 여부, 과거 프레임의 위치를 사용하여 주 대상을 고정합니다. 그 이후의 MODNet, MediaPipe, SlimSAM은 이 인물 ROI(Region of Interest)를 중심으로 처리합니다.
이 단계를 넣음으로써 배경의 인물이나 인물과 접해 있는 소파·쿠션이 마스크에 들어올 확률을 낮출 수 있습니다.
인물 아웃라인에서는 이진 마스크(Binary Mask)뿐만 아니라, 머리카락이나 의복의 경계에 있는 반투명 Alpha가 중요합니다. 윤곽이 완전한 0/1로만 구성되면 확대 시 계단 현상(Aliasing)이 눈에 띕니다.
Timeline Studio에서는 YOLOS의 인물 영역을 확장한 ROI에 대해 MODNet을 실행합니다. WebGPU를 사용할 수 있는 경우에는 WebGPU를, 사용할 수 없는 경우에는 WASM q8로 폴백(Fallback)합니다.
전체 프레임이 아닌 ROI를 중심으로 처리함으로써 계산량을 억제하면서 인물에 사용할 수 있는 해상도를 확보합니다.
MediaPipe의 인물 세그멘테이션(Segmentation)은 빠르지만, 복잡한 머리카락이나 의복의 Alpha 품질 면에서는 MODNet을 그대로 대체할 수 없는 경우가 있습니다.
따라서 MediaPipe는 주로 다음과 같은 목적으로 사용합니다.
- 인물 ROI의 고속 재확인
- MODNet이 잡아낸 소파나 배경 영역의 제거
- 다른 인물이 Alpha에 섞이는 것의 억제
MediaPipe의 마스크를 약간 팽창·블러(Blur) 처리하여 소프트 게이트(Soft Gate)를 만들고, MODNet Alpha와 곱합니다.
fusedAlpha[i] = Math.round(modnetAlpha[i] * mediaPipeGate[i] / 255);
게이트를 딱딱한 이진 마스크 상태로 사용하지 않는 이유는 머리카락이나 손가락이 잘려 나가지 않게 하기 위해서입니다. 또한, MediaPipe의 GPU 초기화에 실패한 경우에는 CPU로, 모듈 전체를 사용할 수 없는 경우에는 MODNet/SlimSAM 경로로 폴백합니다.
SlimSAM은 매 프레임 실행하지 않습니다. MODNet의 결과가 불완전하거나, 인물 영역이 검출 박스에서 크게 벗어나거나, 신뢰할 수 있는 연결 영역을 얻을 수 없는 경우에만 호출합니다.
SlimSAM에는 다음을 전달합니다.
- YOLOS가 검출한 대상 인물 박스
- 대상 인물 내부의 포지티브 포인트(Positive Point)
- 타인의 위치를 나타내는 네거티브 포인트(Negative Point)
- MODNet의 이탈 영역으로부터 생성한 네거티브 포인트
현재 모델은 리비전을 고정한 Xenova/slimsam-77-uniform입니다. WebGPU 환경에서는 FP16을, 그 외 환경에서는 WASM q8을 이용합니다.
SlimSAM의 마스크를 그대로 채택할 뿐만 아니라, 필요에 따라 MODNet Alpha의 소프트 게이트(Soft Gate)로 사용함으로써 주체의 정확성과 반투명 경계(Semi-transparent boundary)를 모두 유지합니다.
모든 프레임에서 무거운 모델을 재실행하지 않고, OpenCV.js의 Farneback dense optical flow를 사용하여 이전 프레임의 Alpha를 현재 프레임으로 전파(Propagation)합니다.
광학 흐름(Optical Flow)은 짧은 구간의 추적에 한정하며, 결과를 무조건적으로 채택하지는 않습니다. 다음 지표들을 모니터링합니다.
- 마스크 면적이 급격히 확대 또는 축소되지 않는가
- 인물의 위치가 이력(History)에서 크게 벗어나지 않는가
- 평균 운동량(Average momentum)이 이상하지 않은가
- ROI(관심 영역)가 전체 화면으로 퇴화하지 않았는가
- 대상 인물이 소실되지 않았는가
이상 징후가 감지되면 전파를 중단하고, 예정보다 일찍 새로운 모델 앵커(Model Anchor)를 생성합니다. 이를 통해 한 번의 추적 실패가 후속 프레임 전체로 확산되는 것을 방지합니다.
에디터의 인물 효과에서는 현재 대략 다음과 같은 설정을 사용하고 있습니다.
const result = await analyzePersonOutlineVideo({
src: videoSource,
duration,
...
- 약 8 FPS로 효과용 샘플 생성
- 일반 앵커는 약 3.5초 간격
- 분석 이미지의 긴 변은 약 360 px
- 1회 처리 시 최대 360개 샘플
- 품질 저하 시 앵커 생성 시점을 앞당김
30 FPS 영상이라 하더라도 30회 모두에 풀 모델 추론(Full model inference)을 실행할 필요는 없습니다. 편집 프리뷰와 내보내기(Export) 시에는 소스 시점에 대응하는 분석 샘플을 찾아 해결합니다.
영상 처리에서는 모델뿐만 아니라 seek, 디코딩, Canvas의 pixel read, Worker 간 복사, 투명 이미지 인코딩도 병목(Bottleneck)이 됩니다.
현재는 다음과 같은 최적화를 적용하고 있습니다.
- WebCodecs를 통한 순차 디코딩 우선
- 지원하지 않는 코덱의 경우 정밀 seek(Precise seek)로 폴백(Fallback)
- YOLOS/MODNet, MediaPipe, 광학 흐름 Worker를 병렬 웜업(Warm-up)
- RGBA와 Alpha를 Transferable ArrayBuffer로 전송
- 초기화된 모델과 Worker를 페이지 내에서 재사용
- 분석 완료를 기다리지 않고, 1 프레임마다 결과를 UI에 반영
따라서 사용자는 진행률뿐만 아니라, 처리된 프레임의 인물 누끼(Segmentation)와 아웃라인을 순차적으로 확인할 수 있습니다. 처리는 취소 가능합니다.
기본적인 윤곽은 다음 식을 통해 만들 수 있습니다.
Outline = Dilate(Alpha) - Alpha
Timeline Studio에서는 SVG Filter를 조합하여 현재 6종류의 질감을 준비해 두었습니다.
- 구겨진 종이
- 강한 프로스트(Frost)
- 라이트 헤일로(Light Halo)
- 리퀴드 크롬(Liquid Chrome)
- 두껍게 칠한 물감
- 잉크 번짐
필터 체인(Filter chain)은 feMorphology, feComposite, feTurbulence, feDisplacementMap, 텍스처 이미지, feBlend, feDropShadow, feGaussianBlur 등으로 구성됩니다.
인물 Alpha는 분석 결과로서 캐시되므로, 색상, 두께, 입도(Granularity), 확산, 요철, 링 개수, 글로우(Glow) 반경을 변경하더라도 AI 추론을 다시 수행할 필요가 없습니다.
최초 이용 시의 모델 다운로드 또한 실운용상의 중요한 과제입니다. Timeline Studio에서는 Hugging Face와 ModelScope의 미러(Mirror)를 준비하여, 중국어 및 중국 국내 환경에서는 ModelScope를 우선할 수 있는 구성으로 만들었습니다. 연결 실패 시에는 다른 경로로 전환하며, 동일 모델은 같은 캐시 ID로 취급합니다.
- ModelScope: https://www.modelscope.cn/models/martindelophy/timeline-studio-onnx-models
- Hugging Face: https://huggingface.co/haixin/timeline-studio-onnx-models
모델은 최초 이용 시에 가져오며, 그 이후에는 브라우저 캐시를 재사용합니다.
Timeline Studio는 MIT License로 공개되어 있습니다.
git clone https://github.com/MartinDelophy/ai-video-editor.git
cd ai-video-editor
npm install
...
Node.js 20+ 및 최신 Chromium 계열 브라우저를 권장합니다. WebGPU를 사용할 수 있는 단말기에서는 MODNet과 SlimSAM의 추론 (Inference) 속도를 높일 수 있습니다.
프로덕션 빌드 (Production Build)는 다음과 같습니다.
npm run build
npm run preview
이 구성에서도 다음과 같은 케이스는 지속적인 개선이 필요합니다.
- 여러 인물이 완전히 교차하는 장면
- 대상 인물이 화면 밖으로 나갔다가 다시 돌아오는 장면
- 빠른 컷 전환
- 강한 모션 블러 (Motion Blur)
- 머리카락과 배경의 대비 (Contrast)가 낮은 장면
- 손에 든 물체와 신체가 복잡하게 겹치는 장면
- 모바일 단말기에서의 장시간 영상
향후에는 샷 경계 검출 (Shot Boundary Detection), 인물 ID의 지속적 추적 (Tracking), 수동 대상 인물 선택, 더욱 다양한 검증 영상, 물체 아웃라인 (Object Outline)으로 확장할 예정입니다. 인물 아웃라인 기능은 현재도 개발 중이므로, 최신 상황은 GitHub의 README, Releases, Roadmap을 참조해 주세요.
- GitHub: https://github.com/MartinDelophy/ai-video-editor
- 온라인 데모: https://video-editor.ai-creator.top/
- ModelScope: https://www.modelscope.cn/models/martindelophy/timeline-studio-onnx-models
브라우저 AI, WebGPU, ONNX Runtime Web, 비디오 매팅 (Video Matting), 광학 흐름 (Optical Flow), 로컬 퍼스트 (Local-first) 비디오 편집에 관심이 있다면, 꼭 리포지토리에 Star를 누르거나 Issue를 통해 피드백을 남겨주세요.
AI 자동 생성 콘텐츠
본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기