[Project] Youtube Party 만들기 - 프로젝트 주제, 컨셉

프로젝트 주제

넷플릭스 파티, 유튜브 파티라는 브라우저 확장 프로그램이 있다.

친구와 함께 같은 영상을 보며 채팅을 할 수 있는 프로그램인데, 재생바를 이동하는 등 영상의 싱크도 맞출 수 있다.

 

이걸 확장 프로그램이 아니라 사이트로 구현해보고 싶다는 생각이 들었다.

그리고 넷플릭스 / 유튜브 파티를 쓰면서 느꼈던 몇 가지 문제점을 어떻게 해결할 수 있을까 고민해보고 싶기도 했다.

 

기존의 유튜브 파티 확장 프로그램 분석

가장 유명한 두 가지 프로그램을 사용하고 아쉬운 점을 분석해봤다.

 

1. 모두가 컨트롤 권한을 가지도록 구현된 프로그램(youtube party)을 사용해보니 무심코 이동하거나 정지를 누르는 경우 신호가 가서 불편하다. 공평하다는 장점이 있지만 역시 방장만 컨트롤 가짐 옵션은 꼭 넣어야 하는 듯
2. Teleparty는 방장이 나가면 단일 이용자가 컨트롤할 수 없게된다. 방장을 기준으로 싱크를 맞추다가 방장이 나가면 남은 사용자끼리 서로 참조해서 싱크를 맞추기 때문에, 재생바 이동해도 다시 돌아가서 모두가 옴짝달싹 못하게 된다. 그리고 방을 생성하는 시점에만 옵션을 선택할 수 있어서 중간에 못바꾼다.
3. 다른 영상을 틀기 위해 검색 화면으로 이동하는 동안 다른 사람들은 영상이 왜 멈췄는지 알지 못하고 기다려야 한다.
   / 혹은 다른 영상을 틀면 가끔 오류가 생겨서 방에서 나가진다.

 

문제 개선을 위해 구현해야 하는 기능들

브라우저 확장 프로그램의 한계로 아주 섬세하게 기능을 넣을 수는 없었다고 생각한다.

이를 해결하기 위한 목표는 다음과 같다.

1. 컨트롤 권한을 '모두가 가지기', '방장만' 옵션을 선택할 수 있게 한다.
2. 방장이 나가면 다음 사람이 방장이 되도록 하고, 방장 권한을 명시적으로 넘겨줄 수 있는 기능도 추가 - disconnect되었다고 바로 권한 다음사람에게 넘겨주는게 아니라 새로고침을 잘못 눌렀을 경우도 있기 때문에, 몇 초 안에 재접속하면 그대로 방장 권한 유지하도록 할 필요 있음
3. 다른 영상 틀기를 유튜브의 UI를 이용하지 않고 영상을 보던 페이지에서 바로 할 수 있게 하기. - 유튜브 영상은 iframe으로 보여주고 새 영상 트는 것은 링크를 input에 붙여넣는 것으로 하자.

 

기본 목표

소켓통신 채팅방을 구현하고,

input에 링크 붙여넣으면 iframe으로 유튜브 영상 불러오기,

새 영상 틀기, 재생, 멈춤, 재생바 이동 기능 - 일단 모든 사용자가 권한을 가지도록

싱크 맞추기

 

이 정도만 구현한 다음 위의 목표대로 고도화를 해 볼 예정이다.

설령 문제를 개선하지 못했다고 해도 기존 유튜브 파티를 그대로 재현하기만 해도 충분히 성공한 셈이다.

소켓통신, Nextjs, REST API가 아닌 소켓통신 서버 만들기는 처음이니까~

 

 

필요한 기술 공부

프로젝트를 시작하기 전에 필요한 지식을 공부해봤다.

소켓 통신

• 소켓통신, 네임스페이스, 방 생성 - https://poiemaweb.com/nodejs-socketio
•  소켓통신 모듈 만들기 - 깃허브에서 참고하기에 좋은 코드를 발견. 소켓 통신의 기초 동작을 함수로 만들고 그것을 응용한 핸들러 함수를 만드는 패턴.
  
  

Nextjs

노마드코더 Nextjs 강의 (무료)

NextJS 시작하기 – 노마드 코더 Nomad Coders

 

유튜브 iframe API

• youtube iframe API 문서
• react-youtube 라이브러리