5일 만에 8.4K 스타를 기록한 Firecrawl의 Open Lovable이 화제입니다. 이 프로젝트는 단 한 번의 클릭으로 어떤 웹

[brooks]

5일 만에 8.4K 스타를 기록한 Firecrawl의 Open Lovable이 화제입니다. 이 프로젝트는 단 한 번의 클릭으로 어떤 웹사이트도 복제할 수 있습니다.

최근에 이 Open Lovable 프로젝트를 처음 봤을 때는 스타가 몇백 개에 불과했습니다. Bolt나 Manus 같은 프로젝트를 복제하는 사례가 너무 많아서 별다른 관심을 두지 않았죠.

최근에 다시 확인해보니 성장 속도가 매우 빠릅니다. Open Lovable은 GitHub에 출시된 지 5일 만에 8.4K Star를 기록하며 인기 프로젝트로 부상했습니다. 현재는 10K+를 돌파했습니다.

Open Lovable은 Firecrawl을 개발한 Mendable AI에서 출시한 오픈소스 프로젝트로, 몇 초 만에 어떤 웹사이트도 복제하고 편집 가능한 React 애플리케이션으로 재구성할 수 있습니다.

유사한 상업용 제품인 Lovable AI(구독 요금 필요)와 달리, Open Lovable은 완전히 무료이며 오픈소스(MIT 라이선스)로 제공되어 사용자가 코드를 자유롭게 복제, 수정 및 배포할 수 있습니다.

빠른 웹사이트 복제: 대상 웹사이트의 URL을 인터페이스에 입력하면 Open Lovable이 자동으로 Firecrawl을 호출해 해당 사이트의 콘텐츠를 크롤링한 후 AI를 통해 대응하는 React 프로젝트 코드를 생성하고, 최종적으로 완전하게 실행 가능한 애플리케이션을 출력합니다.

Open Lovable는 다양한 기술을 통합하여 엔드투엔드 웹사이트 복제 프로세스를 구현합니다:

• E2B 샌드박스: 클라우드 기반 격리 실행 환경으로, 생성된 React 코드를 안전하게 실행하여 실행 시 악성 또는 오류 스크립트가 로컬 환경에 영향을 주지 않도록 합니다. 개발자는 무료 E2B API 키를 신청하여 코드를 샌드박스에 제출해 컴파일 및 테스트할 수 있습니다.

• Firecrawl 웹 크롤링: Firecrawl은 Mendable 팀이 개발한 강력한 크롤링 API로, 웹 페이지를 효율적으로 크롤링하고 구조화된 콘텐츠(HTML, 텍스트, 이미지 등)를 반환하며, 일반적인 JavaScript 렌더링 및 크롤링 방지 메커니즘을 자동으로 처리합니다. Open Lovable에서 Firecrawl은 대상 웹사이트의 레이아웃과 데이터를 크롤링하여 AI 모델에 입력으로 제공합니다.

• 통합 프로세스: 위 구성 요소는 협업하여 반복 가능한 프로세스를 형성합니다. 먼저 Firecrawl이 웹 페이지 콘텐츠를 크롤링한 후 AI 모델이 React 코드를 생성하고, 마지막으로 E2B 샌드박스가 실행 결과를 출력합니다.

Next.js 애플리케이션 예시:

Open Lovable은 GitHub에 공개된 지 5일 만에 8.4K Star를 획득하며 인기 프로젝트로 등극했습니다.

이는 Firecrawl 자체의 인기도와 관련이 있습니다. 또한 원본 폐쇄형 소스 Lovable의 인기도와도 관련이 있습니다. 

원본 (Lovable.dev):

2023년 중반: 전신 프로젝트 GPT-Engineer가 오픈소스로 공개되어 GitHub에서 52,000 스타를 획득하며 GitHub에서 화제를 모았으며, 이는 상업화 전환의 사용자 기반을 마련했습니다.

