Claudable - AI 에이전트 기반 오픈소스 웹 애플리케이션 빌더

프로젝트 개요

Claudable은 Claude Code(Cursor CLI도 지원)의 고급 AI 에이전트 기능과 Lovable의 간단하고 직관적인 애플리케이션 구축 경험을 결합한 강력한 Next.js 기반 웹 애플리케이션 빌더입니다. "다크 모드가 있는 작업 관리 앱을 만들고 싶어요"와 같이 앱 아이디어를 설명하기만 하면 Claudable이 즉시 코드를 생성하고 작동하는 앱의 실시간 미리보기를 표시하는 것을 볼 수 있습니다.

이 오픈소스 프로젝트를 통해 전문적인 웹 애플리케이션을 쉽고 무료로 구축하고 배포할 수 있습니다.

핵심 기능

🤖 강력한 AI 에이전트 지원

• Claude Code: 높은 추론 능력, 로컬 실행, 다양한 작동 모드(대화형, 자동 편집, 완전 자동)를 갖춘 Anthropic의 고급 AI 코딩 에이전트
• Cursor CLI: 복잡한 코딩 작업을 위한 지능형 코딩 에이전트
• 네이티브 MCP 지원: Claude Code 및 Cursor CLI 에이전트의 기능을 최대한 활용

💻 개발 경험

• 자연어-코드 변환: 만들고 싶은 것을 설명하기만 하면 Claudable이 프로덕션 준비가 된 Next.js 코드를 생성합니다.
• 실시간 미리보기: 핫 리로드를 통해 변경 사항을 즉시 확인하고 AI가 앱을 구축하는 동안 실시간으로 변화를 확인합니다.
• 제로 구성 시작: 복잡한 샌드박스, API 키 또는 데이터베이스 구성 없이 즉시 구축을 시작합니다.
• 아름다운 UI 생성: Tailwind CSS 및 shadcn/ui를 사용하여 아름다운 사용자 인터페이스를 생성합니다.

🚀 배포 및 통합

• 원클릭 배포: 구성 없이 한 번의 클릭으로 앱을 Vercel에 푸시합니다.
• GitHub 통합: 자동 버전 제어 및 지속적인 배포 설정
• Supabase 데이터베이스: 프로덕션 준비가 된 PostgreSQL 데이터베이스를 프로젝트에 직접 연결합니다.
• 자동 오류 감지: 앱의 오류를 감지하고 자동으로 수정합니다.

💰 비용 이점

• 완전 무료: 앱 빌더 외에 추가 구독료 없음
• 오픈소스: MIT 라이선스, 상업적 용도로 사용 가능
• 벤더 종속성 없음: 생성된 코드의 소유권을 가지며 어디서든 수정하거나 호스팅할 수 있습니다.

기술 아키텍처

프론트엔드 기술 스택

• Next.js: 최신 React 프레임워크
• Tailwind CSS: 유틸리티 우선 CSS 프레임워크
• shadcn/ui: 최신 UI 컴포넌트 라이브러리
• TypeScript: 타입 안전한 JavaScript

백엔드 기술 스택

• Python: 백엔드 API 서버
• SQLite: 로컬 개발 데이터베이스
• PostgreSQL: 프로덕션 환경 데이터베이스 (선택 사항)

AI 에이전트 통합

• Claude Code: 주요 권장 AI 코딩 에이전트
• Cursor CLI: 대체 지능형 코딩 도구
• MCP 지원: Model Context Protocol 네이티브 통합

설치 및 설정

시스템 요구 사항

# 필수 구성 요소
- Node.js 18+
- Python 3.10+
- Claude Code 또는 Cursor CLI (로그인 완료)
- Git

빠른 설치

# 저장소 복제
git clone https://github.com/opactorai/Claudable.git
cd Claudable

# 모든 의존성 설치 (Node.js 및 Python)
npm install

# 개발 서버 시작
npm run dev

애플리케이션 접속 주소

• 프론트엔드: http://localhost:3000
• API 서버: http://localhost:8080
• API 문서: http://localhost:8080/docs

참고: 포트는 자동으로 감지되며, 기본 포트가 사용 중인 경우 다음 사용 가능한 포트가 할당됩니다.

수동 설정 (선택 사항)

# 프론트엔드 설정
cd apps/web
npm install

# 백엔드 설정
cd ../api
python3 -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
pip install -r requirements.txt

사용 흐름

1. AI 에이전트 연결

먼저 Claude Code 또는 Cursor CLI에 로그인했는지 확인하세요:

# Claude Code 로그인
claude
> /login

# Cursor CLI 로그인
cursor-agent login

2. Claudable 시작

npm run dev

3. 프로젝트 요구 사항 설명

