"유튜브파티"의 두 판 사이의 차이

2020년 12월 17일 (목) 05:38 기준 최신판

프로젝트 개요

기술개발 과제

국문 : 영상 동시 재생에 따른 실시간 반응 공유 플랫폼

영문 : Real-time interaction sharing platform for simultaneous video playback

과제 팀명

유튜브파티

지도교수

안상현 교수님

개발기간

2020년 9월 ~ 2020년 12월 (총 4개월)

구성원 소개

서울시립대학교 컴퓨터과학부 20169200** 안*영(팀장)

서울시립대학교 컴퓨터과학부 20179200** 박*영

서울시립대학교 컴퓨터과학부 20169200** 오*영

서울시립대학교 통계학과 20155800** 정*현

서울시립대학교 컴퓨터과학부 20169200** 허*희

서론

개발 과제의 개요

개발 과제 요약

같은 영상을 시청하며 실시간으로 반응을 공유 할 수 있는 웹 서비스
영상의 같은 시간대를 동시 시청 할 수 있도록 동기화
영상을 시청하면서 동시에 채팅으로 반응 공유

개발 과제의 배경

현재 코로나 19로인해 외부에서 만남을 가지는 일이 많이 줄어들었고 장소또한 마련하기가 쉽지가 않다. 그러다보니 실내에 있는 시간이 많아지고 안에서 영상을 보는 빈도가 높아졌다. 하지만 혼자서 영상을 보는 것으로는 평소에 밖에서 했던 사회적 의사소통의 욕구를 충족시키지 못한다. 이 문제를 해결하기 위해 원하는 시간에 다른사람들과 함께 영상을 시청하며 실시간으로 반응을 공유 할 수 있는 플랫폼을 개발하게 되었다.

개발 과제의 목표 및 내용

같은 영상을 시청하며 실시간으로 반응을 공유
모든 사용자가 동시에 영상의 같은 시간대를 시청 할 수 있도록 동기화
여러 개의 영상을 연속해서 보기 위한 영상 큐 제공

개발과제의 기대효과

기술적 기대효과

웹을 기반으로 한 실시간 영상 동기화와 실시간 채팅 등을 제공하는 서비스로 모바일, 태블릿, PC 등의 기기를 가리지 않고 사용할 수 있어 편의성이 뛰어나다.
WebSocket 기술 사용이 용이한 Node.js를 기반으로 서버를 개발함으로써 실시간 반응의 상호 전달과 동영상의 공유와 싱크 조절을 포함하는 개발 목표들의 달성이 보다 순조로울 것이다.
프런트엔드와 백엔드(Express)를 자바스크립트라는 하나의 개발 언어로 통일함으로써 프런트엔드와 백엔드의 결합이 보다 용이해지고 구현 과정에서의 일관성과 개발 효율성이 높을 것으로 예상되며, 향후 유지 보수와 업데이트도 용이할 것으로 기대된다.

경제적, 사회적 기대 및 파급효과

유튜브를 선두로 한 인터넷 동영상 시청 서비스가 기존의 TV의 역할을 잠식하는 현실과 더불어 COVID-19 발생으로 인한 영화관, 콘서트장, 경기장, 극장 이용의 제한으로 사람들 간 문화생활 교류의 단절이 심화되고 있다. 원하는 동영상을 공유하고 싶은 다수의 사람들과 동시에 시청하면서 실시간으로 서로의 반응을 주고받으며, 물리적 거리를 극복하고 사람들의 사회적 교류 욕구를 조금이나마 충족시켜줄 수 있을 것이라 기대된다.
별도의 프로그램, 앱 설치가 필요하지 않으며, 웹을 기반으로 한 서비스이므로 스포츠, 엔터테인먼트, 교육, 홍보, 정보공유 등을 망라하는 다양한 목적을 가진 개인 또는 집단에서 기존 시스템에 비해 가볍고 간편하게 사용할 수 있다.

기술개발 일정 및 추진체계

개발 일정

구성원 및 추진체계

안*영 - 조장
박*영 - 서버 개발
오*영 - 서버 개발
정*현 - 배포
허*희 - 프론트 개발

설계

설계사양

제품의 요구사항

설계 사양

개념설계안

사용자는 스마트폰, PC, 태블릿등의 기기의 웹 브라우저를 통해서 서버에 접속할수 있다.
사용자는 함께 영상을 시청하고 반응을 공유하는 방을 생성할 수 있다.
방 페이지에 들어가면 같은 방에 있는 다른 사용자와 실시간 채팅을 할 수 있다.
방 페이지에서 원하는 유튜브 영상의 주소를 입력하면 해당영상을 볼 수 있다.
영상은 모든 사용자들에게 동기화 되어 보여진다.

