숏츠 영상이 슉슉 넘어가게 하기 위한 Mobile Web 개발자의 고민
온스탕탕 ep2. 후속편
안녕하세요! 프론트개발팀 UIT파트에서 웹프론트엔드 개발을 맡고 있는 즨 & 마크업 개발을 맡고 있는 ㅇㅂㅇ입니다! 숏츠 WEB 프론트개발은 저희 둘이 머리를 맞대고 정말 많은 이슈들을 하나 하나 해결해가며 우당탕탕 진행했는데, 그 우당탕탕의 기록들을 공유드리려고합니다.
1. 자연스러운 UI (부제: 우당탕탕 video poster)
숏츠 개발 시 가장 중요하게 생각했던건 자연스럽게 슉! 슉! 넘어가는 UI였습니다. 뭐 그렇게 어려울게 있을까? 싶었지만… 사실 가장 우당탕탕이었던 부분이 바로 이 UI 관련 이슈들이었어요.
초기 비디오 로드 시에 video poster속성을 이용해서 첫 프레임의 이미지를 보여주고, 그 후 비디오 재생으로 매끄럽게 이어지게 개발해야지!
라고 생각하여 개발했고, 실제로 안드로이드 기기에선 정말 매끄럽고 예쁘게 잘 동작했습니다.
하지만… IOS에서는 video태그에 관한 정말 갖가지 이슈들이 쏟아졌어요😿
💡 IOS HTML video태그 관련 이슈
- IOS 특정 버전(15.5, 16)에서 재생 초기에 영상 영역이 잠시 펼쳐졌다가 축소되는 것처럼 보여지는 이슈
- IOS 사파리에서 영상이 로드되는 동안 이미지를 보여주는 poster 속성을 지원하지 않아 까만 화면이 노출되어 깜빡거리게 보이는 이슈
이 외에도 IOS에선 video의 고질적인 이슈들이 굉장히 많아서.. 높이값을 조정하고 재생 시작 타이밍도 조절해보는 등 굉장히 많은 삽질을 했으나…
결국 해결 방법은 모든 비디오 이슈들을 이미지로 가리기 였습니다!
처음 정상적으로 재생되기 전까지는 별도의 이미지태그를 이용해 썸네일 이미지를 노출시켰고, 그 아래에 비디오에서 일어나는 모든 이슈들을 덮어버렸어요. 그 결과 지금의 매끄럽게 슉슉! 넘어가는(것 처럼 보이는) 온스타일 숏츠가 개발될 수 있었습니다.
2. 안정성을 위한 렌더 방식
숏츠는 위아래로 스와이프하며 여러개의 동영상을 보는 플랫폼입니다. 여러개의 영상을 로드하고 재생하고 멈추고를 반복하는 만큼, 동영상의 렌더 방식에 관해서도 많은 고민과 많은 시행착오가 있었습니다.
개발 초기엔 현재 보고 있는 영역에만 video를 생성하고, 나머지는 모두 썸네일 이미지만 노출하는 방식으로 개발했습니다.
이 방식으로 개발했을 때도 사실 큰 이슈는 없어보였습니다! 하지만… 스와이프를 계속 반복하여 80개 정도의 숏츠를 시청할 쯔음부터는 숏츠 페이지의 동작이 매우 느려지고, 핸드폰이 미친듯이 뜨거워져서 곧 폭발할 것 같은 상태가 됐어요…😿 해당 상황에서 퍼포먼스를 측정해보니… 모든 수치가 점진적으로 솟구쳐오르고 있었습니다.
그래서 결국 [이전-현재-다음] 3개의 숏츠 컴포넌트만 유지하는 렌더 방식을 채택했습니다!
숏츠를 스와이프 하여 넘어가는 순간 다시 중간의 인덱스로 이동시키고, 해당 인덱스에 새로운 video를 로드하여 재생시키는 방식입니다. 즉, 숏츠가 넘어가는 척! 하면서 다시 제자리로 돌아가서 새로운 영상을 보여주고있습니다. 이 방식에선 영상을 아무리 많이 넘겨도 렌더하는 DOM의 개수가 한정되어있어 메모리가 일정 수준으로 유지되고, 영상을 100개 이상씩 아주 많이 시청해도 큰 버벅임 없이 재생됩니다. 그니깐 숏츠 많이많이 봐주세요..!🙏🏻
3. 까다로운 웹브라우저의 자동재생
숏츠는 페이지 진입 시 동영상을 자동재생하는 걸 원칙으로 하고있습니다. 하지만 앱과 달리 웹 브라우저는 아주 까다로운 자동재생 정책을 가지고 있고, 아래의 조건에 맞지 않으면 브라우저에서 자동재생을 막아버립니다.
💡 WEB 브라우저 자동재생 가능 조건
- 음소거이거나 오디오 볼륨이 0일 때
- 사용자가 사이트와 상호작용함 (클릭, 터치, 키누름) (스크롤은 제외)
- 화이트리스트에 등록된 사이트
- 자동 재생 정책이 허용으로 지정되어 iframe과 document에서 자동 재생을 지원하는 경우
위 조건에서 하나라도 해당되면 자동재생이 가능하지만, IOS 저전력모드에선 예외적으로 음소거 처리를 해도 자동재생이 불가능합니다…🤕🤒
결론적으로, 웹에선 자동재생이 막히는 상황이 필연적으로 발생하게됩니다. 하지만 웹의 video객체는 아주 불친절해서 이 자동재생 실패 케이스에 대해 아무런 이벤트도, 익셉션도, 플래그값도 제공해주지 않아요… 그냥 냅다 멈춰버립니다🥺
따라서 재생실패를 탐지하기보단 성공을 탐지하는 방향으로 플레이어를 개발했습니다.
자체 개발한 플레이어에선 video의 이벤트 기반으로 video객체의 상태에 맞춰 오버레이를 컨트롤해주고 있습니다. 숏츠에선 자동재생이 막힐 경우 플레이 버튼을 띄워 사용자가 수동재생 할 수 있게 하는 방식으로 자동재생 이슈를 대응 중입니다.
