타사 제품 분석해보기(네이버 쇼츠, 유튜브 쇼츠)

배경

요즘 쇼츠가 유행이다. 나도 도파인 터지는 쇼츠에 빠져있다. 그런데 사용하다보니 어떤 플랫폼은 사용성이 좋은데 어떤 플랫폼은 사용성이 좋지 않았다. 특히 내가 성능이 안좋은 스마트폰을 사용중이라서 이게 더 심하게 체감되었다. 왜 이런 차이가 발생하는걸까? 가볍게 몇개의 플랫폼의 쇼츠를 들어가서 분석해보겠다.

 

분석하기

네이버 쇼츠

예시 링크

 

동영상 목록 api 살펴보기

- `GET ~/cards` API에 cards라는 데이터가 있다.
- cards는 배열이고 length가 4다.
- 단, 맨 처음에는 length가 1인 api를 호출하고 끝난 시점에 length가 4인 api를 호출한다.
- 내부에는 썸네일, 동영상 등 다양한 정보가 들어있다.

 

왜 4개의 데이터만 불러올까?

- 쇼츠는 슥슥 내리는 사용성을 가진 서비스다. 그렇기 때문에 대부분의 유저는 4개보다 많은 동영상을 볼 것 이다.

- cards에는 생각보다 많은 데이터가 들어있다. 그래서 4개의 데이터만 불러오는건가? 라는 생각도 든다.(length가 1인건 467kb, 4인건 17.7kb)

- api 응답시간을 비교해보니 length가 1인게 352ms, 4인게 537ms로 유의미한 차이가 있다.

- 생각보다 api가 느리고 개수에 따라 차이도 크다.

- 정확한 원인을 알 수 없지만 동영상 종류별로 전혀 다른 형식의 테이블이 필요하다던가 추천 알고리즘이 시간이 걸린다던가 뭐 이런저런 이슈가 있지 않을까? 생각이 든다.

- 그것도 아니라면 로그를 찍어봤을 때 유저 대다수는 쇼츠를 4개 이상 보지 않아서 개수를 4개로 제한했나? 라는 생각도 든다.

 

썸네일 불러오는 방법

- 다음 동영상의 썸네일과 채널 프로필을 미리 불러온다.

 

- 이미지를 불러오는데는 시간이 필요하다. 그렇기 때문에 쇼츠를 넘겼을 때 빠르게 보여주기 위해서 미리 불러오는 것 같다.

 

동영상 불러오는 방법

- 동영상을 넘기는 시점에 신규 동영상을 불러온다.
- 그렇기 때문에 자연스럽게 로딩이 걸린다.
- 썸네일은 미리 불러왔기 때문에 썸네일과 로딩화면이 보여진다.

 

- 로딩이 길지 않아서 매우 짧은 로딩이 걸린다.(내 환경에서)

- 개인적으로는 로딩이 매우 거슬린다...

 

동영상 최적화

- videos>list를 보면 여러개의 비디오가 들어있다.
- 확인해보니 화질별로 비디오를 나눈 것이다.
- 하나의 동영상인데 여러개의 동영상 파일을 불러온다.(네트워크 환경에 따라 다름)
- uri는 동일한데 content-length와 content-range가 다른것을 볼 수 있다.
- 이로인해 크기와 시간이 다르다.
- 하나는 앞부분만 짤라서 불러오는거고 다른 하나는 나머지 동영상을 불러오는 것이다.

 

왜 이렇게 구현했을까?

- 나도 동영상 스트리밍을 구현해본적이 있는데 hls, mpd 등의 master파일 하나를 이용해서 네트워크 환경에 따라 실시간으로 최적화된 화질을 불러온다.

  - 물론 os나 브라우저에 다라 안되는 케이스도 존재해서 결국 개별 화질파일을 사용하기도 했었다.

- 그런데 네이버는 master 파일이 아니라 mp4파일을 이용해서 처리하고 있다. 그대신 http header를 이용해서 제어하고 있다.

- 왜 이렇게 구현한건지 생각해봤다. 그리고 조금만 생각해보니 이유를 알 수 있었다.

- 쇼츠는 말그대로 짧은 동영상이다. 그렇기 때문에 몇시간 동영상과 동일한 처리를 할 필요가 없다.

- 스트리밍을 지원하게 동영상을 변환하는건 개발비용이 추가적으로 들고 업로드 시간도 오래 걸린다.

- 그렇기 때문에 mp4파일 하나와 http header를 이용해서 제어하는게 더 합리적이라는 생각이 든다.

- 위 이유로 화질은 1개밖에 없지만 쇼츠에서 화질 변경할일이 있을까? 라는 생각이 든다.

 

조금 더 생각해보기

- 유튜브 쇼츠는 최근 3분으로 시간을 늘렸다. 네이버 쇼츠도 최대 시간이 더 늘어나면 어떻게 될까?

- 결국은 스트리밍방식으로 제어하는게 더 효율적이지 않을까?

- 시간에 따라 분기처리를 할 수 도 있고, 스트리밍으로 변경할 수 도 있고, http header를 조금 더 세부적으로 다룰수도 있다.

 

동영상 목록을 추가로 불러오는 방법

- 그 다음 불러올 동영상이 없다면 추가적으로 동영상 목록 api를 호출한다. 

 

- 그렇기 때문에 4번의 쇼츠를 넘길때마다 새로운 api를 호출하게 된다.

- 그리고 이 때 약간의 블로킹이 걸린다. 아주 거슬리는 정도는 아니지만 일반 사용자도 느낄정도긴하다.

 