유스케이스

Host 역할의 유저: 방을 개설하고 방의 권한을 획득한다. 영상 재생시간의 싱크를 맞출때 기준이 되기도 한다.
Guest 역할의 유저: 이미 개설된 방에 참가한다. Host 역할의 유저를 기준으로 삼아 영상 재생시간의 싱크를 맞춘다.
Youtube Playback API: 프론트에서 재생중인 영상의 정보를 얻어내 싱크를 맞추는데 사용하는 API

기능 구현을 위한 세부기술

채팅 모듈은 웹 소켓을 이용해서 실시간으로 메시지를 주고받는다.
YouTube Data API v3를 활용해 대기 큐에 영상을 추가하고 차례로 재생되는 기능을 구현한다.
웹 소켓을 사용해 실시간과 동기화 기능을 구현
반응형 웹(Responsive Web) 으로 디자인
디자인 통일을 위해 버튼, 아이콘 디자인에 부트스트랩을 사용한다.

상세설계 내용

소프트웨어 설계

각 모듈로 분리하여 나타낸 그림
메인페이지인 로비 모듈은 방 생성과 방 목록을 관리하고 실시간 변화를 감지하고 반영
방 모듈에서 User 리스트와 방 정보를 관리하고 실시간 변화를 감지하고 반영
채팅 모듈은 웹 소켓을 이용해서 실시간으로 메시지를 주고받을 수 있도록 한다.
YouTube Data API v3를 활용해 대기 큐에 영상을 추가하고 차례로 재생하는 기능을 구현한다.
웹 소켓을 사용해 실시간 기능을 구현

시스템 설계

UI Flow

화면 목록

Flow Chart

화면 정의

lobby
joinRoom
room
addVideo
participants
invite

결과 및 평가

완료 작품의 소개

프로토타입 사진 혹은 작동 장면

모바일, 데스크톱, 랩톱, 태블릿 등 인터넷이 사용 가능한 다양한 환경에서 이용가능.

랩톱, 데스크톱 환경에서의 작동

태블릿 환경에서의 작동

모바일 환경에서의 작동

실행 방법 및 작동 화면

설치 방법
- 웹 기반으로 동작 별도의 웹 브라우저가 설치되어 있다면 별도의 설치가 필요하지 않음.
- 대부분의 웹 브라우저 상에서 동작(ex. Chrome, Firefox, Microsoft Edge, etc)
1. 자주 사용하는 웹브라우저를 실행한다..
2. https://youtube-party-demo.herokuapp.com/ 으로 접속한다.
3. 이름과 방 코드, 방 이름(옵션)을 입력하고 접속한다.

메인페이지

메인 페이지에서 접속 정보(이름, 방 코드, 방 제목(옵션))를 입력하고 방을 개설하거나, 개설된 방 목록, 또는 초대 코드를 통해 이름만을 입력하고 이미 존재하는 방에 참가할 수 있다.

방(room1) 개설 후 접속

방에 접속하면 접속한 참가자의 참가를 알리는 알림 메시지가 채팅창에 보인다.

방(room1) 에 여러 사용자들 접속

방에 접속한 참가자들을 ‘참가자’ 버튼을 눌러 확인할 수 있다.

여러 유저들과 실시간 채팅

방에 접속해 있는 참가자들과 실시간 채팅이 가능하다. 각 메시지는 시간별로, 유저별로 구분되어 보여진다.

큐에 새로운 동영상 넣기

영상 아래 존재하는 폼에 영상의 url을 입력하고 ‘대기 목록 추가’ 버튼을 클릭하면 재생 큐에 영상을 추가할 수 있다. 추가된 영상을 목록에서 임의로 제거할 수 있으며, ‘대기 목록 비우기’ 버튼을 통해 목록 전체를 비울 수 있다. 재생 큐 내의 영상을 클릭하여 현재 재생 중인 영상을 바꿀 수 있다. 재생에 들어간 영상은 재생 큐에서 사라진다.

초대 링크 생성하기

‘초대’ 버튼을 클릭하여 초대 링크를 생성하고, 클립보드에 복사하여 공유할 수 있다.

다양한 디바이스에서 실시간 재생 싱크

데스크톱과 랩톱, 태블릿, 스마트폰 등 웹 브라우저에 접속 가능한 모든 기기에서 본 서비스에 접속할 수 있고, 영상 싱크의 실시간 동기화가 이루어진다.

포스터

없음.

완료작품의 평가

향후계획

구현 시 어려웠던 내용들

