YouTube 요약 자동화 끝판왕! ➜ 자동 생성 + 랜딩페이지까지 완성 🔥

소개

스터디 매니저님의 사례를 보고, YouTube 요약을 자동화하는 워크플로우를 직접 만들어보고 싶었습니다.
처음에는 Prompt 스터디에서 다뤘던 내용을 바탕으로 실험했지만, 이걸 내 웹 스타일에 맞게 재구성해보고 싶다는 생각이 들었어요 💡

생각보다 어려울 거라고 예상했지만, 직접 시도해보니 의외로 간단하게 동작하는 흐름을 만들 수 있었습니다.

메이크에서 유튜브 요약 시나리오는 완료 했습니다. 이제는 러버블에서 랜딩페이지를 만들고 웹훅 주소줄을 연결해줘야 합니다.

진행 방법

사용한 도구

🧠 ChatGPT (요약 생성, PRD프롬프트 만들기)
🔁 Make.com (자동화 워크플로우 설계)
💾 Supabase (Storage + Database)
claude.ai(Supabase 테이블 자동 생성, PRD와 디자인.mg-러버블에 넣을 코드)
Lovable (랜딩페이지 만들기)

워크플로우 구성 요약

사용자가 YouTube URL을 입력
Make에서 해당 URL을 받아 ChatGPT에 프롬프트로 전달 → 요약 생성
Supabase에 저장 (중복 방지를 위한 로직 포함)
결과는 웹에 노출되지 않고, 특정 뷰 페이지에서만 확인 가능

아래는 제가 직접 작업한 PRD 입니다. 디자인 부분을 제가 원하는 스타일로 만들려고 하다가 실패도 여러번 해서 크레딧을 다 써버렸네요.

사용 프롬프트 예시-편의상 요약해서 올리겠습니다

lovable에 입력한 Prompt

유튜브 요약 서비스를 만들 예정입니다.
1. 서비스 이름 : 유튜브 url만 주시면 완벽하게 이해시켜드릴게요!
2. url 입력창에서 유튜브 url를 입력하고 요약하기 버튼을 누르면 요약한 내용을 검색창 아래로 보여주는 서비스입니다.
3. make를 사용해서 백앤드가 구현되어 있으며, 입력한 유튜브 url은 다음의 웹훅으로 전달되면서 작동됩니다.
	 https://hook.eu2.make.com/vx4x1mu6kalt6rk63837rmfikgb3g3kr(여기에 여러분의 webhook 주소를 넣으세요.)
4. DB는 supabase에 이미 만들어져 있고, project ID가 qsxixoubeiltgohwzpkm(여러분의 project ID) 인 project와 연결해서 사용합니다. 추가로 구현하지 않고 기존의 구조를 이용해서 데이터를 적재합니다.
5. 로고 이미지 url은 https://preview--ytube-mindlink.lovable.app/lovable-uploads/950f6c1f-af69-4d67-9f99-0377fdaff898.png로 해주세요.
6. make response 코드는 다음과 같습니다. 해당 코드로 받은 정보를 웹페이지에 반영해주세요.
{
    "body": {
        "summary": "{{11.result.summary}}",
        "takeaways": [
            "{{11.result.takeaways[1]}}",
            "{{11.result.takeaways[2]}}",
            "{{11.result.takeaways[3]}}"
        ],
        "tags": [
            "{{11.result.tags[1]}}",
            "{{11.result.tags[2]}}", 
            "{{11.result.tags[3]}}",
            "{{11.result.tags[4]}}",
            "{{11.result.tags[5]}}"
        ],
        "title": "{{10.title}}",
        "channelName": "{{10.channelName}}",
        "thumbnailUrl": "{{10.thumbnailUrl}}"
    }
}
7. 다음 내용을 반영해서 작업을 진행해주세요.


<PRD>
YouTube 영상 요약 서비스 - 제품 요구사항 문서 (PRD)

제품 개요
YouTube URL을 입력하면 자동으로 영상 내용을 요약해주는 간단한 웹 애플리케이션입니다. 사용자가 YouTube URL을 붙여넣으면, 시스템이 영상의 자막을 추출하고 AI를 통해 요약문을 생성하여 입력 영역 하단에 표시합니다.
주요 가치 제안: 긴 YouTube 영상을 시청할 시간이 없는 학습자들에게 핵심 내용을 빠르게 파악할 수 있는 기능 제공

필수 기능 (Must-Have)
1. YouTube URL 입력

백엔드
플랫폼: Supabase (프로젝트 ID: QSXIXOUBEILTGOHWZPKM)


