요리 유튜브 자동 요약 + 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 이 부분을 삭제하고 작성을 했습니다