풀스택 플랫폼로 돌아가기
영상 스트리밍 플랫폼

영상 스트리밍 플랫폼

Netflix 스타일의 YouTube 콘텐츠 스트리밍 플랫폼. Shorts(1~3분)와 Regular(5~30분) 듀얼 콘텐츠 시스템, 관리자 CMS, 실시간 채팅까지 갖춘 풀스택 OTT 서비스입니다.

프로젝트 개요

YouTube 콘텐츠를 Netflix처럼 큐레이션하여 시리즈 단위로 몰아보기할 수 있는 OTT 스트리밍 플랫폼입니다. Shorts(1~3분, 세로형)와 Regular(5~30분, 가로형) 두 가지 콘텐츠 타입을 지원하며, 각각 고유한 색상(빨강/파랑)과 카드 레이아웃으로 시각적으로 구분됩니다. 히어로 배너, 수평 스크롤 콘텐츠 섹션, 에피소드 자동 연속 재생 등 Netflix UX를 충실히 구현했으며, 관리자 CMS에서 시리즈·에피소드·배너·섹션·태그·광고를 통합 관리합니다. Socket.io 실시간 채팅, Redis 기반 세션 관리, Sentry 에러 모니터링까지 프로덕션 수준의 인프라를 갖추고 있습니다.

주요 기능

Netflix 스타일 홈페이지 & 콘텐츠 탐색

대형 히어로 배너와 수평 스크롤 콘텐츠 섹션으로 구성된 넷플릭스 스타일 홈페이지입니다. '신규 콘텐츠', '이어서 시청하기', '회원님을 위한 추천', '인기 콘텐츠' 등 다양한 섹션이 자동으로 콘텐츠를 분류하여 표시합니다.

시리즈 카드에 마우스를 올리면 200ms 딜레이 후 호버 오버레이가 나타나며, Shorts는 빨간색, Regular은 파란색 그림자로 콘텐츠 타입을 직관적으로 구분합니다. 진행률 바가 카드 하단에 표시되어 시청 중인 콘텐츠를 한눈에 파악할 수 있습니다.

몰입형 비디오 플레이어 & 에피소드 네비게이션

YouTube iframe Player API를 활용한 듀얼 레이아웃 비디오 플레이어입니다. Regular 콘텐츠는 가로형 16:9 플레이어와 우측 에피소드 사이드바를, Shorts는 세로형 플레이어를 제공합니다.

에피소드 목록에서 현재 재생 중인 에피소드가 빨간색으로 강조되고, 자동 다음 에피소드 연속 재생을 지원합니다. 하단에는 시리즈 설명, 크리에이터 정보, 공유 버튼, '비슷한 시리즈' 추천 섹션이 배치되어 있어 끊김 없는 시청 경험을 제공합니다.

미니 플레이어 (PiP) 멀티태스킹

영상을 시청하면서 다른 콘텐츠를 탐색할 수 있는 Picture-in-Picture 미니 플레이어입니다. 화면 우하단에 고정된 미니 플레이어에서 재생 제어(재생/일시정지, 다음 에피소드, 볼륨, 배속, 전체화면)가 가능하며, 프로그레스 바로 재생 위치를 조절할 수 있습니다.

사용자가 홈페이지나 카테고리 페이지를 자유롭게 탐색하는 동안에도 영상 재생이 중단되지 않아 몰입감을 유지합니다.

관리자 대시보드 & 실시간 분석

콘텐츠 운영 현황을 한눈에 파악하는 관리자 대시보드입니다. 상단에 전체 시리즈(240개), 전체 에피소드(3,846개), 총 조회수, 가입자 수, 오늘 방문자, 총 재생시간 등 핵심 KPI가 표시됩니다.

주간 활동 추이(시리즈·사용자·시청 라인 차트), 이번 주 활동(신규 사용자·신규 시리즈·시청 기록), 콘텐츠 타입 분포(도넛 차트), 인기 콘텐츠 Top 5(바 차트), 방문자 추이(7일), 인기 시리즈 Top 5(최근 7일) 등 Recharts 기반의 다양한 분석 위젯을 제공합니다.

시리즈 & 에피소드 CMS

새 시리즈를 생성하고 에피소드를 관리하는 콘텐츠 관리 시스템입니다. 시리즈 타입(Shorts/일반 영상) 선택, 썸네일 업로드(파일 드래그 앤 드롭 또는 URL 입력), 크리에이터 정보, 유튜브 채널 URL, 시즌 접두사, 한줄 소개, 상세 설명, 태그(최대 10개)를 설정합니다.