Youtube Data API v3를 사용해서 영상 queue를 추가하는 기능의 구현.
API 사용자체가 익숙하지 않아서 처음에는 구현이 어려웠고 영상을 재생 여부를 판단하거나 종료되었는지 확인하는 등 재생 큐를 처리함에 있어서 고려해야 할 상황이 예상보다 많았다.
방장의 시점과 동일하도록 모든 사용자의 동영상의 싱크를 맞추는 기능
기본적으로 영상의 재생 시점을 옮길 수 있는 권한은 Host가 가지고 있으며 Host가 재생 시점을 변경시켰을 경우 Guest가 Host의 정보를 받아와서 다시 적용시키는 방식으로 이루어진다. 그러다보니 Host가 아닌 사용자가 영상의 재생 시점을 이동하는 경우 Host와 더 이상 싱크가 맞지 않고 그대로 재생하면 싱크를 이탈 해 버리는데, 이에 대한 해결 방법을 찾는 데 어려움이 있었다. Guest도 Host처럼 영상을 옮긴 사람의 정보를 다른 사용자에게 전달해서 싱크를 맞추는 방법도 생각했으나 사람의 수가 많아질 경우 영상의 원할한 재생에 있어서 문제가 발생했다. 또한 Host가 영상을 배속으로 재생할 경우, 다른 사용자들이 Host의 재생 시점을 따라가지 않는 문제가 발생한다.
Host와 Guest들을 구별하는 기능.
처리해야 할 예외가 생각보다 훨씬 많았다. Host의 연결이 끊어지거나 다른 사람에게 양도하는 경우를 처리할 때도 2번 이상 양도된다거나하는 문제가 발생하지 않도록 구현하는 부분이 어려웠다. 어떠한 순간에 접속이 끊어지더라도 Host와 Guest의 안정적인 관계를 유지 할 수 있는지 예측하기도 어려웠다.
로비에서 생성되어있는 방의 이름, 썸네일을 열람할 수 있도록 하는 기능
각 방이 로비로 자신의 정보를 주기적으로 broadcasting 하도록 구현했는데 기능을 추가 할 때마다 이 구조를 계속 변경하게 되어서 어려웠다. 처음부터 확장성을 고려하고 설계했다면 더 편하게 구현할 수 있었을 것 같다.

향후 개선안

일반 참여자에게 방장이 일부 권한을 부여할 수 있는 기능 추가
현재 영상 싱크의 주체는 방장인데, 방장이 일반 참여자에게 권한을 부여하면 참가자들의 싱크를 방장뿐만 아니라 일반 참여자들을 중심으로 동기화할 수 있도록 하는 기능을 추가하고자 한다. 방장의 일방적인 제어를 벗어나 조금 더 자유로운 상호작용이 가능할 것이라 기대된다.
서비스 내에서 검색을 통해서 재생 큐에 영상을 추가할 수 있도록 하기
영상의 URL을 입력하면 재생큐에 추가하는 방식을 사용하고 있는데, 영상 추가를 위해서 유튜브 등 영상이 존재하는 플랫폼에 한 번 접속한 이후 링크를 가지고 와야 하는 불편함이 있다. 영상 URL을 입력하는 방법 외에도, 서비스 내에서 유튜브 검색창의 형태로 검색해서 재생큐에 바로 추가할 수 있는 기능이 서비스 사용에 편리함을 더해줄 것이라 생각한다.
host와 guest간의 싱크 개선
host가 아닌 유저가 재생 시점을 이동하는 경우, 재생 속도가 달라짐에 따라 싱크가 맞지 않는 경우에 대한 해결 방법을 찾는다.

또한, 현재 동기화 된 재생시점 오차 ±2초 정도의 성능을 보이고 있지만, 컷의 변화가 많은 영상을 시청할 때에는 1, 2초 내에도 컷이 여러 번 변하기 때문에 조금 더 정교한 싱크 기능을 제공하는 것이 좋을 것이라 생각한다.
재생 큐가 끝났음을 알리는 기능
현재 재생 큐의 영상을 모두 재생하고나면 별도의 알림 없이 재생이 종료된다. 재생 큐에 영상이 존재하지 않음을 알림 기능을 통해 알려준다면 지속적인 서비스 사용을 유도할 수 있을 것이다.
UI 개선
통일된 색상의 사용과 버튼 디자인에 부트스트랩을 사용했지만, 내부 요소들의 정렬, 크기를 다듬어 조금 더 완성도 있도록 하겠다. 또한, 채팅창에서 본인의 채팅을 구별해서 볼 수 있도록 하면 채팅 기능의 완성도가 높아질 것이라 생각한다.

특허 출원 내용

없음.

@@ 3번째 줄: / 3번째 줄: @@
 ==프로젝트 개요==
 === 기술개발 과제 ===
