/Bubble Development Agency

Bubble.io와 Craft CMS 통합: 단계별 가이드 2024

Bubble.io를 Craft CMS와 원활하게 통합하는 방법을 자세한 단계별 가이드를 통해 배우십시오. 초보자와 경험자 모두에게 이상적입니다.

Craft CMS란 무엇인가요?

Craft CMS는 유연하고 사용자 친화적인 콘텐츠 관리 시스템(CMS)으로, 웹사이트의 개발과 관리에 이용됩니다. 실시간 미리보기, 매트릭스 필드, 멀티 사이트 기능 등 다양한 기능을 제공하여 독특한 디지털 경험을 구축하는 데 도움이 됩니다. Craft CMS는 템플릿에서 직접 콘텐츠 생성과 편집을 지원함으로써, 콘텐츠 전달 시스템에 대한 더 나은 통제를 제공합니다. 라이센싱 모델을 따르며, 무료 및 유료 버전 모두를 제공하며, 기능 강화를 위해 다른 서비스와 통합될 수 있습니다.

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Book a free No-Code consultation

Bubble.io와 Craft CMS을 통합하는 방법은 무엇인가요?

1단계: 준비작업
통합 과정을 시작하기 전에는 반드시 Bubble.io와 Craft CMS 계정이 필요합니다. 이 두 플랫폼에 아직 가입하지 않았다면 가입하세요.

2단계: Bubble.io 애플리케이션 설정

Bubble.io 대시보드로 이동하여 새 앱을 만드세요. 앱 이름, 유형 등의 모든 세부 정보를 작성해야 합니다. 현재는 캔버스에서 빈 페이지를 선택하세요.

3단계: Bubble.io 애플리케이션에서 API 활성화

Bubble.io는 API 워크플로우를 사용하여 다른 플랫폼과 상호 작용합니다. 이를 활성화해야 합니다:

  • Bubble.io 대시보드에서 설정 메뉴로 이동하세요
  • API 탭으로 이동하여 '이 앱은 POST / Workflow API를 공개합니다'라는 체크박스에 표시하세요.

4단계: Craft CMS에서 API 키 생성

Bubble.io가 Craft CMS와 통신하려면 Craft에서 API 키를 생성해야 합니다. 다음 단계를 따르세요:

  • Craft CMS에 로그인하세요.
  • '설정'으로 이동한 다음 'API'를 선택하세요.
  • 'New token'을 클릭하고 필요한 모든 권한을 선택하세요.
  • 토큰에 이름을 지정하고 '저장'을 클릭하세요. 이 토큰은 후에 필요하므로 꼭 기록해 두세요.

5단계: Bubble.io를 Craft CMS에 연결

이제 Bubble.io와 Craft CMS를 설정했으므로 두 플랫폼을 연결할 수 있습니다.

  • Bubble.io의 대시보드에서 'Data' 섹션으로 이동한 다음 'APIs'를 선택하세요.
  • 'Add another API'를 클릭하세요.
  • 'Authentication'에서 'Self-handled via action parameters'를 선택하세요. 이는 이전에 생성한 API 토큰을 사용할 것이기 때문입니다.
  • Craft CMS 웹사이트의 기본 URL과 연결할 엔드포인트를 입력하세요.
  • 'Initialize Call'을 클릭하여 연결을 확인하세요.

6단계: Bubble.io에서 Craft CMS 데이터 사용

Bubble.io와 Craft CMS를 연결한 후, 웹사이트의 데이터를 Bubble에서 사용할 수 있습니다. 방법은 다음과 같습니다:

  • 애플리케이션 편집기에서 데이터를 표시하려는 요소를 선택하거나 생성하세요.
  • 속성 패널에서 'Data Source'를 클릭하고 'Get data from API'를 선택하세요.
  • 이전에 생성한 API를 선택하고, 나머지 옵션을 필요에 따라 조정하세요.

7단계: 확인

이 단계를 모두 완료하면, Bubble.io와 Craft CMS가 통합되었어야 합니다. Craft CMS 웹사이트의 데이터가 Bubble.io 애플리케이션에 성공적으로 나타나는지 확인하여 이를 검증할 수 있습니다. 모든 기능을 테스트하고 발생하는 문제를 수정하세요.

8단계: 출판

