내장 커넥터가 없어도 모든 외부 서비스를 Lovable 앱에 연결합니다. 커스텀 커넥터로 Lovable이 자격 증명을 관리하게 하거나 Lovable에게 서비스를 직접 연결해 달라고 요청합니다.
Lovable에 모든 API 통합
내장 커넥터가 없어도 모든 외부 서비스를 Lovable 앱에 연결하세요. Lovable이 자격 증명을 관리하도록 커스텀 커넥터를 만들거나, Lovable에게 서비스를 직접 연결해 달라고 요청하세요.
Lovable은 내장 커넥터가 없는 서비스까지 거의 모든 외부 서비스에 앱을 연결할 수 있습니다.
권장 경로는 커넥터입니다. Connectors 카탈로그의 커넥터를 사용하거나, 서비스가 카탈로그에 없으면 커스텀 커넥터를 만드세요. 커넥터는 요청을 Lovable의 커넥터 게이트웨이로 라우팅하며, 게이트웨이는 다음을 수행합니다.
- 자격 증명을 앱 밖에 암호화하여 저장합니다.
- 로그인과 token 갱신을 처리합니다.
- 워크스페이스 admin과 owner가 누구에게 연결 사용을 허용할지 통제하게 합니다.
- 한곳에서 접근을 취소할 수 있게 합니다.
요청하면 Lovable이 앱 코드에서 서비스를 직접 연결할 수도 있습니다. 그러면 앱이 자격 증명과 로그인 코드를 소유하며 커넥터 제어는 적용되지 않습니다. 두 경로 모두 모든 플랜에서 사용할 수 있습니다.
API란?
Lovable은 서비스의 API를 통해 그 서비스에 연결합니다. API(Application Programming Interface)는 서비스나 애플리케이션이 서로 통신하며 데이터를 주고받는 구조화된 방식입니다. 무엇을 요청할 수 있고, 무엇을 돌려받으며, 요청을 어떻게 만드는지 정의합니다. 예를 들어 날씨 서비스의 API를 쓰면 앱이 특정 도시의 현재 기온을 요청하고, 앱이 표시할 수 있는 형식으로 답을 돌려받을 수 있습니다.
연결 방식 선택
시작하기 전에 서비스를 연결하는 세 가지 방식을 비교해 보세요.
| 사용 방식 | 원하는 작업 |
|---|---|
| 카탈로그의 커넥터 | Lovable이 이미 지원하는 서비스를 연결합니다. Lovable이 자격 증명을 관리하며, 연결은 프로젝트 채팅과 게시된 앱에서 모두 작동합니다. |
| 커스텀 커넥터 | 카탈로그에 없고 API 키나 OAuth 로그인이 필요한 서비스를 연결합니다. 한 번 정의해 두면 워크스페이스의 모든 사람이 동일한 관리형 자격 증명으로 사용할 수 있습니다. |
| 직접 통합 | 자격 증명이 필요 없는 서비스를 호출하거나, 앱이 서비스를 호출하는 방식을 세부까지 제어하고 키를 프로젝트 secret에서 직접 관리합니다. |
서비스는 인터넷에서 접근할 수 있어야 합니다. 비공개 네트워크 내부에서 온 요청만 받는 서비스에는 Lovable이 접근할 수 없습니다.
인증이 필요 없는 서비스
자격 증명이 필요 없는 서비스는 커넥터도 설정도 필요하지 않습니다. Lovable에게 연결해 달라고 요청하기만 하면 됩니다. 예를 들어 다음과 같습니다.
Integrate Chuck Norris Jokes: https://api.chucknorris.io/jokes/randomLovable은 키가 필요 없음을 감지하고 그 기능을 앱에 직접 추가합니다.
API 키가 필요한 서비스
권장: 커스텀 커넥터 만들기
커스텀 커넥터는 서비스를 워크스페이스의 커넥터 카탈로그에 추가하며, 그 요청은 커넥터 게이트웨이를 거칩니다. API 키, client secret, OAuth 자격 증명은 게이트웨이에 암호화되어 저장되고 서버 측에서 요청에 추가되므로 프로젝트 코드나 채팅에 나타나지 않습니다.
커넥터 만들기
Connectors를 열고 + 버튼을 선택한 다음 Custom connector를 고릅니다. 서비스의 API 세부 정보와 인증 방식을 입력합니다. 모든 field는 커스텀 커넥터 만들기를 참고하세요. 커넥터를 만들려면 워크스페이스 admin 또는 owner 역할이 필요합니다.
연결하고 링크하기
서비스의 자격 증명으로 새 커넥터에 연결한 다음, 프로젝트 채팅에서 Lovable에게 그 연결을 프로젝트에 링크하고 기능을 빌드해 달라고 요청하세요. 프로젝트에 연결 링크를 참고하세요.
대안: 서비스를 직접 연결하기
커넥터를 만들고 싶지 않다면 Lovable이 통합을 앱 안에 작성할 수 있습니다. 그러면 앱이 키와 요청 코드를 소유하며 커넥터 게이트웨이는 관여하지 않습니다.
Lovable은 API 키, client secret, access token을 secret으로 저장하고 이를 읽는 서버 측 코드를 작성하므로 앱 방문자는 값을 볼 수 없습니다. TanStack Start 기반의 최신 앱(2026년 5월 13일부터, Enterprise 플랜은 2026년 6월 22일부터 생성된 앱)에서는 Lovable이 server function을 작성합니다. 더 이전의 React + Vite 앱에서는 Cloud에 Edge Function을 작성합니다.
Google Maps Platform browser key처럼 제공자가 브라우저 사용을 전제로 설계한 키는 예외입니다. 이런 키는 앱의 프런트엔드 코드에 두고 본인 도메인으로 제한합니다. 도메인 제한을 참고하세요.
Lovable에게 서비스를 설명하기
Lovable에게 서비스를 연결해 달라고 요청하며 API에 관한 다음 세부 정보를 함께 전달하세요.
- Endpoint URL과 HTTP method
- 인증 방식(API key header, query param, Bearer token, OAuth)
- 필요한 header(Content-Type, custom header)
- request·response 형식 예시(JSON, param, body)
- OpenAPI spec 또는 문서 링크
이전 앱에서 Cloud 활성화하기
더 이전의 React + Vite 앱에서는 Cloud를 활성화합니다. 최신 앱에는 추가 설정이 필요하지 않습니다.
API 키 입력하기
Lovable이 키를 요청하면 채팅에 입력하지 말고 Add secret 양식에 입력하세요. Lovable이 값을 프로젝트 secret에 바로 저장하므로 채팅 기록에 남지 않습니다. secret은 More → Cloud → Secrets에서도 관리할 수 있습니다. secret 요청 이해하기를 참고하세요.
예를 들어 다음과 같습니다.
Integrate the OpenWeatherMap API.
Base URL: https://api.openweathermap.org/data/2.5.
Auth: API key passed as a query parameter appid.
I need an endpoint to fetch the current weather: GET /weather?q={city}&units=metric&appid={API_KEY}.
Docs: https://openweathermap.org/currentLovable은 서버 측 통합과, 도시를 입력해 날씨 데이터를 조회하는 위젯을 생성합니다.
피드와 위젯 삽입
모든 외부 서비스에 API 호출이 필요한 것은 아닙니다. 많은 서비스는 리뷰 월, 지도, 예약 캘린더처럼 삽입 가능한 위젯을 제공합니다. 프로젝트 채팅에 embed 코드를 붙여넣고 배치해 달라고 요청하면 Lovable이 앱에 위젯을 추가합니다.
소셜 미디어 피드는 조금 더 주의가 필요합니다. 플랫폼마다 앱이 API에서 읽을 수 있는 범위가 다르고, 계정이 본인 소유인지에 따라서도 규칙이 달라집니다. 무엇을 표시하고 싶은지 Lovable에게 알려 주세요. 그러면 직접 붙여 넣은 개별 게시물로 큐레이션된 wall을 만들지, aggregator 서비스의 embed 코드를 쓸지, 본인 계정용 공식 API를 쓸지 설정을 추천합니다.
Add a section to the homepage that shows the latest posts from our own Instagram and TikTok accounts. Recommend the simplest setup that keeps the feed updated, and tell me which accounts or credentials you need from me.일부 소셜 플랫폼은 본인 계정을 읽는 내장 커넥터를 제공합니다. 예를 들어 TikTok과 X(Twitter)가 있습니다.
채팅에서 API 접근
서비스를 이렇게 연결하면 앱에 기능이 추가됩니다. 대신 빌드 중 Lovable이 도구를 컨텍스트로 읽게 하려는데 그 도구가 커넥터 카탈로그에 없다면 커스텀 MCP 서버로 연결하세요.