지저분한 HTML에서 AI-Ready 뉴스 앱으로, Firecrawl + Lovable과 함께
Source: Dev.to
Introduction
“Agentic” 워크플로우 시대에 가장 큰 병목 현상은 LLM이 아니라 데이터입니다. 대부분의 웹사이트는 HTML, 광고, 팝업 등으로 뒤죽박죽이라 일반적인 스크래퍼가 제대로 작동하지 못합니다.
Firecrawl은 Lovable과의 네이티브 통합을 선보였습니다. 아이디어는 간단하지만 강력합니다: Firecrawl은 웹을 깔끔하고 LLM‑준비된 데이터로 변환하는 어려운 문제를 처리하고, Lovable은 UI, 앱 로직, 배포 등 나머지 모든 작업을 담당합니다.
이 통합을 통해 Lovable 사용자는 Firecrawl API에 직접 연결해 전통적인 스크래핑 코드를 작성하지 않고도 웹 데이터 기반 애플리케이션을 만들 수 있습니다.
실제로 Pulse Reader 를 구축해 보면서 이 통합이 어떤 가능성을 열어주는지 확인했습니다. Pulse Reader는 복잡한 뉴스 URL을 깔끔하고 구조화된 AI‑준비 요약으로 변환하는 최신 AI 뉴스 집계기입니다.
The Stack
- Ingestion: Firecrawl (특히
/scrape와/extract기능). - Frontend / App Logic: Lovable (AI 풀스택 엔지니어링 툴).
- Styling: Glassmorphism 미학을 적용한 Tailwind CSS.
Configuring the Firecrawl “Engine”
인제스트 레이어는 Firecrawl부터 시작합니다. API 키 하나로 맞춤형 스크래퍼를 완전히 대체하는 관리형 추출 파이프라인에 접근할 수 있습니다.
Firecrawl의 강점은 단순함에 있습니다. 복잡한 셀렉터를 작성하는 대신, API에 Markdown 형식으로 출력해 달라고 요청하면 됩니다. 이렇게 하면 원본 사이트가 얼마나 지저분하든 앱은 깔끔하고 표준화된 문자열을 받게 됩니다.
“Vibe‑Coding” the UI with Lovable
웹 데이터가 표준화되면, Lovable이 애플리케이션 생성을 담당합니다. 자연어 명령을 사용해 Lovable은 다음을 자동으로 생성합니다:
- 애플리케이션 인터페이스
- 데이터 흐름 연결
- Firecrawl API 통합
- 배포 가능한 출력물
The Data Flow
사용자가 Pulse Reader에 URL(예: TechCrunch)을 붙여넣으면 다음과 같은 과정이 진행됩니다:
- Request: 프론트엔드가 URL을 Firecrawl에 전송합니다.
- Extraction: Firecrawl은 안티‑봇 헤더를 우회하고, JavaScript를 렌더링한 뒤 “잡음”(광고/사이드바)을 제거합니다.
- Transformation: 정제된 Markdown이 앱으로 반환됩니다.
- UI Render: Pulse Reader는 Markdown을 아름답고 읽기 쉬운 카드 형태로 표시합니다.
Over‑Delivering with “Copy Markdown”
하위 AI 워크플로우를 지원하기 위해 Pulse Reader는 Copy Markdown 및 Download Feed 액션을 제공합니다. 이를 통해 추출된 콘텐츠를 추가 정리나 변환 없이 바로 ChatGPT, Claude와 같은 도구에 활용할 수 있습니다.
Conclusion
Pulse Reader를 구축하면서 복잡한 데이터 툴을 만드는 장벽이 사라졌음을 확인했습니다.
- Firecrawl은 웹 데이터를 위한 “깨끗한 파이프” 역할을 하며, 실시간 웹 콘텐츠에 대한 안정적이고 프로덕션‑급 인제스트 레이어를 제공합니다.
- Lovable은 인터페이스를 빠르게 구축하는 엔진으로, 프롬프트 기반 워크플로우를 통해 애플리케이션 개발을 압축합니다.
아직 진행 중인 작업 → Live Demo 확인하기