2023.04소프트웨어·인프라신규 구축

영상 제작 도구 최소 기능 제품

레이어·캔버스·타임라인을 갖춘 브라우저 편집 도구를 초기 버전으로 만들었습니다.

웹서버·인프라

배경

영상 편집을 브라우저 안에서 끝내고 싶어하는 고객이었다. 데스크톱 편집 프로그램 설치 없이 레이어와 타임라인을 다루는 초기 버전이 필요했다.

그 상황에서 무엇을 왜 골랐는지

레이어가 여러 장 겹치고 타임라인을 스크럽할 때마다 다시 그려야 하는데, 일반 캔버스 2D로는 레이어가 늘어날수록 화면이 버벅였다. GPU를 쓰는 WebGL로 옮겨 레이어 수가 늘어도 편집 중 화면 반응을 유지할 수 있었다.

최종 출력 파일을 만드는 작업은 브라우저에서 처리하기엔 무겁고, 사용자가 편집 중인 브라우저 성능에 영향을 주면 안 됐다. 렌더링을 서버 쪽 별도 작업으로 옮겨 편집 화면은 가볍게 유지했다.

문제

타임라인에서 여러 레이어를 동시에 재생하며 미리보기를 하면 프레임이 밀리는 현상이 있었다.

접근

화면에 실제로 보이는 구간의 레이어만 미리 그려두고, 재생 중에는 이미 그려둔 프레임을 순서대로 내보내는 방식으로 바꿨다.

결과

레이어 수가 늘어난 상태에서도 타임라인 재생이 끊기지 않고 이어졌다.

문제

최소 기능 제품 단계라 기능 우선순위가 자주 바뀌었는데, 편집 도구를 하나씩 추가할 때마다 기존 캔버스 로직을 건드려야 했다.

접근

편집 도구를 캔버스 코어와 분리된 플러그인 형태로 구성해, 새 도구 추가가 기존 코드를 수정하지 않고도 가능하도록 만들었다.

결과

우선순위가 바뀌어 도구를 추가하거나 빼야 할 때 캔버스 코어를 건드리지 않고 대응할 수 있었다.

소스코드와 렌더링 서버 배포 구성을 함께 인계하고, 캔버스·타임라인 구조에 대한 기술 문서를 남겼다. 이후 기능 확장은 고객사 자체 개발팀이 이어받을 수 있도록 코드 구조를 문서로 정리해 전달했다.

ReactWebGLNode.jsAWS