자연어로 만들고 싶은 앱을 설명하세요. 예를 들어:

• "사용자 인증 기능이 있는 작업 관리 앱을 만들어줘"
• "다크 모드를 지원하는 개인 블로그를 만들어줘"
• "간단한 전자상거래 웹사이트를 구축해줘"

4. AI가 코드 생성하는 것을 확인

AI가 프로젝트 구조와 코드를 자동으로 생성하며, 실시간으로 미리보기를 확인할 수 있습니다.

5. 프로덕션 환경에 배포

통합된 Vercel 배포 기능을 사용하여 한 번의 클릭으로 앱을 게시합니다.

데이터베이스 관리

로컬 개발

• data/cc.db에 위치한 SQLite 데이터베이스 사용
• 첫 실행 시 자동으로 초기화

유틸리티 명령

# 데이터베이스 백업
npm run db:backup

# 데이터베이스 초기화
npm run db:reset

# 모든 의존성 정리
npm run clean

서비스 통합

GitHub 통합

1. 토큰 가져오기: GitHub Personal Access Tokens → Generate new token (classic) → Select repo scope
2. 연결: Settings → Service Integrations → GitHub → Enter token → Create or connect repository

Vercel 배포

1. 토큰 가져오기: Vercel Account Settings → Create Token
2. 연결: Settings → Service Integrations → Vercel → Enter token → Create new project for deployment

Supabase 데이터베이스

1. 자격 증명 가져오기: Supabase Dashboard → Your Project → Settings → API
   • Project URL: https://xxxxx.supabase.co
   • Anon Key: 클라이언트 공개 키
   • Service Role Key: 서버 측 비밀 키

자주 묻는 질문 해결

권한 오류

# 현재 사용자 확인
whoami

# 프로젝트 디렉토리 소유권 변경
sudo chown -R $(whoami):$(whoami) ~/Claudable

의존성 문제

# 모든 의존성 정리 후 재시도
npm run clean
npm install

WSL 사용자 주의사항

Claude Code를 root 계정이 아닌 사용자 계정으로 실행해야 합니다.

적용 시나리오

1. 빠른 프로토타입 개발

• 스타트업 창업자가 제품 아이디어 검증
• 제품 관리자가 데모 프로토타입 제작
• 디자이너가 인터랙티브 디자인 시안 생성

2. 웹 개발 학습

• 프로그래밍 초보자가 AI가 요구 사항을 코드로 변환하는 과정 관찰
• 최신 웹 애플리케이션 아키텍처 및 개발 프로세스 이해

3. 프론트엔드 개발 자동화

• 프론트엔드 개발자가 반복적인 개발 작업 자동화
• 프로젝트 프레임워크 및 UI 컴포넌트 신속 구축

4. 노코드/로우코드 개발

• 디자이너 또는 마케터가 간단한 웹 애플리케이션을 독립적으로 완성
• 전문 개발자에 대한 의존도 감소

프로젝트 장점

비용 효율성

• 완전 무료: 구독료 또는 사용 제한 없음
• 추가 API 비용 없음: 기존 Claude 또는 Cursor 구독 직접 사용

개발 속도

• 분 단위 개발: 아이디어를 작동하는 앱으로 몇 분 만에 전환
• 프로덕션 준비 완료: 업계 모범 사례를 따르는 깔끔하고 유지 보수 가능한 코드 생성
• 즉각적인 피드백: 실시간 미리보기 기능으로 개발 피드백 루프 단축

유연성

• 다중 AI 에이전트 지원: Claude Code 및 Cursor CLI 지원
• 벤더 종속성 없음: 완전한 코드 소유권
• 맞춤 설정 가능: 생성된 코드 수정 및 확장 가능

미래 개발 계획

프로젝트 로드맵에 따라 곧 출시될 기능은 다음과 같습니다:

• 새로운 CLI 에이전트: 더 많은 AI 코딩 도구 지원
• 대화 체크포인트: 대화/코드베이스 상태 저장 및 복원
• 향상된 MCP 통합: 네이티브 MCP 심층 통합
• 서브 에이전트 시스템: 향상된 에이전트 시스템 아키텍처

오픈소스 정보

• GitHub: https://github.com/opactorai/Claudable
• 개발자: OPACTOR (https://opactor.ai)
• 커뮤니티 지원: 활발한 오픈소스 커뮤니티, 지속적인 업데이트 및 개선

요약

Claudable은 AI 에이전트를 통해 자연어 설명을 배포 가능한 웹 애플리케이션으로 직접 변환하는 웹 개발의 새로운 패러다임을 제시합니다. 이는 웹 개발의 진입 장벽을 낮출 뿐만 아니라 개발 효율성을 크게 향상시켜 현대 개발자 도구 상자에 없어서는 안 될 도구입니다.