Read Original
#Frontend

“왓챠 PiP 안 됨?” — 됩니다, 이제부터.

“왓챠 PiP 안 됨?” — 됩니다, 이제부터.
01

Summary

"이제 딴짓하면서 프리렌 보세요!" 왓챠 웹 PiP(화면 속 화면) 모드 전격 출시

탭을 넘나들고 화면을 최소화해도 자막과 영상이 끝까지 따라오는 심리스 뷰잉 환경 구축기

사용자의 멀티태스킹 경험을 대폭 개선하기 위해 왓챠 서비스에 HTML5 PiP API를 도입한 여정을 다룹니다. 웹 브라우저 환경에 구애받지 않고 항상 최상단에 유지되는 미니 화면을 구현하여 사용 편의성을 극대화했습니다. 브라우저 파편화 이슈 속에서도 최적의 동영상 컨트롤과 자막 경험을 유지하기 위한 기술적 배려가 돋보입니다.

  • 01브라우저 독립적 최상단 유지: 다른 작업을 수행하거나 웹 브라우저를 최소화해도 동영상은 끊김 없이 고정 노출
  • 02자막 및 컨트롤 조작 동기화: 플로팅 창에서도 자막이 정확히 연동되며 재생/일시정지 등의 조작을 즉시 처리
  • 03지속적인 스트리밍 보장: 한 에피소드가 끝나면 PiP 인터페이스 내부에서 다음 화가 자동으로 이어서 재생
  • 04브라우저 파편화 대응: Chromium 엔진과 타 브라우저 간의 스펙 제약을 고려하여 최적의 대체 UX를 선사

RECOMMENDATION

웹 동영상 플랫폼을 운영하며 멀티태스킹 사용자 경험(UX)을 극대화하고 서비스 이탈률을 줄이고자 하는 프론트엔드 개발진에게 강력히 추천합니다.

The Problem

기존의 자체 미니플레이어 방식은 웹페이지 내부 요소로만 작동하여 브라우저 탭을 변경하거나 창을 최소화하면 영상 재생 화면이 보이지 않게 되는 한계가 존재했습니다.

The Solution

브라우저 자체에서 제공하는 HTML5 Picture-in-Picture(PiP) API를 적극 도입하여, 브라우저 탭 및 다른 앱 작업과 독립되어 최상위에 유지되는 플로팅 재생 창을 제공하였습니다.

The Result

동영상 재생 화면이 화면 최상단에 고정되며 끊김 없는 재생, 자막 동기화, 다음 화 자동 재생, 그리고 왓챠파티 실행 상태에서의 유연한 탐색 기능을 웹 환경에서도 온전히 누릴 수 있게 되었습니다.

Trade-off

브라우저 사양에 종속되는 특성상 Chromium 기반(Chrome, Edge) 브라우저에서는 자막과 컨트롤 기능이 완벽하게 지원되지만, Safari나 Firefox와 같은 브라우저에서는 벤더 제약으로 인해 자막 및 맞춤 컨트롤 조작이 제한되는 기능 편차가 발생합니다.

03

Key Concepts

Concept · 01

Picture-in-Picture (PiP) API

HTML5 Video 요소를 브라우저 화면 외부 및 운영체제 최상위에 띄워 플로팅 형태로 독립 재생할 수 있도록 지원하는 웹 표준 API입니다. 웹 페이지를 이탈하더라도 사용자가 영상을 지속적으로 소비할 수 있는 심리스 환경을 만듭니다.

  • 기존 브라우저 탭 바인딩 방식의 미니플레이어 한계를 완전히 지우는 핵심 브라우저 API 기술로 활용되었습니다.
Concept · 02

Browser Compatibility (브라우저 호환성)

웹 기술이 각기 다른 브라우저 엔진(Chromium, WebKit, Gecko 등)에 따라 다르게 지원되거나 파편화되어 렌더링되는 속성입니다.

  • Chromium 계열 브라우저에서는 자막과 커스텀 컨트롤러까지 완벽하게 지원되는 최고의 환경을 제공합니다.
  • Safari 및 Firefox에서는 브라우저의 고유 제약으로 인해 단순 동영상만 출력되는 차이점을 가집니다.
Concept · 03

Digital Rights Management (DRM)

디지털 콘텐츠의 무단 복제와 배포를 방지하고 저작권을 보호하기 위해 작동하는 디지털 권리 관리 기술입니다.

  • 콘텐츠 보호 요구사항에 맞춰 화면 캡처나 PiP 재생 시 보안 규정에 따른 정상적인 블랙스크린 처리가 동작합니다.