인물 외곽선 (Portrait outline) 효과는 단순해 보입니다. 사람을 찾아 그 주변에 선을 그리면 됩니다. 하지만 실제 비디오에서는 대상의 정체성 (Subject identity), 정교한 매팅 (Fine matting), 시간적 안정성 (Temporal stability), 폐쇄 (Occlusion), 모델 지연 시간 (Model latency), 그리고 메모리 압박 (Memory pressure) 문제로 빠르게 확장됩니다.

이 글에서는 브라우저에서 직접 실행되는 오픈 소스 로컬 우선 (Local-first) 비디오 편집기인 Timeline Studio를 위해 현재 개발 중인 인물 외곽선 파이프라인을 살펴봅니다. 구현에는 YOLOS tiny, MODNet, MediaPipe, SlimSAM, 그리고 OpenCV Farneback 광학 흐름 (Optical flow)이 결합되었습니다. 소스 푸티지 (Source footage)는 분석 및 미리보기 동안 사용자의 장치에 그대로 유지됩니다.

• GitHub: https://github.com/MartinDelophy/ai-video-editor
• Live editor: https://video-editor.ai-creator.top/

왜 모든 프레임에서 MODNet을 실행하지 않을까요?

첫 번째 프로토타입은 간단했습니다. 샘플링된 모든 프레임에서 인물 매팅 (Portrait matting)을 실행하고, 알파 경계 (Alpha boundary)를 추출한 다음, 외곽선을 렌더링하는 방식이었습니다. 정지 영상에서는 작동했지만, 편집기 수준의 구현에서는 네 가지 문제가 드러났습니다.

1. 25 또는 30 FPS에서 전체 추론 (Full inference)을 수행하는 것은 브라우저에서 비용이 많이 듭니다.
2. 독립적인 예측은 머리카락과 옷의 가장자리를 깜빡이게 (Flicker) 만듭니다.
3. 근처의 사람, 소파, 쿠션 등이 인물 마스크 (Portrait mask)로 새어 들어올 수 있습니다.
4. 스타일 변경 시 AI 파이프라인을 다시 실행할 필요가 없어야 합니다.

해결책은 작업을 대상 고정 (Subject locking), 고품질 앵커 매팅 (High-quality anchor matting), 빠른 대상 게이팅 (Fast subject gating), 보호된 세그멘테이션 복구 (Guarded segmentation recovery), 그리고 시간적 전파 (Temporal propagation)로 나누는 것이었습니다.

파이프라인 개요

비디오 디코딩 (Video decoding)
  ↓
YOLOS tiny가 한 명의 사람을 감지하고 고정
...

각 구성 요소는 하나의 주요 책임을 가집니다:

1. YOLOS tiny로 대상 인물 고정

인물 매팅 (Portrait matting)은 어떤 픽셀이 사람처럼 보이는지는 알려주지만, 붐비는 장면에서 사용자가 어떤 사람을 원하는지는 반드시 알려주지 않습니다.

파이프라인은 YOLOS tiny로 시작하여 신뢰도(confidence), 박스 영역(box area), 신체 완성도(body completeness), 그리고 이전 추적 위치(previous tracked location)를 사용하여 사람 탐지 결과의 순위를 매깁니다. 주요 인물이 선택되면, 후속 단계인 MODNet, MediaPipe, SlimSAM 단계가 해당 인물의 ROI(관심 영역)를 중심으로 작동합니다.

이러한 '정체성 우선(identity-first)' 단계는 주요 인물이 소파에 닿아 있거나, 다른 사람 옆에 앉아 있거나, 배경의 사람들로 둘러싸여 있을 때 매우 중요합니다.

2. MODNet을 알파 품질(alpha-quality) 베이스라인으로 사용하기

세련된 외곽선을 만들기 위해서는 일반적으로 이진 세그멘테이션 마스크(binary segmentation mask)만으로는 충분하지 않습니다. 머리카락, 의류, 그리고 모션 블러(motion-blurred)가 발생한 경계선에는 부분적으로 투명한 픽셀들이 포함되어 있습니다. 만약 이 값들을 0과 1로만 압축해 버리면, 렌더링된 외곽선이 거칠고 불안정해집니다.

