← 포트폴리오 목록
고전 인문학 영상 구독 플랫폼
고전 인문학 영상 구독 서비스의 핵심 사용자 플로우 — 3페이지 인트로 내러티브, 구독 상태별 잠금/해제가 적용된 5분 영상 플레이어, 위클리 씽스(주간 설문+AI 코멘트)·문장 카드 공유·개인 시청 라이브러리(나의 기)를 React + Node.js 기반으로 설계·구현합니다.
구독 상태 재검증 미들웨어 구현매 영상 재생 요청마다 서버에서 구독 상태를 재검증하는 Express 미들웨어 설계, S3 signed URL 만료 정책 적용
AI 코멘트 생성 파이프라인 설계설문 응답을 Claude API 프롬프트로 전달해 코멘트를 생성하는 비동기 파이프라인 구현, 실패 재시도 큐 설계
문장 카드 이미지 합성 구조 구축Canvas API 기반 클라이언트 이미지 합성 + S3 업로드 2단계 구조 설계, permalink 발급 로직 구현
Overview
프로젝트 개요
고전 인문학 영상 구독 서비스의 핵심 사용자 플로우 — 3페이지 인트로 내러티브, 구독 상태별 잠금/해제가 적용된 5분 영상 플레이어, 위클리 씽스(주간 설문+AI 코멘트)·문장 카드 공유·개인 시청 라이브러리(나의 기)를 React + Node.js 기반으로 설계·구현합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
구독 해지 직후에도 캐시된 재생 URL로 접근 가능한 우회 시나리오를 차단하는 실시간 상태 재검증 로직 설계
AI 코멘트 생성 API 응답 지연이 사용자 경험에 영향을 주지 않
비동기 처리 및 로딩 상태 설계 필요
책장 시각화 컴포넌트가 시청 기록 증가에도 렌더링 성능을 유지하
가상화 및 이미지 lazy-load 전략 필요
문장 카드 이미지 합성 시 한글 타이포 줄바꿈과 브랜드 레이아웃이 다양한 문장 길이에서 깨지지 않도록 대응
구현 내용
핵심 기능 상세
핵심 기능 1
오늘의 인문학 — 인트로 & 영상 감상
3페이지로 이어지는 서사형 텍스트 인트로를 지나 오늘의 5분 고전 인문학 영상으로 자연스럽게 진입하는 감상 플로우를 구현합니다
핵심 기능 2
위클리 씽스
주 1회 짧은 설문에 응답하면 사용자의 답변을 바탕으로 AI 코멘트를 생성해 보여주는 성찰형 화면을 구현합니다
핵심 기능 3
문장 카드 공유
감상한 콘텐츠에서 인상 깊은 문장을 선택해 이미지 카드로 만들고 다운로드·SNS 공유할 수 있는 기능을 구현합니다
핵심 기능 4
나의 기
책장 형태의 시각화로 지금까지 감상한 콘텐츠 기록을 누적해 보여주는 개인 라이브러리 화면을 구현합니다. 시청 기록 테이블을 콘텐츠별로 집계하고, 책 표지 형태의 카드 그리드로 렌더링하는 구조를 설계합니다
구현 과정
프로젝트 진행 단계
STEP 1
콘텐츠·구독 도메인 모델링
콘텐츠·시청기록·구독상태·설문응답 등 PostgreSQL 테이블 설계, Prisma 스키마 정의
STEP 2
영상 스트리밍 & 구독 잠금 API 개발
AWS S3 signed URL 발급, 구독 상태 재검증 미들웨어를 포함한 Express API 24개 구현
STEP 3
인트로·플레이어·아웃트로 UI 개발
React 기반 3페이지 인트로, 영상 플레이어, 위클리 씽스·카드공유·나의 기 화면 구현
STEP 4
AI 코멘트 파이프라인 및 통합 테스트
Claude API 연동 비동기 코멘트 생성, 결제 연동 검증, 크로스 브라우저 테스트 진행
프로젝트 성과
주요 성과
구독 상태 재검증 미들웨어 구현매 영상 재생 요청마다 서버에서 구독 상태를 재검증하는 Express 미들웨어 설계, S3 signed URL 만료 정책 적용
AI 코멘트 생성 파이프라인 설계설문 응답을 Claude API 프롬프트로 전달해 코멘트를 생성하는 비동기 파이프라인 구현, 실패 재시도 큐 설계
문장 카드 이미지 합성 구조 구축Canvas API 기반 클라이언트 이미지 합성 + S3 업로드 2단계 구조 설계, permalink 발급 로직 구현
책장 메타포 라이브러리 컴포넌트 설계CSS 3D transform 기반 책장 그리드 컴포넌트 구현, 시청 기록 집계 쿼리 최적화 설계
Review
기술적 주안점
- 구독 상태를 서버에서 매 재생 요청마다 재검증하는 미들웨어를 구현하여, 클라이언트 조작만으로는 잠금이 풀리지 않는 콘텐츠 보호 구조를 설계합니다
- 설문 응답 → AI 코멘트 생성 → 카드 렌더링까지의 파이프라인을 비동기 처리로 구현하여, 코멘트 생성 지연이 UI 응답성에 영향을 주지 않는 구조를 설계합니다
- 문장 선택부터 이미지 합성, 공유 링크 발급까지의 흐름을 클라이언트 Canvas 렌더링 + 서버 업로드 2단계로 구현하여 응답 속도와 이미지 품질을 동시에 확보하는 구조를 설계합니다
