Vrew의 Web 기술

Vrew 는 인공지능을 이용한 동영상 편집기 입니다 (Vrew 소개). Vrew 에는 복잡한 타임라인이 없습니다. Vrew 는 텍스트 편집의 느낌을 줍니다. 이를 통해 쉽게 자막을 달고 영상을 편집할 수 있게 해 줍니다.

이 글에서는, Vrew 의 Client 에 사용된 Web 기술을 설명합니다. 또한 동영상 편집기로써 Vrew 가, Web 기술을 채택함으로써 해결해야 했던 도전을 몇 가지 소개하려고 합니다.

Vrew 의 선택 : Web기술

Vrew 는 영상의 오디오 데이터를 Speech-to-Text 로 Text 로 변환합니다. 이후 Text 데이터로 영상편집 및 자막작업을 하게 됩니다. STT 를 비롯한 전처리는 클라우드에서 일어납니다. 그 결과를 유저에게 보여주고, 이를 편집할 수 있게 하는 기능은 Client 에서 온전히 처음부터 만들어야 합니다.

새로운 제품은 대부분 실패합니다. 그래서 적은 비용으로 빠르게 시도해 보는 것이 중요합니다. 그러기에 프로토타입에 Web 기술을 사용하는 것이 당연한 수순이였습니다.

프로젝트 시작한지 두 달 후, 외부에 첫 번째 버전의 프로토타입을 내었습니다 ( 링크 ). 이후 여러 문제점들을 해결해 가면서, 지금까지 적극적으로 Web 기술을 사용하고 있습니다.

Web 기술을 선택했을 때의 장점

Web 기술의 장점은 아래와 같습니다.

• CSS + HTML 렌더링 엔진으로, 유려한 UX 개발이 가능.

  완성도 높은 렌더링 엔진을 사용할 수 있습니다. 또한 왠만한 모듈은 이미 구현이 된 생태계가 있어서, 본질적이지 않은 곳에 쓰이는 시간을 절약할 수 있었습니다. 영상편집은 Mac 을 쓰시는 분들의 비중이 높은 편이라, 처음부터 멀티 플랫폼을 고려하였습니다. Web 기술은 플랫폼에 종속되지 않기 때문에, 멀티플랫폼 에도 좋은 선택이였습니다.

• 널리 쓰이는 h264 코덱의 디코딩이 내재되어 있다.

  코덱은 동영상의 압축 규약이라고 생각하면 됩니다. 불과 몇 년 전만 하더라도, 기기마다 동영상에서 사용하는 코덱도 달랐습니다. 하지만 최근 몇 년 사이 급격하게, h264 코덱의 mp4/mov 포멧으로 통일 되었습니다. 이를 화면에 표시하는 기능을 decoding 이라고 합니다. 최신 브라우저는 대부분 h264 디코딩을 지원하고 있습니다.

• Web 에서 멀티미디어 처리 지원은 점점 좋아지고 있다.

  W3C 의 Media Source Extension 기술은, Flash 등의 브라우저 확장 없이 넷플릭스나 유투브 등의 동영상 스트리밍을 Web 에서 바로 볼 수 있게 해 주었습니다. 이 기술의 개발동기 중 하나는 Web 에서의 미디어 편집기 지원입니다. 또한 Audio API 도 충분히 저수준까지 제공하고 있습니다.

• 어쩌면 장기적으로 Web 으로 배포할 수도 있다.

  유저분들 입장에서 PC 에 새로운 앱을 설치하고 업데이트 하는 것은 굉장히 번거롭고 성가신 작업입니다. 만일 Web 만으로 모든 기능을 만들 수 있다면, 배포와 업데이트라는 장벽을 없엘 수 있습니다.

동영상 편집기를 Web 기술로 만들 때의 도전들

