소개
Lovable을 이용해 프런트엔드를 만들고, Make를 통해 백엔드 자동화를 구성하여 YouTube 요약 기능이 있는 웹페이지를 구현해보는 실습을 진행했습니다. 단순히 UI를 구현하는 것을 넘어서, Make 시나리오를 통해 백엔드 자동화도 경험하며 전체 흐름을 익히는 것이 목표였습니다.
진행 방법
사용한 도구들
Lovable: UI 구성 및 프런트엔드 제작
Make + Magic Meal Kits: YouTube 영상의 내용을 추출 및 분석하는 자동화 시나리오 구성
OpenAI: 추출된 텍스트를 요약하는 역할
Supabase: 요약 결과를 저장할 테이블 관리 (Database 역할)
Claude MCP: Supabase 관련 에러를 디버깅하는 데 도움을 줌
흐름 요약
사용자 입력: 유튜브 링크를 입력하면
Make 시나리오 시작: 해당 링크의 내용을 Magic Meal Kits 시나리오를 통해 추출
OpenAI 요약: 분석된 텍스트를 OpenAI에 전달하여 요약 생성
Supabase 저장: 결과 데이터를 테이블에 저장하여 페이지에서 확인 가능하게 구성
PRD 문서화의 중요성
처음에는 UI 중심의 디자인만 생각했지만, 실제로 작업하면서 다음과 같은 요소도 PRD에 포함되어야 한다는 점을 배웠습니다:
데이터 테이블 구조 (Supabase)
각 기능이 프런트에서 처리될지 백엔드에서 처리될지 구분
에러 핸들링 시나리오와 디버깅 포인트 설정
1
한국 웹 사이트의 스크린 샷
한국 텍스트가있는 페이지의 스크린 샷
2
색상이 다른 일련의 아이콘
결과와 배운 점
PRD(제품 요구 사항 문서)는 UI뿐 아니라 기능 배분과 데이터 구조까지 포함해야 효과적이라는 것을 체감했습니다.
사전 준비가 부족한 상태에서 개발을 시작하면, 에러가 발생하거나 기능이 예상대로 작동하지 않는 상황이 발생할 수 있습니다.
스터디장님의 예제와 코칭 덕분에 Make 연결도 성공하고, PRD를 개선할 수 있었습니다.
다음에는 개발에 앞서 꼭 PRD부터 제대로 준비하자는 다짐을 하게 되었습니다.
도움 받은 글 (옵션)
스터디장님이 공유해주신 PRD 예제와 Make 시나리오 자료 🙏
