40분짜리 튜토리얼에 지쳐서 Next.js로 AI YouTube 요약기를 만들었습니다 ⚡

40분짜리 YouTube 튜토리얼을 클릭했다가, 핵심 정보는 단 2분 분량의 글로도 전달될 수 있었다는 사실을 깨달은 적이 있나요? 개발자에게 시간은 가장 소중한 자산입니다.

그것이 바로 제가 YT Summarizer를 만든 이유입니다. 이 서비스는 어떤 YouTube 영상에서든 스크립트(transcripts)를 추출하고, Google의 Gemini 2.5 AI를 사용하여 가독성이 높고 완벽하게 포맷팅된 Markdown 요약본을 생성하는 매우 빠른 오픈 소스 웹 애플리케이션입니다.

이 글에서는 제가 왜 이것을 만들었는지, 어떤 기술 스택(tech stack)을 선택했는지, 그리고 여러분이 이 프로젝트를 어떻게 사용하거나 기여할 수 있는지에 대해 설명하겠습니다!

🚀 문제점
비디오 콘텐츠는 시각적 학습자에게는 훌륭하지만, 빠르게 참조하기에는 최악입니다. 만약 어제 본 영상에서 특정 명령어(command)나 개념을 기억해야 한다면, 그것을 찾기 위해 타임라인을 일일이 훑어야 합니다. 저는 다음과 같은 도구를 원했습니다:

• 즉시 텍스트를 제공할 것.
• Notion이나 Obsidian에 바로 붙여넣을 수 있도록 아름답게 포맷팅할 것.
• 언어(특히 저의 모국어인 Farsi)를 자동으로 감지하고 그에 맞춰 레이아웃을 구성할 것.

🛠️ 기술 스택 (Tech Stack)
저는 이 프로젝트를 최대한 가볍고, 현대적이며, 비용 효율적으로 만들고 싶었습니다. 제가 사용한 기술은 다음과 같습니다:

• Next.js (App Router): 매우 빠른 라우팅(routing)과 서버 사이드 API 엔드포인트(server-side API endpoints)를 위해 사용했습니다.
• Vanilla CSS: 무거운 스타일링 프레임워크를 완전히 제외했습니다. 표준 CSS 변수(CSS Variables)를 사용함으로써 앱이 믿을 수 없을 정도로 가벼워졌으며, 다크/라이트 모드(Dark/Light modes)를 네이티브하게 매끄럽게 지원합니다.
• Google Gemini 2.5 Flash: Gemini의 Google 무료 티어는 믿을 수 없을 정도로 관대하며 매우 빠릅니다. 방대한 양의 스크립트 텍스트를 추론하고 구조화된 Markdown을 출력하는 데 탁월합니다.
• youtube-transcript: 자막을 가져오기 위해 굳이 YouTube API 키가 필요하지 않도록 해주는 간단한 npm 패키지입니다.

🧠 내부 작동 원리
애플리케이션의 흐름은 놀라울 정도로 간단합니다:

사용자가 아름답고 미니멀한 UI (User Interface)에 YouTube URL을 붙여넣습니다.
백엔드 (Next.js Route Handler)가 비디오 ID를 추출하고, youtube-transcript를 사용하여 원본 자막 XML을 가져온 뒤 이를 정제합니다.
프롬프트 (Prompt): 원본 텍스트는 전문 기술 작가 (Technical Writer)로서 행동하라는 엄격한 시스템 프롬프트와 함께 Gemini API로 전달됩니다. 이 프롬프트는 언어를 감지하고(페르시아어/아랍어의 경우 RTL, 영어의 경우 LTR 출력), 응답을 순수하게 마크다운 (Markdown) 형식으로 반환하도록 지시합니다.
UI: 프론트엔드 (Frontend)는 react-markdown을 사용하여 응답을 아름다운 타이포그래피로 렌더링하며, 편리한