일반적인 비디오 편집기 구축하기

내 비디오 미리보기가 내보내기 결과와 다른 이유

비디오 편집기는 완성된 것처럼 보입니다. 미리보기는 선명하고, 자막은 사용자가 드래그한 정확한 위치에 있으며, 타임라인은 부드럽게 스크럽됩니다. 그러다가 사용자가 내보내기(Export)를 누르면 자막이 엉뚱한 위치에, 엉뚱한 크기로 나타나며, 때로는 가장자리에서 완전히 잘려 나옵니다. 아무것도 충돌하지 않았고, 로그에 오류도 없습니다. 미리보기와 파일이 단순히 일치하지 않을 뿐입니다.

이것은 모든 비디오 편집기에서 가장 흔한 버그이며, 렌더링 문제라기보다는 데이터 모델링 문제입니다. 아래에서는 이 버그를 발생하지 않게 하는 한 가지 습관, 화면 비율에서 프레임을 올바르게 크기 조정하는 방법, 그리고 저가 휴대폰에서도 드래그를 빠르게 유지하는 방법을 설명합니다. 이 아이디어는 모든 언어나 UI 프레임워크에 적용됩니다.

화면 비율은 형태이고, 해상도는 크기입니다

대부분의 프레임 버그는 여기서 시작됩니다. 화면 비율(Aspect ratio)은 프레임의 형태만을 설명합니다. 9:16은 세로형이고, 16:9는 가로형입니다. 해상도(Resolution)는 1080x1920과 같이 픽셀 단위의 크기를 설명합니다. 하나의 형태는 여러 크기를 지원하므로, 이 두 값은 결코 서로 바꿔 사용할 수 없습니다.

비율은 일반 텍스트로 저장하고 계산할 때만 숫자로 변환하세요. 내보내기(export)의 목표 높이를 저장한 다음, 비율에서 너비를 도출하고, 인코더에 도달하기 전에 두 숫자를 모두 짝수로 만드세요. 홀수 치수는 의외로 많은 내보내기 실패의 조용한 원인입니다.

height = width / ratioToNumber(ratio)     // sizing the preview box

function widthFromHeight(ratio, height):
   raw = height * ratioToNumber(ratio)
   return makeEven(round(raw))           // encoders require even sides

// 9:16 at 1080 tall  -> 608 x 1080
// 16:9 at 1080 tall  -> 1920 x 1080

위치는 픽셀이 아닌 분수로 저장하세요

편집기는 세 가지 다른 크기의 세 가지 세계에 존재합니다: 저장된 문서, 화면 미리보기, 그리고 내보내진 파일입니다. 문서는 유일한 진실의 원천이며, 다른 두 가지는 단지 다른 스케일로 렌더링된 것일 뿐입니다.

Project  ->  Clip (source, trim, filters)  ->  Overlay (text / sticker)

 Document                Preview renderer         Export renderer
 x = 0.5, y = 0.9   -->   x * 360 px         -->   x * 1080 px  --> MP4
       |                        ^                        ^
       +------------------------+------------------------+
           하나의 저장된 분수, 하나의 공식, 두 가지 크기

540 픽셀을 저장하면 그 숫자는 측정된 기기에서만 올바릅니다. 0.5를 저장하면, 이는 모든 크기에서 영원히 "수평 중앙"을 의미합니다. 모델의 모든 위치, 오프셋 및 스케일은 0과 1 사이의 분수여야 합니다.

type Overlay {
 x:           number   // 가로 0.0-1.0  (0.5 = 중앙)
 y:           number   // 세로 0.0-1.0    (0.9 = 거의 하단)
 scale:       number   // 1.0 = 보통 크기
 rotation:    number   // 각도
 startTimeMs: number   // 나타나는 시간
 endTimeMs:   number   // 사라지는 시간
}

그러면 내보내기(Export)는 거의 지루해지는데, 이것이 핵심입니다. 렌더러는 미리보기와 동일한 공식을 더 큰 승수(multiplier)로 사용합니다: px = overlay.x * exportWidth. FFmpeg는 프레임 자체를 처리하며, 중앙 정렬 표현식 (ow-iw)/2은 미리보기가 레터박스를 만드는 데 사용하는 것과 동일한 산술입니다. 저장된 값이 변경되지 않았기 때문에, 자막은 정확히 올바른 위치에 놓입니다.

ffmpeg -i input.mp4 \
 -vf "scale=1080:1920:force_original_aspect_ratio=decrease,\
     pad=1080:1920:(ow-iw)/2:(oh-ih)/2:0xD3D3D3" \
 -c:v libx264 -crf 23 -pix_fmt yuv420p -c:a aac output.mp4

단일 패스로 미리보기 그리기