-''' 국문 : ''' 00000000..
+''' 국문 : ''' 영상 동시 재생에 따른 실시간 반응 공유 플랫폼
-''' 영문 : ''' 00000000..
+''' 영문 : ''' Real-time interaction sharing platform for simultaneous video playback
 ===과제 팀명===
-..
+유튜브파티
 ===지도교수===
-교수님
+안상현 교수님
 ===개발기간===
-년 3월 ~ 2020년 6월 (총 4개월)
+년 9월 ~ 2020년 12월 (총 4개월)
 ===구성원 소개===
-서울시립대학교 ㅁㅁ공학부·과 2011XXX0** 김*현(팀장)
+서울시립대학교 컴퓨터과학부 20169200** 안*영(팀장)
-서울시립대학교 ㅁㅁ공학부·과 2011XXX0** 정*은
+서울시립대학교 컴퓨터과학부 20179200** 박*영
-서울시립대학교 ㅁㅁ공학부·과 2011XXX0** 조*민
+서울시립대학교 컴퓨터과학부 20169200** 오*영
-서울시립대학교 ㅁㅁ공학부·과 2011XXX0** 이*수
+서울시립대학교 통계학과     20155800** 정*현
-서울시립대학교 ㅁㅁ공학부·과 2011XXX0** 남*송
+서울시립대학교 컴퓨터과학부 20169200** 허*희
 ==서론==
 ===개발 과제의 개요===
 ====개발 과제 요약====
-내용
+* 같은 영상을 시청하며 실시간으로 반응을 공유 할 수 있는 웹 서비스
+* 영상의 같은 시간대를 동시 시청 할 수 있도록 동기화
+* 영상을 시청하면서 동시에 채팅으로 반응 공유
 ====개발 과제의 배경====
-내용
+:현재 코로나 19로인해 외부에서 만남을 가지는 일이 많이 줄어들었고 장소또한 마련하기가 쉽지가 않다. 그러다보니 실내에 있는 시간이 많아지고 안에서 영상을 보는 빈도가 높아졌다. 하지만 혼자서 영상을 보는 것으로는 평소에 밖에서 했던 사회적 의사소통의 욕구를 충족시키지 못한다. 이 문제를 해결하기 위해 원하는 시간에 다른사람들과 함께 영상을 시청하며 실시간으로 반응을 공유 할 수 있는 플랫폼을 개발하게 되었다.
 ====개발 과제의 목표 및 내용====
-내용
+* 같은 영상을 시청하며 실시간으로 반응을 공유
+* 모든 사용자가 동시에 영상의 같은 시간대를 시청 할 수 있도록 동기화
+* 여러 개의 영상을 연속해서 보기 위한 영상 큐 제공
 ===관련 기술의 현황===
 ====관련 기술의 현황 및 분석(State of art)====
 *전 세계적인 기술현황
-내용
+**Node.js
+**:비동기 이벤트 주도 JavaScript 런타임. 확장성 있는 네트워크 애플리케이션을 위해 설계되었다. Non-blocking I/O와 단일 스레드 이벤트 루프를 통해 높은 처리 성능을 보인다. 오늘날 os 스레드가 일반적으로 사용하는 동시성 모델과는 대조적으로, Node.js의 사용자는 프로세스의 교착상태에 대해 걱정할 필요가 없다. Node.js에서 I/O를 직접 수행하는 함수는 거의 없으므로 프로세스는 블로킹 되지 않으며, 확장성 있는 시스템을 개발하는 데 유용하게 사용된다.
+**Express
+**:웹 및 모바일 애플리케이션을 위한 Node.js 웹 애플리케이션 프레임워크. Node.js를 사용하여 쉽게 서버를 구성할 수 있도록 만든 클래스와 라이브리의 집합체이다. Express를 사용하면 Node로만 코드를 작성하는 것보다 효율적으로 서버를 개발할 수 있다.
+**Socket.io
+**:실시간 웹 애플리케이션을 위한 JavaScript 라이브러리. 웹 클라이언트와 서버 간에 실시간 양방향 통신을 가능하게 한다. 브라우저에서 실행되는 클라이언트 측 라이브러리와 Node.js용 서버 측 라이브러리의 두 부분으로 구성된다.
 *특허조사 및 특허 전략 분석
-내용
+** Collaborative streaming of video content(2016출원, US9282068B1)
+**:https://patents.google.com/patent/US9282068
+** System and method for interactive synchronized video watching(2015출원, US9055312B2)
+**:https://patents.google.com/patent/US9055312B2/en
+** Multi-screen video playback system(2012출원, US8264421)
+**:https://patents.google.com/patent/US8264421
+** Streaming playback within a live video conference(2016출원, US9258524B2)
+**:https://patents.google.com/patent/US9258524B2/en
+** Method and system for simultaneous conferencing and interactive display and control of video over a distributed network(2009출원, WO2009048882A1)
+**:https://patents.google.com/patent/WO2009048882A1/en
 *기술 로드맵
