Back to projects

TubeSource

Web

프로젝트 개요

TubeSource는 콘텐츠 크리에이터를 위한 올인원 영상 분석 도구입니다. YouTube와 TikTok 영상을 검색하고, Gemini AI를 활용해 영상의 성공 요인을 분석하며, 필요한 영상을 다운로드할 수 있습니다.

콘텐츠 기획 단계에서 가장 시간이 많이 드는 작업은 레퍼런스 수집과 분석입니다. 어떤 영상이 왜 성공했는지, 어떤 후킹 포인트가 시청자를 사로잡았는지 파악하려면 수십 개의 영상을 일일이 시청해야 합니다. TubeSource는 이 과정을 자동화하여 크리에이터가 기획과 제작에 더 집중할 수 있도록 돕습니다.

현재 Next.js 16과 TypeScript를 기반으로 구축되었으며, YouTube Data API v3와 Google Gemini API를 활용합니다. 로컬에서 실행되는 웹 애플리케이션으로, 모든 데이터는 사용자 브라우저에 저장됩니다.

기술 스택

프론트엔드 프레임워크

Next.js 16의 App Router를 채택했습니다. 서버 컴포넌트를 활용해 YouTube API 호출을 서버 사이드에서 처리하여 API 키가 클라이언트에 노출되지 않도록 했습니다. React 19의 Server Actions를 통해 별도의 API 라우트 없이도 서버 로직을 간결하게 작성할 수 있었습니다.

Tailwind CSS 4와 Shadcn/UI를 조합하여 UI를 구성했습니다. Shadcn/UI의 Radix 기반 컴포넌트들은 접근성(a11y)이 기본으로 보장되어 있어, 키보드 네비게이션과 스크린 리더 지원을 별도로 구현할 필요가 없었습니다.

AI 분석 엔진

Google Gemini API(gemini-3-flash-preview)를 사용합니다. Gemini를 선택한 이유는 무료 할당량이 넉넉하고, 한국어 처리 능력이 뛰어나기 때문입니다. 영상 분석 프롬프트에서 후킹 포인트, 구성 전략, 타겟 오디언스, 커뮤니티 반응의 네 가지 관점으로 분석하도록 설계했습니다.

영상 다운로드

yt-dlp를 Node.js에서 래핑한 youtube-dl-exec 라이브러리를 사용합니다. yt-dlp는 YouTube뿐만 아니라 TikTok, Instagram Reels 등 다양한 플랫폼을 지원하며, 포맷 선택과 품질 조절이 자유롭습니다. API 라우트에서 yt-dlp 프로세스를 스폰하고, 진행률을 실시간으로 클라이언트에 전달합니다.

주요 기능

영상 검색

영상 검색 화면
키워드, 기간, 조회수, 성과도 등 다양한 필터로 영상 검색

YouTube Data API v3를 활용한 심층 검색 기능을 제공합니다. 단순한 키워드 검색을 넘어, 업로드 기간, 최소 조회수, 구독자 대비 성과도(조회수/구독자 비율) 등의 필터를 조합할 수 있습니다. 성과도 필터는 구독자 수 대비 높은 조회수를 기록한 영상, 즉 알고리즘에 의해 노출이 확대된 영상을 찾는 데 유용합니다.

검색 결과는 관련성, 조회수, 업로드 날짜, 평점 등으로 정렬할 수 있으며, 카드 형태로 조회수, 좋아요 수, 댓글 수, 성과도를 한눈에 확인할 수 있습니다.

채널 정밀 분석

채널 검색 화면
특정 채널의 모든 영상을 수집하여 분석
채널 상세 정보
채널 통계와 최근 영상 조회수 추이

특정 채널의 모든 영상을 수집하여 분석할 수 있습니다. 채널 URL이나 핸들을 입력하면 채널의 기본 정보(구독자 수, 총 조회수, 영상 수)와 함께 최근 영상 목록을 가져옵니다. 조회수 추이 그래프를 통해 채널의 성장세나 특정 영상의 바이럴 여부를 파악할 수 있습니다.

