Contentful 헤드리스 CMS에서 엔트리·에셋·리치 텍스트를 가져와 콘텐츠 기반 앱을 구동합니다.

Contentful에 앱 연결하기

앱을 Contentful에 연결하여 헤드리스 CMS에서 게시된 콘텐츠(엔트리, 에셋, 리치 텍스트 등)를 가져와 표시하세요.

Contentful은 콘텐츠 관리와 표현을 분리하는 헤드리스 CMS입니다. Contentful 커넥터를 사용하면 Content Delivery API(CDA)를 통해 Contentful 스페이스에서 게시된 콘텐츠를 가져올 수 있습니다. 콘텐츠 기반 페이지, 제품 카탈로그, 블로그, 문서를 Contentful에 저장된 콘텐츠로 구동할 수 있습니다.

이 통합은 앱 + 채팅 커넥터로 제공됩니다. 하나의 공유 연결이 빌드 중 채팅과 게시된 앱 모두에서 작동합니다.

Contentful을 연동하면 앱에서 다음과 같은 작업이 가능합니다.

스페이스에서 게시된 엔트리, 에셋, 콘텐츠 타입 조회
콘텐츠 타입, 로케일, 필드값으로 엔트리 필터링 및 페이지네이션
연결된 엔트리와 에셋을 해석해 완전한 콘텐츠 렌더링
리치 텍스트 필드를 앱 UI에 렌더링

Contentful 커넥터는 읽기 전용이며 Content Delivery API를 대상으로 합니다. Contentful에서 콘텐츠를 작성하고 Lovable 앱을 프런트엔드로 사용해 렌더링할 때 적합합니다.

주요 활용 사례 및 예시 앱

예시 앱	프롬프트 예시	설명
마케팅 및 랜딩 페이지	Contentful을 사용해서 홈페이지와 기능 소개 페이지를 Contentful에서 불러오는 마케팅 사이트를 만들어줘.	CMS 콘텐츠 기반 마케팅 페이지를 구축합니다. Contentful에서 페이지 엔트리를 가져와 컴포넌트로 렌더링하여, 에디터가 코드 변경 없이 텍스트와 이미지를 수정할 수 있습니다.
제품 카탈로그 앱	Contentful을 사용해서 Contentful 스페이스의 제품을 카테고리 필터와 함께 보여주는 카탈로그를 만들어줘.	Contentful에서 관리하는 제품 목록을 표시합니다. 제품 엔트리를 가져와 카드로 렌더링하고, CMS 필드 기반 필터링과 페이지네이션을 지원합니다.
블로그 및 에디토리얼 플랫폼	Contentful을 사용해서 Contentful의 기사를 불러와 리치 텍스트와 이미지를 렌더링하는 블로그를 만들어줘.	Contentful 콘텐츠 기반 블로그를 만듭니다. 기사 엔트리를 가져오고, 연결된 에셋을 처리하고, 리치 텍스트 필드를 포맷된 콘텐츠로 렌더링합니다.
문서 사이트	Contentful을 사용해서 각 문서 페이지가 Contentful 엔트리로 저장된 문서 사이트를 만들어줘.	CMS 콘텐츠 기반 문서를 구축합니다. 문서 엔트리를 가져와 Contentful의 콘텐츠 구조에서 네비게이션과 페이지를 생성합니다.
다국어 콘텐츠 앱	Contentful을 사용해서 Contentful 로케일을 이용해 사용자 언어로 콘텐츠를 불러오는 앱을 만들어줘.	Contentful에서 지역화된 콘텐츠를 제공합니다. 요청된 로케일로 엔트리를 가져와 사용자 언어에 맞는 번역된 콘텐츠를 렌더링합니다.
이벤트 및 공지 페이지	Contentful을 사용해서 Contentful의 이벤트를 불러와 날짜순으로 정렬하는 이벤트 목록 페이지를 만들어줘.	Contentful에서 관리하는 이벤트 목록을 표시합니다. 이벤트 엔트리를 가져와 날짜 필드로 정렬하고, 에디터가 CMS에서 관리하는 예정 이벤트를 렌더링합니다.

Contentful 연결을 만들 수 있는 사용자는 요금제와 워크스페이스 설정에 따라 다릅니다. 앱 + 채팅 커넥터는 Free, Pro, Business 요금제에서 기본으로 사용할 수 있습니다. Enterprise 요금제에서는 처음에 사실상 비활성화되어 있습니다. 관리자가 Connectors → Admin settings → App + chat connectors에서 변경하기 전까지 연결 및 클라이언트를 만들 수 있는 사용자가 No one으로 설정되기 때문입니다.

서로 다른 스페이스나 액세스 토큰을 사용하는 Contentful 연결을 여러 개 만들 수 있습니다. 개발과 프로덕션 환경을 분리하거나 여러 Contentful 스페이스를 연결할 때 유용합니다.

연결을 만든 뒤 Contentful을 사용할 프로젝트에 연결할 수 있습니다. 프로젝트에서 빌드하는 사용자는 누구나 채팅에서 Lovable에 해당 프로젝트를 연결해 달라고 요청할 수 있습니다.

사전 준비

Contentful을 연결하기 전에 다음을 준비하세요.

게시된 콘텐츠가 있는 스페이스를 보유한 Contentful 계정
해당 스페이스의 Space ID
해당 스페이스의 Content Delivery API 액세스 토큰
Lovable 워크스페이스에서 연결 생성 권한(연결 및 클라이언트를 만들 수 있는 사용자 참고)