Timeline Studio는 전체 소스 프레임 대신 확장된 인물 ROI에서 MODNet을 실행합니다. WebGPU를 지원하는 브라우저에서는 워커(worker)가 WebGPU 경로를 사용하며, 그렇지 않은 경우 양자화된 WASM(quantized WASM)으로 폴백(fallback)합니다.

ROI를 처리하면 대상 인물 주변의 유용한 해상도를 더 많이 보존하면서도 작업량을 줄일 수 있습니다.

3. MediaPipe를 빠른 소프트 게이트(soft gate)로 사용하기

MediaPipe 인물 세그멘테이션(person segmentation)은 빠르고 모바일 친화적이지만, 모든 미세한 경계 케이스(fine-edge case)에서 MODNet을 대체할 수는 없습니다. 대신, 파이프라인은 이를 빠른 피사체 제약 조건(subject constraint)으로 사용합니다:

• 비용이 많이 드는 앵커(anchors) 사이에서 대략적인 인물 영역을 갱신합니다.
• MODNet 알파(alpha)에서 소파나 배경의 유출(spill)을 제거합니다.
• 근처 인물들로부터 발생하는 오염(contamination)을 줄입니다.

MediaPipe 신뢰도 마스크(confidence mask)는 MODNet에 적용되기 전에 약간 확장(dilated)되고 블러(blurred) 처리됩니다:

fusedAlpha[i] = Math.round(modnetAlpha[i] * mediaPipeGate[i] / 255);

소프트 게이트(soft gate)를 사용하는 것은 의도적인 설계입니다. 하드 이진 교집합(hard binary intersection)을 사용하면 머리카락 가닥, 손가락, 그리고 반투명한 의류 경계선이 쉽게 제거될 수 있기 때문입니다. MediaPipe는 또한 GPU-to-CPU 폴백을 지원하며, MediaPipe를 사용할 수 없는 경우에도 파이프라인의 나머지 부분은 계속 실행됩니다.

4. SlimSAM을 보호된 폴백(guarded fallback)으로만 실행하기

SlimSAM은 모든 프레임의 일부가 아닙니다. 이는 앵커(anchor)가 품질 검증에 실패했을 때만 호출됩니다. 예를 들어, MODNet이 불완전한 인물을 생성하거나, 연결된 구성 요소(connected component)가 더 이상 탐지기 박스(detector box)와 일치하지 않거나, 마스크에 넓은 유출 영역(spill region)이 포함된 경우 등이 해당됩니다.

SlimSAM 요청에는 다음이 포함됩니다:

• YOLOS 인물 박스 (person box),
• 선택된 인물 내부의 양성 포인트 (positive point),
• 다른 탐지된 인물로부터 유도된 음성 포인트 (negative points),
• 의심스러운 MODNet 유출(spill)로부터 유도된 음성 포인트 (negative points).

현재 워커(worker)는 Xenova/slimsam-77-uniform을 고정된 리비전(revision)으로 고정합니다. WebGPU를 사용할 때는 FP16을 사용하며, WebGPU를 사용할 수 없을 때는 양자화된 WASM을 사용합니다.

프레임에 따라 SlimSAM 마스크는 선택된 피사체로 사용되거나 MODNet 위의 소프트 게이트(soft gate)로 사용될 수 있습니다. 이를 통해 SAM의 프롬프트 유도 피사체 분리(prompt-guided subject separation)의 이점을 누리면서도 MODNet의 부드러운 알파 가장자리(alpha edges)를 보존할 수 있습니다.

5. Farneback 광학 흐름(optical flow)으로 프레임 연결하기

모든 샘플링된 프레임에 무거운 모델을 실행하는 대신, OpenCV.js 워커가 Farneback 밀집 광학 흐름(dense optical flow)을 계산하고 이전 알파(alpha)를 현재 프레임으로 워핑(warp)합니다.