프로토타입은 그럭저럭 좋은 피드백을 받았습니다. 하지만 본격적인 동영상 ‘편집’기도, Web 기술을 사용해서 잘 구현할 수 있을까요? 초기에는 Vrew 팀도 반신반의 였습니다. 하지만 단점을 하나씩 극복해 가면서, 지금까지 적극적으로 사용하고 있습니다. 저희가 해결해야 했던 문제들 중 몇 가지만 공유하자면 아래와 같습니다.

• Web 기술은 시스템자원 접근이 매우 제한적이다.

  Web 기술은 근본적으로 Sandbox 모델입니다. 예를 들면, 임의의 파일에 접근이 불가능하고, 랜덤 억세스가 안 되기 때문에 큰 파일의 일부분만 읽는 것도 어렵습니다. 시스템에 어떤 폰트가 설치되어 있는지 알아낼 수도 없습니다. 이런 문제로 인해, 결국 순수 SPA 는 아닌, electron 이라는 프레임웍을 사용해서 nodejs 를 적극 이용하고 있습니다.

• Web 기술에서 통상적으로 다루는 데이터는 수십KB ~ 수MB 정도이다. 반면 동영상 편집기에서는 수 GB 를 다루기 때문에, 많은 주의가 필요하다.

  javascript heap 은 최대 1GB 정도입니다. Web기술로 만드는 왠만한 Single Page App 에서는 이 제약이 큰 문제는 아니지만, 동영상과 음성 처리를 해야 하는 Vrew 에서는 자칫 잘못하면 힙이 넘쳐서 크래시가 발생합니다. 이를 해결하기 위해서는 많은 우회와 섬세한 처리가 필요합니다.

• 내보내기(인코딩) 과, 미리보기 의 내용을 최대한 일치하도록 나와야 한다.

  편집한 동영상을 저장할 때는 사이즈를 줄이기 위해 인코딩 이라는 압축과정을 거칩니다. Vrew 에서는 FFmpeg 를 이용해서 이 과정을 수행합니다. 하지만 이 과정은 시간이 오래 걸립니다. 하지만 유저분들은 편집 과정 도중에 결과를 확인할 수 있어야 하기 때문에, 인코딩이 없이도 바로바로 편집 내용이 동영상에 반영된 것 처럼 최대한 모사해야 합니다. 또한 WebAssembly 도 활용해야 합니다.

• 동영상의 저수준 작업이 필요하다.

  HTMLMediaElement 와, 미디어 데이터의 저수준 제어를 하는 Media Source Extension 기술은 확인 결과 저희가 기대했던 수준만큼 충분히 무르익지 않았습니다. 하지만 LUT 필터를 영상에 적용하고 영상 좌우반전/트랜지션 등을 만족스러운 속도로 구현하기 위해서는, 저수준의 제어가 필요합니다. 다행히 WebGL 기술이 있어서, Shader 에 접근이 가능해서 이 부분을 해결해 가고 있습니다.

이런 도전과제들을 하나씩 해결해 가면서, Vrew 는 웹기술을 지금도 적극적으로 사용하고 있습니다. 현재는 주로 Typescript 언어로, React + Electron 프레임웍을 주축으로 돌고 있습니다. 부족한 시스템 자원의 접근은, 외부 프로세스와의 통신, 혹은 nodejs 확장(N-API) 을 직접 구현하여 진행하고 있습니다. Web 에서의 저수준 영상 처리를 위해 WebGL 을 적극적으로 쓰고 있고, WebAssembly 를 조만간 도입 예정에 있습니다.

다음 글 부터는, 각각의 도전에 대해 조금 더 자세하게 설명하고, Vrew 가 어떻게 해당 부분을 극복하고 있는지를 다루겠습니다.

VoyagerX 에서는 Vrew 의 도전을 함께 할 개발자를 모십니다. 아직 Web 기술에 익숙하지 않더라도, C++, shader 등 좀 더 저수준의 경험을 해 보신 분들도 환영합니다. 채용페이지 바로가기