Lovable은 자연어 지시를 편집 가능한 웹 애플리케이션 코드로 바꾸는 AI 기반 개발 플랫폼입니다. 창업자, 디자이너, 제품 팀, 개발자가 대화형 반복 과정을 통해 인터페이스를 만들고, 백엔드 서비스를 연결하며, 애플리케이션을 게시하도록 돕습니다. 이 가이드는 플랫폼의 기능, 프로젝트 아키텍처, 그리고 글쓰기 도우미를 위한 실용적인 CometAPI 통합을 설명합니다. 이 통합은 여러분이 빌드한 애플리케이션에 모델 추론을 추가하지만, Lovable 자체의 코딩 에이전트를 대체하는 방법을 제공하지는 않습니다. 독자는 기본적인 HTTP 요청과 JavaScript를 이해하고, 구현 단계를 시작하기 전에 Lovable 프로젝트와 CometAPI 계정에 접근할 수 있어야 합니다.
핵심 요점
AI 지원 개발: 자연어 프롬프트로 애플리케이션을 생성하고 개선.
풀스택 역량: 백엔드 함수, 데이터베이스, 인증, 호스팅과 함께 프런트엔드 경험을 구축.
현대적 아키텍처: 2026년 5월부터 새로운 Lovable 프로젝트는 React 기반 TanStack Start와 SSR 채택.
CometAPI 호환성: 보안 백엔드 함수를 통해 외부 모델 추론 추가.
적합한 사용 사례: MVP, AI 어시스턴트, 내부 도구, 콘텐츠 애플리케이션, 고객 포털.
Lovable이란 무엇이며 어떻게 작동하나요?
(lovable.dev)은 자연어를 사용해 프로덕션급 풀스택 웹 애플리케이션을 구축하는 AI 기반 플랫폼입니다. 플랫폼 탐색은 와 에서 시작할 수 있습니다.
프로토타이핑부터 배포까지 전체 제품 수명주기를 지원하며, GitHub, GitLab, Bitbucket과 코드 동기화가 가능합니다. 빠르게 움직이면서도 코드 소유권을 유지하고 싶은 창업자, 제품 관리자, 비개발자, 팀을 대상으로 합니다. 2023년 스톡홀름에서 Anton Osika와 Fabian Hedin이 시작한 오픈소스 GPT Engineer 프로젝트에서 출발해 Lovable로 리브랜딩/상용화되었습니다.
Lovable은 어떻게 프롬프트를 애플리케이션으로 바꾸나요
애플리케이션의 사용자, 페이지, 기능, 비즈니스 규칙을 설명합니다.
첫 번째 앱을 생성하고 미리보기를 확인합니다.
데이터베이스, 로그인, 결제 또는 외부 API를 연결합니다.
동작을 테스트하고 코드, 디자인, 워크플로를 개선합니다.
게시하거나 내보낸 애플리케이션 코드를 계속 유지관리합니다.
Lovable의 2026년 6월 1일 엔지니어링 글은 2026년 5월 13일부터 신규 프로젝트가 React 기반 TanStack Start와 서버 사이드 렌더링으로 전환되었음을 설명합니다. 기존 React + Vite 프로젝트는 이전 아키텍처를 유지합니다. 서버 함수나 Edge Function 구현을 선택하기 전에 실제 프로젝트 구성을 확인하세요.
Lovable 기술 사양
사양
Lovable
카테고리
AI 기반 웹 애플리케이션 빌더
기본 상호작용
자연어 프롬프트
신규 프로젝트 프레임워크
React 및 TanStack Start
렌더링
신규 프로젝트는 서버 사이드 렌더링
이전 아키텍처
React + Vite
백엔드
Lovable Cloud 및 지원 통합
인증과 데이터베이스
지원
외부 API
커넥터 및 사용자 정의 API 요청
AI 통합
Lovable AI 및 외부 모델 API
코드 액세스
생성된 코드 및 GitHub 워크플로
협업
워크스페이스 및 프로젝트 기능
배포
내장 및 외부 옵션 지원
Lovable은 애플리케이션 개발 플랫폼이며, 파운데이션 모델이 아닙니다. 따라서 파라미터, 컨텍스트 윈도, 토큰 처리량, MMLU 점수는 Lovable 자체를 설명하지 않습니다. 이는 개발 또는 추론에 사용되는 특정 AI 모델에 속하는 특성입니다.
Lovable에서 CometAPI를 구성할 수 있나요?
가능합니다—Lovable로 생성한 애플리케이션 내부에서. CometAPI는 보호된 백엔드 함수에서 모델 요청을 처리할 수 있습니다. 이는 Lovable 자체의 코딩 에이전트를 어떤 모델로 구동하는지 변경하는 것과는 구별됩니다.
선택한 모델과 인터페이스가 지원되는 한, Lovable로 만든 애플리케이션에 CometAPI를 통합할 수 있습니다.
이는 Lovable 자체가 사용하는 개발 프록시 모델을 직접 교체할 수 있음을 의미하지는 않습니다.
애플리케이션이 호출할 모델을 제어하려면, 서버 측 코드에서 모델 라우팅을 구성해야 합니다.
통합
호환성
설명
생성된 앱의 AI 기능
예
보호된 서버 측 API 요청
챗봇 또는 글쓰기 도우미
예
지원되는 CometAPI 채팅 모델 호출
멀티 모델 앱
예
백엔드 라우팅에 모델 ID 구성
Lovable 내부 코딩 모델 교체
표준 설정으로 확립되지 않음
내부 에이전트의 모델 선택은 별개
CometAPI를 통한 백엔드 서비스
예
사용자 정의 HTTP 또는 서버 함수 통합
Lovable 워크스페이스 관리 API
별도
모델 추론이 아닌 플랫폼 리소스를 제어
Lovable의 내부 모델 오케스트레이션 설명은 개발 에이전트가 작업을 라우팅하는 방식을 다룹니다. 아래의 CometAPI 통합은 애플리케이션 추론에 관한 것이며, 내부 에이전트에 대해 문서화된 CometAPI 설정이 있다고 주장하지 않습니다.
Lovable과 CometAPI 아키텍처는 어떻게 동작하나요
Lovable은 여러분이 빌드하는 앱에서 다음 두 가지 방식으로 이를 지원합니다:
Secrets(직접 사용 권장)
COMETAPI_KEY 또는 OPENAI_API_KEY와 같이 CometAPI 키를 프로젝트 시크릿으로 저장합니다. 프로젝트 채팅에서 Lovable에 보안 Edge Function을 통해 API를 통합해 달라고 요청하세요. 키는 서버 측에만 남아 브라우저에 노출되지 않습니다.
커스텀 커넥터
워크스페이스의 Connectors 카탈로그에서 커스텀 커넥터를 생성합니다. 기본 URL(https://api.cometapi.com/v1), 인증(Bearer 토큰 또는 사용자 정의 헤더)을 구성한 다음, CometAPI 키를 붙여 넣어 연결을 추가합니다. 요청은 Lovable의 커넥터 게이트웨이를 통해 전달되어, 자격 증명이 암호화된 상태로 코드 밖에 유지됩니다.
참고:
앱을 위한 Lovable의 내장 AI 기능은 Lovable가 관리하는 키를 사용하며 워크스페이스 크레딧을 소모합니다. 이를 CometAPI(또는 다른 공급자) 키로 교체할 수는 없습니다.
여러분의 앱 내부에서 수행하는 외부 AI 호출(챗봇, 생성 등)은 시크릿 또는 커스텀 커넥터 접근 방식이 작동하며, 사용량은 Lovable 크레딧 대신 CometAPI 계정에 청구됩니다.
최신 문서 기준으로 Lovable 커넥터 카탈로그에 CometAPI의 네이티브/사전 구축 지원이 있다는 증거는 없습니다. 일반 OpenAI 호환 또는 커스텀 API 통합으로 설정합니다.
요약: Lovable은 프롬프트를 풀스택 앱으로 바꾸는 강력한 “바이브 코딩” 빌더이며, 예—여러분이 만든 앱 내부의 AI 기능을 위해 CometAPI 키를 보안 상태로 설정하고 사용할 수 있습니다.
브라우저는 입력을 애플리케이션 백엔드로 전송합니다. 백엔드는 시크릿을 읽고 CometAPI를 호출한 다음 결과를 반환합니다. 개인 API 키를 React 컴포넌트나 기타 클라이언트 측 코드에 절대 넣지 마세요.
Lovable과 CometAPI로 AI 글쓰기 도우미를 만드는 방법
다음 예제는 텍스트 입력, 톤 선택, 서버 측 CometAPI 요청을 갖춘 AI 글쓰기 도우미 SmartWrite를 구축합니다. 신규 프로젝트에는 TanStack 경계 패턴을, 기존 프로젝트에는 완전한 Supabase Edge Function 엔트리 포인트를 선택하세요. 프로젝트에 맞는 백엔드 구현을 하나 선택하고, 시크릿을 구성한 뒤, CometAPI 계정에서 지원되는 채팅 모델을 확인하세요. 게시 전, 여러분의 프로젝트 시크릿과 계정에서 사용 가능한 채팅 모델로 예제를 실행하세요.
Build a responsive AI writing assistant named SmartWrite.
Include a dashboard, a large prompt box, a tone selector
(Professional / Friendly / Concise), a Generate button,
and an output panel with Copy and Clear controls.
Use a clean responsive design with loading states and errors.
Implement AI generation only through a secure server function.
Never expose API credentials to the frontend.
Do not ship mock AI responses.
2단계: CometAPI 자격 증명 구성
CometAPI 계정에서 키를 생성하고, 해당 계정에서 사용 가능한 채팅 모델 ID를 확인하세요. 이 튜토리얼은 서버 측 구성으로 COMETAPI_API_KEY와 COMETAPI_MODEL을 사용하는 직접 백엔드 통합을 사용합니다. 생성된 프로젝트의 백엔드가 지원하는 시크릿 접근 메커니즘을 따르세요.
구성 예시: CometAPI 자격 증명 저장 및 사용 위치
CometAPI에 보안 상태로 연결하려면 Lovable에 서버 측 통합을 생성해 달라고 요청하고, 보안 시크릿 입력 양식을 통해 API 키를 제공하세요. More → Settings → Secrets에서 프로젝트 시크릿을 관리할 수도 있습니다. 외부 Supabase 백엔드를 사용하는 경우 Supabase에서 시크릿을 구성하세요. 공식 Lovable Secrets 가이드를 참고하세요.
다음 네 가지 요구 사항을 따르세요:
API 키는 서버에서만 저장하고 읽습니다. 프로젝트의 보안 Secrets 인터페이스를 통해 COMETAPI_API_KEY를 추가하세요. 서버 측 시크릿 또는 런타임 바인딩에서만 이를 읽으세요. 프런트엔드 코드, 브라우저에서 접근 가능한 환경 변수, 채팅 메시지, 스크린샷에 키를 포함하지 마세요.
프런트엔드 요청에 API 구성을 넣지 마세요. 서버에서 검증된 CometAPI 모델 ID를 사용해 COMETAPI_MODEL을 구성하세요. 프런트엔드는 prompt와 tone만 전송해야 합니다. 허용된 필드에 대해 요청을 검증하고 config, apiKey, model과 같은 예기치 않은 속성은 거부하세요. 클라이언트가 임의의 API 키를 제공하거나 서버 측 모델 구성을 덮어쓰지 못하도록 하세요.
런타임에 맞는 시크릿 접근 방법을 사용하세요. 구현은 프로젝트의 실제 백엔드 환경과 일치해야 합니다. Worker 기반 배포는 주입된 바인딩을 사용하고, Supabase Edge Functions는 Deno.env를 통해 시크릿에 접근할 수 있습니다. process.env, Deno.env, Worker 바인딩이 상호 교환 가능하다고 가정하지 마세요. API 핸들러를 구현하기 전에 시크릿이 어떻게 주입되는지 확인하세요.
게시 후 시크릿 보호를 검증하세요. 프로덕션 JavaScript 번들, 브라우저 DevTools Network 패널, 애플리케이션 로그를 점검하세요. 클라이언트 측 에셋, 요청 본문, 응답, URL, 로그에 API 키가 등장하지 않는지 확인하세요. 또한 CometAPI 요청이 서버에서 실행되고, 무단 구성 덮어쓰기가 거부되는지 검증하세요.
저장된 시크릿이 곧바로 보안성이나 기능성을 보장하지는 않습니다. 서버 측 API 호출이 작동하고, 클라이언트 요청이 보호된 설정을 덮어쓸 수 없으며, 프로덕션 점검에서 자격 증명이 비공개로 유지되는 것이 확인되어야 통합이 준비된 것입니다.
아래 아키텍처 다이어그램을 사용해 프런트엔드-백엔드 경계와 보호된 자격 증명의 위치를 파악하세요. 이 다이어그램은 Lovable 설정 인터페이스의 스크린샷이 아닌 개념도입니다.
Lovable에 줄 프롬프트
SmartWrite를 인증된 백엔드 함수를 통해 CometAPI에 직접 연결하세요. 보안 시크릿 폼으로 COMETAPI_API_KEY를 요청하고, 제가 제공하는 정확한 모델 ID를 COMETAPI_MODEL로 사용하세요. 서버에서만 https://api.cometapi.com/v1/chat/completions로 POST 요청을 전송하세요. prompt와 tone만 수락하고 이를 검증하며, 사용자별 제한을 적용하고, 프런트엔드에는 생성된 텍스트만 반환하세요. 이 프로젝트에 이미 존재하는 백엔드 런타임을 사용하세요. 자격 증명을 채팅, 프런트엔드 코드, 브라우저 요청에 넣지 마세요. 모의 성공 결과를 생성하지 마세요. 통합을 어떻게 테스트하는지 설명하고 실패 시 민감하지 않은 오류를 표시하세요.
Lovable은 관리형 커스텀 커넥터도 지원합니다. 여기의 지침은 의도적으로 API 통합 가이드에 문서화된 직접 통합 경로를 사용하며, 아래 서버 측 헬퍼와 일치합니다.
3단계: CometAPI 채팅 엔드포인트 테스트
신뢰할 수 있는 Bash 터미널에서 로컬로 COMETAPI_API_KEY와 COMETAPI_MODEL을 설정한 뒤, https://api.cometapi.com/v1/chat/completions.에 POST를 테스트하세요. CometAPI의 공식 요청 가이드는 기본 URL, Bearer 인증, 채팅 응답 형식을 문서화합니다. 이 엔드포인트를 지원하는 모델을 선택하세요. 호환성은 모든 공급자 기능이나 파라미터를 보장하지는 않습니다.
# Set COMETAPI_API_KEY securely in this terminal before running.
# Replace the model value with a chat model verified in your account.
export COMETAPI_MODEL="YOUR_VERIFIED_CHAT_MODEL_ID"
: "${COMETAPI_API_KEY:?Set COMETAPI_API_KEY first}"
curl --fail-with-body --max-time 45 \
https://api.cometapi.com/v1/chat/completions \
-H "Authorization: Bearer $COMETAPI_API_KEY" \
-H "Content-Type: application/json" \
--data "$(printf '{"model":"%s","messages":[{"role":"user","content":"Write a customer welcome email."}],"stream":false}' "$COMETAPI_MODEL")"
체크포인트: 성공한 응답에는 choices[0].message.content가 포함됩니다. 인증 실패나 모델 사용 불가가 발생하면, 사용자 인터페이스를 연결하기 전에 이를 수정하세요. 자격 증명 전체나 개인 프롬프트를 진단용 스크린샷에 붙여넣지 마세요.
4단계: 보안 백엔드로 CometAPI 연결
Lovable은 두 가지 백엔드 아키텍처를 지원합니다:
신규 프로젝트(TanStack Start):createServerFn으로 서버에서 API 요청을 처리합니다.
기존 React + Vite 프로젝트: 서버 측 API 호출에 Supabase Edge Functions를 사용합니다.
Supabase 프로젝트 시크릿에 COMETAPI_API_KEY와 COMETAPI_MODEL을 추가한 후, 함수를 배포하세요.
두 접근 방식 모두에서 API 자격 증명은 서버에만 보관하세요. 프로덕션 애플리케이션에서는 인증, 입력 검증, 사용자별 사용량 제한도 구현해야 합니다.
5단계: Lovable 인터페이스 연결
TanStack Start 클라이언트
import { generate } from "./server/writing.functions";
const { text } = await generate({ data: { prompt, tone } });
// Render text as text content, not as trusted HTML.
React + Vite 클라이언트
// Use the existing, signed-in Supabase client generated for your project.
const { data, error } = await supabase.functions.invoke("generate-writing", {
body: { prompt, tone },
});
if (error) throw new Error("Generation failed. Please try again.");
const text = data.text;
선택한 분기(branch)에 맞는 클라이언트를 사용하세요. TanStack은 생성된 RPC 엔드포인트를 사용하고, Supabase는 배포된 generate-writing 함수를 사용합니다. 별도의 /api/generate 경로를 만들 필요가 없습니다. 브라우저는 애플리케이션 세션 토큰을 인증용으로 전송할 수 있지만, 개인 CometAPI 자격 증명이나 구성 객체를 보내서는 안 됩니다. 인터페이스에는 로딩, 실패, 재시도 상태를 표시하세요.
6단계: 애플리케이션 테스트 및 배포
게시 후에는 에디터 미리보기만 믿지 말고 실제 라이브 URL에서 테스트하세요. 개인 테스트 자격 증명을 사용하고, 스크린샷과 증거에서 시크릿 값은 노출하지 마세요. 광범위한 접근을 허용하기 전에 다음 점검을 완료하세요:
빌드된 브라우저 JavaScript, 소스맵, 공개 구성에서 개인 CometAPI 키를 검사하세요. 공유 터미널 출력에 키를 인쇄하거나 보고서에 저장하지 않고 로컬로 검색하세요. 변수명만 보인다고 해서 값이 유출되었음을 의미하지는 않습니다.
브라우저 Network 요청(페이로드, 헤더, 오류 응답 포함)을 점검하세요. 요청에는 허용된 글쓰기 입력과 애플리케이션 인증 데이터만 포함되어야 하며, 개인 CometAPI Authorization 헤더는 서버→공급자 요청에만 존재해야 합니다.
함수 로그, 애플리케이션 로그, 모니터링 트레이스, 오류 보고를 검토하세요. 키, 베어러 토큰, 구성 객체, 상류 오류 본문 전체를 기록하지 마세요. 키가 노출되었다면 폐기 및 교체하고, 노출을 제거한 뒤 재테스트하세요.
미로그인 및 세션 만료 요청을 시도하세요. 둘 다 공급자 호출 전에 거부되어야 합니다. apiKey, config, model을 추가 필드로 제출해 거부되는지 확인하세요. 비어 있거나 과도하게 긴 프롬프트, 잘못된 톤, 공급자 실패, 배포된 사용자별 쿼터를 테스트하세요.
유효한 로그인 요청이 선택한 모델로 텍스트를 생성하는지 확인하세요. 배포 버전과 민감 정보가 제거된 합격/실패 결과를 기록하세요. 이 예제는 여러분의 배포가 이러한 점검을 통과했음을 보장하지 않습니다.
Lovable과 CometAPI로 무엇을 만들 수 있나요?
프로젝트
CometAPI 역할
가능한 기능
AI 글쓰기 도우미
콘텐츠 초안 및 재작성
톤 선택, 템플릿, 에디터
문서 요약기
추출 텍스트 요약
업로드, 문서 Q&A, 핵심 포인트
고객 지원 데스크
분류 및 응답 초안
티켓 분류, 제안 답변
비즈니스 분석 어시스턴트
비즈니스 데이터 설명
KPI 대시보드, 자연어 인사이트
일반 프롬프트는 읽기 쉬운 모델 응답을 생성합니다.
비어 있거나 과도하게 긴 프롬프트는 안전하게 거부됩니다.
API 자격 증명이 브라우저 네트워크 패널에 나타나지 않습니다.
모델 중단 시 민감하지 않은 오류 메시지를 반환합니다.
인증된 사용자에게 요청 제한과 활동 모니터링이 적용됩니다.
레이아웃은 데스크톱과 모바일에서 올바르게 동작합니다.
이는 제안된 프로젝트 패턴이며, 완성되었거나 독립적으로 벤치마크되었다는 주장을 의미하지 않습니다.
FAQ
다중 테넌트 앱에서 한 고객의 레코드가 다른 고객의 AI 응답에 나타나는 것을 어떻게 방지하나요?
검증된 서버 세션에서 테넌트와 사용자 신원을 파생하고, 모델 컨텍스트를 구성하기 전에 모든 데이터베이스 조회를 해당 범위로 제한하세요. 브라우저가 제공한 테넌트 ID를 신뢰하거나 접근 제어를 프롬프트 지시에 의존하지 마세요. 지원되는 경우 행 수준 정책(Row-Level Security)을 추가하고 두 개의 테스트 계정으로 검증하세요. 레코드 ID, 검색 결과, 내보낸 파일, 대화 기록에서 교차 테넌트 접근을 테스트하세요. 이는 애플리케이션 설계 권고이며, 생성된 코드와 플랫폼 스캔이 정책의 정확성을 보장하지는 않습니다.
언제 검색증강생성(RAG)이 모든 프롬프트에 문서를 직접 넣는 것보다 적합한가요?
문서 컬렉션이 매번 보내기엔 너무 크거나, 자주 변경되거나, 소스 수준 추적 가능성이 필요할 때 검색을 사용하세요. 문서를 파싱하고 인덱싱한 뒤, 관련 소수만 검색하여 답변에 소스 식별자를 첨부하세요. 검색은 여전히 평가가 필요합니다. 유창한 답변이 엉뚱한 구절을 인용할 수 있습니다. 접근 필터를 검색 쿼리에 유지하고, 답이 존재하지 않는 질문을 테스트하세요. 작고 안정적인 문서라면 직접 컨텍스트가 더 단순한 출발점일 수 있습니다.
스트리밍을 깨진 또는 오해를 부를 수 있는 응답 없이 추가하려면?
스트리밍을 단순한 stream: false 교체 한 줄이 아닌 별도의 전송 기능으로 취급하세요. 선택한 모델의 스트리밍 형식을 확인하고, 백엔드가 이벤트를 중계하며, UI에서 부분 청크, 취소, 타임아웃, 연결 손실을 처리하세요. 중단된 응답은 불완전으로 표시하고, 사용자가 의도적으로 재시도할 수 있게 하세요. 스트리밍 텍스트를 신뢰된 HTML로 표시하지 마세요. 중간자가 로컬에서 작동해 보이던 스트림을 버퍼링할 수 있으므로, 게시된 호스팅 경로에서 테스트하세요.
다른 모델로 전환하기 전에 폴백 정책이 점검해야 할 것은?
어떤 실패가 재시도 또는 폴백을 정당화하는지 정의하고, 대안이 동일한 엔드포인트, 지시, 도구 스키마, 출력 형식을 지원하는지 확인하세요. 재시도는 한정하고, 일관된 동작이 필요한 워크플로에서 모델을 조용히 바꾸지 마세요. 거부 및 잘못된 출력 사례를 포함한 대표 프롬프트로 폴백을 평가하세요. 모델 출력이 외부 동작을 트리거한다면, 재시도된 생성이 동작을 반복하지 않도록 별도의 확인 또는 멱등성 규칙으로 보호하세요.
파일럿에서 정규 사용으로 AI 기능을 승격하기 전에 팀이 보관해야 할 증거는?
기대 동작, 모델 및 프롬프트 구성, 편집된 요청 메타데이터, 실패 사례 기록이 포함된 버전 관리된 평가 세트를 유지하세요. 사실 정확성, 응답 형태, 지연 시간, 접근 경계에 대한 수용 기준을 정의하고, 모델이나 프롬프트 변경 이후 결과를 비교하세요. 민감한 입력의 경우, 기능을 활성화하기 전에 무엇을 전송하고 보존할지 결정하세요. 이는 제안된 엔지니어링 통제이며, Lovable 또는 CometAPI가 특정 규제 결과를 보장한다는 의미는 아닙니다.
결론: Lovable을 사용할 가치가 있나요?
Lovable은 아이디어를 기능하는 웹 애플리케이션으로 바꾸는 일을 더 쉽게 만들어 줍니다. 풀스택 도구와 외부 통합은 제품 개념을 빠르게 검증하는 데 특히 유용합니다. CometAPI는 챗, 글쓰기, 분석 등 AI 기반 워크플로에서 유연한 모델 추론 경로를 추가합니다.
작고 보안이 확보된 애플리케이션부터 시작해, CometAPI 연결을 테스트하고, 생성된 코드를 검토한 뒤, 핵심 경험이 신뢰할 수 있음을 확인하면 확장하세요.