상업용 버전 Lovable은 이후 60일 만에 1,000만 달러 ARR (연간 매출)을 달성했으며, 8개월 만에 1억 달러 ARR을 돌파해 Cursor, OpenAI 등 기업보다 빠른 성장 속도를 보였습니다.

출시 시 27,000명의 대기 목록을 쌓았으며, 30일 사용자 유지율이 85% (ChatGPT보다 높음)를 기록했습니다.

오픈소스 버전과 클로즈드 소스 Lovable의 차이점

네, 오픈소스 버전은 주로 프론트엔드 생성에 초점을 맞췄으며, 클로즈드 소스 버전은 전체 스택을 지원합니다. 사용된 Firecrawl은 이전에 클론 생성 효과를 시연했으며, 결과는 우수했습니다:

Open Lovable의 웹사이트 클론: URL을 입력하면 AI 에이전트가 웹 페이지 구조를 분석하고 편집 가능한 React 애플리케이션 복사본을 생성하며, 추가 개발을 지원합니다.동적 콘텐츠 생성: Firecrawl을 통해 외부 데이터(예: 뉴스 목록)를 수집하여 데이터 기반 컴포넌트를 자동 생성합니다.

상업용 버전 Lovable.dev는 다중 사용자 동시 편집(Google Docs와 유사)을 지원하여 팀 효율성을 높이며, 사설 프로젝트, 맞춤형 도메인, 고급 보안 기능, 우선 기술 지원 등 부가 서비스를 제공합니다.

• 더 유연한 요금제(예: 신용 한도 기반 요금제)를 제공하며, 기업용 맞춤형 서비스도 지원합니다.

• 고급 사용자 관리, 권한 제어 및 통합 기능(예: GitHub, Supabase 등)을 제공합니다.

• 상업용 버전 무료 사용 한도는 하루 5회이며, 고급 기능은 유료 구독이 필요합니다.

실제로 이 Open Lovable 프로젝트 이전에 또 다른 클론 도구가 새롭게 출시되었습니다: ScreenCoder는 중국과학원 학생 팀이 개발한 오픈소스 도구로, 임의의 UI 화면 캡처나 디자인 스케치를 깨끗하고 편집 가능한 HTML/CSS 코드로 변환할 수 있습니다.

이 도구는 다중 에이전트 기반의 모듈화 아키텍처를 채택해 시각적 이해, 레이아웃 계획, 코드 생성을 단계별로 수행합니다. 최종 출력 코드는 원본 디자인 스타일을 유지하면서도 높은 편집 가능성을 갖추고 있습니다. ScreenCoder는 다양한 대형 모델(예: “Doubao”, 알리바바의 “Qwen”, OpenAI의 GPT 시리즈, 구글의 Gemini 등)을 호출해 코드를 생성할 수 있습니다.

개발자나 디자이너는 모델의 API 키만 준비하면 ScreenCoder를 통해 인터페이스 디자인을 실행 가능한 웹 코드로 빠르게 변환할 수 있습니다.

Lovable의 사용자 성장 전략을 알아보세요

오픈소스 커뮤니티의 구축은 Lovable에게 “무료 R&D와 마케팅”을 제공했습니다. 제품 공식 출시 전 이미 많은 사용자 및 커뮤니티 멤버들이 제품에 관심을 보이고 신뢰를 쌓았습니다. 이 “오픈소스 우선” 전략은 고객 획득 비용을 낮췄으며, 후속 상업화 기반을 마련했습니다.

Lovable은 다양한 방법으로 사용자 참여와 커뮤니티 운영을 장려합니다:

• 사용자 생성 콘텐츠(UGC) 및 공유: Lovable은 “Launched” 플랫폼을 제공하여 사용자가 Lovable로 구축한 애플리케이션을 공유할 수 있도록 합니다. 이는 “소셜 통화 효과”를 형성합니다. 사용자는 프로젝트 공유, 해커톤 참여, 사례 제출 등을 통해 사용자 간 상호작용과 확산을 촉진합니다.

