YouTube 스튜디오 편집기능, 영상편집은 어떻게 이뤄질까?

이 글은 "YouTube 스튜디오 편집기"의 기능소개가 아닌 "YouTube 스튜디오 편집기"가 제공하는 여러 기능들의 기술적 원리를 설명하는데에 있습니다.

 

단순 YouTube 스튜디오 편집기를 사용하는 유저라면 이 글은 별로 도움이 되지 않고, 비슷한 기능을 만드려고 생각중이거나 웹브라우저 상에서 편집을 하는 원리를 알고싶다고 할때 읽으시는것을 추천드립니다.

대부분을 알기 쉽게 비유하여 작성하였습니다.

 

유튜브 스튜디오

 

YouTube 스튜디오 편집기

 

YouTube 스튜디오 편집기능

영상 타임라인

먼저 타임라인에 따라 영상의 미리보기가 나타납니다.

 

웹브라우저에서 영상 미리보기를 생성할 수도 있습니다.

속도로는 미리 서버에서 준비해두는것이 빠르고 효율적입니다.

 

작은 이미지이므로 하나의 파일에 결합해두고 CSS로 clip 옵션을 이용해서 분리하는것도 좋습니다.

작은이미지 여러장을 요청하는것은 http헤더를 낭비할 수 있기때문입니다.

 

YouTube에서는 서버에서 미리 준비된 영상 스냅샷을 제공하고, 하나의 파일으로 js에서 분리하는 방식을 사용합니다.

 

여기에서는 자르기 기능을 사용할수있는데 특정 부분만 지우는 방법(중간 일부 제거)은 없어 보입니다.

단순히, 시작~종료로만 만들수 있어보이는데 특정 부분만 지울 수 있다면 댓글로 알려주세요.

 

 

음성 타임라인

YouTube 편집기에서는 새로운 음성을 추가할 수 있습니다.

YouTube의 무료음악을 포함하거나, 새로운 소리를 넣을수 있는데 소리 비율을 조정할 수 있습니다.

 

이 소리를 조정하는데에는 웹브라우저에서 AudioContext라는 기술을 사용합니다.

AudioContext

JS) AudioContext 음소거(mute)

gainNode를 활용하여 기존 영상의 소리와 새로운 음성파일의 소리를 각각 조정하여 한번에 실행하면 합쳐진 소리를 들려줄 수 있습니다.

 

 

블러(Blur) 타임라인

블러는 모자이크를 처리하는 기능입니다.

나와서는 안될 내용이 포함되어있는등에 영상에서 일부분을 모자이크 처리할 수 있습니다.

 

여기에서는 새로운 블러를 만들어서 가리고 싶은 부분을 가릴 수 있는데,

픽셀 방식의 블러가 아닌 원으로 뭉게는 형태의 블러가 적용됩니다.

 

 

브라우저에서 모든게 작동하나요?

아니요. 브라우저에서 영상인코딩 작업은 어렵습니다.

먼저, 브라우저는 Javascript 언어를 사용하는데 나중에 추가될 Wasm이 있다고 해도 아직은 메모리 관리가 안되어 영상 처리는 어렵습니다.

기술적으로 예전 IE6등에서는 Flash를 이용해 로컬 저장소에 접근이 가능했으나, 로컬저장소 접근은 보안문제상 제거되었습니다.
로컬 저장소에서 영상 원본을 불러와가면서 처리하고 메모리에서 삭제를 한다면, 고용량인 영상 처리가 가능하겠지만..
로컬에 접근이 불가한 현실상 모든 영상 소스를 메모리에 올리고 처리를 해야되기 때문에 어렵습니다.

localStorage라는 기술은요?
먼저 Web에서 처리를 하려면 메모리에 올려야되고, localStorage로 옮길수도 있겠으나
localStorage에 맞게 인코더를 설계를 해줘야되기때문에 매우 힘든 작업이 될수있을것 같습니다.
브라우저별로 localStorage의 용량한계도 있을것이고요.

 

그렇다면, YouTube는 어떻게 편집을 적용시킬까요? YouTube편집기를 사용하고나면 잠시후 적용된다는 안내가 뜹니다.

 

사용자가 웹에서 편집한 내용을 상세히 정리해서 제출하면 YouTube의 서버에서 수정사항을 인코딩하여 영상을 만들게 됩니다.

 

예를들자면 아래처럼 상세히 편집내용을 정리하여 전송하면 서버가 일하는 방식입니다.

• 영상 자르기(시간) - 00:00~05:02
• 블러(시간, 좌표)
  1. 00:00~00:30 (x: 0, y: 10, width: 50, height: 100)
  2. 00:21~00:45 (x: 20, y: 15, width: 70, height: 200)
• 음악(시간, 음량)
  • 음성파일 (몇 초부터 몇 초까지 소리 비율은 원본(7) : 신규 (3))

이런식으로 무엇을 편집하면 되는지 동영상 편집기에서 화면상으로 만든 내용을 상세히 보고서로 제출하면,

서버에서는 주어진 작업을 서버의 인코더가 작업을 수행하게 됩니다.

 

인코딩 작업은 오래걸리는 작업이기 때문에 작업완료시까지 수정진행중까지 현재의 영상이 표시됩니다.와 같은 문구가 나타나게 됩니다.

 

 

만약, FFmpeg라는 오픈소스 인코더를 이용해서 영상을 자른다면 아래의 명령어를 사용할수도 있습니다.

FFmpeg -ss 0 -i "input.mp4" -t 302 "output.mp4"

FFmpeg) 영상 자르기

블러, 음악 편집등 나머지 방법을 서버에서 인코딩하는방법은 FFmpeg의 공식문서 또는 FFmpeg 사용법을 구글검색으로 확인해보세요.

 

IT분석

원하는 서비스를 분석요청하실 수 있습니다. (댓글로 남겨주세요.)

다만, 몇 가지 제한사항이 있습니다.
1. 정보통신망법률을 위반하지 않는 경우에만 가능합니다.
    1. 리버스 엔지니어링은 하지 않습니다. (EXE파일, 난독화파일 등 분석작업은 하지 않습니다.)
    2. 개방된 서비스만 신청이 가능합니다. (누구나 접근가능해야되며, 암호화등 숨겨진 서비스는 불가)
    3. 임의변경을 시도해야하는 경우는 받지 않습니다.
2. 관심을 가지고 있는 사용자가 많은 내용만 분석 신청가능합니다.

신청은 댓글 또는 방명록에서 해주세요.