관심 채널은 저장하여 나중에 빠르게 접근할 수 있으며, 카테고리(지식, 게임, 분류 추가 등)로 구분하여 관리합니다.

관심 채널 목록
저장한 채널을 카테고리별로 관리

AI 영상 분석

AI 분석 결과 모달
Gemini AI가 분석한 영상의 성공 요인

Gemini AI를 활용하여 영상의 성공 요인을 심층 분석합니다. 분석 결과는 네 가지 관점으로 구성됩니다.

핵심 후킹 포인트: 제목과 썸네일이 어떤 심리적 기제를 자극하는지 분석합니다. "호기심 갭(Curiosity Gap)" 활용, "사회적 증거" 제시, "긴급성" 유발 등의 패턴을 식별합니다.

콘텐츠 구성 전략: 영상의 도입부, 전개부, 클라이맥스 구조를 분석합니다. "점강법(Climax)" 구조인지, "단계별(Step-by-step)" 구조인지, 어떤 지점에서 시청 지속률이 떨어질 수 있는지 예측합니다.

타겟 오디언스: 영상이 타겟팅하는 시청자층의 특성을 분석합니다. 연령대, 관심사, 시청 동기(정보 습득, 오락, 학습 등)를 추론합니다.

커뮤니티 반응: 댓글 패턴을 분석하여 시청자들이 어떤 부분에 반응하는지 파악합니다. 긍정적 반응과 부정적 반응의 비율, 주요 토론 주제 등을 요약합니다.

맥락 분석 (Context Analysis)

개별 분석 선택 UI
여러 영상을 선택하여 개별 또는 맥락 분석

단일 영상 분석을 넘어, 여러 영상을 선택하여 공통된 성공 요인을 도출하는 맥락 분석 기능을 제공합니다. 예를 들어 "AI 게임 개발" 주제의 인기 영상 5개를 선택하면, 이 영상들이 공유하는 패턴(제목 구조, 썸네일 스타일, 콘텐츠 길이, 후킹 전략)을 종합적으로 분석합니다.

맥락 분석 결과는 트렌드 리포트 형태로 제공되어, 특정 주제나 니치에서 어떤 콘텐츠가 성공하는지 파악하는 데 유용합니다.

트렌드 & 인사이트

트렌드 페이지
실시간 인기 동영상과 카테고리별 트렌드

YouTube의 실시간 인기 동영상을 카테고리별로 확인할 수 있습니다. 전체, 음악, 게임 등의 카테고리에서 현재 어떤 콘텐츠가 주목받고 있는지 파악하고, 관심 있는 영상을 바로 분석 대기열에 추가할 수 있습니다.

분석 히스토리 & PDF 내보내기

분석 결과 목록
분석된 모든 영상을 한눈에 확인
PDF 리포트
분석 결과를 PDF로 내보내기

분석된 모든 영상은 로컬 스토리지에 저장되어 언제든 다시 열람할 수 있습니다. 채널별, 분석 유형별(개별/맥락)로 필터링하여 원하는 결과를 빠르게 찾을 수 있습니다. 분석 결과는 jsPDF를 활용해 깔끔한 PDF 리포트로 내보낼 수 있어, 팀원과 공유하거나 기획 문서에 첨부하기 좋습니다.

영상 다운로드

다운로드 페이지
YouTube/TikTok 영상을 MP4/MP3로 다운로드

YouTube뿐만 아니라 TikTok 영상도 다운로드할 수 있습니다. URL을 붙여넣고 MP4(영상) 또는 MP3(오디오) 포맷을 선택하면 됩니다. 다운로드 진행률이 실시간으로 표시되며, 완료된 파일은 다운로드 폴더에 저장됩니다.

개발 과정

YouTube API 할당량 관리

