[Webflow] 웹플로우로 강의 판매 페이지 만들기 (1) - 웹플로우 CMS 활용하기

안녕하세요! 연이음입니다🌼

오늘은 노코드 툴 '웹플로우' 로 강의판매페이지를 만들어볼게요. 바로 시작해볼까요? 

(이 콘텐츠는 '스파르타코딩클럽'의 노코드 종합반 강의를 수강하며 작성한 콘텐츠입니다 ) 

✅ 만들게 되는 것 :  강의판매페이지
- 강의 소개 페이지
- 수강신청' 버튼을 누르면 팝업 오픈 / 신청 완료 팝업
- 신청이 완료되면 이메일로 결과 전송
- 입금 완료 여부 확인 및 리마인드 메일 전송 

✅ 사용 툴 : 웹플로우, 에이테이블, 재피어

 

강의판매페이지를 만들고 여러 데이터와 연결하기 위해서는 '관계형 데이터베이스'를 설계하게 되는데요, 제작에 들어가기 앞서 몇가지 사전지식을 알아보겠습니다. 

사전준비

1. 관계형 데이터베이스 이해하기

: 하나 이상의 열과 행을 가진 테이블의 저장, 데이터 구조가 사전에 정의된 관계로 구성된 것

아래 이미지는 제가 만든 에어테이블 데이터베이스의 일부인데요, 여기서 '열'이란 이름, 이메일, 전화번호 등과 같은 속성(필드)값을 이야기하고, 행이란 이런 여러 속성이 모인 데이터묶음(레코드)을 말합니다. 

 

또한 사전 정의된 관계란, 각각의 데이터가 관계가 있을 경우, 데이터를 식별해주는 키(key)값을 이용하여 데이터가 서로 관계가 있음을 알려주는 것입니다.

 

예를 들어, 어떤 고객이 온라인 서점에서 책을 구매한다고 했을 때, 🙆‍♀️고객을 식별하는 ID 와 📕책을 식별하는 ISBN은 각각의 데이터를 식별해주는 키(key)와 같다고 볼 수 있습니다. 책 배송을 위해, 고객ID와 책 ISBN 정보를 포함한 '주문서🧾' 에는 이러한 키(Key)값이 표시됩니다. 이렇게 고객, 책, 주문서처럼 연결이 된 관계를 '관계가 있다' 라고 표현합니다. (고객이 책 여러 권을 한번에 주문할 수 있는 것처럼, 데이터베이스 간의 관계는 일대일, 일대다, 다대다로 여러 종류가 나올 수 있어요!)

 

2. 강의 판매 데이터베이스 구조 이해하기

❓블로그 만들 때는 컨텐츠 마다 달라지는 곳은 필드(블로그 컨텐츠 하나당 제목, 업로드일자, 에디터노트 등을 각각 필드로 지정) 로 만들었는데, 여기서는 어떤 때 필드를 쓰고 어떤 때 테이블을 쓰나요?

✅ (개별 필드가 아닌) 테이블을 만드는 경우
1) 하나의 레코드가 관련 있는 여러 테이블에 쓰일 때 ('르탄이' 라는 튜터 이름이 여러 강의 페이지에 노출될 때)
2) 여러개의 레코드와 관련이 있는 정보일 때 (리뷰 테이블 = 리뷰 (리뷰작성자 필드+작성일 필드+내용 필드) x n개의 레코드 )

 

이번 강의를 따라가며 만들 페이지는 총 4개의 테이블 (클래스 테이블 / 툴 테이블 / 튜터 테이블 / 리뷰 테이블 ) 이 연결되어 있어요!  각각의 테이블이 포함하고 있는 필드는 아래와 같습니다. 

 

테이블명(필드, 필드 ...) 

- [Class] 클래스 테이블 (클래스 썸네일이미지, 강의명, 강의요약글, 수강료, 강의난이도, 강의오픈일, 강의소개내용, 커리큘럼, 강의상태)