• 커뮤니티 인센티브 및 보상 메커니즘: Lovable은 ‘Linkable’ 도구, 사용자 생성 콘텐츠(UGC) 및 커뮤니티 활동(예: 해커톤)을 통해 사용자 참여와 확산을 장려합니다. 예를 들어, 사용자가 제출한 프로젝트가 ‘Launched’ 플랫폼에 전시되고 투표 메커니즘을 통해 평가받는 것은 사용자의 참여감과 성취감을 강화합니다.

• 커뮤니티 피드백과 반복 개선: Lovable 팀은 사용자 피드백을 중요하게 여기며, 사용자 요구사항에 신속히 대응하여 제품 기능을 지속적으로 최적화합니다. 예를 들어, 사용자가 피드백한 UI 문제와 기능 요구사항은 신속히 수정 및 개선되어 사용자 충성도를 높입니다.

3. 소셜 확산과 바이러스식 전파

Lovable

은 “소셜 확산” 메커니즘을 통해 사용자 증가를 촉진합니다:

• 사용자 생성 콘텐츠(UGC)의 확산: 사용자가 생성한 프로젝트와 사례가 “생생한 광고”로 작용해 소셜 플랫폼(예: Twitter, LinkedIn)을 통해 확산되어 신규 사용자를 유치합니다.

• 커뮤니티 주도형 입소문 확산: Lovable의 사용자 커뮤니티와 생태계(예: Discord, 포럼, 블로그)는 사용자가 자발적으로 확산하고 홍보하는 채널로 기능합니다.

4. 오픈소스와 커뮤니티 주도형 비즈니스 모델

Lovable의 성장 전략은 “먼저 커뮤니티, 나중에 비즈니스”라는 경로를 강조합니다. 오픈소스 커뮤니티는 Lovable에 초기 사용자 및 신뢰를 제공했을 뿐만 아니라 후속 상업화 기반을 마련했습니다. 오픈소스 프로젝트의 성공은 많은 개발자와 사용자를 유치해 Lovable의 상업화에 “무료 트래픽”과 “신뢰 보증”을 제공했습니다.

Open Lovable 빠른 시작

Open Lovable을 사용하는 기본 단계는 매우 간단합니다:

1. 리포지토리를 클론하고 의존성 설치: 터미널에서 실행:git clone https://github.com/mendableai/open-lovable.git
2. cd open-lovable
3. npm install프로젝트를 클론하고 필요한 Node.js 패키지를 설치합니다.
4. API 키 구성: 프로젝트 루트 디렉토리에 .env.local 파일을 생성하고, 획득한 E2B, Firecrawl 및 AI 모델(예: Groq/Kimi 또는 OpenAI/GPT, Anthropic/Claude)의 API 키를 입력합니다. 이 키는 코드 실행, 웹 페이지 크롤링 및 AI 인터페이스 호출을 안전하게 수행하기 위해 사용됩니다.
5. 시작 및 클론: npm run dev를 실행하여 로컬 개발 서버를 시작합니다. 브라우저에서 http://localhost:3000를 열습니다. 애플리케이션 인터페이스에 임의의 웹사이트 URL을 붙여넣습니다(예: https://example.com). Open Lovable은 먼저 Firecrawl로 사이트 데이터를 크롤링한 후 Kimi 모델을 통해 React 프로젝트를 생성하고, 최종적으로 완전한 React 애플리케이션 패키지를 출력합니다. 사용자는 이 패키지를 다운로드하여 npm start로 실행할 수 있습니다.
6. 확장 및 배포: 사용자는 필요에 따라 다른 모델(예: Kimi 대신 Claude/GPT 사용)로 전환하거나, 프로젝트 소스 코드(src/pages/index.tsx 내의 힌트 단어나 프레임워크 대상)를 수정하거나, 프로젝트를 GitHub에 직접 푸시하고 Vercel 등 플랫폼을 통해 배포하여 온라인에 공개할 수 있습니다.
7. 이상입니다.