광학 흐름은 짧은 시간 창(temporal windows)으로 제한됩니다. 전파된 마스크를 맹목적으로 신뢰해서는 안 됩니다. 파이프라인은 다음 사항을 모니터링합니다:

• 갑작스러운 마스크 영역의 확장 또는 축소,
• 추적 이력(tracking history) 대비 큰 위치 변화,
• 비정상적인 평균 운동(mean motion),
• 전체 프레임으로의 ROI 폴백(fallback),
• 선택된 인물의 상실.

검사 실패 시, 전파된 알파는 거부되며 새로운 모델 앵커가 조기에 예약됩니다. 이는 하나의 추적 오류가 클립의 나머지 부분을 오염시키는 것을 방지합니다.

현재 분석 프로필 (Current analysis profile)

에디터는 현재 다음과 유사한 프로필로 인물 외곽선 파이프라인을 호출합니다:

const analysis = await analyzePersonOutlineVideo({
  src: videoSource,
  duration,
...

이는 다음을 의미합니다:

• 효과 샘플은 약 8 FPS로 생성됩니다.
• 일반적인 모델 앵커(anchor)는 약 3.5초 간격으로 배치됩니다.
• 분석 프레임의 긴 쪽은 360픽셀 근처로 제한됩니다.
• 한 번의 실행으로 최대 360개의 샘플이 생성됩니다.
• 트래킹(tracking) 성능이 저하되면 더 이른 시점에 앵커가 트리거될 수 있습니다.

편집기 미리보기(preview)를 위해 30 FPS 소스라고 해서 초당 30번의 전체 모델 실행이 필요한 것은 아닙니다. 미리보기와 내보내기(export) 과정에서는 현재 소스의 타임스탬프에 해당하는 캐시된 분석 샘플을 찾아 사용합니다.

추론(inference) 이상의 최적화

모델 추론(inference)은 브라우저 비디오 처리의 일부일 뿐입니다. 탐색(seeking), 디코딩(decoding), 캔버스 읽기(canvas reads), 워커 복사(worker copies), 투명 이미지 인코딩(transparent-image encoding) 모두 병목 현상(bottleneck)이 될 수 있습니다.

현재 구현에는 다음과 같은 여러 엔지니어링 최적화가 포함되어 있습니다:

• 순차적인 WebCodecs 디코딩을 우선적으로 사용합니다.
• 지원되지 않는 코덱의 경우 정밀한 비디오 탐색(video seeking)으로 대체합니다.
• YOLOS/MODNet, MediaPipe, 그리고 광학 흐름(optical-flow) 워커를 병렬로 예열(warm)합니다.
• 전송 가능한 ArrayBuffer 객체를 사용하여 RGBA 및 알파 버퍼를 전달합니다.
• 재사용을 위해 초기화된 모델과 워커를 활성 상태로 유지합니다.
• 비디오 전체가 완료될 때까지 기다리는 대신, 완료된 각 샘플을 UI에 즉시 반영합니다.

마지막 항목은 제품 경험 측면에서 중요합니다. 사용자는 현재의 컷아웃(cutout), 외곽선(outline), 타임라인 위치, 처리된 프레임 수, 그리고 트래킹 상태가 함께 진행되는 것을 볼 수 있습니다. 또한 숨겨진 작업이 계속 실행되는 상태로 남지 않고 분석을 취소할 수 있습니다.

알파(alpha)를 재질 인식 외곽선으로 변환하기

가장 단순한 외부 경계선은 다음과 같습니다:

Outline = Dilate(Alpha) - Alpha

Timeline Studio는 feMorphology, feComposite, feTurbulence, feDisplacementMap, 텍스처 이미지, feBlend, feDropShadow, feGaussianBlur를 사용하는 SVG 필터 파이프라인을 통해 이 링(ring) 구조를 확장합니다.

현재의 재질 프리셋(material presets)은 의도적으로 서로 다르게 구성되어 있습니다:

• 구겨진 종이 (crumpled paper)
• 두꺼운 서리 (heavy frost)
• 층이 진 빛의 후광 (layered light halo)
• 액체 크롬 (liquid chrome)
• 임파스토 페인트 (impasto paint)
• 잉크 번짐 (ink bleed)

사용자는 외곽선 색상(outline color), 너비(width), 불투명도(opacity), 입자(grain), 질감 스케일(texture scale), 불규칙성(irregularity), 릴리프(relief), 확산(diffusion), 링 개수(ring count), 링 간격(ring spacing), 그리고 글로우 반경(glow radius)을 조정할 수 있습니다.

중요한 아키텍처 세부 사항은 인물 알파(person alpha)가 시각적 스타일(visual style)과 별도로 캐싱(cached)된다는 점입니다. 종이 질감의 외곽선을 크롬(chrome) 스타일로 변경하더라도 YOLOS, MODNet 또는 광학 흐름(optical flow)을 다시 실행하지 않습니다.

브라우저 AI 모델을 안정적으로 제공하기

첫 번째 모델 다운로드는 로컬 브라우저 AI의 또 다른 실질적인 과제입니다. Timeline Studio는 Hugging Face와 ModelScope 양쪽에 모델 아티팩트(model artifacts)를 미러링(mirroring)합니다. 중국 및 국내 세션은 ModelScope를 우선적으로 사용할 수 있으며 Hugging Face를 폴백(fallback)으로 사용하며, 동일한 파일은 같은 캐시 ID(cache identity)를 공유합니다.

• ModelScope: https://www.modelscope.cn/models/martindelophy/timeline-studio-onnx-models
• Hugging Face: https://huggingface.co/haixin/timeline-studio-onnx-models

모델은 처음 사용할 때 다운로드되며, 이후에는 브라우저 저장소에서 재사용됩니다.

프로젝트 로컬 실행하기

Timeline Studio는 MIT 라이선스(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 경로의 성능을 향상시킵니다.

프로덕션 빌드(production build)를 위해서는:

npm run build
npm run preview

현재의 한계 및 향후 단계

하이브리드 파이프라인(hybrid pipeline)은 속도와 시간적 일관성(temporal consistency)을 개선하지만, 여전히 어려운 사례들이 남아 있습니다:

• 사람들이 서로의 앞을 완전히 가로질러 지나가는 경우
• 대상이 프레임 밖으로 나갔다가 다시 들어오는 경우
• 빠른 장면 전환(shot changes)
• 심한 모션 블러(motion blur)
• 머리카락과 배경 사이의 낮은 대비(low contrast)
• 인물과 들고 있는 물체 사이의 복잡한 중첩
• 저사양 메모리 모바일 기기에서의 긴 클립

다음 단계에는 샷 경계 검출 (shot-boundary detection), 더 강력한 인물 ID 연속성 (person-ID continuity), 수동 피사체 선택, 더 크고 반복 가능한 테스트 세트, 그리고 동일한 효과 시스템을 사물 외곽선 (object outlines)으로 확장하는 것이 포함됩니다.

인물 외곽선 (portrait-outline) 워크스페이스는 여전히 활발히 개발 중이므로, 현재 사용 가능 여부에 대한 정확한 정보는 리포지토리(repository)의 README, 릴리스 (releases), 그리고 로드맵 (roadmap)을 확인하시기 바랍니다.

링크

• GitHub: https://github.com/MartinDelophy/ai-video-editor
• 라이브 에디터 (Live editor): https://video-editor.ai-creator.top/
• ModelScope: https://www.modelscope.cn/models/martindelophy/timeline-studio-onnx-models

브라우저 AI (browser AI), WebGPU, ONNX Runtime Web, 비디오 매팅 (video matting), 광학 흐름 (optical flow), 또는 로컬 우선 (local-first) 비디오 편집에 관심이 있으시다면, 피드백과 집중적인 기여를 환영합니다.