이 커넥터를 통한 모든 API 요청은 Content Delivery API 액세스 토큰을 사용합니다. API 사용량은 Contentful 요금제 한도에 포함되며, Lovable이 아닌 Contentful에서 직접 과금됩니다.

1단계: Space ID 확인 및 액세스 토큰 생성

Content Delivery API 액세스 토큰을 사용하면 Lovable 앱이 Contentful 스페이스 하나의 게시된 콘텐츠를 읽을 수 있습니다. 필요한 두 값은 모두 Contentful 웹 앱에 있습니다.

Space ID를 확인하고 토큰을 만들려면 다음 단계를 따르세요.

Contentful 스페이스 열기

Contentful에 로그인하고 연결할 스페이스를 엽니다.

Space ID 복사하기

Settings → General settings로 이동해 Space ID를 복사합니다.

API 키 만들기

Settings → API keys로 이동해 Add API key를 클릭합니다. Lovable integration처럼 알아보기 쉬운 이름을 지정하세요.

액세스 토큰 복사하기

Content Delivery API - access token을 복사합니다. Content Preview API 토큰을 복사하지 마세요. 이 커넥터는 게시된 콘텐츠만 읽습니다.

액세스 토큰은 비밀번호와 같습니다. 안전하게 보관하고 절대 공개하지 마세요. 다음 단계에서 Space ID와 액세스 토큰 모두 필요합니다.

자세한 내용은 Contentful의 Space ID 확인 및 인증 문서를 참고하세요.

2단계: Lovable에 Contentful 연결

서로 다른 스페이스나 액세스 토큰으로 여러 연결을 만들 수 있습니다.

Connectors에서 Contentful 열기

Connectors를 열고 Contentful을 선택합니다. 카탈로그를 여는 다른 방법은 커넥터를 찾는 위치를 참고하세요.

연결 추가하기

Add connection을 클릭합니다.

연결 구성하기

Display name: 연결 이름을 입력합니다(예: Contentful Prod). 이 이름은 Lovable 안에서 연결을 식별하는 데만 사용됩니다.
Space ID: Contentful에서 복사한 Space ID를 붙여넣습니다.
Content Delivery API access token: 액세스 토큰을 붙여넣습니다.

이 연결을 사용할 사용자 선택하기

Sharing에서 워크스페이스 내 누가 이 연결을 사용할 수 있는지 정합니다. 새 연결은 기본적으로 본인에게만 비공개이며 Private 라벨이 표시됩니다.

Private(기본값): 접근 목록을 그대로 두면 본인만 연결과 관련 데이터를 사용할 수 있습니다.
Share with others: 이메일로 워크스페이스 멤버를 추가합니다. 본인과 추가한 사람만 연결과 관련 데이터를 사용할 수 있습니다.
Invite entire workspace: Lovable 워크스페이스의 모든 사용자가 연결을 사용할 수 있게 합니다.

자세한 내용은 연결 및 클라이언트를 사용할 수 있는 사용자를 참고하세요.

연결하기

Connect를 클릭합니다. Lovable은 연결을 저장하기 전에 Content Delivery API를 통해 해당 스페이스에 대한 토큰을 검증합니다.

연결이 완료되면 프로젝트에서 빌드하는 사용자는 누구나 채팅에서 Lovable에 프로젝트를 Contentful과 연결해 달라고 요청할 수 있습니다(구성된 연결 수준 접근 권한에 따름). 그러면 Lovable 앱이 Contentful 스페이스의 콘텐츠를 가져올 수 있습니다.

환경 사용하기

각 연결은 스페이스 하나에서 콘텐츠를 읽으며, Lovable은 연결된 프로젝트에 Space ID를 제공하므로 프롬프트마다 반복할 필요가 없습니다. 별도로 요청하지 않으면 스페이스의 master 환경을 사용합니다. 다른 Contentful 환경에서 읽으려면 “staging 환경에서 홈페이지를 불러와 줘”처럼 Lovable에 요청할 때 환경 이름을 지정하세요.

제한 사항

Contentful 커넥터는 읽기 전용이며 Content Delivery API를 대상으로 합니다.

Contentful 커넥터는 다음 작업을 할 수 없습니다.

콘텐츠를 생성, 업데이트, 삭제할 수 없습니다. 편집자는 Contentful 웹 앱에서 콘텐츠를 계속 관리합니다.
초안이나 게시되지 않은 콘텐츠를 가져올 수 없습니다. Content Preview API가 아니라 Content Delivery API에만 접근합니다.
콘텐츠 작성, 스페이스 구성, 에셋 업로드를 위한 Content Management API를 호출할 수 없습니다.
Contentful 웹훅이나 게시 이벤트를 수신할 수 없습니다.
최종 사용자별 Contentful 로그인을 지원하지 않습니다. 각 연결은 연결된 모든 프로젝트가 공유하는 하나의 스페이스와 액세스 토큰을 나타냅니다.

Contentful 연결 관리

연결은 Connectors에서 관리합니다. **Contentful**을 선택한 다음 연결을 여세요.

Unlink projects를 사용하면 다른 프로젝트에서 연결을 계속 사용할 수 있도록 유지하면서 특정 프로젝트의 Contentful 접근 권한만 제거할 수 있습니다. 단계별 절차는 연결에서 프로젝트 연결 해제를 참고하세요.
Delete the connection을 사용하면 워크스페이스에서 연결을 완전히 제거할 수 있습니다. 삭제는 영구적이며 연결된 모든 프로젝트에서 자격 증명이 제거되고, Contentful을 사용하는 앱 기능은 새 연결을 추가할 때까지 작동하지 않습니다. 단계와 삭제 권한은 연결 삭제를 참고하세요.