NEW 표시(등록 7일 후 자동 해제), 에디터 PICK 추천, 즉시 발행 옵션을 지원하며, 저장 후 바로 에피소드 추가 화면으로 연결되어 빠른 콘텐츠 등록이 가능합니다.

홈 섹션 관리 시스템

홈페이지에 표시될 콘텐츠 섹션의 구성과 순서를 관리하는 시스템입니다. '이어서 시청하기', '신규 콘텐츠', '회원님을 위한 추천' 등 시스템 섹션과 '드라마', '영화', '게임', '여행 브이로그' 등 커스텀 카테고리 섹션을 드래그 앤 드롭으로 자유롭게 배치합니다.

각 섹션의 활성/비활성 토글, 로그인 필요 여부, 최대 표시 개수를 개별 설정할 수 있으며, 운영자가 코드 변경 없이 홈페이지 레이아웃을 실시간으로 조정할 수 있습니다.

시리즈 통합 관리

240개 이상의 시리즈를 효율적으로 관리하는 어드민 시리즈 목록입니다. 시리즈 검색, 콘텐츠 타입 필터(전체/Shorts/Regular), 상태 필터(전체/발행됨/비공개), 정렬(최신순/오래된순/인기순) 기능을 제공합니다.

각 시리즈 행에 썸네일, 제목, 크리에이터, 타입 배지, 에피소드 수, 조회수, 발행 상태, 수정일이 표시되며, 컨텍스트 메뉴로 편집·복제·삭제 작업을 빠르게 수행할 수 있습니다.

실시간 채팅 시스템

Socket.io 기반의 실시간 채팅 위젯입니다. 화면 우하단에 떠 있는 채팅 버블을 클릭하면 채팅 패널이 열리며, 현재 접속자 수가 실시간으로 표시됩니다.

메시지는 발신 시각과 함께 말풍선 형태로 표시되고, 설정 아이콘으로 알림 및 표시 옵션을 조정할 수 있습니다. Redis를 세션 스토어로 활용하여 서버 재시작 시에도 채팅 세션이 유지됩니다.

스마트 검색 엔진

가중치 기반 검색 알고리즘으로 제목(3배), 태그(2배), 크리에이터(1배) 가중치를 적용하여 관련도 순으로 결과를 정렬합니다. 500ms 디바운스로 입력 성능을 최적화하고, localStorage에 최근 검색어를 저장합니다.

YouTube API 규정 준수

YouTube iframe Player API Terms of Service를 엄격히 준수합니다. YouTube 로고 표시, 'Watch on YouTube' 링크, 플레이어 컨트롤 활성화, 풀스크린 허용 등 모든 필수 요건을 충족합니다.

진행률 추적 & 이어보기

시청 진행률을 자동 저장하여 중단한 지점에서 바로 이어볼 수 있습니다. 에피소드 완료 시 자동으로 다음 에피소드로 연결되며, 홈 '이어서 시청하기' 섹션에서 미완료 콘텐츠를 모아볼 수 있습니다.

반응형 모바일 UI

모바일(< 768px), 태블릿(768~1023px), 데스크톱(≥ 1024px) 세 단계 반응형 디자인을 적용했습니다. 모바일에서는 터치 최적화 스와이프 스크롤과 햄버거 메뉴를, 데스크톱에서는 호버 효과와 화살표 네비게이션을 제공합니다.

Tech Stack

Next.js 15React 19TypeScriptPrismaPostgreSQLNextAuthRedisSocket.ioDockerSentry

Highlights

  • Shorts + Regular 듀얼 콘텐츠 타입 시스템
  • 240+ 시리즈·3,800+ 에피소드 관리 CMS
  • Socket.io 실시간 채팅 & Redis 세션 관리

Architecture

Next.js 15 App Router / React 19 / TypeScript 5 / Prisma 6 + PostgreSQL / NextAuth v5 JWT 인증 / Redis (ioredis) 세션 스토어 / Socket.io 실시간 채팅 / YouTube iframe Player API / Tailwind CSS v4 디자인 시스템 / Recharts 분석 차트 / Sentry 에러 모니터링 / Docker 컨테이너 배포 / 240+ 시리즈 · 3,800+ 에피소드 운영