YouTube Data API v3는 일일 10,000 유닛의 할당량 제한이 있습니다. 검색 요청 하나에 100 유닛, 영상 상세 정보 조회에 1 유닛이 소모됩니다. 초기에는 검색 결과마다 상세 정보를 개별 조회했는데, 10개 검색 결과의 상세 정보를 가져오면 100 + 10 = 110 유닛이 소모되었습니다.

이를 최적화하기 위해 배치 요청을 도입했습니다. videos.list 엔드포인트의 id 파라미터에 최대 50개의 영상 ID를 쉼표로 구분하여 전달하면 1회 요청(1 유닛)으로 50개 영상의 상세 정보를 가져올 수 있습니다. 이 방식으로 할당량 소모를 크게 줄였습니다.

성과도 계산 로직

"성과도"는 구독자 수 대비 조회수 비율로, 영상이 구독자 외부로 얼마나 확산되었는지를 나타냅니다. 단순히 조회수 / 구독자로 계산하면 구독자 100명인 채널의 조회수 1,000회(성과도 10)와 구독자 100만 명인 채널의 조회수 1,000만 회(성과도 10)가 동일하게 평가됩니다.

실제로는 구독자 규모에 따라 기대 조회수가 다르므로, 로그 스케일을 적용하여 공정한 비교가 가능하도록 조정했습니다. 또한 업로드 후 경과 시간을 반영하여, 최근 영상이 불리하지 않도록 보정합니다.

AI 분석 프롬프트 설계

Gemini에게 영상 분석을 요청할 때, 초기 프롬프트는 "이 영상의 성공 요인을 분석해줘"처럼 단순했습니다. 결과는 일반적이고 추상적인 내용이 많았습니다.

프롬프트를 구조화하여 네 가지 관점(후킹 포인트, 구성 전략, 타겟 오디언스, 커뮤니티 반응)을 명시하고, 각 관점에서 구체적으로 무엇을 분석해야 하는지 상세히 기술했습니다. 또한 응답 형식을 JSON으로 지정하여 파싱 오류를 줄이고, 일관된 UI 렌더링이 가능하도록 했습니다.

다운로드 진행률 실시간 전송

yt-dlp는 다운로드 진행률을 stdout에 출력합니다. Node.js의 child_process.spawn으로 yt-dlp를 실행하고, stdout을 파싱하여 진행률을 추출한 뒤, Server-Sent Events(SSE)로 클라이언트에 실시간 전송합니다.

초기에는 WebSocket을 고려했지만, 단방향 통신(서버→클라이언트)만 필요했고, SSE가 HTTP/2 환경에서 더 효율적이며 구현이 간단했습니다. Next.js의 Route Handler에서 ReadableStream을 반환하여 SSE를 구현했습니다.

결과 및 향후 계획

TubeSource의 핵심 목표였던 "콘텐츠 기획 시간 단축"을 달성했습니다. 특정 주제의 인기 영상을 검색하고, AI 분석을 통해 성공 패턴을 파악하는 과정이 몇 분 내로 완료됩니다. 개인적으로 유튜브 콘텐츠 기획 시 레퍼런스 수집 시간이 체감상 절반 이하로 줄었습니다.

기술적으로는 YouTube Data API의 할당량 제한 안에서 효율적으로 데이터를 수집하는 방법, Gemini AI를 활용한 구조화된 분석 프롬프트 설계, SSE를 통한 실시간 진행률 전송 등의 경험을 쌓았습니다.

향후에는 분석 결과를 기반으로 제목/썸네일 아이디어를 제안하는 기능, 경쟁 채널 비교 분석 기능, 분석 결과 클라우드 동기화(현재는 로컬 스토리지만 지원)를 추가할 계획입니다.

기술 스택 요약

| 분류 | 기술 | |------|------| | Framework | Next.js 16 (App Router) | | Language | TypeScript | | Styling | Tailwind CSS 4, Shadcn/UI | | AI | Google Gemini API (gemini-3-flash-preview) | | Data | YouTube Data API v3 | | Download | yt-dlp (via youtube-dl-exec) | | PDF Export | jsPDF, jspdf-autotable | | Charts | Recharts |