모든 것이 의도대로 작동하며, 필요한 모든 것을 Bubble.io 애플리케이션에서 설정한 경우, 작업을 출판할 수 있습니다.

다른 플랫폼을 통합하는 것은 시간이 걸릴 수도 있고, 약간의 시행착오가 필요할 수도 있습니다. 그러나 이 단계를 정확히 따르면, Bubble.io를 Craft CMS에 통합하기 위한 좋은 시작점이 될 수 있습니다.

Bubble.io와 Craft CMS 통합 사용 사례

시나리오: 온라인 교육 플랫폼이 학생들을 위한 사용자 친화적인 웹사이트와 상호작용이 가능한 인터페이스를 만들고자 합니다. 그들은 컨텐츠 관리를 위해 Craft CMS를 사용하며, 사용자 인터페이스 구성 요소를 디자인하기 위해 Bubble.io을 사용합니다. 그들은 웹사이트에서 자동으로 학생의 데이터를 캡처하고, 그들의 시스템에 사용자 프로필을 생성하고자 합니다.

해결책: Bubble.io와 Craft CMS 통합

웹사이트 및 사용자 인터페이스 생성: 온라인 플랫폼은 자신들의 웹사이트의 콘텐츠를 관리하고, 상세정보를 등록하기 위한 양식을 포함한 상호작용이 가능한 인터페이스를 디자인하기 위해 Craft CMS와 Bubble.io를 사용합니다.

통합 설정: 온라인 플랫폼은 Bubble.io에 Craft CMS 플러그인을 설치하고 Craft CMS API 키로 설정합니다. 그들은 웹사이트에서 양식이 제출될 때 트리거되는 Bubble.io에서의 워크플로우를 설정합니다.

데이터 동기화 워크플로우: 학생이 웹사이트에서 양식을 채우면 워크플로우가 트리거됩니다. 제출된 데이터(예: 이름, 이메일, 강의 관심사)는 설정된 Craft CMS 플러그인 액션을 사용해 자동으로 Craft CMS로 전송됩니다. 제출된 정보를 사용하여 Craft CMS에 새로운 사용자 프로필이 생성됩니다.

Craft CMS에서의 사용자 관리: 플랫폼의 관리 팀은 Craft CMS를 사용하여 사용자 프로필, 강의, 그 외 데이터를 관리합니다. 그들은 강의 관심사와 참여에 기초하여 사용자를 세분화하고, 교육 콘텐츠와 커뮤니케이션을 사용자의 구체적인 필요에 맞게 맞춤화할 수 있습니다.

모니터링 및 분석: 통합을 통하여 Craft CMS 내에서의 사용자 활동과 사이트에 대한 상호작용을 이어받아 트래킹할 수 있습니다. 플랫폼은 웹사이트의 효과성 및 사용자 참여를 모니터링하며, 전략을 최적화하기 위한 데이터 기반 결정을 내릴 수 있습니다.

이점:

효율성: 사용자 데이터 캡쳐 과정을 자동화함으로써 시간을 절약하고 수동 오류의 위험을 줄입니다.

중앙집중식 데이터: 모든 사용자 데이터는 Craft CMS에서 저장되고 관리되어, 관리 팀에게 통일된 참조 출처를 제공합니다.

개인화된 사용자 경험: 통합을 통해 사용자의 특정 관심사와 행동에 근거한 교육 콘텐츠 배달을 맞춤화할 수 있습니다.

데이터 통찰력: 플랫폼은 Craft CMS에서 웹사이트의 성능을 분석하고, 사용자 참여 및 성장률에 대한 통찰력을 얻을 수 있습니다.

Bubble.io와 Craft CMS를 통합함으로써, 온라인 교육 플랫폼은 효율적으로 웹사이트 및 사용자 데이터를 관리하고, 개인화된 교육 콘텐츠 배달을 제공할 수 있으며, 사용자 참여 및 전체 플랫폼 성장을 개선하는 데 도움이 되는 유용한 통찰력을 얻을 수 있습니다.

더 유용한 노코드 리소스 살펴보기

No-Code Tools Reviews

Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.

Explore

WeWeb Tutorials

Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.

Explore

No-Code Tools Comparison

Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.

Explore
Want to Enhance Your Business with Bubble?

Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.

Book a free consultation

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Cookie preferences