소개
세상은 넓고 자동화 툴은 참 많군요.
지난 목요일 타이칸 님께 타입봇을 소개받았었고,
어제는 여행가J님과 개발자F님께 뉴스레터 발송에 대해서 소개 받았습니다.
두 가지를 개발자적 입장에서 액기스만 믹스해서 사용해 보면 좋을 것 같아
사례글을 작성해 봅니다.
사용도구
타입봇 : 뉴스레터 발송 워크 플로우 구현 http://typebot.io/
Gmail : SMTP 메일 발송
Perplexity : 타입봇 화면 캡쳐 후 내용문의 및 SMTP 연결 안될 때 오류 문의
진행방법
핵심 내용 이해
어제 뉴스레터 발송 강의 시 개발자F님께서 공유해 주신 프롬프트 잠깐 보시죠
이 환영 이메일 템플릿에는 받는사람이름, 날짜가 변수로 들어갈꺼야. 지금은 이름을 "홍길동" 날짜는 "2025-07-26"으로 넣어줘. 내가 나중에 변수로 바꿔서 쓸께.
위 프롬프트 중 "내가 나중에 변수로 바꿔서 쓸께" 이 부분이 자동화의 핵심이죠~
메일 템플릿은 붕어빵틀이고, 발송된 메일 내용은 붕어빵이라고 하면,
슈크림 붕어빵을 주문했는데, 계속 팥붕어빵만 주면 안되는 거랑 같이 이치입니다ㅏ
이 부분을 자바스크립트 코드로 예시를 들어본다면 아래와 같습니다.
// 환영 이메일을 만드는 함수 선언
function sendMail(recipientName, date) {
// 이메일 템플릿을 만듭니다. 템플릿 리터럴을 사용해 변수 값을 삽입합니다.
let welcomeEmail = `${recipientName}님, ${date}에 오신 것을 환영합니다!`; // 이메일 템플릿
// 결과 출력
console.log(welcomeEmail);
}
// sendMail 함수를 호출하며 이름과 날짜를 변경하여 사용합니다.
sendMail("홍길동", "2025-07-26"); // 홍길동님, 2025-07-26에 오신 것을 환영합니다!
sendMail("이순신", "2025-08-01"); // 이순신님, 2025-08-01에 오신 것을 환영합니다!
sendMail("김철수", "2025-09-10"); // 김철수님, 2025-09-10에 오신 것을 환영합니다!
타입봇 플로우 만들기
핵심 부분의 개념적인 이해가 끝났으니,
타입봇을 이용해서 뉴스레터 발송을 해 보겠습니다.
타입봇에 로그인하여, Flow를 그려봅니다.
타입봇과 사용자의 액션을 티키타가 방식으로 흐름을 만들어 나가면 됩니다.
Group1에서는 뉴스레터를 수신할 사용자의 이메일 주소와 뉴스레터 제목을
수집하는 걸 목적으로 만들어 봤습니다.
즉, 받는사람이메일 주소와, 뉴스레터제목을 변수화 시키겠다는 의미 입니다.
변수 이름을 지정하는게 중요한데,
각각 "mailTo"와 "mailTitle" 이라고 변수명을 선언해 주었습니다.
사용자 입력을 받아들이는 Inputs Text 를 클릭하고, 스크롤을 아래로 내려보면 제일 하단에,
"Save the answer in a variable:" 에 변수명을 넣어주시면 됩니다.
Group2에서는 수집된 mailTo와 mailTitle의 변수에 담겨있는
실제 사용자 메일 주소와 메일 제목을 이용해서 뉴스레터 본문을 만들고,
실제 메일 발송하는 기능을 구현하였습니다.
타입봇 좌측에 보면 사용할 수 있는 것들이 있는데,
메일 발송이므로 Email 을 이용하시면 됩니다.
이걸 이용하면 위 그림에서 Send email to 박스 영역이 그려집니다.
Send email to 를 클릭해 보면 아래와 같은 설정화면이 나옵니다.
SMTP 연결
Select SMTP account를 클릭합니다.
SMTP는 Simple Mail Transfer Protocol의 약자로,
인터넷을 통해 이메일을 보내고 받는 데 사용되는 통신 프로토콜입니다.
TypeBot에는 메일을 보내는 기능이 없기 때문에,
메일을 보내는 기능을 외부 서버에 위임하기 위한 설정이라고 보시면 됩니다.
저는 Gmail 을 이용해 보겠습니다.
From email : 보내는 사람 메일
Host : smtp.gmail.com (고정값)
Username : SMTP 서버를 이용하는 사용자의 이메일 주소
Password : 구글 로그인시 사용하는 패스워드 또는 구글 2차 인증 켜두었으면 2차 인증 비밀번호
Secure: 반드시 활성화 시켜야 합니다.
Port number : 465 (Secure일 때 고정값)
2차 인증 비밀번호 모르면 먼저 구글로그인 후 아래 페이지에 접근합니다.
https://myaccount.google.com/security
2단계 인증 클릭
앱 비밀번호 클릭
앱 비밀번호는 한 번 발급 받은 후, 따로 저장해두지 않으면, 확인이 불가합니다.
typebot용으로 새로 하나 만들겠습니다.
기기용 앱 비밀번호를 복사 한 후, Create SMTP Config 영역의 Password 에 붙여넣기 하고
다시, Create 버튼을 클릭합니다. 정상적으로 연결이 되면 아래 화면처럼 바뀝니다.
뉴스레터 변수 적용 및 메일 정보 설정
SMTP 설정 이후는 쉽습니다.
나머지 속성을 확인해 보면, 아래와 같습니다.
From : 보내는 사람 메일 주소입니다. 저는 Gmail주소 이용해 보기로 했습니다.
아래 두 개 항목은 타입봇과의 대화 중 받아들이는 변수들을 각각 맵핑해 주면 됩니다.
To : {{ mailTo }}
Subject: {{ mailTitle }}
스크롤을 조금 내려봅니다.
변수로 부터 값을 꺼내서 동적으로 메일 내용을 변경해 주어야 하기 때문에
Custom content를 활성화 시키고,
Content 는 "Text"로 설정(주의!!)해 줍니다.
Content는 아래와 같이 입력해 줍니다.
{{ mailTo }} 님 안녕하세요.
{{ mailTitle }} 와 관련된 뉴스레터 보내드립니다.
좋은 주말 되세요.
자동화 관점에서 쓴 사례글이기 때문에 화려하고 복잡한 html/css 및 풍분한 내용은 뉴스레터 본문은 아닙니다.
그래두, 어떻게 메일 내용이 구성될 지 감이 오시죠?
타입봇 실행하여 뉴스레터 발송
마지막으로 메일을 발송시켜 보겠습니다
타입봇 Flow 화면의 우상단 Publish를 클릭하면 아래 화면이 나옵니다.
위 화면에서 url을 마음에 들게 수정하신 후 Copy 버튼을 클릭하여,
새로운 브라우져 창에서 복사된 url을 열어줍니다.
메일을 처음에는 gmail로, 두번째는 naver로 보냈습니다.
확인해볼까요
Gmail 확인
네이버 확인
음.. 오긴 왔는데, 뭔가 이상한 점이 보이시지 않나요?
G메일 본문을 자세히 보면 받는 사람 이름과 뉴스레터 제목이 비어있네요.
뭐가 잘못된 건지 확인해 보니,
위의 메일 설정 하는 부분 중
Content를 Text와 Code 두 개 선택하는 부분이 있었는데,
처음에 "Code" 로 했더니, 이 현상(오류)가 발생하네요.
꼭 "Text"로 설정해 주세요.
느낀점
자동화 툴은 많지만 개념적인거나 오퍼레이션이 비슷비슷하기 때문에
하나만 잘 익숙하게 해 두면 다른 툴들도 금방 익힐 수 있을 것 같습니다.TypeBot이 n8n보다는 더 쉽게 느껴지고, 상호 반응하는 재미가 있네요
구글시트에 수신자 목록이나, 뉴스레터 발송 내용을 블록화 시켜두고,
메일 템플릿만 잘 만들어 두면 풍성하고 보기 좋은 뉴스레터를 쉽게 발송할 수 있을 것 같습니다.자동화 툴에서 워크플로우를 만들어나가는 것보다, 구글 보안 설정이나 페이스북 설정 등이 훨씬 어렵다는~
통밥으로 하면 안 됩니다. 결과가 나왔다에 만족하지 말고, 내용까지 맞는지 꼭 확인하기가 필요합니다.
ToDo
다음 기수 시작할 때까지 n8n 전문가 되기~!(타입봇 미안해..)