휴대폰, 태블릿, 크기 조정된 데스크톱 창은 모두 다른 크기를 제공하므로, 미리보기 상자를 하드코딩하는 대신 런타임에 측정하세요. 각 오버레이를 별도의 UI 요소로 마운트하는 대신, 단일 캔버스 패스로 모든 오버레이를 그리세요. 단일 패스는 손가락이 움직이는 동안 부드러움을 유지합니다.

두 가지 규칙은 루프를 정직하게 유지합니다. 시간 범위 밖의 오버레이는 건너뛰고, 항상 save()와 restore()를 짝지어 사용해서 한 항목의 변환이 다음 항목으로 새어 나가지 않도록 하세요.

function drawPreview(canvas, overlays, currentTime, box):
   for each overlay in overlays:
       if currentTime < overlay.startTimeMs: 건너뛰기
       if currentTime > overlay.endTimeMs:   건너뛰기

       px = overlay.x * box.width       // 핵심 공식
       py = overlay.y * box.height

       canvas.save()
       canvas.move(px, py)
       canvas.rotate(overlay.rotation)
       canvas.resize(overlay.scale)
       canvas.drawText(overlay.content)
       canvas.restore()                 // 절대 선택 사항이 아님

두 단계 상태로 드래그를 부드럽게 유지하기

드래그하는 손가락은 초당 약 60개의 위치를 보고합니다. 각각이 프로젝트 저장소에 기록된다면, 초당 60번의 유효성 검사, 영속성 및 전체 상태 재구성에 대한 비용을 지불해야 하며, 드래그는 눈에 띄게 끊깁니다. 대신 작업을 두 단계로 나누세요:

1. 1단계, 일시적(ephemeral): 손가락이 현재 있는 위치를 저장하는 작은 liveDrag 맵입니다. 모든 이동 시 이를 업데이트하고 캔버스를 다시 그립니다. 다른 어떤 것도 실행되지 않습니다. 
2. 2단계, 영구적(durable): 드래그가 끝나면 최종 분수를 프로젝트 모델의 오버레이에 커밋하고, liveDrag 항목을 지우며, 하나의 실행 취소(undo) 단계를 기록합니다. 

이점은 프레임 속도를 넘어섭니다. 드래그가 수백 개 대신 하나의 항목을 생성하므로 실행 취소(Undo) 기록은 유용하게 유지되며, 자동 저장은 디스크 과부하를 방지합니다. 이것이 Figma와 Canva가 직접 조작을 반응적으로 유지하는 방법입니다.

실제 사례

MicrocosmWorks에서는 내보내기 시 자막이 밀리는 단편 비디오 편집기를 다루었습니다. 팀은 미리보기 캔버스에서 직접 읽은 장치 픽셀로 오버레이 위치를 유지했기 때문에, 작은 휴대폰에서 작성된 자막은 1080p 파일에서 높게 위치하고 작게 나타났으며, 화면 비율을 전환하면 일부 오버레이가 프레임을 완전히 벗어나게 되었습니다.

저희는 모델을 정규화된 0-1 좌표로 마이그레이션하고, 두 렌더러가 단일 '분수 곱하기 크기' 헬퍼를 공유하도록 했으며, 저장된 비율에서 파생된 짝수 출력 치수를 강제했습니다. 미리보기와 내보내기는 모든 테스트 장치에서 일치했습니다. 드래그 커밋을 드래그 끝으로 이동함으로써 저사양 Android 하드웨어에서 사용자들이 보고했던 지연을 없앴습니다. 이러한 단편 비디오 및 편집 작업이 어떤 종류인지 프로젝트 포트폴리오에서 확인할 수 있습니다.

결론

미리보기와 내보내기는 하나의 문서에 대한 두 가지 렌더링이므로, 그들에게 하나의 진실의 원천을 제공하세요. 위치는 분수로 저장하고, 두 렌더러에서 동일한 '분수 곱하기 크기' 공식을 사용하며, 화면 비율에서 너비를 도출하고, 치수를 짝수로 유지하며, 손가락이 들렸을 때만 드래그 변경 사항을 커밋하세요. 이 다섯 가지 습관은 버그가 작성되기 전에 전체 버그 범주를 제거합니다.

인터랙티브 뷰와 최종 파일이 일치하는 미디어 엔진을 구축하는 것은 MicrocosmWorks의 비디오 및 스트리밍 엔지니어링 작업의 핵심 초점입니다.

비디오 또는 콘텐츠 편집기를 출시할 예정이며 미리보기와 내보내기 결과가 실제로 일치하기를 원하십니까? 저희는 단편 편집 도구에서 이와 똑같은 유형의 버그를 해결했습니다. 저희 엔지니어링 팀에 문의하세요 →

저희 팀의 더 많은 글 읽기

1. 다양한 비디오 해상도에 맞춰 채널 로고 최적화하기 

2. 접시 사진 찍고 식사 기록하기: 컴퓨터 비전 영양 파이프라인

3. 다양한 비디오 해상도에 맞춰 채널 로고 최적화하기