본 사이트는 파트너스 활동으로 수수료를 받을 수 있으며, 서버 운영과 무료 앱 개발에 사용됩니다. 본 사이트는 파트너스 활동으로 수수료를 받을 수 있으며
서버 운영과 무료 앱 개발에 사용됩니다.
목록으로

유튜브 실시간 구독자 · 조회수 영상 제작 흐름

1

우리가 만들고 싶은 것

이 슬라이드는 유튜브 조회/구독자 추이표 + 애니메이션 영상으로 만드는 전체 흐름을, 초보·전문가 모두 이해할 수 있게 정리한 가이드입니다.

1·2·3 단계로 끝내는
유튜브 실시간 구독자 영상 제작

난이도 B(중급) + C(전문가) 를 한 슬라이드에서 함께 담았습니다.

1️⃣ 데이터 수집

YouTube API + Supabase로 시간별 조회/구독자 스냅샷을 쌓습니다. 채널/영상 단건·배치 조회로 현재 시점 통계를 가져옵니다.

2️⃣ 데이터 구조화

시계열 테이블을 영상 템플릿용 표 데이터로 정제합니다. Supabase pg_cron + 수동 조회로 시간별 스냅샷을 계속 쌓으면서, Remotion 이 읽기 좋은 형태로 가공합니다.

3️⃣ 영상화

Remotion youtube-stats-table 템플릿으로 실시간 구독자 영상을 뽑아 냅니다. 시계열을 표 데이터로 변환해 템플릿과 저장소(GitHub)를 통해 재사용 가능한 파이프라인으로 만듭니다.

1 / 21
2

전체 아키텍처 한눈에 보기

아래 다이어그램은 유튜브 데이터 → Supabase → Remotion → mp4 까지 한 번에 보여줍니다. 초보자는 상단 설명만, 개발자는 하단 기술 키워드를 함께 보시면 됩니다.

YouTube

채널/영상 통계

YouTube Data API
λ

Next.js API

