AI 영상 시청 플랫폼

로그인한 시청자가 첫 화면에서 지금 이어보기 중인 회차와 오늘의 편성 섹션, 새 회차 알림을 바로 봅니다. 시네마와 쇼츠 두 축이 같은 화면에 놓이고 포스터 사진이 중심이 됩니다.

• Express 홈 조합 엔드포인트에서 재생 위치·편성 섹션·새 회차 알림을 한 번에 응답
• Prisma 관계 조회로 시청 이력과 작품·회차를 묶고 연령 등급 조건을 서버에서 필터
• 편성 섹션 순서를 데이터로 받아 화면 구성이 코드 수정 없이 바뀌는 구조 설계

운영자가 정한 편성 순서와 시청자의 이어보기 위치를 한 응답으로 조합해, 첫 화면이 사람마다 다른 실제 장면이 되도록 설계합니다.

장르·분위기 분류와 AI 제작방식·사용 도구 칩을 조합해 작품 목록을 거릅니다. 작품을 누르면 소개·회차·창작자 정보·공개 가능한 AI 제작정보가 담긴 상세 대화상자가 열립니다.

• 표준 코드 기반 다중 선택 칩과 URL 쿼리 동기화로 필터 상태 공유 구조 설계
• PostgreSQL 조합 조건 쿼리와 키워드 검색을 하나의 목록 API로 통합
• 시리즈·회차 목록과 창작자 채널 이동을 작품 상세 한 화면에 묶는 컴포지션 설계

장르·키워드·AI 제작정보를 조합하는 검색을 표준 코드 필터로 단순화해, 검색엔진 도입 여부를 나중에 결정할 수 있는 구조로 설계합니다.

세로 화면에서 다음 영상으로 넘어가며 좋아요·공유·창작자 팔로우를 누릅니다. 다음 영상을 미리 불러와 끊김 없이 이어지는 흐름을 보여 줍니다.

• Intersection Observer로 화면에 들어온 쇼츠만 재생하고 나머지는 일시정지하는 구조
• 다음 영상 1개를 미리 불러오는 프리로드 큐와 hls.js 적응형 화질 전환 설계
• 재생·완주·이탈 이벤트를 배치로 묶어 전송하는 이벤트 수집 모듈 구현

화면에 보이는 영상만 재생하는 윈도우 구조와 이벤트 배치 전송을 결합해, 연속 재생 흐름과 시청 데이터 수집을 같은 모듈에서 처리하도록 설계합니다.

이어보기·찜·재생목록·시청 이력과 구독 상태를 탭으로 모아 봅니다. 구독 해지와 환불 요청, 무료 이용자의 광고 안내까지 한 화면에서 확인합니다.

• 재생 요청 시 구독·무료·시청 제한을 확인하고 만료 시각이 있는 임시 재생 주소를 발급하는 API 설계
• 정기결제 PG 연동 인터페이스와 구독 상태 머신(시작·갱신·해지·만료·환불) 설계
• DRM 라이선스 발급은 연동 인터페이스와 권한 구조 수준으로 추상화해 서버 계약만 정의

구독 상태 머신과 재생 권한 판정을 한 모듈에 두어, 웹 결제와 후속 앱 인앱 구독이 같은 권한 규칙을 공유하는 구조로 설계합니다.