버블(bubble.io)로 개인 강의 사이트 만들기 1탄

1인 창업자가 많아지면서 개인 강의 사이트를 제작하려는 분들이 많아지고 있다. 물론 라이브 클래스를 비롯해서 개인 강의 사이트를 제작할 수 있는 서비스가 있지만, 지속적으로 나가는 고정비용과 수수료는 1인 창업자 입장에선 부담스러울 수밖에 없다. 이와 같은 문제는 노코드 툴인 버블로 쉽게 해결이 가능하다. 복잡한 로직이 필요한 강의 사이트부터 간단한 강의사이트까지 모두 만들 수 있기 때문이다.

만약 강의 사이트 제작을 생각하고 있다면, 버블의 핵심 기능을 활용해서 제작해 보는 것도 나쁘지 않은 선택이라 생각한다. 게다가 자기 계발까지 할 수 있으니 여러모로 성장하는 계기를 만들어 줄 수 있을 것이다.

 

 

1. 데이터 베이스 설계

본격적인 강의 사이트 제작에 앞서 먼저 해야 할 것은 데이터 베이스를 설계하는 것이다. 제작 경험이 없는 사람들이 가장 어려워 하는 것이 데이터 베이스 설계기 때문에 전문적으로 버블(bubble.io)을 다루고 싶은 분들이라면 데이터 베이스 공부를 해두는 것이 좋다.

강의 사이트 같은 경우 크게 4가지 데이터 타입이 필요하다. 데이터 베이스에 대한 기초가 없다면 아래 소개하는 구성으로 시작하는 걸 추천하고 싶다.

 

유저 데이터 타입

코스 데이터 타입

코스 모듈 데이터 타입

리뷰 데이터 타입

2. 강의 코스 기능 만들기 

데이터 베이스 설계가 완료되었으니 본격적인 기능을 개발할 수 있다. 가장 처음으로 만들 기능은 크레이터가 자신의 강의를 업로드할 수 있는 기능이다. 버블(bubble.io) 파워풀한 이유는 각 페이지 별로 데이터 베이스를 연결하고 다양한 로직을 구현할 수 있다는 것이다. 

유데미와 같은 강의 사이트에서 가장 중요한 것은 크리에이터가 자신의 코스를 구축하고 게시하는 기능이다. 이와 같은 업로드 기능은 다양한 형태로 가능하지만, 모든 내용을 다루기에는 텍스트라는 한계가 있기 때문에 최소한의 기능으로 설명해 보려 한다.

 

강의 업로드 예시

 

위와 같이 input 페이지를 완성했다면, "Add modules" 버튼으로 새로운 트리거를 만들면 된다. 워크플로우는 새로운 데이터를 생성하고, 수정하는 등 백엔드 작업이라고 생각하면 이해가 쉬울 것이다.

 

버블(bubble.io) 워크플로우 생성 화면

워크플로우를 생성했다면 다음으로 할 일은 데이터 베이스에 새로운 코스에 대한 정보를 업로드해 주는 것이다. 앞서 설명한 바와 같이 예시에는 기본적인 정보만 추가했지만, 필요한 필드가 있다면 얼마든지 추가할 수 있다.

 

새로운 코스 정보를 업데이트하는 워크 플로우

새로운 강의를 성공적으로 업로드했으니, 업로드한 강의 불러와줄 페이지가 필요하다. 업로드한 강의를 "uploade-modules" 페이지로 보내주기 위해 두 번째 스텝으로 "Go to page"를 활용할 것이다. "Go to page"를 클릭한 뒤 아래 이미지와 같이 설정해 주면 "uploade-modules" 페이지에 새로운 강의 데이터가 전달된다. 이렇게 새로운 강의 정보가 전달되면, 해당 페이지에서 모든 정보를 불러올 수 있게 된다. 이와 같은 작업을 실제 코드로 구현한다면 얼마나 손이 많이 갈지 상상이 되질 않는다. 정말 어메이징한 기능인 것 같다.

 

업로드 된 강의 데이터를 전달하는 화면

새로운 페이지로 데이터를 보낼 때는 데이터 베이스와 똑같은 타입으로 설정해주는 것이 중요하다. 똑같이 설정해야 한다고 하니 어려울 것 같지만, 설정창에 보이는 Type of content에서 "Course" 타입으로 설정만해 주면 된다. 

 

전달 받은 데이터와 같은 Type으로 설정

새로운 강의 데이터를 받을 준비가 완료되었으니 이젠 화면에 표시해 주기만 하면 된다. 이 과정만 완료하면 새로운 강의를 런칭할 수 있는 준비가 끝나게 된다. 

새로운 강의 추가될 때마다 같은 작업을 반복할 필요가 없으니, 데이터를 불러올 때는 리피팅 그룹을 사용하는 것이 좋다. 화면에 리피팅 그룹을 추가했다면, 리피팅 그룹이 보여줄 데이터 타입을 설정해 주고, 불러오고 싶은 데이터를 꺼내서 보여주면 된다. 아래 이미지를 확인해 보면 어렵지 않게 따라 할 수 있을 것이다.

리피팅 그룹에서 보여줄 데이터 불러오기

데이터를 불러와 나열하는 모습

이제 "Course"했던 것과 마찬가지로 "Course-module"에도 비슷한 작업을 해주면 된다. 이렇게 되면 세팅을 하게 되면 런칭할 준비가 거의 끝나는 것이다. 처음 하는 사람에게는 어려울 수 있지만, 사실 데이터 베이스를 어떻게 다룰 줄 아느냐가 버블(bubble.io)의 핵심이라고 할 수 있다. 

Course-module에워크플로우 추가 하기

Course-module에 데이터 추가하는 화면

새로운 강의가 추가되었으니, 두 번째 스텝에서는 input 필드를 초기화 해주는 작업을 해주면 된다. 업로드 완료 후에는 input 창에 입력 되었던 데이터를 지우는 것이다. 만약 이 과정을 설정하지 않으면 새로운 강의를 입력할 때 하나하나 모두 지워야 하는 번거로움이 생길 수 있으니 참고하면 좋을 것 같다.

input 필드 리셋 설정

이제 거의 마무리 단계까지 왔다. 이 단계까지 왔다면 당신은 천재이거나 노코딩에 상당한 재능이 있는 것이다. 새로운 강의를 모두 만들었으니 이젠 런칭만 해주면 된다. 트리거는 "Publish course" 버튼으로 설정하면 된다.

새로운 강의 런칭 버튼 세팅

이번 워크플로우에서 설정해야 하는 건 이미 업로드가 완료된 강의를 유저들이 볼 수 있도록 설정하는 것이다. 이번 설정은 의외로 간단하다. 처음 데이터 필드를 만들 때 "no"로 설정되었던 필드를 "yes"로 바꿔주기만 하면 되기 때문이다. 여기서 주의할 점은 "create a new thing"이 아니라 "Make chages to thing"를 선택해야 한다는 것이다. 이유는 새로운 데이터를 만드는 것이 아니라, 기존 데이터를 바꿔주는 것이기 때문이다.

데이터 필드 수정 작업

개인 강의 사이트 만들기 1탄은 여기까지. 개인 강의 사이트라고 했지만, 유데미처럼 강의 플랫폼을 만들 수도 있고, 마켓플레이스로 응용할 수도 있는 기능이니 참고하면 좋을 것 같다.