중국 본토 및 동남아시아의 주요 엔터테인먼트 콘텐츠 플랫폼 중 하나인 BILIBILI는 사용자 제작 콘텐츠, 라이브 방송, 게임 환경의 대규모 데이터베이스를 호스팅하여 월간 활성 사용자 (MAU) 3억 3,000만 명을 유치하고 있습니다.
BILIBILI 플랫폼의 고유한 특징 중 하나는 일본과 중국에서 인기 있는 기능으로 동영상 스트림에 실시간 시청자 의견을 스크롤 텍스트로 표시하는 글머리 기호 댓글을 통합한 것입니다. 글머리기호 댓글은 라이브 동영상 콘텐츠에 흥미롭고 몰입도 높은 요소를 더해 시청자가 자신의 생각을 표현하고 다른 시청자의 반응에 실시간으로 응답할 수 있도록 하여 시청자의 적극적인 참여를 유도합니다.
과제
글머리 기호 화면 댓글은 시청자가 콘텐츠와 상호작용할 수 있는 흥미로운 방법이지만, 최상의 사용자 환경을 제공하려면 화면에서 화자의 초상화가 가려지지 않도록 하는 것이 중요합니다. 다음 동영상에서는 글머리기호 댓글이 시청자의 흐름을 방해하고 시청자가 동영상을 계속 시청하지 못하게 할 수 있습니다.
발표자의 초상화 뒤에서 원활하게 흐르는 글머리기호 화면 댓글을 사용 설정하려면 정확한 머신러닝 세분화가 필요하며, 이는 기기에서 효율적으로 실행하기 어려울 수 있습니다. 이러한 이유로 이전에는 이러한 강력한 기능을 서버 측에서 지원해야 했습니다.
BILIBILI에서 매일 제공하는 콘텐츠의 양을 고려할 때 서버 측에서 콘텐츠의 상당 부분을 처리하는 것은 매우 비용이 많이 듭니다. 따라서 개발팀은 비용을 절감할 수 있는 클라이언트 측 솔루션을 찾아야 했습니다. 또 다른 문제는 클라이언트 측 머신러닝으로 전환하면 성능이 저하될 정도로 CPU 사용량이 증가하지 않도록 유지하기 어렵다는 점입니다.
해결 방법: 기기 내 이미지 세분화
이러한 문제를 해결하기 위해 BILIBILI의 개발자는 MediaPipe의 이미지 세그먼터의 전신인 MediaPipe 및 TensorFlow.js를 사용한 신체 세분화를 활용했습니다. 이를 통해 효율적인 기기 내 세분화 API와 셀카 및 다중 객체 세분화를 위한 사전 학습된 모델이 제공되었습니다.
이제 BILIBILI은 비용을 절감하고 성능을 유지하면서 기능을 빠르게 반복하고 지원할 수 있습니다.
구현
BILIBILI에서 이 솔루션을 구현한 방법은 다음과 같습니다.
- 실시간 캐릭터 윤곽선: BILIBILI는 셀카 세그먼터 모델을 사용하여 동영상 전체에서 캐릭터의 윤곽선을 추출했습니다. 이를 통해 문자의 경계를 표시하는 마스크를 만들 수 있었습니다.
- 실시간 댓글 레이어와 통합: 그런 다음 CSS
mask-image속성을 사용하여 추출된 문자 윤곽선을 실시간 댓글 레이어와 병합했습니다. 중앙 문자 영역을 투명하게 설정하면 글머리 기호 화면 주석이 문자를 가리지 않고 문자 뒤에 원활하게 표시될 수 있습니다.
BILIBILI 개발자가 동영상 요소에서 캐릭터 윤곽선을 추출하고 MediaPipe의 실시간 컴퓨팅을 사용하여 라이브 댓글 레이어와 통합한 방법을 보여주는 다이어그램입니다. - 구현 최적화: BILIBILI는 구현으로 인해 성능이 저하되지 않았는지 테스트하고 확인해야 했습니다.
성능 최적화
BILIBILI의 개발자는 OffscreenCanvas 및 Web Workers를 사용하여 시간 소모가 많은 작업을 작업자로 이동하여 기본 스레드가 점유되지 않도록 했습니다. 그런 다음 문자 윤곽선을 추출하는 데만 필요하고 이미지 크기나 품질에 종속되지 않으므로 마스크 크기를 줄였습니다.
BILIBILI 개발팀은 마스크 크기를 줄인 후 컴포지션 중에 마스크를 늘리고 DOM 레이어와 병합하여 렌더링 부담을 최대한 줄였습니다.
세션 시간 및 클릭률 증가
BILIBILI은 웹의 도달범위와 기능을 MediaPipe의 AI 솔루션의 유연성과 결합하여 수백만 명의 사용자에게 강력하고 매력적인 웹 앱 환경을 제공했습니다. 구현 후 1개월 만에 BILIBILI의 세션 시간이 30%, 라이브 스트리밍 동영상의 클릭률이 19% 증가했습니다.
30 %
세션 시간 증가
19 %
CTR 향상
BILIBILI의 개발자는 MediaPipe의 무료 기기 내 웹 AI 솔루션을 사용하여 시청자의 참여를 유도하고 원활한 성능을 보장하는 동시에 중요한 시각적 요소를 효율적으로 유지하면서 궁극적으로 시청자가 플랫폼 선두주자에게 기대하는 프리미엄 동영상 스트리밍 환경을 제공할 수 있었습니다.
