Polymor!

[네이버 라이브 쇼핑]스트리밍 서버 분석 1편 본문

Web

[네이버 라이브 쇼핑]스트리밍 서버 분석 1편

Megan Kim 2021. 2. 19. 14:40

영상 기반의 이커머스 서비스에 관심을 가지게 된지 벌써 6개월이 지났다. 

예상한대로 2021년,  네이버, 쿠팡, 배민 할 것 없이 국내에 내놓아라 하는 IT기업에서 이 서비스를 수면위로 하나 둘 들어내고있다.  그들의 채용 공고만 보아도 앞으로 이 서비스가 얼마나 핫해질지 예상할 수 있다.

 

 

 

 

그리고 또  하나 주목해야할 중국의 '콰이쇼우'라는 중국판 유튜브로 불리는 이 기업. 올 해 2월 드디어 주식시장에 등판하면서 엄청난 주목을 받고 있다. 머지않아 영상 기술이 시장을 장악할 것이고 이에 대한 관심도는 상승할 것이라고 예상한다. 

 

 

 

*오늘은 지난달 첫 서비스를 개시한 국내 라이브 커머스 네이버의 라이브 쇼핑을 이야기 해보고자한다. 기술적인 측면에서 개인적으로 분석해보고 느낀 점들을 작성한 것이니 참고만 하면 좋을 것 같다.

 

 

shoppinglive.naver.com/home

 

네이버 쇼핑라이브

산지에서 해외까지, 생생한 리얼쇼핑

shoppinglive.naver.com

 

출처; Deview 2019

영상 미디어 스트리밍 개념을 잘 이해할 수 있는 그림이니 참고하면 좋을 것 같다.  오늘 주제는 라스트 마일의 HLS over HTTP이다. 

 

 

먼저 html 소스 헤더를 잠깐 살펴보면,

 

async src에 해당하는

https://cdn.jsdelivr.net/npm/hls.js@0.14.16/ 라는 것이 궁금해져서 들어가 봤다.

 

jsdelivr이라는게 무료로 CDN을 제공해주고 이에 필요한 오픈소스같은 것을 제공받고 있는 것같다. 정확히는 모르겠으나 CDN이 대용량 트레픽과 분산서버를 고려할때엔 영상서비스에서 반드시 필요한 것인걸로 알고 있으나 아직은 서비스 초기단계니 크게 비용을 안들이고 있는게 아닐까?하는 생각이 들었다. 

www.jsdelivr.com/

 

jsDelivr - A free, fast, and reliable CDN for Open Source

Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use.

www.jsdelivr.com

 

 

 

 

* 홈 화면

 

처음 홈화면은 210.89.167.4 에 접속해서 일반적인 이커머스 처럼 필요한 정보들을 GET으로 가져오는 것을 볼 수있다.

8064780 등은 홈 화면에서 보여지는 video 들 정보를 가지고 오는 것 같다. 그리고 각각의 LIVE 비디오들이 꾸준하게 스트리밍 되는 것을 확인 할 수 있다. 이때 접속하는 서버가 달라짐을 볼 수 있다. 아래에서 구체적으로 살펴보자.

 

 

* 라이브 스트리밍 

 

총 세가지가 반복되는 것을 볼 수 있다.

 

  • 상품,판매자에 대한 정보 GET 110.XX.XX.XX --> 좋아요나 커멘트 남기면 POST 110.XX.XX.XX
  • chunklist.m3u8  GET 211.XX.XX.XX.XX [영상에 대한 정보]
  • 720.stream.ts GET 211.XX.XX.XX.XX  [실제 영상 데이터]

211.XX.XX.XX은 CDN 서버가 아닐까 싶다. 

 

 

라이브스트리밍과 VOD의 가장 큰 차이점은, 라이브 스트리밍은 계속 GET으로 chunk된 영상을 받아온다.

이는 지난번 포스팅에서 말했던 progressive-download / adapt-download 와 연관되있는 것처럼 보였다.

 

그렇다면 사용되는 프로토콜은? 정답은 HLS 이다.

Content-Type : application/vnd.apple.mpegurl

chunk파일의 확장자 m3u8  - metadata를 가진 manifest 파일

stream파일 확장자 ts 

등을 볼 수 있듯, apple사의 HLS 프로토콜을 사용한다. 

 

mpeg-dash 로 변경하겠다는 이야기를 들은 바가 있는데 아직은 거까지 구현은 안된것 같다. free loyalty기술이 아니다 보니 현실적으로 어려움이 있을 것 같다. 

 

HLS official developer site

더불어 html5 <video> 지원 브라우저라면 <video>태그로 웹페이지를 구성하면 된다. 

 

 

또한가지 주목해볼만한 것은 connection : keep-alive 이다.

엄밀히 말하면 TCP connection을 유지 시켜주는 기능이라 생각하면 된다. 

기본적으로 http는 단방향 프로토콜이다. 그래서 매번 Connection은 끊어지고 새로 생성해야한다. keep-alive의 특징은 연결된 소켓에 I/O access가 마지막으로 종료된 시점부터 지정 time-out 시간동안 access가 없어도 세션이 유지된다는 것이다. 이로 인해 성능이 개선 될 수도 있지만, 정적인 웹서버의 경우는 큰 효과는 없고 또한 여러 Client 동시 접속시 과부하를 일으킬 수 도있다.

 

커넥션 연결시간을 아낄수 있다

 

* VOD 스트리밍 

VOD는 라이브와는 전혀다른 방식으로 영상을 스트리밍하는 것을 한눈에 볼수 있다.

하나의 커넥션으로 지속적으로 받아오는 것을 볼 수 있고

 

content-type : video/mp4 로 우리가 보통 익히 아는 mp4확장자임을 알 수 있다. 

Comments