Build Anything with Firebase Studio + n8n AI Agents (Beginner’s Guide)

원본 영상: Build Anything with Firebase Studio + n8n AI Agents (Beginner’s Guide)

한 줄 요약

Firebase Studio(vibe coding)로 프론트엔드를 만들고, n8n 워크플로가 Apify SEO Audit Actor를 실행해 결과를 웹앱에 돌려주는 SEO 감사 도구를 처음부터 구축한다.

핵심 내용

Firebase Studio에서 프론트엔드 생성 — URL 입력창과 결과 탭 레이아웃을 갖춘 웹앱을 프롬프트로 생성. Gemini/Genkit 사용 금지 지시(do not use Gemini, n8n will handle the webhook)를 반드시 포함해야 n8n 연동이 깨지지 않는다.
Firebase → n8n 웹훅 연결 — 사용자가 URL을 제출하면 POST 요청으로 n8n 웹훅에 URL을 전송. Firebase가 처음에 웹훅 URL을 제대로 반영하지 않는 경우가 많아 “please send the website URL to this webhook URL”을 반복 지시해 수정.
n8n 워크플로 3단계 구성
- Apify SEO Audit Actor 실행 (HTTP Request 노드로 직접 호출)
- ChatGPT 노드로 응답 데이터 구조화
- Aggregate 노드로 여러 페이지 결과를 단일 리스트로 병합 후 Firebase에 반환
Firebase에 JSON 응답 구조 알려주기 — webhook.site로 실제 수신 데이터를 눈으로 확인한 뒤, 그 JSON 구조를 Firebase에 붙여넣어 “please change the webhook response to receive data in the following JSON format”으로 지시.
반복 수정 — Firebase는 현 시점에서 버그가 잦음. 오류 발생 시 “Fix errors” 버튼으로 자가수정시키고, 원하는 동작과 실제 동작을 구체적으로 설명해 재수정.

전술·요소

항목	내용
Firebase 프롬프트 핵심 구문	`do not use Gemini, n8n will handle the webhook`
Apify 호출 방식	HTTP Request 노드 → import cURL로 자동 설정
Apify Actor	SEO Audit Tool (store에서 검색)
스크레이핑 페이지 수 제한	4페이지 (Firebase 타임아웃 방지)
중복 페이지 제거	Code 노드로 URL 파라미터 중복 제거 스크립트
데이터 병합	Aggregate 노드로 4개 항목 → 단일 리스트
ChatGPT 노드 구성	System(역할 정의) + User(입력 데이터) + Assistant(출력 예시) 3단 구성
JSON 구조 확인 도구	webhook.site
디자인 개선 프롬프트	”turn this into a beautiful dashboard with as many graphs and charts as possible”

수치·사례

Apify 무료 크레딧: 월 $5 자동 리셋 (본인 언급)
Apify SEO Audit 실행 시간: 약 28~39초/회 (실측, Apify runs 탭 기준)
Firebase 앱 생성 소요 시간: 약 5분 (실측)
감사 항목: word count, total links, unoptimized images, 페이지별 상세 내역

도구·워크플로

사용 도구

Firebase Studio (Google, 무료)
n8n (무료 시작 가능)
Apify — SEO Audit Actor (무료 월 $5 크레딧)
webhook.site (JSON 수신 구조 확인용)
ChatGPT (n8n 노드 내 데이터 구조화)

n8n 워크플로 흐름

Webhook (수신: URL)
  → HTTP Request (Apify SEO Audit Actor 실행, POST)
  → Code 노드 (중복 URL 제거, 페이지 수 4로 제한)
  → ChatGPT 노드 (데이터 구조화)
  → Aggregate 노드 (4페이지 → 단일 리스트)
  → Respond to Webhook (JSON → Firebase)

Apify 연동 팁 — n8n에 native integration 없음. HTTP Request 노드에서 “import cURL”로 Apify API 문서의 cURL 예시를 붙여넣으면 전체 설정 자동 완성. API 키는 Apify Settings → API Keys에서 발급.