/api/youtube-manager/trends/*

Supabase client
DB

Supabase

시계열 스냅샷

🎬

/video-creator

유튜브 추이 표 템플릿

@remotion/player
📼

Remotion Renderer

/api/video-creator/render → mp4/webm

GitHub (remotion-dev/remotion)

데이터 수집·추적 대상 관리는 /cron-manager 의 조회/구독자 추이 탭에서 합니다.

초보용 한 줄 정리

“유튜브 숫자를 엑셀처럼 저장해 두고, 그 숫자를 이용해 예쁜 영상을 만든다.”

전문가용 키워드

Next.js Route Handler, Supabase 시계열 테이블, 배치 YouTube API 호출, Remotion 컴포지션, 서버 사이드 렌더링.

2 / 21
3

크론 매니저 & TrendsTab 역할

/cron-manager조회/구독자 추이(TrendsTab)는 “어떤 채널/영상을 얼마나 자주 기록할지”를 관리하는 데이터 관제실입니다.

📥 Tracked 추가

  • 채널/영상 URL, 채널 ID(UC…), 영상 ID(11자)를 입력
  • 추가 버튼 1번으로 추적 대상 등록 + 현재 시점 스냅샷 1건 기록

📈 추적 목록 & 시계열 조회

  • 채널/영상별로 시계열 스냅샷 표 조회
  • “채널은 없고 영상만 있는 경우”도 채널 ID로 묶어서 보여줌

심화: /api/youtube-manager/trends/tracked, /snapshots 가 이 데이터를 제공합니다.

3 / 21
4

입력값 → track API 플로우

초보자는 “어떤 걸 입력해도 알아서 채널/영상으로 구분해 준다”고 이해하면 충분합니다. 개발자는 아래 분기 로직을 참고하세요.

  1. 사용자가 채널/영상 URL · 채널 ID · 영상 ID 중 하나를 입력합니다.
  2. buildTrackBody() 가 입력을 분석합니다.
    UC로 시작 & 24자 → channelId / 11자 영문+숫자+_-videoId / 나머지 → url
  3. POST /api/youtube-manager/trends/track 호출
    YouTube API → Supabase 에 스냅샷 1행 insert.

개발자 메모

채널 전용, 영상 전용, URL 입력 세 케이스를 분리 처리하며, 잘못된 조합(둘 이상 동시 입력)은 400 에러로 막아 둡니다.

4 / 21
5

자동·수동 수집과 배치 로직

“30분마다 조금씩, 필요할 때는 즉시”라는 리듬으로 과하지 않게 데이터를 쌓는 것이 핵심입니다.

🔁 자동 수집 (pg_cron)

Supabase pg_cron + Edge Function 이 30분마다 runTrendsRecord(false) 와 동일한 로직을 실행합니다.

🖱️ 수동 조회 버튼

“수동 조회” 버튼은 POST /trends/record {"{"}"force": true{"}"} 를 호출해, 지금 당장 전체 추적 대상을 한 번 더 기록합니다.

배치 수집 시 YouTube API는 ID를 50개 단위로 묶어 호출하며, 최근 30분 내 기록된 채널/영상은 shouldRecordChannel/Video 로 스킵합니다.

자동·수동 수집과 배치 로직 다이어그램
5 / 21
6

시계열 스냅샷 테이블 구조

Supabase 테이블은 “추적 대상 목록 + 시계열 기록”을 한 번에 담당합니다. 엑셀 시트에 시간별로 행을 추가해 나가는 그림을 떠올리면 이해가 쉽습니다.

recorded_at channel_id video_id subscribers views / likes / comments
2026-03-11 01:00 UCxxxx... NULL 49,800 채널 조회수, 영상 수…
2026-03-11 01:00 UCxxxx... 영상ID 영상 조회수, 좋아요, 댓글…

채널 행: channel_id 값 있고 video_id = NULL.
영상 행: video_id 도 함께 저장됩니다.

6 / 21
7

수집 샘플: 영상 n8fdEYaDtfM

앞 슬라이드의 시계열 테이블에 실제로 이렇게 쌓인 모습입니다. 김선태 채널의 영상 n8fdEYaDtfM 기준 샘플입니다.

수집 샘플: 영상 n8fdEYaDtfM
recorded_at views likes comments
2026. 3. 11. 오후 1:30:01 5,852,201 245,275 24,868
2026. 3. 11. 오후 2:00:01 5,855,855 245,323 24,878
2026. 3. 11. 오후 2:30:01 5,859,580 245,370 24,887
2026. 3. 11. 오후 3:00:01 5,864,143 245,435 24,890
2026. 3. 11. 오후 3:30:01 5,867,895 245,481 24,899
2026. 3. 11. 오후 4:00:01 5,871,955 245,541 24,902
2026. 3. 11. 오후 4:30:01 5,876,060 245,601 24,918
2026. 3. 11. 오후 5:00:01 5,879,658 245,671 24,929
2026. 3. 11. 오후 5:30:01 5,882,803 245,733 24,940
2026. 3. 11. 오후 6:00:01 5,887,619 245,798 24,961

이 표가 곧 Remotion 유튜브 추이 표 템플릿으로 들어가는 원본 시계열 데이터입니다.

영상 n8fdEYaDtfM 수집 샘플 시계열 표
7 / 21
8

수집 샘플: 채널 김선태 (UCt-BApVtJGrvF5pCgbiNVeg)

이번에는 채널 단위로 기록되는 예시입니다. 같은 김선태 채널(UCt-BApVtJGrvF5pCgbiNVeg)에 대해 구독자 · 채널 조회수 · 영상 수가 어떻게 스냅샷으로 쌓이는지 보여 줍니다.

수집 샘플: 채널 김선태
recorded_at subscribers channel_views video_count
2026. 3. 11. 오후 3:00:01 1,390,000 14,718,557 2
2026. 3. 11. 오후 3:30:01 1,390,000 14,718,557 2
2026. 3. 11. 오후 4:00:01 1,390,000 14,718,557 2
2026. 3. 11. 오후 4:30:01 1,390,000 14,718,557 2
2026. 3. 11. 오후 5:00:01 1,390,000 14,718,557 2
2026. 3. 11. 오후 5:30:01 1,390,000 14,718,557 2
2026. 3. 11. 오후 6:00:01 1,390,000 14,718,557 2

채널 단위 스냅샷(이 슬라이드)과 영상 단위 스냅샷(이전 슬라이드)을 함께 보면, 같은 시점에 채널 전체 성장대표 영상 성과를 동시에 추적할 수 있습니다.

채널 김선태 구독자·채널 조회수 시계열 스냅샷 표
8 / 21
9

/video-creator 편집기 구조

/video-creator 는 슬라이드 툴과 타임라인 편집기가 합쳐진 영상 편집 웹앱입니다. 편집기에 쓰는 표 데이터는 Supabase 시계열을 조회·가공해 넣습니다. 전체 순서는 뒤의 '실제 워크플로우(13)'에서 정리합니다.

/video-creator 편집기 구조

좌측 — 템플릿 패널

인트로, 슬라이드쇼, 유튜브 추이 표 등 템플릿을 선택해 씬을 추가합니다.

가운데 — 미리보기

@remotion/player 로 현재 씬을 재생하며 애니메이션을 확인합니다.

하단/우측 — 타임라인 & 속성

씬 길이, 효과, 텍스트 등을 조정합니다. Zustand 스토어로 Undo/Redo 50단계 지원.

video-creator 편집기 화면 구조
9 / 21
10

템플릿 → 씬 → 컴포지션 연결

하나의 템플릿 선택이 어떻게 Remotion 컴포지션까지 이어지는지, 한 줄 체인으로 정리합니다.

  1. 1️⃣ TemplateSelector 에서 youtube-stats-table 템플릿 카드를 클릭합니다.
  2. 2️⃣ addScene 이 호출되고, 새 Scene 의 typeyoutube-stats-table 이 들어갑니다.
  3. 3️⃣ VideoPlayer 는 현재 선택된 Scene 의 type 을 받아, 내부 getCompositionConfig() 로 어떤 Remotion 컴포지션을 쓸지 결정합니다.
  4. 4️⃣ RemotionRoot 에 등록된 id="youtube-stats-table" 컴포지션이 선택됩니다.

이 체인이 맞아야 나중에 서버 렌더링 API에서도 project.composition 으로 같은 id 를 사용할 수 있습니다.

10 / 21
11

YoutubeStatsTableComposition 데이터 구조

유튜브 추이 표 템플릿은 한 행 = 한 시점을 나타내는 rows 배열을 입력으로 받습니다.

date subscribers views rate likes comments
03. 04. 01:17 4.9만 ~ 290,000 +1,200 3,100 420

실제 구현에서는 RAW_ROWS 상수와 DEFAULT_YOUTUBE_STATS_ROWS 를 분리해 사용합니다. 이 행 값들은 문자열이므로, 영상 애니메이션을 위해 숫자 파싱과 구간별 보간이 필요합니다(다음 슬라이드).

11 / 21
12

문자열 → 숫자 파싱 & 보간

영상 안에서는 “4.9만”이라는 문자열이 아니라, 프레임마다 숫자가 조금씩 올라가는 애니메이션이 필요합니다. 표 데이터는 문자열인데, 애니메이션은 숫자로 계산해야 하므로 먼저 파싱하고, 그다음 구간별로 보간합니다.

문자열 → 숫자 파싱 & 보간

1단계: 파싱 — 문자열을 숫자로

Supabase/엑셀에서 가져온 값은 "4.9만", "~ 290,000" 같은 문자열입니다. 애니메이션에서 “이전 값과 다음 값 사이를 촘촘히 채우려면” 반드시 숫자(number)로 바꿔야 합니다.

parseCount

구독자·조회수·좋아요·댓글 등 “개수” 문자열 → 숫자.

"4.9만" → 49000

"~ 290,000" → 290000

"-" / "채널 개설" → 0

parseRate

구독률·증감처럼 비율/부호가 붙은 문자열 → 숫자.

"+1,200" → 1200

"3.2%" → 3.2

dateToMinutes

날짜·시간 문자열을 “기준 시점부터 몇 분”인지 하나의 숫자로.

"03. 04. 01:17" → 1,277 (분)

타임라인 상 위치 계산·보간에 사용.

2단계: 보간 — 구간 사이를 촘촘히 채우기

보간(interpolation)이란, “이전 행의 숫자”와 “다음 행의 숫자” 사이를, 프레임마다 비율에 맞춰 나눠 넣는 것입니다. 예: 구독자 49,000 → 50,200 사이를 90프레임(3초)에 걸쳐 선형으로 채우면, 매 프레임마다 숫자가 조금씩 올라가는 효과가 납니다.

Remotion에서의 사용

현재 프레임durationPerRow(한 행당 프레임 수)로 “지금이 몇 번째 행과 다음 행 사이의 몇 % 지점인지”를 구한 뒤, 그 비율만큼 이전 행 숫자와 다음 행 숫자를 섞어(선형 보간) 표시합니다.

핵심 정리

  • parseCount: 4.9만, ~ 290,000 등 다양한 포맷 → number (보간 계산용).
  • parseRate: +1,200, 3.2% 같은 증감·비율 → 숫자로 변환.
  • dateToMinutes: 03. 04. 01:17 → 기준 시점부터 경과 분(한 숫자)으로 계산.
  • 보간: 행과 행 사이를 프레임 단위로 선형 보간해, 숫자가 부드럽게 올라가는 애니메이션 구현.
문자열 파싱 및 Remotion 보간 로직 설명
12 / 21
13

행 개수와 영상 길이의 관계

시계열 행이 늘어나면 영상 길이도 같이 늘어납니다. 기본 규칙을 알면 “몇 줄짜리 표를 만들지” 쉽게 결정할 수 있습니다.

총 프레임 수 = 150 (인트로) + (행 수 - 1) × durationPerRow + 300 (엔딩)

기본 durationPerRow = 90 프레임 (30fps 기준 3초)

행 10개일 때

총 프레임 ≈ 150 + 9 × 90 + 300 = 1,260 → 약 42초

행 20개일 때

총 프레임 ≈ 150 + 19 × 90 + 300 = 2,160 → 약 72초

행 40개일 때

총 프레임 ≈ 150 + 39 × 90 + 300 = 3,960 → 약 132초

실 서비스에서는 충분히 큰 기본 duration 을 두고, 실제 행 수에 맞춰 보이는 구간만 채워 쓰는 방식을 사용할 수 있습니다.

아래는 앞 슬라이드(문자열 파싱·보간) 에서 설명한 헬퍼 함수 구현 예시입니다.

parseCount / parseRate / dateToMinutes / minutesToDateLabel · YoutubeStatsRowParsed

/** 구독자/조회수/좋아요/댓글 숫자 파싱 (표시용 원본 유지, 보간용 숫자) */ function parseCount(s: string): number { if (!s || s === '-' || s === '채널 개설') return 0; const t = s.replace(/^~\s*/, '').trim().replace(/,/g, ''); const man = t.match(/^([\d.]+)\s*만$/); if (man) return Math.round(parseFloat(man[1]) * 10000); const n = parseFloat(t.replace(/[^\d.]/g, '')); return Number.isNaN(n) ? 0 : Math.round(n); } /** 구독률 파싱 */ function parseRate(s: string): number { if (!s || s === '-') return 0; const n = parseFloat(s.replace('%', '')); return Number.isNaN(n) ? 0 : n; } /** 일시 문자열 → 경과 분 (03. 02. 0:00 기준) */ function dateToMinutes(dateStr: string): number { if (!dateStr) return 0; const withTime = dateStr.match(/03\.\s*(\d{1,2})\.\s*(\d{1,2}):(\d{1,2})/); if (withTime) { const day = parseInt(withTime[1], 10); const hour = parseInt(withTime[2], 10); const min = parseInt(withTime[3], 10); return (day - 2) * 24 * 60 + hour * 60 + min; } const dayOnly = dateStr.match(/03\.\s*(\d{1,2})\.\s*[\(\d]/); if (dayOnly) { const day = parseInt(dayOnly[1], 10); return (day - 2) * 24 * 60; } return 0; } /** 경과 분 → "03. DD. HH:mm" */ function minutesToDateLabel(totalMinutes: number): string { const day = 2 + Math.floor(totalMinutes / (24 * 60)); const remainder = Math.max(0, totalMinutes % (24 * 60)); const hour = Math.floor(remainder / 60); const min = Math.round(remainder % 60); return `03. ${String(day).padStart(2, '0')}. ${String(hour).padStart(2, '0')}:${String(min).padStart(2, '0')}`; } export interface YoutubeStatsRowParsed { date: string; minutesFromStart: number; subscribers: number; views: number; rate: number; likes: number; comments: number; }
13 / 21
14

실제 워크플로우: 아무 채널이나 적용하기

앞에서 본 데이터 수집(3~7)영상 편집(8~12) 을 이어서, 아무 채널/영상에 적용하는 순서입니다.

  1. 1️⃣ /cron-manager → 조회/구독자 추이 탭에서 채널/영상 추가.
  2. 2️⃣ 30분~하루 단위로 데이터를 쌓고, 충분히 쌓이면 Supabase SQL/MCP로 시계열을 조회.
  3. 3️⃣ 일정 간격(예: 1시간/하루)으로 샘플링해 date, subscribers, views, rate, likes, comments 문자열을 생성.
  4. 4️⃣ YoutubeStatsTableCompositionRAW_ROWS 를 이 데이터로 교체(또는 새 상수로 분리).
  5. 5️⃣ /video-creator 에서 youtube-stats-table 씬을 추가해 미리보기 → 필요 시 mp4/webm 렌더.
14 / 21
15

Remotion 은 대체 뭐길래 이렇게 열광인가?

RemotionReact로 프로그래밍적으로 영상을 만드는 프레임워크입니다. GitHub 39k+ 스타, “코드로 영상”이라는 한 줄이 요약입니다.

왜 쓰나?

  • CSS, Canvas, SVG, WebGL 등 웹 기술 그대로 활용
  • 변수·함수·API로 반복·자동화 가능
  • React 컴포넌트·패키지 생태계로 재사용·조합 용이

요즘 열광 포인트

Remotion Skills처럼 AI 에이전트(Claude Code, Cursor, Antigravity 등)와 붙으면 보고서·문서를 넘겨주기만 해도 2분 영상을 6분 만에 뽑아 주는 식의 워크플로우가 가능해졌습니다. 코딩을 몰라도 프롬프트만으로 영상 제작이 가능한 시대입니다.

이 PPT에서 다루는 /api/video-creator/render 는 바로 Remotion의 서버 사이드 렌더링을 호출해 mp4/webm 파일을 만드는 단계입니다. 다음 슬라이드에서 흐름을 정리합니다.

참고: GitHub (remotion-dev/remotion)
영상: Remotion Skills + Claude로 영상 만들기 (실습) // 클로드 코드 + Remotion = 영상 공장 완성 (오후다섯씨) // AI 활용 300% 하는 방법 | 클로드로 영상 만들기

15 / 21
16

Remotion 렌더링 API 흐름

편집기에서 보이는 애니메이션을 실제 영상 파일로 바꾸는 마지막 단계입니다.

/api/video-creator/render 요약

  1. POST /api/video-creator/render {"{"} project, format, quality {"}"}
  2. bundle(entryPoint = app/video-creator/compositions/index.tsx)
  3. selectComposition(serveUrl, id = project.composition)
  4. renderMedia(serveUrl, composition, codec, quality, outputLocation)
  5. 완성된 파일을 읽어 응답으로 전송 후 디스크에서 삭제.

지원 포맷

mp4 (h264), webm (vp8)

품질 옵션

low (60) · medium (75) · high (90)

Remotion 공식: GitHub (remotion-dev/remotion)

렌더가 환경 문제로 되지 않을 때는 다음 슬라이드(플랜 B) 를 참고하세요.

16 / 21
17

렌더링이 안 될 때의 현실적인 플랜 B

Remotion 서버 렌더링은 환경·권한·ffmpeg 설정에 따라 당장 안 될 수도 있습니다. 이럴 때 쓸 수 있는, 실무 친화적인 백업 플랜입니다.

화면 녹화 플로우

  1. /video-creator 에서 유튜브 추이 표 씬을 전체 화면에 가깝게 키웁니다.
  2. OBS Studio / Xbox Game Bar / macOS 화면 녹화(Shift+Cmd+5) 등을 켭니다.
  3. 1080p 30fps 기준으로 재생을 한 번 녹화해 mp4 파일을 얻습니다.

이 방식은 완전 자동 파이프라인은 아니지만, 디자인·로직은 그대로 재사용하면서 인프라 부담 없이 프로토타입 영상을 빠르게 확보할 수 있는 현실적인 방법입니다.

17 / 21
18

Remotion 라이선스 분석

Remotion은 이중 라이선스(Dual License) 체계를 채택하며, 법적 주체 유형에 따라 무료 또는 유료가 적용됩니다.

1. 무료 라이선스 (적격 사용자)

  • 개인 사용자
  • 직원 3명 이하의 영리 조직
  • 비영리 조직
  • 평가 중이며 아직 상업적으로 사용하지 않는 경우

허용: 영상·이미지 제작(상업 포함), 소프트웨어 수정, 기여. 금지: Remotion 기반 파생물의 판매·임대·재라이선싱.

보증 없음(AS IS), 지원은 GitHub/Discord 기준 최선 노력.

2. 회사 라이선스

직원 4명 이상의 영리 조직. 무료와 동일 사용 범위 + 우선 지원. remotion.pro에서 구매.

3. 핵심 포인트

  • 소스 공개이지만 MIT/Apache가 아닌 사용자 기반 조건부(Source-Available) 라이선스.
  • Remotion 자체를 기반으로 한 파생 제품 판매·재배포 금지.
  • 직원 수 기준(계약직·프리랜서 포함 여부)은 경계 사례 시 FAQ 또는 직접 문의 권장.
  • 무료 라이선스에는 완전한 보증 면책 조항 포함.

4. 실무 적용 요약

구분 무료 사용 가능
개인 유튜버의 상업적 영상 제작가능
3인 이하 스타트업의 영상 제작가능
비영리 단체의 영상 제작가능
직원 4명 이상 기업의 영상 제작회사 라이선스 필요
Remotion 기반 SaaS 제품 판매불가 (파생물 판매 금지)
18 / 21
19

요약: 초보 · 전문가 각각의 Takeaway

한 줄로 정리하면…

“유튜브 데이터 → Supabase → 표 데이터 → Remotion 템플릿 → 영상 파일” 이라는 다섯 단계 파이프라인입니다.

유튜브
채널/영상 통계
주기적 스냅샷
/track API
DB
Supabase
시계열 로그
pg_cron 스케줄
데이터 정제
📋
표 데이터
RAW_ROWS
데이터 구조화
Props 전달
🎬
Remotion
컴포지션 템플릿
애니메이션 보간
/render API
📼
영상 파일
mp4 / webm
서버 렌더링

🍼 초보자용 정리

  • 복잡한 코드는 신경 쓰지 말고, “데이터를 표로 쌓는다 → 그 표를 예쁜 영상으로 바꾼다”라고 이해하면 충분합니다.
  • 이 흐름은 어떤 채널/영상에도 그대로 복붙할 수 있습니다.

🧠 전문가용 정리

  • 핵심 키워드: /trends/* API, Supabase 시계열 설계, Remotion 컴포지션 id, 서버 렌더링 API.
  • 확장 아이디어: 다른 지표(수익, 시청 지속 시간), 다른 플랫폼(Twitch, TikTok), 다른 템플릿(막대 그래프, 맵 시각화)으로 응용 가능합니다.
19 / 21
20

AI에게 어떻게 시켜야 할까?

이 프로젝트는 AI에게 “바이브 코딩”으로 단계별로 시킨다는 전제를 갖고 있습니다. 중요한 것은 “한 번에 전부”가 아니라, 섹션별 · 기능별로 끊어서 지시하는 것입니다.

1️⃣ 기본 뼈대부터

먼저 /cron-manager, /video-creator 페이지와 공통 레이아웃 정도만 요청합니다.

2️⃣ API → UI 순서

Supabase/YouTube API 레이어(트렌드 API 4종)를 먼저 만들게 한 뒤, 그 다음에 TrendsTab UI 를 얹도록 단계별로 시킵니다.

3️⃣ Remotion · 렌더링 · 스크립트

마지막에 Remotion 컴포지션, 서버 렌더링 API, Supabase → RAW_ROWS 변환 스크립트를 각각 따로따로 요청하는 식으로 쪼갭니다.

아래 슬라이드에서 실제로 복붙해서 쓸 수 있는 프롬프트 템플릿을 정리합니다.

20 / 21
21

AI 바이브 코딩 지시문 템플릿

아래 문장들은 이 문서의 6장 내용을 그대로 옮긴 실전용 프롬프트 템플릿입니다. 상황에 맞게 약간만 수정해서 AI에게 그대로 붙여넣으면 됩니다.

① 기본 구조 · 메뉴 생성 요청 (어떤 신규 프로젝트든 공통 1단계)

“Next.js 16 / React 19 / App Router 기반의 새 프로젝트가 하나 있다고 가정해 주세요.
아직 주요 페이지는 거의 없는 상태이고, 여기에서 '유튜브 조회/구독자 추이 수집 + Remotion 영상 제작' 기능을 새로 추가하려고 합니다.

1) /cron-manager, 2) /video-creator 두 페이지를 새로 만들어 주세요.
- /cron-manager 는 유튜브 조회/구독자 추이 수집/조회용 '크론 매니저' 화면입니다.
- /video-creator 는 Remotion 기반 '비디오 크리에이터' 편집 화면입니다.

요구사항:
- App Router 구조를 사용해 주세요 (app/cron-manager/page.tsx, app/video-creator/page.tsx).
- 상단에 공통 네비게이션(홈, 크론 매니저, 비디오 크리에이터 링크)을 포함한 레이아웃을 만들어 주세요.
- 언어는 TypeScript, any 타입은 절대 쓰지 말고 명시적인 타입/interface 를 선언해 주세요.
- 함수·컴포넌트 이름은 전부 카멜케이스/파스칼케이스 규칙을 지켜 주세요.
- 이 단계에서는 디자인은 대략적인 수준만 맞추고, 실제 유튜브/Supabase/Remotion 연동은 다음 단계에서 붙일 수 있도록 자리만 잡는 것이 목표입니다.”

② 트렌드 API 4종 생성 요청 (시계열 수집 레이어 삽입 2단계)

“이제 유튜브 조회/구독자 추이 데이터를 Supabase에 시계열로 기록하기 위한 API 레이어를 추가하고 싶습니다.

전제:
- Supabase 프로젝트가 이미 있고, Next.js 서버에서 Supabase 클라이언트를 사용할 수 있다고 가정해 주세요.
- Supabase 에는 app_youtube_trends_timeseries_v1 테이블이 있다고 가정합니다.
- 이 테이블은 채널/영상 둘 다 저장하는 '추적 + 스냅샷' 테이블입니다.

해야 할 일:
다음 4가지 Route Handler 를 만들어 주세요.
- POST /api/youtube-manager/trends/track
- POST /api/youtube-manager/trends/record
- GET /api/youtube-manager/trends/tracked
- GET /api/youtube-manager/trends/snapshots

동작 규칙:
- track 은 URL/채널 ID/영상 ID 를 받아 YouTube API 를 호출하고 Supabase 에 현재 시점 스냅샷 1행을 insert 합니다.
- tracked 는 지금까지 한 번이라도 기록된 채널/영상 ID 목록을 반환합니다.
- snapshots 는 특정 channelId 또는 videoId 의 시계열 스냅샷을 반환합니다.
- record 는 전체 또는 일부 ID 에 대해 배치 수집을 돌리고, 30분 이내 데이터는 스킵합니다.

구조:
- YouTube API 호출 로직은 lib/youtube-client.ts 파일로 분리해 주세요.
- Supabase 입출력과 비즈니스 로직은 lib/db/youtube-trends-store.ts 파일로 분리해 주세요.
- 모든 함수/Route Handler 는 any 대신 명시적인 타입을 사용하고,
API 응답은 성공 시 { "{ success: true, ... }" }, 실패 시 { "{ success: false, error: string }" } 패턴을 유지해 주세요.”

③ TrendsTab UI / Remotion / 렌더링 / 스크립트 (기능 삽입 3단계)

“이제 /cron-manager 페이지 안에 '조회/구독자 추이' 탭 UI 를 구현하고 싶습니다.
- app/cron-manager/page.tsx 에 탭 구조를 만들고,
그 중 '조회/구독자 추이' 탭을 선택하면 app/cron-manager/components/TrendsTab.tsx 를 렌더링해 주세요.
- TrendsTab 는 2.2~2.4절 요구사항(추가/조회/수동 조회/표 구조)을 그대로 구현해 주세요.

또한 /video-creator 에서 사용할 Remotion 컴포지션을 추가하고 싶습니다.
- app/video-creator/compositions/templates/YoutubeStatsTableComposition.tsx 를 만들고,
RAW_ROWS / DEFAULT_YOUTUBE_STATS_ROWS / 파싱·보간 로직을 설계 문서대로 구현해 주세요.
- app/video-creator/compositions/index.tsxid="youtube-stats-table" 로 컴포지션을 등록하고,
VideoPlayergetCompositionConfig 에서 이 id 를 처리해 주세요.

마지막으로 Remotion 서버 렌더링과 데이터 스크립트를 추가해 주세요.
- /api/video-creator/render 에서 Remotion 서버 렌더링을 구현해 주세요.
format/quality 별 codec/quality 값은 설계 문서 3.6절을 따릅니다.
- Supabase 시계열을 읽어 RAW_ROWS TypeScript 파일을 생성하는 스크립트를
scripts/generate-youtube-trends-rows.ts 에 만들어 주세요.”

21 / 21