Brevo(구 Sendinblue)로 bubble.io에 자동 이메일 세팅하기

이전 글에서 Brevo(구 Sendinblue)를 소개했다. 이번 글은 Brevo를 사용해서 노코드솔루션인 버블(Bubble.io)에 자동 이메일을 설정하는 방법이다.

 

2024.04.17 - [explore] - 스티비, 메일침프가 비싸다면? Brevo(구 Sendinblue)로 하루 300개까지 무료로 이메일 보내기

 

 

개발자나 디자이너 없이 프로덕트 만들기- Bubble.io

Bubble.io는 개발자나 디자이너 없이 프로젝트 아이디어를 프로토타입 형태로 만들거나, 그 자체로 '서비스'로 론칭해서 운영할 수 있도록 도와주는 노코드 솔루션이다. 웹또는 앱으로 운영할 수 있지만, 웹에 좀더 특화되어있고 앱 분야는 Flutterflow가 꽤 알려져있다. Bubble.io는 코드의 외부 추출이 안되지만, Flutterflow는 Flutter나 Python으로 코드의 추출이 가능하다. 서버 역시 Bubble.io는 AWS, Flutterflow는 Firebase를 사용한다. 

 

Bubble.io은 디자인이나 workflow에 적응하려면 시간이 좀 필요하지만, 일단 적응하고나면 프론트나 백엔드 개발자 없이 왠만한 기능들은 혼자 구현할 수 있어서 잘 사용중이다. 토스, 카카오로그인, 네이버와 같은 국내용 서비스들의 플러그인도 이미 구축이 되어있어서 무료로 사용할 수 있다. 나 역시 현재 bubble.io로 2개의 프로젝트를 운영하고 있다. 

 

Bubble.io는 무료로 사용할 수 있지만, 무료 버전은 사용할 수 있는 Workload가 제한적이고 무엇보다 커스텀 도메인이 적용되지 않는다. 가장 저렴한 플랜은 월 36,000원 정도로 아임웹으로 쇼핑몰을 구축할때와 비슷한 요금이다. 플랜 비교는 아래를 참고. 가격 정보 자세히 보기

 

노코드 솔루션 버블(Bubble.io)의 플랜

 

버블(Bubble.io)과 브레보(Brevo) 연동 1단계- Brevo 세팅하기

먼저 Brevo를 세팅해보자.

1. Brevo 회원 가입

Brevo 무료 회원 가입 후 회사 이메일 계정을 등록한다. 개인 지메일로 가입후 Sender로 회사 이메일을 지정할 수 있으니 참고. 나도 개인 지메일로 계정을 만든 후 2가지 회사 도메인을 각각 sender로 등록해두었다. 

 

최근 구글의 메일 관련 정책 강화되어서 sender 지정시 도메인 인증이나 DKIM같은 설정도 중요한데 (안하면 스팸으로 걸러지고 발송이 안되기도 함) 브레보 안에서 간편하게 할 수 있다.

 

 

2. 템플릿으로 이메일 설정하기

이메일 계정 등록 후 대시보드>좌측 메뉴의 캠페인> 템플릿> 이메일 템플릿을 선택하고, 

오른쪽의 Create a Template 버튼을 클릭한다.   

 

Create a Templat을 선택하면 아래와 같은 화면이 나오고, 템플릿 이름과 메일 제목을 적은 후 보내는 이메일 주소를 어느 계정으로 할지 선택하면 된다. 

 

 

Advanced Option을 선택하면, 답장받을 이메일 주소나 태그나 첨부 파일 등을 추가할 수 있다.

 

모든 설정을 마친후 원하는 레이아웃을 선택해서 이메일을 작성한다. 

메일침프나 스티비에서 지원되는 템플릿 유형과 큰 차이가 없고, 좌측 컨텐츠 영역에서 블록이나 섹션을 선택하면 꽤 자유롭게 커스텀으로 디자인 할 수 있다. 무료인데 이 정도의 기능이 지원되는게 좋다. 

브레보(Brevo)의 이메일 템플릿 레이아웃

 

브레보(Brevo)의 이메일 템플릿 커스텀 디자인

 

기본 요소로만 간단하게 아래처럼 만들었다. 무료 플랜일 경우 메일 하단에 Brevo 로고가 보인다. 메일 설정을 마친 후 우측 Save 버튼을 눌러 저장한다.

 

 

 

3. API 설정하기

Brevo에서 템플릿으로 이메일을 작성해뒀다면 이제 API 세팅을 하면된다. 헤더의 오른쪽에 있는 계정 이름 옆의 드롭다운을 눌러 메뉴를 열고 SMTP & API를 누른다.

 

Generate a new API key를 눌러서 이름을 입력하고 Generate를 누르면 API가 만들어진다. 만들어진 API키값은 이 화면에서만 보여지기 때문에 반드시 복사해서 다른곳에 따로 저장해둔다. 

 

 

 

2단계 Bubble.io 세팅하기

Bubble.io에서 데이터 타입 설정 및 플러그인 설치

 

무료 플랜을 사용해도 Brevo로 자동 이메일을 세팅할 수 있다.

Bubble.io의 대시보드에서 Data를 선택, 데이터 타입에서 User를 설정한다. 아래 이미지와 같이 이메일은 기본 세팅이 되어있으니, 새로운 필드 생성해서 Name 항목을 만들어서 이름 필드를 만들어둔다.

 

 

다음, brevo의 플러그인을 설치해야하니 플러그인 탭을 연 후 Brevo(formerly Sendinblue) 플러그인을 설치한다.

 

 

플러그인 설치 후 플러그인 화면에서 복사해둔 API Key값을 api-key(shared headers) 칸에 넣는다. 

 

Workflow 설정하기

위의 설정을 마쳤다면, Workflow로 이동해서 Step1은 Account > Sign the user up으로 설정한다. Email 및 Password 값은 각각 입력 요소 값의 입력 값으로 설정된다. 추가로 "Name" 값도 사용자 이름 입력 입력 값으로 설정한다. 

Step2는 Plugins > Sendinblue - Send SMTP Mail + Template (advanced)으로 설정한다. "Sendinblue SMTP"에는 몇 가지 타입이 있긴한데, 지금 선택한 것은 사용자가 만든 템플릿에 자유롭게 매개 변수를 삽입해서 사용할 수 있다.

body에 아래와 같은 JSON 코드를 입력한다.

이때 sender의 서비스 이름이나 이메일 주소등을 각자에게 맞는것으로 수정해서 입력하고(이때 이메일은 brevo에 세팅해둔 sender 이메일과 같은것으로 입력하는 것을 권장한다.) 메일을 받을 사람의 이메일이나 이름은, Input으로 받는 값이 무엇인지 지정해주면 된다. 여기서 맨 마지막에 있는 템플릿 값은 brevo의 캠페인>템플릿>이메일 템플릿에서 해당하는 템플릿 번호로 입력.

 

{"sender":{"name":"서비스이름","email":"abc@domain.com"},
"to":[{"email":"Input email's value"}],"params":{"NAME":"Input name's value, "DATE":"Current User's Creation Date:formatted as 2022/12/15 00:00"},"templateId":1}

 

이렇게 설정한후 preview에서 테스트를 해보면 이메일이 발송되는 것을 확인할 수 있다.