코딩 없이 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