바이브코딩으로 만드는 나만의 유튜브 요약 사이트(With.구글 AI스튜디오)

#바이브코딩 #구글 #안티그래비티

[핵심정리]
구글 AI 스튜디오를 활용하면 복잡한 코딩 없이도 유튜브 영상을 분석하고 요약하는 프로그램을 직접 만들 수 있습니다. 먼저 AI 스튜디오의 '바이브 코딩' 창에서 제미나이(Gemini) 모델과 프레임워크를 설정한 뒤, 중앙에 유튜브 링크를 입력받아 내용을 정리해 주는 기능을 정의합니다. 개발 과정에서 발생하는 자막 추출 에러는 제미나이 API의 유튜브 URL 분석 기능을 활용하고 'Fix' 버튼을 통해 코드를 수정함으로써 해결할 수 있습니다. 완성된 프로그램은 영상 임베딩과 함께 상세한 요약본을 제공하며, 별도의 배포 과정 없이 공유 링크만으로 언제 어디서든 전체 화면으로 접속해 사용할 수 있는 것이 큰 장점입니다.

[핵심 프롬프트]
Step1. 기본적인 레이아웃 디자인하기
중앙에 유튜브 링크를 입력받습니다.
유튜브 링크의 영상을 요약하여 정리합니다.

Step2. Gemini를 이용한 유튜브 요약으로 변경
아래의 코드를 참고해서 유튜브영상을 요약해주는 걸로바꿔줘
import { GoogleGenAI } from "@google/genai";
const ai = new GoogleGenAI({});
const contents = [
{
fileData: {
fileUri: "https://www.youtube.com/watch?v=9hE5-98ZeCg",
},
},
{ text: "Please summarize the video in 3 sentences." }
];
const response = await ai.models.generateContent({
model: "gemini-3-flash-preview",
contents: contents,
});
console.log(response.text);


[타임라인]
[00:00 - 01:09] Gemini를 이용한 유튜브 요약 프로그램 소개 및 시연
[01:10 - 02:13] 구글 AI 스튜디오 모델 및 프레임워크 설정
[02:14 - 03:21] 사이트 기능 정의 및 디자인 선택
[03:23 - 05:40] 자막 에러 해결을 위한 Gemini API 기능 적용 및 수정
[05:42 - 06:42] 영상 임베딩 및 최종 분석 결과 확인
[06:45 - 08:37] URL 공유를 활용한 배포 및 마무리