코딩 없이 30분만에 '나만의 AI 에이전트' 웹서비스 만드는 법 (Lovable + n8n 초보자를 위한 실전 가이드)

Shipped 커뮤니티 — 같이 바이브 코딩 할 멤버를 모아요. 5월 31일 (일) 서울 데스커 라운지 홍대에서 첫 오프라인 모임이 열려요. 혼자 헤매지 않고 AI 로 직접 제품 만드는 사람들끼리 같이 빌드합니다. 👉 자세히 보기 / 신청 : https://shipped.my ___ 👇 AI 크리에이터 랩에 가입해서 수익화를 실현시켜보세요 https://aicreatorlab.com/ 이번 영상에서는 노코드(No-code) 툴인 '러버블(Lovable)'과 'n8n'을 활용하여 '콘텐츠 로드맵 생성기' 웹사이트를 만드는 전 과정을 보여드립니다. 러버블로 사용자가 보는 프론트엔드 화면을 만들고, n8n으로 데이터 처리 및 AI 연동 등 백엔드 기능을 구현합니다. 이 두 가지 툴을 웹훅(Webhook)으로 연결하여 실시간으로 데이터를 주고받는 방법부터, OpenAI(GPT) API를 연동하여 콘텐츠를 생성하고, 구글 시트에 리드를 저장하며, 자동 이메일 발송 기능까지 모두 다룹니다. 코딩을 전혀 모르시는 분들도 이 영상을 따라 하시면 멋진 자동화 웹사이트를 완성하고, 바로 다른 사람에게 공유할 수 있습니다. ___ 👉 콘텐츠 로드맵 생성기 링크: https://content-roadmap-generator.lovable.app/ 👉 Lovable: https://lovable.dev/ 📌 타임스탬프: 00:00 Intro - 코딩 없이 웹사이트를 만드는 노코드 툴 '러버블' 소개 00:32 오늘 만들 사이트의 구조: 러버블(프론트엔드) + n8n(백엔드) 00:50 완성된 '콘텐츠 로드맵 생성기' 사이트 시연 04:00 '러버블' 프롬프트로 웹사이트 디자인 시작하기 08:27 자동화 툴 'n8n' 소개 및 웹훅(Webhook) 설정하기 10:13 러버블과 n8n을 웹훅 주소로 연결하기 12:09 웹훅 연동 오류 해결 과정 (GET/POST 방식 차이) 13:28 n8n에 OpenAI(AI 에이전트) 연결하여 콘텐츠 생성하기 20:36 리드 수집을 위한 이메일 입력 기능 추가 및 구글 시트 연동 30:02 완성된 웹사이트를 다른 사람도 쓸 수 있게 'Publish' 하는 법 🔗 Links Subscribe : @sihyun_adventure LinkedIn : https://pxl.to/9f63thq Threads : https://pxl.to/pmbwuuu Email : sihyun@kimsihyun.com