소개
저는 평소에 '자동화'나 '노코드 툴'에 관심이 많아요. 개발자이긴 하지만, 꼭 모든 걸 코드로 짜야 하나? 더 빠르고 간 단한 방법이 있다면 그게 더 좋지 않을까? 하는 생각을 자주 하거든요.
그러다 문득, 제가 직접 모아둔 뽐뿌 핫딜 정보를 바탕으로 정말 간단한 웹서비스 하나를 만들어보고 싶다는 생각이 들었어요. 예쁜 UI, 실시간 데이터 연동, 자동화 백엔드까지… 이런 것들을 진짜 ‘한 줄 프롬프트’로 만들 수 있다면? 이라는 도전이 시작된 거죠. 😊
링크 : https://ppomppu-hotdeal-viewer.lovable.app/
진행 방법
1. 도구 선정: Lovable & n8n
Lovable은 최근 알게 된 AI 기반 웹 프론트 제작 도구인데, UI를 한 줄 설명하면 자동으로 웹사이트를 만들어주는 마법 같은 툴이에요. 아직 국내에서는 많이 알려지지 않았지만, 처음 써보고 진짜 깜짝 놀랐어요.
백엔드 쪽은 n8n을 선택했습니다. Webhook, 데이터 가공, 외부 API 호출, Google Sheets 연동 같은 걸 UI로 플로우만 짜서 자동화할 수 있는 노코드 워크플로우 플랫폼이에요. 개발자의 손맛(?)도 있으면서, 반복 작업을 손쉽게 자동화할 수 있어 애정하는 도구 중 하나예요.
2. 프롬프트 한 줄로 UI 만들기
제가 Lovable에 입력한 프롬프트는 아주 간단했어요.
"뽐뿌 핫딜"을 보여주는 웹서비스를 만들어줘. 데이터는 webhook에서 json으로 받아올 거야: https://n8nkorea.online/webhook/BBOMBBUU
이걸 입력하고 잠시 기다리자, 뽐뿌 핫딜 리스트를 보여주는 깔끔한 UI가 완성됐어요. 제목, 카테고리, 조회수, 시간, 그리고 링크까지. 진짜 놀라웠던 건, UI에 들어갈 데이터 구조를 JSON 샘플 없이도 자동으로 유추해서 뷰를 구성해줬다는 점!
멍멍_ 님께서 데이터 수집..! 도와주셨습니다
3. Webhook 데이터 자동 연동
UI는 완성됐으니, 이제 데이터를 실제로 뿌려줄 차례.
저는 이미 Google Sheets에 뽐뿌 핫딜 데이터를 모아두고 있었어요.
n8n에서 Webhook을 하나 만들고, 그 Webhook이 실행되면 Google Sheets에서 데이터를 읽어오도록 설정했죠.
중간에 필요한 필드만 추출해서 JSON 형태로 정리하고, 다시 Webhook으로 응답을 보내도록 했어요.
🛠 n8n 플로우 구성은 이렇게 진행됐어요:
Webhook 노드: GET 요청 수신
Google Sheets 노드: 핫딜 정보 읽기
Set 노드: 필요한 데이터 필드만 추려 정리
Respond to Webhook: 클라이언트에 JSON 반환
4. 실제 데이터 예시
Lovable에서 이 데이터를 받아 화면에 바로 뿌려줘요.
[
{
"title": "메가커피 ICE 아메리카노 (1,560/무료)",
"link": "https://www.ppomppu.co.kr/zboard/view.php?id=ppomppu&page=1&no=618615",
"category": "11번가",
"views": 10769,
"time": "3:54:38"
},
...
]
UI도 이 JSON 구조에 딱 맞게 알아서 구성되니, 정말 신기했어요.
결과와 배운 점
이 프로젝트를 하면서 여러 번 감탄하게 됐어요 😍
💡 러버블의 놀라운 UI 생성 능력
Lovable은 정말로 “프롬프트 한 줄로도 작동하는 UI 생성기”였어요. 처음엔 '말이 쉽지, 실제로는 안 될 텐데?' 라고 의심했는데… 진짜로 거의 원하는 형태로 만들어줬어요. 그리고 결과물도 꽤 예쁘고요. CSS나 HTML을 손대지 않고도 이런 결과물을 얻을 수 있다는 게 너무 신기했습니다.
🧩 수정은 간단하게, 필요한 만큼만
러버블에서 만들어진 결과가 완벽하지 않을 땐, Cursor 같은 에디터에서 살짝 수정만 하면 됩니다. 버튼 위치나 색상, 폰트 같은 건 직접 조절해도 좋고요. Lovable + Cursor 조합이면 프론트는 거의 끝난 느낌이에요.
🔁 n8n으로 완전 자동화
이 프로젝트의 핵심은 자동화였어요. 핫딜 정보는 구글시트에 쌓여 있고, 그걸 API처럼 제공하는 역할을 n8n이 하죠. 한 번 플로우만 잘 짜두면, 언제든 웹서비스에서 실시간 데이터를 불러올 수 있게 되는 거예요. 서버 따로 만들 필요도 없이요.
😍 내가 만든 나만의 서비스
진짜 의미 있었던 건, “나만의 데이터로 나만의 서비스를 만든 것”이었어요. 뭔가 직접 만든 것 같은 기쁨도 있고, 필요한 기능만 딱 들어가 있으니 애정이 더 가요.
그리고 무엇보다, ‘할 수 있다’는 자신감이 생겼어요. 노코드, 로우코드 도구들이 정말 많이 발전했고, 도구를 잘 조합하면 혼자서도 충분히 무언가를 만들 수 있다는 걸 체감했습니다.
도움 받은 글 (옵션)
이번 작업은 거의 직접 실험하며 진행한 내용이어서, 특별히 참고한 글은 없어요. 하지만 n8n의 공식 문서와 Lovable 사용법은 간간히 참고했답니다.
💬 한 마디: 누구나 쉽게 자동화 웹서비스 만들 수 있어요! 🚀
노코드 툴과 AI의 조합은 진짜 무궁무진합니다. 너무 어렵게 생각하지 말고, 일단 도전해보세요! 😄
문과생도 n8n!