요리 유튜브 자동 요약 + 구글 로그인 웹앱 만들기 🍳

요리 유튜브 자동 요약 + Google 로그인 웹앱 만들기 🍳

소개

요리 유튜브 주소줄 입력하면 레시피 순서대로 정리되고, 들어가는 재료를 분리해주는 웹앱을 만들었어요.

눈에 띄는 특징은 Google 계정으로 간편히 로그인할 수 있다는 점!

지난주에 만들었던 유튜브 요약 웹페이지 링크

https://www.gpters.org/nocode/post/youtube-summary-automation-easier-CukAjB67QZhrMl5

기존 요약 스타일은 이렇게 나왔습니다

스터디장님의 유튜브 요약 사례에서 출발하여 기존의 요약이 아니라 요리 유튜브에 맞게 재료와 레시피과정, 그리고 주요 포인트만 가져오게 하는 하고 요리 레시피에 맞게 로고와 랜딩페이지 디자인도 뉴모피즘 스타일로 분위기를 변경해줬습니다

그리고 구글로 로그인 구현을 추가로 했습니다. 이 작업은 사용자가 자신의 정보를 저장하고 이력을 관리하게 하기 위해선 인증 기능이 필수적이기 때문입니다. 또한 구글 로그인 인증 수단의 간편하기 때문에 사용자가 쉽게 접근하여 경험하기엔 좋을 것이라 생각합니다

한국어 문자 메시지의 스크린 샷

디자인은 뉴모피즘 스타일 - 올록볼록 엠보싱

진행 방법

사용된 도구

  • Supabase: 자바스크립트 기반 로그인 인증 및 DB 저장

  • Google Cloud Console: OAUTH 클라이언트 설정

  • Make: 자동화 시나리오 관리

  • LOVABLE: 웹 UI 구현 도구

  • ChatGPT: 디자인 프롬프트 생성 역할

  • Gemini: 내용을 "레시피 순서 + 재료" 형식으로 구조화하는 모델

구현된 주요 기능

  • 유튜브 비디오 URL을 입력하면,

    • 레시피가 순서대로 정리되고

    • 재료가 그 아래에 나열됨

웹 사이트에 가입 버튼을 표시하는 화면

로고는 스케치 후 gpt에게 스케치 이미지 보내고 로고 작업 해달라고
한후 러버블로 가져와 로고 수정해달라고 하니 간단히 수정 되었어요.
제목수정과 서브제목도 수정했는데 바이브 코딩이 재밌다는 생각이 들었습니다.

  • Google 계정으로 로그인

  • 기존 Hybrid-style 요약 방식은 제거하고, 구조화된 간단 요약으로 변경

Gemini에서 작성한 질문?

"요리 영상이면 요리 레시피를 순서대로 나열하는 방식으로 요약을 해줘

그리고 레시피 밑에 레시피에 들어가는 재료들을 뽑아줘"

영어로 바꿔줘

로 넣었는데 잘 안나왔습니다. 그래서 기존의 달려있는

문장과 특히 Hybrid style 이 부분을 삭제하고 작성을 했습니다

그래서 GPT 모듈에 메세지1에 넣은 프롬프트

## Primary Role Definition
Create a recipe from YouTube cooking video captions

## Context
Input: YouTube transcript (Korean or English).
Output: JSON object with:

"summary" → cooking recipe (steps + ingredients)
"takeaways" → Exactly 3 concise, actionable takeaways
"tags" → 5 relevant tags (short, keyword style)

## Instructions
1. Parse the transcript and identify cooking steps clearly.
2. Summarize the recipe in sequential steps.
   - Use '\n\n' (two newline characters) **only to separate steps**.
   - Each step must always start on a new line with its number.
   - **Do not insert line breaks inside a step.** Each step should be written as a complete sentence or two, continuously.
   - Example:
     1. 준비된 감자를 깨끗이 씻어 껍질을 벗긴다.

     2. 감자를 적당한 크기로 썰고 냄비에 넣는다.

     3. 물을 붓고 10분간 끓인다.
3. After listing all steps, leave one blank line, then add the ingredients line:  
   재료들 : potato, onion, garlic
4. Extract exactly 3 actionable takeaways.
5. Generate 5 related tags.
6. Output must be valid JSON only, following this schema:

{
  "summary": "string recipe steps + ingredients",
  "takeaways": [
    "string (takeaway 1)",
    "string (takeaway 2)",
    "string (takeaway 3)"
  ],
  "tags": [
    "tag1",
    "tag2",
    "tag3",
    "tag4",
    "tag5"
  ]
}

- Do NOT use HTML tags like <br>.
- Keep the summary detailed but structured.
- Write in Korean.
메세지2

{
  "summary": "1. 감자를 깨끗이 씻어 껍질을 벗긴다.\n\n2. 감자를 적당한 크기로 썰고 냄비에 넣는다.\n\n3. 물을 붓고 소금을 약간 넣은 뒤 10분간 끓인다.\n\n\n재료들 : 감자, 소금, 물",
  "takeaways": [
    "감자는 크기를 일정하게 썰어야 고르게 익는다",
    "끓일 때 소금을 조금 넣으면 간이 배어 맛이 좋아진다",
    "10분 이상 끓이면 감자가 무르게 익어 식감이 떨어진다"
  ],
  "tags": [
    "감자요리",
    "한식",
    "간단레시피",
    "기본조리",
    "집밥"
  ]
}

백엔드 역할을 하는 make 에서 open AI 수정

메시지가있는 텍스트 편집기를 보여주는 화면
텍스트 상자와 버튼이있는 화면을 보여주는 화면

⁃ 러버블 웹페이지에 요약되는게 안나와서 여러번 삽질을 함. 그러다 2번 Url을 넣어서야 요약되는게 나왔습니다.

결과와 배운 점

  • Supabase 로그인을 제대로 구현하려면 가장 먼저 로컬 개발 환경과 DB 포팅이 완료되어야 한다는 점을 깨달음

  • Google Cloud Console에서 OAUTH 클라이언트 설정과 Supabase 연동 과정이 핵심적인 학습 포인트였음

  • 웹앱 디자인도 LOVABLE을 통해 요리 레시피 분위기에 맞게 구성하고, 로고와 디자인 요소를 바꾸는 재미가 있었음

  • 유튜브 URL을 입력하면 간단히 자동 요약되는 구조를 기대했지만, 요리 영상과 일반 영상을 구분하는 로직은 아직 미완성 상태

  • 다양한 도구를 조합해보면서 자동화와 웹앱 개발의 재미를 체감함 🎉

  • 향후에는 카카오 로그인 연동도 시도해볼 계획!

도움 받은 글

  • 스터디장님의 수업영상

• 3주차 로그인 기능 구현(구글 OAuth 적용하기) 가이드

5
3개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요