캐시컨트롤

- cache-control을 확인해보니 동영상과 썸네일은 7일간의 로컬캐시, 프로필은 30일간의 로컬캐시를 사용한다.

 

- 기준이 뭘까? 로그를 찍고 적절한 캐시시간을 정한걸까? 잘 모르겠다. 개인적으로는 조금 더 길어도 될것같다.

- ai한테 물어봤는데 꽤 다양한 이유가 있는 것 같다. 이 글은 캐시컨트롤에 대한 글은 아니니 일단은 의문점을 가지고 넘어가겠다.

 

네이버 동영상의 문제점 그리고 해결방법

(주니어 프론트 개발자의 시선에서 본 가벼운 제안 정도로만 봐주세요.)

 

1. 동영상을 미리 불러오기

이미지와 동일하게 미리 불러오면 된다. (말은 쉽다..)

코드의 복잡도가 올라갈수는 있지만 개발단에서 충분히 풀 수 있는 문제라고 생각한다.

내 생각엔 그 시간에 다른 일을 하는게 더 좋을거라는 판단이 있어서 이런 최적화 작업을 하지 않은것같다.

또는 직군별로 모여서 일을 하고 위에서부터 개발에 업무가 내려오는 형태라면 이런 것들을 제안하기가 어려울 것 같기도 하다.

 

2. 스크롤이 끝나기전에 동영상 불러오기

1번과 비슷한 얘기긴하다. 근데 좀 다르다.

사실 애니메이션이 있는 동안 동영상을 불러온다면 로딩없이 해결할 수 있을 지도 모른다.

그런데 분석해보니 스크롤 애니메이션이 끝나고 나서야 동영상을 불러온다. 비효율적으로 보인다.

 

3. 처음에 낮은 화질의 동영상 불러오기

처음에 아주 짧은 시간동안 낮은 화질의 동영상을 보여준다면 유저는 크게 불편함을 느끼지 않을 수도 있다.

이렇게 되면 아주 짧은 시간의 낮은 화질의 동영상, 그 이후 초반의 짧은 동영상, 나머지 동영상 이렇게 동영상 타입을 나눠야할 것 같다.

지금은 스크롤이 끝나고 영상이 끝나서 어색해보이지만 스크롤이 내려가면서 영상이 실행되면 아마 어색해보이지 않을 것이다.

(이건 좀 과한 작업일수있다.)

 

4. 유저 네트워크 환경을 분석해 초기 n초간 로딩보여주지 않기

카카오페이 기술블로그에 나온 내용이다. 요즘 시대에 네트워크 환경 분석은 어렵지 않은 일이다. 네트워크 시간을 분석해서 로딩을 보여주지 않는다면 대부분 유저의 사용자 경험을 개선할 수 있다.

 

 

유튜브 쇼츠

예시 링크

 

내부 코드를 보기게 쉽지 않아서.. 네이버 쇼츠와 다른점만 몇가지 살펴보겠다.

 

동영상 목록 api 살펴보기

- 처음에는 목록 api를 16개, 이후에는 11개씩 불러온다.
- 마지막 동영상을 볼 때 more api를 호출한다.

 

- 유튜브도 마찬가지로 마지막 동영상에 가서야 목록 api를 호출한다.

- 조금 더 미리 불러오면 사용성에 약간의 이점이 있다고 생각하는데.. 뭐 사실 큰 차이는 없다. 이정도의 최적화는 유튜브에서도 필요없나보다.

- 아니면 불필요한 api를 막기 위해서일지도 모른다.

- 유튜브같은 전 세계가 사용하는 서비스는 1%의 사용량만 늘어도 비용차이가 어마어마할테니까 말이다.

 

썸네일 불러오는 방법

- 목록 api를 호출할 때 썸네일도 모두 불러온다.

 

동영상

- 불러온 모든 동영상 개수만큼 ytd-reel-video-renderer라는 dom 태그가 생긴다.
- 이 태그는 100개가 넘어도 제거하지 않는다.
- 동영상은 네트워크 탭에서 안보인다.. video태그를 봐도 blob으로 들어가있고 서비스 워커를 쓰는 등 일반적인 방법으로는 볼 수 없는 듯 하다.

 

- 어차피 video태그를 비롯한 무거운 dom은 제거하기 때문에 아무리 많아져도 성능상 문제가 없기 때문에 굳이 제거하지는 않는 것 같다.

 

좋은점

- 로딩 UI가 없다.(pc 기준)

  - 로딩이 있다고 항상 좋은 건 아니다. 특히 동영상같은 경우는 썸네일이 보인다면 동영상이 로딩중이라는건 대부분의 유저가 직관적으로 알고 있다. 또한 최적화할만큼 한 유튜브 동영상이 재생이 안되는 정도면 다른 웹도 느릴거라서 네트워크 환경이 나쁜 경우는 고려하지 않는 것 같다.

(로딩 UI가 앱에도 없어도 될까? 라고 생각해서 이후에 확인해보니 앱에서는 초기 n초간 로딩을 보여주지 않고 그 이후에 로딩을 보여준다. 앱과 웹의 특성을 고려해 다른 선택을 한 것으로 보인다.)

- 스크롤하는중에 동영상이 실행된다.

  - 사소한 차이일지도 모르지만 나는 크게 느껴진다.

- 다음 동영상을 미리 불러온다.

후기

다른 서비스를 살펴보니까 꽤 재밌다. 도움도 많이 되었다. 앞으로도 이 시리즈의 글을 몇개 더 써봐야겠다.