- [Tools] 툴 테이블 (강의에서 사용되는 툴들)

- [Tutors] 튜터 테이블 (프로필 이미지, 튜터 이름, 튜터 이력, 튜터 자기소개)

- [Reviews] 리뷰 테이블 (작성자이름, 작성자직업, 리뷰내용) 

 

클래스 테이블은 툴테이블, 튜터테이블, 리뷰테이블과 연결되어 있기 때문에 각각의 테이블과 서로 관계가 있다고 볼 수 있는데요, 웹플로우에서는 이렇게 서로 관계가 있을 경우 관계를 표현해주는 필드(Reference, Multi-reference)가 추가로 필요합니다.

각 테이블 간의 관계를 살펴보고, 어떤 관계형 필드를 설정해줘야 하는 지 알아보겠습니다. 

 

1. 클래스 테이블과 툴 테이블 [N:N 관계]

: 한 클래스에서 여러 툴이 사용될 수 있고, 여러 툴이 여러 개의 강의에서 사용될 수 있으므로 N:N 관계입니다. 

👉 웹플로우의 클래스 테이블에서는 툴 테이블을 Multi-reference 필드로 설정해줘야 합니다. 

 

2. 클래스 테이블과 튜터 테이블 [1:N 관계]

: 지금은 강사가 1명 뿐이므로, 한 튜터에 여러 클래스인 1: N 관계입니다. 

👉 웹플로우의 클래스 테이블에서는 툴 테이블을 Reference 필드로 설정해줘야 합니다. 

 

3. 클래스 테이블과 리뷰 테이블 [N:N 관계]

:  아직 초기라 리뷰가 많이 없어요😢. 따라서 하나의 클래스에 여러 클래스의 리뷰를 보여줄 수도 있으므로 N:N 관계입니다. 그러나 나중에 하나의 클래스에 하나 강의에 대한 리뷰만 보여지게 된다면, 1: N 관계입니다.  

👉 웹플로우의 클래스 테이블에서는 리뷰 테이블을 쌍방 Multi-reference 필드로 설정해줘야 합니다. 

 

 

강의 판매 데이터베이스를 CMS 에 추가하기

어떤 테이블이 이용되고 각 테이블 간 관계에 대해 파악이 되었다면, 실제 웹플로우 CMS를 이용하여 데이터베이스를 추가해줄 차례입니다. 

 

1. CMS Collections 추가

CMS Collections를 추가합니다. 위에서 다룬 것처럼 Class, Tools, Tutors, Reviews 네개의 컬렉션을 만들어줍니다. 각 컬렉션 추가 시, 컬렉션에 포함되는 '필드(Collection fields)' 도 함께 추가해줍니다. 

 

2. Collections Items 추가

추가된 컬렉션에는 각각 아이템들도 몇개씩 추가해둡니다. 이미지 예시는 Tools 컬렉션에 세가지 아이템(webflow, airtable, zapier) 을 추가해준 모습입니다. 이와 같이, 다른 컬렉션 들에도 각각 아이템을 추가해주세요! 

 

3. 관계형 필드 추가

앞서, 웹플로우에서는 관계를 나타내주는 관계형 필드가 두가지 있다고 했는데요,  각 테이블의 관계에 따라 미리 정의한 관계형 필드(Reference, Multi-reference) 를 추가해줍니다. Class 컬렉션에 필드를 추가하고, 마지막에 관계형 필드 3가지를 아래와 같이 추가해줍니다.  

 

 

여기까지 하면 필요한 컬렉션을 모두 만들었고, 각 컬렉션에 필드를 추가한 뒤, 컬렉션마다 몇개의 아이템도 추가해주었습니다. 또한 데이터 간 관계를 표시해주는 관계형 필드도 추가해주었습니다. 여기까지 하면 웹플로우는 어느정도 마무리가 되었는데요, 다음 글부터는 이 웹플로우와 함께 사용할 '에어테이블'에서 마찬가지로 관계형 데이터베이스를 만드는 법을 알아보겠습니다.