Lovable

✋ 소개

Lovable은 실제 운영 중인 Lovable을 클론한 사이드 프로젝트입니다. 자연어 대화만으로 웹 애플리케이션을 생성할 수 있는 AI 기반 풀스택 플랫폼으로, 사용자가 채팅으로 원하는 앱을 설명하면 AI 에이전트가 코드를 생성하고 샌드박스 환경에서 실시간으로 실행하여 즉시 결과를 확인할 수 있습니다.

데모

🧑‍🤝‍🧑 구성원

• 프론트엔드 및 백엔드 : 1명

💻 기술 스택

• Next.js, React, TypeScript
• tRPC, Prisma, PostgreSQL
• NextAuth (GitHub OAuth)
• Inngest, Inngest Agent Kit
• E2B Code Interpreter
• OpenAI GPT-4.1
• Tailwind CSS, shadcn/ui
• TanStack React Query, React Hook Form
• Zod, SuperJSON
• Prism.js

📁 프로젝트 구조

src/
├── app/                          # Next.js App Router
│   ├── (dashboard)/              # 대시보드 (인증 필요)
│   │   └── (routes)/dashboard/
│   │       ├── home/             # 홈 페이지
│   │       ├── projects/         # 프로젝트 목록
│   │       │   └── [projectId]/  # 프로젝트 상세
│   │       └── analytics/        # 분석 페이지
│   ├── (public)/                 # 공개 페이지
│   │   └── (routes)/
│   │       ├── page.tsx          # 랜딩 페이지
│   │       └── pricing/          # 요금제 페이지
│   └── api/
│       ├── auth/                 # NextAuth 핸들러
│       ├── trpc/                 # tRPC 엔드포인트
│       └── inngest/              # Inngest 웹훅
├── components/                   # React 컴포넌트
│   ├── ui/                       # shadcn/ui 컴포넌트
│   ├── projects/                 # 프로젝트 관련 컴포넌트
│   ├── file-explorer.tsx         # 파일 탐색기
│   ├── code-view/                # 코드 뷰어
│   └── tree-view.tsx             # 파일 트리
├── server/                       # 백엔드 로직
│   ├── api/routers/              # tRPC 라우터
│   ├── auth/                     # 인증 설정
│   └── db.ts                     # Prisma 클라이언트
├── inngest/                      # AI 에이전트 워크플로우
│   ├── client.ts                 # Inngest 클라이언트
│   ├── functions.ts              # 코드 에이전트 정의
│   └── utils.ts                  # 유틸리티
└── prompt.ts                     # AI 시스템 프롬프트

🏗️ 아키텍처

아키텍처

사용자의 메시지는 다음과 같은 흐름으로 처리됩니다.

1. 사용자가 채팅으로 원하는 앱을 설명
2. tRPC를 통해 메시지가 서버로 전달
3. Inngest 이벤트 큐에 작업 등록
4. AI 에이전트(GPT-4.1)가 E2B 샌드박스에서 코드 생성 및 실행
5. 생성된 파일과 샌드박스 URL이 데이터베이스에 저장
6. React Query가 5초 간격으로 폴링하여 UI 실시간 업데이트

🤔 왜 E2B인가

코드 생성 환경으로 E2B Code Interpreter를 선택했습니다. E2B는 클라우드 기반의 격리된 샌드박스를 제공하여, 서버에 Docker를 직접 운영하지 않고도 안전한 코드 실행 환경을 구성할 수 있습니다. 샌드박스마다 독립된 Next.js 환경이 프리셋으로 구성되어 있어, AI가 생성한 코드를 즉시 빌드하고 미리보기할 수 있습니다.

🤔 왜 Inngest인가

AI 코드 생성은 수십 초에서 수 분까지 소요될 수 있는 장시간 작업입니다. 이를 일반 API 요청-응답 사이클로 처리하면 타임아웃 문제가 발생합니다. Inngest의 이벤트 기반 워크플로우와 Agent Kit을 활용하여, 메시지 전송 시 비동기 이벤트를 발행하고 백그라운드에서 AI 에이전트가 동작하도록 설계했습니다. 이를 통해 사용자는 요청 후 즉시 응답을 받고, 생성 결과는 폴링을 통해 자연스럽게 업데이트됩니다.

내가 기여한 기능

프로젝트 생성

• 사용자가 원하는 앱을 설명하면 프로젝트가 생성되고, AI 에이전트가 코드를 생성합니다.
• 프로젝트 생성 시 tRPC mutation을 통해 데이터베이스에 저장하고, Inngest 이벤트를 트리거합니다.

프로젝트 생성

AI 채팅 및 코드 생성

• Inngest Agent Kit을 활용하여 AI 에이전트가 샌드박스 환경에서 코드를 생성합니다.
• 시스템 프롬프트로 Next.js + shadcn/ui + Tailwind CSS 환경에서의 코드 생성 규칙을 정의했습니다.

AI 채팅

실시간 미리보기 및 코드 브라우저

• 생성된 앱은 E2B 샌드박스 URL을 iframe으로 렌더링하여 실시간으로 확인할 수 있습니다.
• "Preview"와 "Code" 탭을 전환하며 생성된 코드를 Prism.js 구문 강조와 함께 탐색할 수 있습니다.
• 파일 트리를 통해 생성된 모든 파일을 계층적으로 탐색할 수 있습니다.

프로젝트 업데이트

• 기존 대화 맥락을 유지하며 추가 요청을 통해 프로젝트를 점진적으로 개선할 수 있습니다.
• 이전 대화 기록과 생성된 파일 정보가 에이전트에 전달되어 일관된 코드 수정이 가능합니다.

업데이트 요청 업데이트 결과