-내용
+:[[파일:youtubeParty_기술로드맵.png]]
 ====시장상황에 대한 분석====
 *경쟁제품 조사 비교
-내용
+**Netflix Party
+**: [[파일:youtubeParty_NetflixParty.png|그림 1 Netflix party(출처: https://www.netflixparty.com)]]
+**#친구들과 함께 넷플릭스 영상을 볼 수 있는 서비스
+**#동기화 된 영상 재생과 그룹 채팅 서비스 제공
+**#URL 공유 방식으로만 다른 사용자 초대 가능
+**#데스크톱, 랩톱 컴퓨터에서 구글 크롬 브라우저 확장 프로그램 형식으로만 지원한다.
+**#서비스 특성상 모든 이용자가 넷플릭스 유료 회원이어야 사용 가능
+**#우리가 만들고자 하는 서비스와 가장 비슷하며 유튜브 영상을 사용한다는 점, 웹 서비스 플랫폼으로 배포한다는 점에서 차이가 있다.
+**Youtue Premieres
+**: [[파일:youtubeParty_YoutubePremiere.png|그림 2 Youtube Premieres(출처: https://support.google.com/youtube/answer/9080341?hl=ko)]]
+**#유튜브 채널 개설자가 지정한 영상을 사용자들이 함께 보는 서비스
+**#동기화 된 영상 재생과 그룹 채팅 서비스 제공
+**#URL 공유, 유튜브 서비스 내 검색으로 불특정 다수가 참여 가능
+**#웹, 모바일 앱 등 다양한 플랫폼에서 접근 가능
+**#채널 개설자가 직접 업로드한 영상만 재생 가능하며 비공개로는 재생 할 수 없음
+**#우리가 만들고자 하는 서비스는 유튜브에 이미 업로드 된 영상을 대상으로 한다는 점에서 차이가 있다.
+**카카오TV
+**: [[파일:youtubeParty_KakaoTv.png|그림 3 카카오TV (출처: https://www.kakaocorp.com/service/KakaoTV)]]
+**#카카오 TV에 업로드되어 있는 영상을 카카오톡 채팅방에 공유하고 함께 보는 서비스.
+**#채팅은 카카오톡 채팅을 통해 가능함.
+**#원하는 그룹의 사람들과 동시에 시청이 가능함.
+**#우리가 만들고자 하는 서비스와 달리 영상 시청자 간 영상 싱크가 실시간으로 동기화되지 않는다.
 *마케팅 전략 제시
-내용
+**이미 존재하는 컨텐츠인 유튜브를 사용할 수 있다는 점
+**다른 프로그램 설치 없이 웹 서비스로 이용할 수 있다는 점
+**사용자의 필요에 따라 재생 위치를 자유롭게 변경 할 수 있다는 점
 ===개발과제의 기대효과===
 ====기술적 기대효과====
-내용
+* 웹을 기반으로 한 실시간 영상 동기화와 실시간 채팅 등을 제공하는 서비스로 모바일, 태블릿, PC 등의 기기를 가리지 않고 사용할 수 있어 편의성이 뛰어나다.
+*WebSocket 기술 사용이 용이한 Node.js를 기반으로 서버를 개발함으로써 실시간 반응의 상호 전달과 동영상의 공유와 싱크 조절을 포함하는 개발 목표들의 달성이 보다 순조로울 것이다.
+*프런트엔드와 백엔드(Express)를 자바스크립트라는 하나의 개발 언어로 통일함으로써 프런트엔드와 백엔드의 결합이 보다 용이해지고 구현 과정에서의 일관성과 개발 효율성이 높을 것으로 예상되며, 향후 유지 보수와 업데이트도 용이할 것으로 기대된다.
 ====경제적, 사회적 기대 및 파급효과====
-내용
+*유튜브를 선두로 한 인터넷 동영상 시청 서비스가 기존의 TV의 역할을 잠식하는 현실과 더불어 COVID-19 발생으로 인한 영화관, 콘서트장, 경기장, 극장 이용의 제한으로 사람들 간 문화생활 교류의 단절이 심화되고 있다. 원하는 동영상을 공유하고 싶은 다수의 사람들과 동시에 시청하면서 실시간으로 서로의 반응을 주고받으며, 물리적 거리를 극복하고 사람들의 사회적 교류 욕구를 조금이나마 충족시켜줄 수 있을 것이라 기대된다.
+*별도의 프로그램, 앱 설치가 필요하지 않으며, 웹을 기반으로 한 서비스이므로 스포츠, 엔터테인먼트, 교육, 홍보, 정보공유 등을 망라하는 다양한 목적을 가진 개인 또는 집단에서 기존 시스템에 비해 가볍고 간편하게 사용할 수 있다.
 ===기술개발 일정 및 추진체계===
 ====개발 일정====
-내용
+:[[파일:youtubeParty_개발일정.jpg|500픽셀]]
 ====구성원 및 추진체계====
-내용
+* 안*영 - 조장
+* 박*영 - 서버 개발
+* 오*영 - 서버 개발
+* 정*현 - 배포
+* 허*희 - 프론트 개발
 ==설계==
 ===설계사양===
 ====제품의 요구사항====
-내용
+:[[파일:YoutubeParty 요구사항.JPG|500픽셀]]
 ====설계 사양====
-내용
+:[[파일:YoutubeParty 기능정의.JPG|500픽셀]]
 ===개념설계안===
-내용
+:[[파일:YoutubeParty 개념설계안.jpg|500픽셀]]
+#사용자는 스마트폰, PC, 태블릿등의 기기의 웹 브라우저를 통해서 서버에 접속할수 있다.
+#사용자는 함께 영상을 시청하고 반응을 공유하는 방을 생성할 수 있다.
+#방 페이지에 들어가면 같은 방에 있는 다른 사용자와 실시간 채팅을 할 수 있다.
+#방 페이지에서 원하는 유튜브 영상의 주소를 입력하면 해당영상을 볼 수 있다.
+#영상은 모든 사용자들에게 동기화 되어 보여진다.
-===이론적 계산 및 시뮬레이션===
-내용
+====유스케이스====
+:[[파일:YoutubeParty useCase.png]]
+:*Host 역할의 유저: 방을 개설하고 방의 권한을 획득한다. 영상 재생시간의 싱크를 맞출때 기준이 되기도 한다.
+:*Guest 역할의 유저: 이미 개설된 방에 참가한다. Host 역할의 유저를 기준으로 삼아 영상 재생시간의 싱크를 맞춘다.
+:*Youtube Playback API: 프론트에서 재생중인 영상의 정보를 얻어내 싱크를 맞추는데 사용하는 API
+====기능 구현을 위한 세부기술====
+:[[파일:youtubeParty_YoutubeDataApi.png]][[파일:youtubeParty_SocketIo.png]]
+:*채팅 모듈은 웹 소켓을 이용해서 실시간으로 메시지를 주고받는다.
+:*YouTube Data API v3를 활용해 대기 큐에 영상을 추가하고 차례로 재생되는 기능을 구현한다.
+:*웹 소켓을 사용해 실시간과 동기화 기능을 구현
+:*반응형 웹(Responsive Web) 으로 디자인
+:*디자인 통일을 위해 버튼, 아이콘 디자인에 부트스트랩을 사용한다.
 ===상세설계 내용===
-내용
+====소프트웨어 설계====
+:[[파일:youtubeParty_소프트웨어설계.png]]
+:*각 모듈로 분리하여 나타낸 그림
+:*메인페이지인 로비 모듈은 방 생성과 방 목록을 관리하고 실시간 변화를 감지하고 반영
+:*방 모듈에서 User 리스트와 방 정보를 관리하고 실시간 변화를 감지하고 반영
+:*채팅 모듈은 웹 소켓을 이용해서 실시간으로 메시지를 주고받을 수 있도록 한다.
+:*YouTube Data API v3를 활용해 대기 큐에 영상을 추가하고 차례로 재생하는 기능을 구현한다.
+:*웹 소켓을 사용해 실시간 기능을 구현
+====시스템 설계====
+=====UI Flow=====
+:[[파일:YoutubeParty uiFlow.jpg|500픽셀]]
+=====화면 목록=====
+:[[파일:YoutubeParty 화면목록.JPG|500픽셀]]
+=====Flow Chart=====
+:[[파일:YoutubeParty flowChart.jpg]]
+=====화면 정의=====
+#lobby
+#:[[파일:YoutubeParty 화면정의lobby.JPG|500픽셀]]
+#joinRoom
+#:[[파일:YoutubeParty 화면정의joinRoom.JPG|500픽셀]]
+#room
+#:[[파일:YoutubeParty 화면정의room.JPG|500픽셀]]
+#addVideo
+#:[[파일:YoutubeParty 화면정의addVideo.JPG|500픽셀]]
+#participants
+#:[[파일:YoutubeParty 화면정의participants.JPG|500픽셀]]
+#invite
+#:[[파일:YoutubeParty 화면정의invite.JPG|500픽셀]]
 ==결과 및 평가==
 ===완료 작품의 소개===
 ====프로토타입 사진 혹은 작동 장면====
-내용
+:*모바일, 데스크톱, 랩톱, 태블릿 등 인터넷이 사용 가능한 다양한 환경에서 이용가능.
+:*랩톱, 데스크톱 환경에서의 작동
+:::[[파일:YoutubeParty 프로토타입 com1.jpg|350픽셀]][[파일:YoutubeParty 프로토타입 com2.jpg|350픽셀]]
+:*태블릿 환경에서의 작동
+:::[[파일:YoutubeParty 프로토타입 tab1.jpg|350픽셀]][[파일:YoutubeParty 프로토타입 tab2.jpg|350픽셀]]
+:*모바일 환경에서의 작동
+:::[[파일:YoutubeParty 프로토타입 mob1.jpg|175픽셀]][[파일:YoutubeParty 프로토타입 mob2.jpg|175픽셀]][[파일:YoutubeParty 프로토타입 mob3.jpg|175픽셀]][[파일:YoutubeParty 프로토타입 mob4.jpg|175픽셀]]
+====실행 방법 및 작동 화면====
+:*설치 방법
+:**웹 기반으로 동작 별도의 웹 브라우저가 설치되어 있다면 별도의 설치가 필요하지 않음.
+:**대부분의 웹 브라우저 상에서 동작(ex. Chrome, Firefox, Microsoft Edge, etc)
+:**:[[파일:YoutubeParty 실행방법.jpg|500픽셀]]
+:*#자주 사용하는 웹브라우저를 실행한다..
+:*#https://youtube-party-demo.herokuapp.com/ 으로 접속한다.
+:*#이름과 방 코드, 방 이름(옵션)을 입력하고 접속한다.
+:*메인페이지
+:*: [[파일:YoutubeParty 로비.JPG|500픽셀]]
+ 메인 페이지에서 접속 정보(이름, 방 코드, 방 제목(옵션))를 입력하고 방을 개설하거나, 개설된 방 목록, 또는 초대 코드를 통해 이름만을 입력하고 이미 존재하는 방에 참가할 수 있다.
+:*방(room1) 개설 후 접속
+:*:[[파일:YoutubeParty 새로운 방 생성.JPG|500픽셀]]
+ 방에 접속하면 접속한 참가자의 참가를 알리는 알림 메시지가 채팅창에 보인다.
+:*방(room1) 에 여러 사용자들 접속
+:*:[[파일:YoutubeParty 참가자 확인 창.JPG|500픽셀]]
+ 방에 접속한 참가자들을 ‘참가자’ 버튼을 눌러 확인할 수 있다.
+:*여러 유저들과 실시간 채팅
+:*:[[파일:YoutubeParty 채팅창, 입장 알림.JPG|500픽셀]]
+ 방에 접속해 있는 참가자들과 실시간 채팅이 가능하다. 각 메시지는 시간별로, 유저별로 구분되어 보여진다.
+:*큐에 새로운 동영상 넣기
+:*:[[파일:YoutubeParty 영상 추가2.JPG|500픽셀]]
+ 영상 아래 존재하는 폼에 영상의 url을 입력하고 ‘대기 목록 추가’ 버튼을 클릭하면 재생 큐에 영상을 추가할 수 있다. 추가된 영상을 목록에서 임의로 제거할 수 있으며, ‘대기 목록 비우기’ 버튼을 통해 목록 전체를 비울 수 있다. 재생 큐 내의 영상을 클릭하여 현재 재생 중인 영상을 바꿀 수 있다. 재생에 들어간 영상은 재생 큐에서 사라진다.
+:*초대 링크 생성하기
+:*:[[파일:YoutubeParty 초대 링크 생성 창.JPG|500픽셀]]
+ ‘초대’ 버튼을 클릭하여 초대 링크를 생성하고, 클립보드에 복사하여 공유할 수 있다.
+:*다양한 디바이스에서 실시간 재생 싱크
+:*:[[파일:YoutubeParty 실시간싱크1.jpg|300픽셀]][[파일:YoutubeParty 실시간싱크2.jpg|300픽셀]]
+ 데스크톱과 랩톱, 태블릿, 스마트폰 등 웹 브라우저에 접속 가능한 모든 기기에서 본 서비스에 접속할 수 있고, 영상 싱크의 실시간 동기화가 이루어진다.
 ====포스터====
-내용
+없음.
 ===관련사업비 내역서===
-내용
+:[[파일:YoutubeParty 개발사업비내역서.JPG|500픽셀]]
 ===완료작품의 평가===
-내용
+:[[파일:YoutubeParty 완료작품의평가.JPG|500픽셀]]
 ===향후계획===
-내용
+====구현 시 어려웠던 내용들====
+#Youtube Data API v3를 사용해서 영상 queue를 추가하는 기능의 구현.
+#:API 사용자체가 익숙하지 않아서 처음에는 구현이 어려웠고 영상을 재생 여부를 판단하거나 종료되었는지 확인하는 등 재생 큐를 처리함에 있어서 고려해야 할 상황이 예상보다 많았다.
+#방장의 시점과 동일하도록 모든 사용자의 동영상의 싱크를 맞추는 기능
+#:기본적으로 영상의 재생 시점을 옮길 수 있는 권한은 Host가 가지고 있으며 Host가 재생 시점을 변경시켰을 경우 Guest가 Host의 정보를 받아와서 다시 적용시키는 방식으로 이루어진다. 그러다보니 Host가 아닌 사용자가 영상의 재생 시점을 이동하는 경우 Host와 더 이상 싱크가 맞지 않고 그대로 재생하면 싱크를 이탈 해 버리는데, 이에 대한 해결 방법을 찾는 데 어려움이 있었다. Guest도 Host처럼 영상을 옮긴 사람의 정보를 다른 사용자에게 전달해서 싱크를 맞추는 방법도 생각했으나 사람의 수가 많아질 경우 영상의 원할한 재생에 있어서 문제가 발생했다. 또한 Host가 영상을 배속으로 재생할 경우, 다른 사용자들이 Host의 재생 시점을 따라가지 않는 문제가 발생한다.
+#Host와 Guest들을 구별하는 기능.
+#:처리해야 할 예외가 생각보다 훨씬 많았다. Host의 연결이 끊어지거나 다른 사람에게 양도하는 경우를 처리할 때도 2번 이상 양도된다거나하는 문제가 발생하지 않도록 구현하는 부분이 어려웠다. 어떠한 순간에 접속이 끊어지더라도 Host와 Guest의 안정적인 관계를 유지 할 수 있는지 예측하기도 어려웠다.
+#로비에서 생성되어있는 방의 이름, 썸네일을 열람할 수 있도록 하는 기능
+#:각 방이 로비로 자신의 정보를 주기적으로 broadcasting 하도록 구현했는데 기능을 추가 할 때마다 이 구조를 계속 변경하게 되어서 어려웠다. 처음부터 확장성을 고려하고 설계했다면 더 편하게 구현할 수 있었을 것 같다.
+====향후 개선안====
+#일반 참여자에게 방장이 일부 권한을 부여할 수 있는 기능 추가
+#:현재 영상 싱크의 주체는 방장인데, 방장이 일반 참여자에게 권한을 부여하면 참가자들의 싱크를 방장뿐만 아니라 일반 참여자들을 중심으로 동기화할 수 있도록 하는 기능을 추가하고자 한다. 방장의 일방적인 제어를 벗어나 조금 더 자유로운 상호작용이 가능할 것이라 기대된다.
+#서비스 내에서 검색을 통해서 재생 큐에 영상을 추가할 수 있도록 하기
+#:영상의 URL을 입력하면 재생큐에 추가하는 방식을 사용하고 있는데, 영상 추가를 위해서 유튜브 등 영상이 존재하는 플랫폼에 한 번 접속한 이후 링크를 가지고 와야 하는 불편함이 있다. 영상 URL을 입력하는 방법 외에도, 서비스 내에서 유튜브 검색창의 형태로 검색해서 재생큐에 바로 추가할 수 있는 기능이 서비스 사용에 편리함을 더해줄 것이라 생각한다.
+#host와 guest간의 싱크 개선
+#:host가 아닌 유저가 재생 시점을 이동하는 경우, 재생 속도가 달라짐에 따라 싱크가 맞지 않는 경우에 대한 해결 방법을 찾는다.
+#:또한, 현재 동기화 된 재생시점 오차 ±2초 정도의 성능을 보이고 있지만, 컷의 변화가 많은 영상을 시청할 때에는 1, 2초 내에도 컷이 여러 번 변하기 때문에 조금 더 정교한 싱크 기능을 제공하는 것이 좋을 것이라 생각한다.
+#재생 큐가 끝났음을 알리는 기능
+#:현재 재생 큐의 영상을 모두 재생하고나면 별도의 알림 없이 재생이 종료된다. 재생 큐에 영상이 존재하지 않음을 알림 기능을 통해 알려준다면 지속적인 서비스 사용을 유도할 수 있을 것이다.
+#UI 개선
+#:통일된 색상의 사용과 버튼 디자인에 부트스트랩을 사용했지만, 내부 요소들의 정렬, 크기를 다듬어 조금 더 완성도 있도록 하겠다. 또한, 채팅창에서 본인의 채팅을 구별해서 볼 수 있도록 하면 채팅 기능의 완성도가 높아질 것이라 생각한다.
 ===특허 출원 내용===
-내용
+:없음.