Storyblok에 앱 연결하기
앱을 헤드리스 CMS이자 비주얼 페이지 빌더인 Storyblok에 연결하여 에디터가 관리하는 스토리, 컴포넌트, 에셋으로 콘텐츠 기반 사이트와 앱을 구동하세요.
Storyblok은 콘텐츠 팀이 Storyblok 앱에서 관리하는 게시 또는 미리보기 콘텐츠(스토리, 링크, 태그, 데이터소스)를 Lovable 앱이 가져올 수 있게 해주는 헤드리스 CMS입니다. 편집 워크플로, 비주얼 페이지 빌딩, 구조화된 콘텐츠가 코드베이스 외부에 존재하는 앱을 위해 설계되었습니다.
Storyblok을 사용하면 앱에서 다음과 같은 작업이 가능합니다:
- Content Delivery API에서 스토리, 링크, 태그, 데이터소스 가져오기
- Storyblok 스토리와 컴포넌트를 기반으로 콘텐츠 기반 사이트 구축
- 라이브 경험을 위한 게시 콘텐츠 또는 초안 미리보기를 위한 미리보기 콘텐츠 사용
- Storyblok 리치 텍스트와 컴포넌트를 앱에서 직접 렌더링
- 콘텐츠 필드에서 SEO 메타데이터(title, description, og:image) 구동
Storyblok 커넥터는 읽기 전용이며 Storyblok의 Content Delivery API(CDN)를 대상으로 합니다. 콘텐츠가 Storyblok에서 작성되고 Lovable 앱이 이를 렌더링하는 프런트엔드인 경우에 적합합니다.
주요 활용 사례 및 예시 앱
| 예시 앱 | 프롬프트 예시 | 설명 |
|---|---|---|
| Storyblok 기반 마케팅 사이트 | Storyblok을 사용해서 랜딩 페이지, 블로그 포스트, 내비게이션을 Storyblok에서 가져오는 마케팅 사이트를 만들어줘. | Storyblok에서 관리하는 콘텐츠로 전체 마케팅 사이트를 렌더링합니다. 앱이 슬러그로 스토리를 가져와 일치하는 컴포넌트를 렌더링하고 SEO 메타데이터를 표시하므로 에디터가 코드 변경 없이 페이지를 출시할 수 있습니다. |
| 블로그 또는 편집 사이트 | Storyblok을 사용해서 기사를 나열하고 태그 필터링을 지원하며 Storyblok에서 리치 텍스트를 렌더링하는 블로그를 만들어줘. | Storyblok 스토리로 구동되는 편집 읽기 경험을 구축합니다. 앱이 스토리 목록을 페이지네이션하고, 태그나 콘텐츠 타입으로 필터링하며, 각 포스트에 대한 리치 텍스트와 임베디드 컴포넌트를 렌더링합니다. |
| 제품 카탈로그 또는 디렉토리 | Storyblok을 사용해서 에디터가 Storyblok에서 목록을 관리하고 앱이 슬러그로 상세 페이지를 렌더링하는 제품 디렉토리를 만들어줘. | Storyblok 스토리를 구조화된 디렉토리로 전환합니다. 앱이 필터와 함께 항목을 나열하고, 슬러그로 상세 페이지에 딥링크하며, 전적으로 Storyblok에서 관리되는 필드를 렌더링합니다. |
| 문서 또는 지식 베이스 | Storyblok을 사용해서 섹션, 사이드바, 검색 친화적인 페이지가 있는 Storyblok 기반 문서 사이트를 만들어줘. | 탐색 가능한 구조의 Storyblok에서 문서를 게시합니다. 앱이 스토리 트리를 읽고, starts_with 쿼리에서 내비게이션을 구축하며, 풍부한 콘텐츠에서 각 페이지를 렌더링합니다. |
| 다국어 콘텐츠 사이트 | Storyblok을 사용해서 Storyblok 번역을 사용하여 방문자의 언어로 콘텐츠를 렌더링하는 현지화된 사이트를 만들어줘. | 단일 Storyblok 공간에서 현지화된 경험을 제공합니다. 앱이 라우트별로 올바른 언어 버전을 가져오고 번역이 누락된 경우 우아하게 폴백합니다. |
| 에디터를 위한 미리보기 환경 | Storyblok을 사용해서 게시 전 에디터에게 초안 콘텐츠를 보여주는 미리보기 사이트를 만들어줘. | 에디터가 게시되지 않은 작업을 검토할 수 있는 방법을 제공합니다. 미리보기 토큰으로 연결되면 앱이 version=draft를 요청하여 에디터가 진행 중인 스토리를 라이브 전에 볼 수 있습니다. |
| 랜딩 페이지 생성기 | Storyblok을 사용해서 각 스토리 슬러그가 히어로, 기능, CTA가 있는 전체 페이지를 렌더링하는 랜딩 페이지 앱을 만들어줘. | 마케터가 Storyblok에서 비주얼적으로 랜딩 페이지를 구성할 수 있게 합니다. 앱이 Storyblok 컴포넌트를 UI 컴포넌트에 매핑하고 슬러그로 키가 지정된 완전한 페이지를 렌더링합니다. |
Storyblok 연결 방법
워크스페이스 admin과 owner가 Storyblok을 연결할 수 있습니다.
다른 액세스 토큰을 사용하여 여러 Storyblok 연결을 만들 수 있습니다. 이는 환경 분리(예: 개발과 프로덕션), 다른 공간이나 지역 대상 지정, 게시된 콘텐츠와 미리보기 콘텐츠 간 전환에 유용합니다.
연결이 만들어지면 Storyblok이 워크스페이스의 모든 프로젝트에서 사용 가능해집니다.
사전 요구사항
Storyblok을 연결하기 전에 다음을 준비하세요:
- Storyblok 계정과 공간(space)
- 해당 공간의 Content Delivery API 액세스 토큰(public 또는 preview)
- Lovable 워크스페이스 owner 또는 admin 역할
이 커넥터를 통한 모든 API 요청은 Content Delivery API 액세스 토큰을 사용합니다. API 사용량은 Storyblok 플랜 한도에 포함되며 청구는 Lovable이 아닌 Storyblok에서 직접 처리됩니다.
1단계: Storyblok 액세스 토큰 발급
Content Delivery API 액세스 토큰을 사용하면 Lovable 앱이 Storyblok 공간에서 콘텐츠를 가져올 수 있습니다. 게시된 콘텐츠와 미리보기 콘텐츠를 위해 별도의 토큰을 만들 수 있습니다.
Storyblok 액세스 토큰을 만들려면:
Storyblok 공간 열기
Storyblok 앱에 로그인하고 연결할 공간을 엽니다.
액세스 토큰 열기
Settings → Access Tokens으로 이동합니다.
새 토큰 생성
Generate new token을 클릭합니다.
- 설명적인 이름을 입력합니다(예:
Lovable integration). - 액세스 수준을 선택합니다:
- Public: 게시된 콘텐츠만 반환합니다. 프로덕션 사이트에 사용하세요.
- Preview: 게시된 콘텐츠와 초안 콘텐츠를 반환합니다. 스테이징이나 에디터 미리보기 환경에 사용하세요.
- Generate를 클릭하고 토큰을 복사합니다.
공간 지역 확인
공간의 지역(EU, US, CA, AP, 또는 CN)을 확인하세요. 공간 설정에서 찾을 수 있으며 Lovable에서 선택하는 지역과 일치해야 합니다.
액세스 토큰은 비밀번호처럼 작동합니다. 안전하게 보관하고 절대 공개하지 마세요. 다음 단계에서 필요합니다.
자세한 지침은 Storyblok 문서를 참고하세요: Content Delivery API v2.
2단계: Storyblok을 Lovable에 연결
다른 액세스 토큰을 사용하여 여러 연결을 만들 수 있습니다.
Storyblok을 연결하려면:
Connectors에서 Storyblok 열기
Connectors → App connectors로 이동하여 Storyblok을 선택합니다.
연결 추가
Add connection을 클릭합니다.
연결 구성
- Display name: 연결의 이름을 지정합니다(예:
Storyblok Prod). - Space region: Storyblok 공간이 호스팅되는 지역(EU, US, CA, AP, 또는 CN)을 선택합니다. 기본값은 **European Union (EU)**입니다. 지역은 토큰이 속한 공간과 일치해야 합니다. US 공간의 토큰은 EU CDN에 인증되지 않습니다.
- Public or preview access token: Content Delivery API 토큰을 붙여넣습니다.
- Who can access this connection: 특정 사람으로 접근을 제한하거나 전체 워크스페이스를 초대합니다. 자세한 내용은 연결 수준 접근을 참고하세요.
연결
Connect를 클릭합니다.
연결되면 Lovable 앱이 Storyblok 콘텐츠를 가져오기 시작할 수 있습니다.
게시 콘텐츠와 미리보기 콘텐츠 작업
Storyblok Content Delivery API는 요청에 따라 다른 콘텐츠를 반환합니다:
- Public 토큰은 게시된 콘텐츠만 반환할 수 있습니다.
- Preview 토큰만 초안을 반환할 수 있습니다.
Lovable에 프롬프트할 때 어떤 버전을 원하는지 언급하세요. 예: 에디터 미리보기를 위한 "초안 콘텐츠 보여줘" 또는 프로덕션 사이트를 위한 "게시된 콘텐츠 사용해줘".
제한 사항
Storyblok 커넥터는 읽기 전용이며 Content Delivery API(CDN)를 대상으로 합니다.
Storyblok 커넥터는 다음을 할 수 없습니다:
- 콘텐츠 생성, 수정, 삭제(에디터는 Storyblok 앱에서 콘텐츠를 계속 관리)
- 콘텐츠 작성, 공간 구성, 에셋 업로드를 위한 Storyblok Management API 호출
- Storyblok 웹훅 또는 게시 이벤트 수신
- 최종 사용자별 인증(각 연결은 단일 공유 토큰을 사용)
Storyblok 연결에서 프로젝트 연결 해제하는 방법
Editor 이상은 연결을 완전히 삭제하지 않고 특정 프로젝트를 연결에서 제거할 수 있습니다. 연결은 다른 프로젝트에서 계속 사용 가능합니다.
프로젝트 연결을 해제하려면:
Connectors 열기
Connectors를 열고 App connectors로 이동한 다음 **Storyblok**을 선택합니다.
연결 열기
관리하려는 연결을 엽니다.
프로젝트 선택
Linked projects에서 연결 해제하려는 프로젝트를 체크합니다.
확인
Unlink projects를 클릭하고 확인합니다.
연결이 해제되면 해당 프로젝트는 이 연결을 통해 더 이상 Storyblok에 접근할 수 없습니다. 프로젝트가 다시 Storyblok이 필요하면 사용 가능한 연결에 연결할 수 있습니다.
Storyblok 연결 삭제 방법
워크스페이스 admin과 owner는 Storyblok 연결을 삭제할 수 있습니다.
연결 삭제는 영구적이며 취소할 수 없습니다. 연결된 모든 프로젝트에서 자격증명이 제거되며 이 연결을 사용하는 앱은 새 연결이 추가될 때까지 작동을 멈춥니다.
삭제하기 전에 Linked projects 섹션을 검토하여 현재 어떤 프로젝트가 연결을 사용하고 있는지 확인하세요.
연결을 삭제하려면:
Connectors 열기
Connectors를 열고 App connectors로 이동한 다음 **Storyblok**을 선택합니다.
연결 열기
제거할 연결을 엽니다.
연결된 프로젝트 검토
Linked projects 섹션을 검토합니다.
삭제
Delete this connection에서 Delete를 클릭하고 확인합니다.