Contentful에 앱 연결하기
앱을 Contentful에 연결하여 헤드리스 CMS에서 게시된 콘텐츠(엔트리, 에셋, 리치 텍스트 등)를 가져와 표시하세요.
Contentful은 콘텐츠 관리와 표현을 분리하는 헤드리스 CMS입니다. Contentful 커넥터를 사용하면 Content Delivery API(CDA)를 통해 Contentful 스페이스에서 게시된 콘텐츠를 가져올 수 있습니다. 콘텐츠 기반 페이지, 제품 카탈로그, 블로그, 문서를 Contentful에 저장된 콘텐츠로 구동할 수 있습니다.
Contentful을 연동하면 앱에서 다음과 같은 작업이 가능합니다:
- 스페이스에서 게시된 엔트리, 에셋, 콘텐츠 타입 조회
- Contentful CDN 기반 Content Delivery API를 통한 콘텐츠 전달
- CMS 콘텐츠로 동적 페이지 및 레이아웃 구성
- 콘텐츠 타입, 로케일, 필드값으로 엔트리 필터링 및 페이지네이션
- 리치 텍스트 필드를 앱 UI에 렌더링
Contentful 커넥터는 읽기 전용입니다. 콘텐츠 생성, 수정, 삭제는 지원하지 않습니다. 모든 콘텐츠 관리는 Contentful 웹 앱 또는 Contentful Management API에서 수행합니다.
주요 활용 사례 및 예시 앱
| 예시 앱 | 프롬프트 예시 | 설명 |
|---|---|---|
| 마케팅 및 랜딩 페이지 | Contentful을 사용해서 홈페이지와 기능 소개 페이지를 Contentful에서 불러오는 마케팅 사이트를 만들어줘. | CMS 콘텐츠 기반 마케팅 페이지를 구축합니다. Contentful에서 페이지 엔트리를 가져와 컴포넌트로 렌더링하여, 에디터가 코드 변경 없이 텍스트와 이미지를 수정할 수 있습니다. |
| 제품 카탈로그 앱 | Contentful을 사용해서 Contentful 스페이스의 제품을 카테고리 필터와 함께 보여주는 카탈로그를 만들어줘. | Contentful에서 관리하는 제품 목록을 표시합니다. 제품 엔트리를 가져와 카드로 렌더링하고, CMS 필드 기반 필터링과 페이지네이션을 지원합니다. |
| 블로그 및 에디토리얼 플랫폼 | Contentful을 사용해서 Contentful의 기사를 불러와 리치 텍스트와 이미지를 렌더링하는 블로그를 만들어줘. | Contentful 콘텐츠 기반 블로그를 만듭니다. 기사 엔트리를 가져오고, 연결된 에셋을 처리하고, 리치 텍스트 필드를 포맷된 콘텐츠로 렌더링합니다. |
| 문서 사이트 | Contentful을 사용해서 각 문서 페이지가 Contentful 엔트리로 저장된 문서 사이트를 만들어줘. | CMS 콘텐츠 기반 문서를 구축합니다. 문서 엔트리를 가져와 Contentful의 콘텐츠 구조에서 네비게이션과 페이지를 생성합니다. |
| 다국어 콘텐츠 앱 | Contentful을 사용해서 Contentful 로케일을 이용해 사용자 언어로 콘텐츠를 불러오는 앱을 만들어줘. | Contentful에서 지역화된 콘텐츠를 제공합니다. 요청된 로케일로 엔트리를 가져와 사용자 언어에 맞는 번역된 콘텐츠를 렌더링합니다. |
| 이벤트 및 공지 페이지 | Contentful을 사용해서 Contentful의 이벤트를 불러와 날짜순으로 정렬하는 이벤트 목록 페이지를 만들어줘. | Contentful에서 관리하는 이벤트 목록을 표시합니다. 이벤트 엔트리를 가져와 날짜 필드로 정렬하고, 에디터가 CMS에서 관리하는 예정 이벤트를 렌더링합니다. |
Contentful 연결하기
워크스페이스 admin 또는 owner가 Contentful을 연결할 수 있습니다.
서로 다른 API 키나 스페이스를 사용하여 Contentful 연결을 여러 개 만들 수 있습니다. 개발/운영 환경 분리나 여러 Contentful 스페이스 연결에 유용합니다.
연결을 만들면 해당 워크스페이스의 모든 프로젝트에서 Contentful을 사용할 수 있습니다.
사전 준비
Contentful을 연결하기 전에 다음을 준비하세요:
- 게시된 콘텐츠가 있는 스페이스를 보유한 Contentful 계정
- 해당 스페이스의 Content Delivery API(CDA) 액세스 토큰
- Space ID
- Lovable 워크스페이스 owner 또는 admin 권한
이 커넥터를 통한 모든 API 요청은 Content Delivery API 액세스 토큰을 사용합니다. API 사용량은 Contentful 요금제 한도에 포함되며, Lovable이 아닌 Contentful에서 직접 과금됩니다.
1단계: Space ID 확인 및 CDA 액세스 토큰 생성
Space ID와 CDA 액세스 토큰은 모두 Contentful 웹 앱에서 확인할 수 있습니다.
Space ID 확인:
- app.contentful.com에 로그인합니다.
- 연결할 스페이스를 엽니다.
- Settings → General settings로 이동합니다.
- Space ID를 복사합니다.
자세한 안내는 Contentful 문서를 참고하세요: Find space ID
Content Delivery API 액세스 토큰 생성:
- 같은 스페이스에서 Settings → API keys로 이동합니다.
- Add API key를 클릭하거나 기존 키를 엽니다.
- 키에 이름을 지정합니다. 예:
Lovable integration - Content Delivery API access token을 복사합니다.
자세한 안내는 Contentful 문서를 참고하세요: Authentication
액세스 토큰은 비밀번호와 같습니다. 안전하게 보관하고 절대 공개하지 마세요. 다음 단계에서 Space ID와 액세스 토큰 모두 필요합니다.
2단계: Lovable에 Contentful 연결
- Settings → Connectors → Shared connectors에서 Contentful을 선택합니다.
- Add connection을 클릭합니다.
- Display name에 연결 이름을 입력합니다. 예:
Contentful Prod - Space ID를 입력합니다.
- Content Delivery API access token을 입력합니다.
- Connect를 클릭합니다.
연결이 완료되면 Lovable 앱에서 Contentful 스페이스의 콘텐츠를 가져올 수 있습니다.
Contentful 연결에서 프로젝트 연결 해제
Editor 이상 권한을 가진 사용자는 연결 자체를 삭제하지 않고 특정 프로젝트만 연결 해제할 수 있습니다. 연결은 다른 프로젝트에서 계속 사용할 수 있습니다.
연결 해제 방법:
커넥터로 이동
Settings → Connectors → Shared connectors에서 **Contentful**를 선택합니다.
연결 열기
관리할 연결을 엽니다.
프로젝트 선택
Linked projects에서 연결 해제할 프로젝트를 선택합니다.
확인
Unlink projects를 클릭하고 확인합니다.
연결 해제 후 해당 프로젝트는 이 연결을 통해 Contentful에 접근할 수 없습니다. 필요하면 다른 연결로 다시 연결할 수 있습니다.
Contentful 연결 삭제
워크스페이스 admin 또는 owner가 Contentful 연결을 삭제할 수 있습니다.
연결 삭제는 영구적이며 되돌릴 수 없습니다. 연결된 모든 프로젝트에서 인증 정보가 제거되며, 새 연결을 만들기 전까지 이 연결을 사용하던 앱은 동작을 멈춥니다.
삭제 전에 Linked projects 섹션에서 현재 이 연결을 사용 중인 프로젝트를 먼저 확인하세요.
삭제 방법:
커넥터로 이동
Settings → Connectors → Shared connectors에서 **Contentful**를 선택합니다.
연결 열기
삭제할 연결을 엽니다.
연결된 프로젝트 확인
Linked projects 섹션을 확인합니다.
삭제
Delete this connection에서 Delete를 클릭하고 확인합니다.