플랫폼 및 호환성
지원 플랫폼
제약 사항 및 고려사항
기술적 제약
보안 및 컴플라이언스
데이터 보안
* 개인정보 처리 방침: 최소한의 데이터 수집 및 처리
* API 키 보안: 환경 변수를 통한 민감 정보 관리
* HTTPS 적용: 모든 통신 암호화
컴플라이언스
* YouTube 이용약관 준수: API 사용 가이드라인 준수
* OpenAI 사용 정책 준수: 콘텐츠 정책 및 사용 제한 준수

권장 화면 구성
메인 레이아웃

┌─────────────────────────────────────┐
│           Header (60px)             │
│    🎯 YouTube 영상 요약기            │
├─────────────────────────────────────┤
│                                     │
│         Input Section               │
│  ┌─────────────────────────────┐    │
│  │ YouTube URL을 입력하세요...   │    │ 
│  └─────────────────────────────┘    │
│           [요약하기 버튼]             │
│                                     │
├─────────────────────────────────────┤
│                                     │
│        Result Section               │
│  ┌─────────────────────────────┐    │
│  │      영상 썸네일 + 제목       │    │
│  ├─────────────────────────────┤    │
│  │                             │    │
│  │        요약 내용 영역         │    │
│  │                             │    │
│  └─────────────────────────────┘    │
│    [복사] [원본보기] [길이조절]       │
│                                     │
└─────────────────────────────────────┘


모바일 최적화

┌───────────────────────┐
│     Header (50px)     │
├───────────────────────┤
│                       │
│   Input (full width)  │
│   ┌─────────────────┐ │
│   │ URL 입력...     │ │
│   └─────────────────┘ │
│     [요약하기]         │
│                       │
├───────────────────────┤
│                       │
│    Result (stacked)   │
│   ┌─────────────────┐ │
│   │   썸네일        │ │
│   │   제목          │ │
│   ├─────────────────┤ │
│   │   요약 내용      │ │
│   └─────────────────┘ │
│   [버튼들 세로 배치]   │
│                       │
└───────────────────────┘


<Design>
# YouTube 영상 요약 서비스 - 디자인 가이드

---

디자인 시스템 개요
핵심 디자인 철학
YouTube 요약기는 Clay Morphism 스타일을 기반으로 한 부드럽고 친근한 학습 도구입니다. 기술 학습자들에게 편안하고 집중할 수 있는 환경을 제공하며, 파스텔 듀오톤 컬러와 소프트 3D UI 요소를 통해 시각적 피로를 최소화합니다.
핵심 가치
* 친화적 (Friendly): 부드러운 곡선과 파스텔 컬러로 접근성 향상
* 집중력 (Focus): 미니멀한 레이아웃으로 학습에 집중
* 편안함 (Comfort): Clay morphism의 촉각적 질감으로 편안한 사용감
* 재미 (Playful): 적절한 애니메이션과 인터랙션으로 즐거운 경험
디자인 키워드
파스텔 부드러움 친근함 차분함 평온함 장난기

TailwindCSS 기반 컬러 팔레트
주요 컬러 정의

css
/* Primary Colors - Pastel Violet */
--primary-50: #F5F3FF
--primary-100: #EDE9FE  
--primary-200: #DDD6FE
--primary-300: #C4B5FD
--primary-400: #A78BFA  /* Main Primary */
--primary-500: #8B5CF6
--primary-600: #7C3AED
--primary-700: #6D28D9
--primary-800: #5B21B6
--primary-900: #4C1D95

/* Secondary Colors - Pastel Yellow */
--secondary-50: #FFFBEB
--secondary-100: #FEF3C7
--secondary-200: #FDE68A  /* Main Secondary */
--secondary-300: #FCD34D
--secondary-400: #FBBF24
--secondary-500: #F59E0B
--secondary-600: #D97706
--secondary-700: #B45309
--secondary-800: #92400E
--secondary-900: #78350F

컬러 사용 가이드
용도	Primary	Secondary	Accent	Neutral
메인 CTA 버튼	bg-primary-400	-	-	-
보조 버튼	-	bg-secondary-200	-	bg-neutral-100
경고/에러	-	-	bg-accent-300	-
배경	bg-primary-50	bg-secondary-50	-	bg-neutral-100
텍스트	text-primary-700	text-secondary-700	text-accent-600	text-neutral-800
테두리	border-primary-200	border-secondary-200	border-accent-200	border-neutral-200
타이포그래피 가이드라인
폰트 패밀리

css
/* Primary Font - Korean + Latin */
font-family: 'Pretendard Variable', 'Nunito', 'Quicksand', 
             -apple-system, BlinkMacSystemFont, 'Segoe UI', 
             'Noto Sans KR', sans-serif;

----- 이하 생략 ------------------------------------------------