시네마지옥 (매불쇼)
매주 스스로 갱신되는 넷플릭스 스타일 아카이브
| 항목 | 내용 |
|---|---|
| 만든 사람 | 디온웍스 대표 (네이티브 바이브 코더) |
| 사용 도구 | Claude Code + Next.js 16 + Supabase + TMDB API + Gemini 2.5 Flash |
| Live Demo | hell.d-onworks.com |
프로젝트 소개
즐겨 듣는 라디오에서 DJ가 좋은 노래를 소개해 주면, 그 순간엔 "오, 나중에 들어봐야지" 하죠. 그런데 방송이 끝나면 제목이 기억 안 나요. 누군가 그 방송의 추천곡만 쏙쏙 뽑아서 플레이리스트로 만들어 준다면 얼마나 좋을까요.
시네마지옥은 그 플레이리스트의 영화 버전이에요. 팟캐스트 '매불쇼'의 영화 코너 "시네마지옥"에서 패널들이 추천한 영화·시리즈를 회차별로 자동 수집해서 아카이브(기록 보관소)로 만든 사이트입니다. 어느 회차에서 전찬일·정보석·라이너·거의없다 같은 패널이 어떤 작품을 추천했는지, 포스터와 함께 한눈에 볼 수 있어요.
제가 매불쇼 애청자 인데, 운전하면서 듣다 보면 추천 영화를 늘 놓쳤거든요. "이거 누가 정리 안 해 주나?" 하다가, 코딩 한 줄 모르는 제가 클로드 코드와 대화하면서 직접 만들었습니다.
주요 기능
- 회차별 아카이브 — 매불쇼 시네마지옥 코너의 회차마다 추천작을 포스터와 함께 진열
- 패널 배지 — 포스터마다 "누가 추천했는지" 패널 이름 배지가 붙음
- 히어로 배너 — 최신 회차의 대표작을 화면 가득 배경으로, "유튜브에서 시청" 버튼까지
- 예고편 모달(화면 위에 뜨는 작은 재생 창) — 포스터를 누르면 그 자리에서 예고편 재생
- 검색 — 제목·국적·장르로 649편 중에서 바로 찾기
- 자동 갱신 — 홈 화면이 10분마다 스스로 새 데이터를 반영 (ISR)
- 무인 운영 — 매주 토요일 아침 AI 비서(Hermes)의 cron(정해진 시각에 자동 실행되는 예약 작업)이 새 영상 분석→수집→게재까지 사람 손 없이 처리
넷플릭스 스타일을 어떻게 재현했나요?
새로 가게를 열 때, 간판부터 진열대까지 전부 처음 보는 방식이면 손님이 헤매요. 반대로 편의점 진열 방식을 그대로 따르면 설명이 필요 없죠. 어느 편의점에 가도 음료는 냉장고에, 계산대는 입구 옆에 있으니까요.
영화 사이트의 "편의점 진열 방식"은 누가 뭐래도 넷플릭스입니다. 전 국민이 이미 사용법을 알고 있는 화면 문법(레이아웃 관습)이에요. 그래서 시네마지옥은 넷플릭스의 문법을 그대로 빌렸습니다.
| 넷플릭스 문법 | 시네마지옥 구현 |
|---|---|
| 상단 풀블리드 배너 (화면 가득 대표작) | 최신 회차 대표작 배경 + 날짜 배지 + 제목 + "유튜브에서 시청" 버튼 |
| 가로 스크롤 포스터 줄 | 회차 하나 = 포스터 한 줄 (EpisodeRowScroller · MovieRow · MovieCard 라는 화면 부품 3개) |
| 포스터 클릭 → 상세/예고편 | TrailerModal 이라는 부품이 예고편을 즉시 재생 |
| 다크 테마 | 검은 배경 + 붉은 로고 |
여기에 넷플릭스에 없는 것 하나를 얹었어요. 바로 패널 배지입니다. 포스터마다 "이 작품은 라이너가 추천했어요" 같은 배지가 붙어요. 매불쇼 팬에게는 "누가 추천했는가"가 작품만큼 중요한 정보거든요.
재미있는 건, 제가 CSS(화면 꾸미는 코드)를 한 줄도 못 쓴다는 거예요. 클로드 코드에게 "넷플릭스처럼 상단에 큰 배너, 아래에 회차별로 포스터가 가로로 흐르게 해줘"라고 말로 설명하니, Tailwind CSS와 framer-motion(부드러운 움직임을 담당하는 라이브러리)으로 알아서 조립해 줬습니다.
포스터는 어디서 오나요? — TMDB API
이 사이트의 얼굴은 영화 포스터인데, 포스터 이미지를 649장이나 제가 직접 구했을까요? 아니요. TMDB가 다 해줬습니다.
TMDB(The Movie Database)는 전 세계 자원봉사자들이 함께 만드는 영화 백과사전이에요. 그리고 이 백과사전은 API(프로그램끼리 데이터를 주고받는 창구)를 무료로 열어 두고 있습니다. 도서관 사서에게 "기생충이요"라고 제목만 말하면, 포스터·줄거리·장르·개봉연도가 적힌 카드를 착 꺼내 주는 것과 같아요.
시네마지옥에서는 src/lib/tmdb.ts 파일 하나가 이 사서 역할을 합니다.
- 정보 조회 —
https://api.themoviedb.org/3에 작품 제목으로 검색을 요청 - 포스터 이미지 —
https://image.tmdb.org/t/p라는 TMDB 이미지 CDN(전 세계에 이미지를 빠르게 뿌려 주는 배달망)에서 바로 가져옴
그러니까 우리 사이트에는 포스터 파일이 한 장도 저장되어 있지 않아요. "이 작품의 포스터 주소"만 기억해 두면, 화면을 열 때마다 TMDB가 이미지를 직접 배달해 줍니다. 저장 공간 걱정도, 저작권 걱정도 크게 줄어들죠.
데이터는 어떻게 모았나요? — 자막을 읽는 AI 파이프라인
이 사이트의 진짜 심장은 데이터 파이프라인(데이터가 흘러가는 자동 조립 라인)이에요. 사람이 방송을 다시 들으면서 받아 적은 게 아니라, AI가 유튜브 자막을 읽고 추천작 리스트를 뽑아냅니다.
YouTube Data API (회차 목록) → youtube-transcript (자막 추출)
→ Gemini가 자막 분석 → 추천작 리스트 → TMDB 검색으로 작품 매칭 → Supabase 저장
1단계 — YouTube API로 회차 목록 받아오기
유튜브는 개발자용 공식 창구인 YouTube Data API를 열어 두고 있어요. "이 재생목록에 어떤 영상이 있어?"라고 물으면 영상 제목·업로드 날짜·설명글을 50개씩 묶어 돌려줍니다. 시네마지옥은 매불쇼의 시네마지옥 재생목록 주 소 하나만 등록해 두고, 이 창구로 전체 회차 목록을 끝까지 자동으로 넘겨받아요. 영상 설명글에서는 그 회차에 출연한 패널 명단을, 영상 제목에서는 그 주의 신작 제목을 미리 뽑아 둡니다.
2단계 — 자막 통째로 가져오기
회차마다 유튜브 자막(트랜스크립트)을 youtube-transcript라는 도구로 통째로 내려받습니다. 긴 방송이라 자막이 수만 자 분량인데, 이게 AI가 읽을 "원고"가 돼요.
3단계 — Gemini가 자막을 읽고 영화 리스트 뽑기
가장 재미있는 단계예요. Gemini 2.5 Flash(구글의 빠른 AI 모델)에게 자막 전문을 주면서, 자유롭게 요약하라는 게 아니라 정해진 답안지 양식에만 채우도록 시킵니다. 답안지 칸은 두 가지예요.
- 이번 주 신작 — 패널마다 추천 / 비추천 / 중립 중 어느 입장이었는지까지 기록
- 패널별 본인 추천작 — 각 패널이 자기 코너에서 들고 온 작품 목록
여기서 실전 노하우가 하나 들어갑니다. 패널들은 방송에서 서로를 별명으로 불러요. "칸찬일", "찬일이 형"은 전찬일이고, "거없"은 거의없다죠. 이런 별명 매핑 규칙과 "음성인식 오타는 상식적으로 보정해라" 같은 규칙을 프롬프트에 문장으로 적어 줬습니다. 코드가 아니라 한국어 지시문으로요. 이게 바이브 코딩의 재미있는 지점이에요 — 까다로운 예외 처리를 말로 해결합니다.
4단계 — TMDB 매칭 후 저장
Gemini가 뽑은 제목을 TMDB 검색(search/multi)에 넣어 정확한 작품 정보와 짝을 맞추고, 회차·추천작·패널 정보를 Supabase(클라우드 데이터베이스)에 차곡차곡 쌓습니다.
과거 100회차를 한 번에 처리한 백필(과거 데이터 소급 입력) 실측 기록이 남아 있어요:
| 항목 | 수치 |
|---|---|
| 100회차 전체 처리 시간 | 28분 23초 |
| 자막 추출 성공률 | 97.8% (89/91 — 실패 2건은 비공개 영상) |
| 추출된 영화·시리즈 | 649편 (회차당 평균 7.3편) |
| TMDB 자동 매칭률 | 71.5% (464편) |
사람이 손으로 했다면 몇 주짜리 일이 커피 한 잔 마시는 사이에 끝난 거예요.
그런데 저 **71.5%**라는 숫자를 눈여겨봐 주세요. AI가 100%를 못 채웠다는 뜻이거든요. 패널이 "그 왜, 봉준호 초기작 있잖아요" 식으로 말하면 AI도 헷갈립니다. 그래서 자동 매칭에 실패한 나머지 작품은 관리자 화면(/admin/match)에서 제가 직접 짝을 맞춰요. 7할은 기계에게, 3할은 사람에게 — 처음부터 이렇게 설계하니 자동화가 오히려 편해졌습니다.
매주 토요일, 사람 없이 굴러갑니다
이 사이트의 진짜 자랑은 여기예요. 위의 파이프라인이 일회성 작업이 아니라, 매주 스스로 돌아가는 무인 시스템이라는 것.
매불쇼 시네마지옥 영상은 매주 금요일에 올라옵니다. 그러면 토요일 아침 9시, 제 맥에서 상주하는 AI 비서 Hermes의 cron(정해진 시각에 자동 실행되는 예약 작업)이 수집 스크립트를 깨워요. 그 다음은 전부 자동입니다.
금요일: 새 영상 업로드
↓
토요일 09:00 (Hermes cron 자동 실행)
새 회차 감지 → 자막 분석 → 추천작 리스트 추출 → TMDB 매칭
→ 사이트 게재 (10분 안에 홈 화면 반영)
↓
토요일 09:0X: 텔레그램으로 "이번 주 몇 편 수집했어요" 주간 보고 도착
제가 하는 일은 토요일 아침 텔레그램 보고를 읽는 것뿐이에요. 새 회차의 분석·수집·게재가 전부 자동으로 끝나 있습니다. 운영 원칙도 몇 가지 심어 뒀어요.
- 중복 추천도 그대로 게재 — 패널들이 과거에 추천했던 작품을 또 추천하면, 그 회차에도 다시 올라갑니다 (그 주의 방송 내용을 있는 그대로 기록)
- TMDB 매칭 실패작은 최대 3차 재시도 — 원제목 → 정제한 제목 → AI가 제안한 대체 제목 순으로 다시 검색하고, 그래도 못 찾으면 다음 주 cron이 또 시도
- 역할 분리 — 수집 로직은 이 프로젝트 안에만 있고, Hermes는 "토요일 9시에 실행해라"라는 예약만 담당 (서로 의존성 0)
기술 스택
| 영역 | 기술 |
|---|---|
| 프레임워크 | Next.js 16 (App Router) |
| UI | React 19 + Tailwind CSS 4 + framer-motion |
| 회차 수집 | YouTube Data API (재생목록·패널 명단) + youtube-transcript (자막) |
| 영화 데이터 | TMDB API (검색 + 포스터 이미지 CDN) |
| AI | Gemini 2.5 Flash (자막에서 추천작 리스트 추출) |
| 데이터베이스 | Supabase (episodes / recommendations / comments 3개 테이블) |
| 렌더링 | ISR — 홈 화면을 10분(600초)마다 백그라운드에서 재생성 |
| 자동화 | Hermes cron — 매주 토 09시 분석→수집→게재 무인 실행 + 텔레그램 보고 |
ISR(Incremental Static Regeneration)이 낯설 수 있는데, "진열대를 10분마다 정리하는 직원"이라고 생각하시면 돼요. 손님(방문자)은 항상 미리 만들어 둔 빠른 페이지를 받고, 직원이 뒤에서 조용히 새 회차를 채워 넣습니다.
배운 점
- 데이터가 많은 사이트일수록 자동화가 먼저다 — 649편을 손으로 입력할 생각이었다면 시작도 못 했을 거예요. "AI가 자막을 읽게 하자"는 파이프라인 설계 덕분에 100회차가 28분 만에 들어왔습니다
- 100% 자동화에 집착하지 않기 — 자동 매칭 71.5%에서 멈추고, 나머지는 수동 매칭 화면을 만들어 사람 몫으로 남겼어요. 마지막 2할까지 자동화하려 했다면 배보다 배꼽이 커졌을 겁니다
- 익숙한 UI 문법을 빌리면 설명서가 필요 없다 — 넷플릭스 스타일을 그대로 따르니, 처음 온 방문자도 스크롤하고 포스터를 누르는 데 아무 안내가 필요 없었어요
- 외부 API는 공짜 직원이다 — TMDB 덕분에 포스터·줄거리·장르를 한 장도 직접 만들지 않았습니다. 좋은 API를 찾는 눈이 코딩 실력보다 중요할 때가 많아요
이런 분께 추천해요
좋아하는 방송·채널의 콘텐츠를 "나만의 아카이브"로 만들고 싶은 분께 딱 맞는 프로젝트 유형이에요.
- 좋아하는 팟캐스트·유튜브 채널의 열성 팬 — 방송 속 추천 정보(영화, 책, 맛집)를 자동으로 모아 정리하고 싶은 분
- 외부 API 활용이 궁금한 바이브 코딩 입문자 — TMDB처럼 잘 정리된 공개 API로 데이터를 채우는 감각을 익히고 싶은 분
- 넷플릭스 같은 화면을 만들어 보고 싶은 분 — 히어로 배너 + 가로 스크롤 포스터라는 검증된 UI 문법을 직접 재현해 보고 싶은 분
참고 링크
▸개정 이력1건
- v12026-07-12초판