고객에게 메일을 보내거나 문자 메시지를 보내려다 보면, 고객 환불 안내, 포인트 수정 안내 등 이미 정해진 형식의 메시지에 고객의 이름이나 특정 정보만 바꾸어 보내는 경우가 많습니다.
이메일 템플릿 기능이 있는 메일 전송 서비스를 어떻게 만들 수 있는지 소개합니다.
시작하기 전에
아래와 같은 순서로 메시지를 보낼 수 있도록 만들 예정이니, 천천히 따라와 주세요. 어느 정도 홉스에 익숙해지신 후에는 5분 정도면 아래 어드민 페이지를 만드실 수 있을 겁니다.
- 이메일 설정
- 고객 데이터 보기
- 메일 내용 수정 모달
- 메일 전송 워크플로우
- 선택한 여러 개 데이터 워크플로우로 반복 실행
이메일 설정
홉스에서는 데이터 소스로 메일을 보낼 수 있도록 SMTP를 지원하고 있습니다.
구글 워크스페이스나 아웃룩 같은 이메일 서비스의 경우 SMTP로 이메일을 보낼 수 있도록 제공하고 있으니, SMTP의 세부 설정값은 사용하시는 이메일 서비스의 문서를 참고해 주세요.
저는 구글 워크스페이스를 사용 중이기 때문에 구글 SMTP 서버를 사용하도록 하겠습니다. 아래와 같이 데이터 소스를 추가하면 워크플로우에서 SMTP 서버를 통해 메일을 전송할 수 있습니다.
고객 데이터 보기
메일을 보낼 고객의 데이터를 표로 표시하고 운영팀이 메시지를 보낼 고객들을 선택할 수 있게 하겠습니다. 우선 데이터베이스에서 고객 정보를 불러옵니다.
테이블 데이터에 워크플로우를 설정하고 행 선택법 중 "다중"을 골라서 여러 명의 고객을 선택할 수 있게 합니다. 설정 창에서 클릭을 통해 설정을 변경할 수 있습니다.
메일 내용 수정 모달
테이블에서 고객 데이터를 선택할 수 있게 되면 모달을 열어 보낼 메시지를 확인하고 메일을 보내도록 만듭니다.
모달에는 텍스트 필드와 텍스트 영역 컴포넌트를 사용해서 기본 메시지 형식을 적어두고 수정도 가능하게 해보겠습니다.
메일의 개인화가 어느정도 필요하기 때문에 메일 내용에 "%고객이름%"라는 단어가 있으면 고객의 이름으로 치환하는 기능도 넣겠습니다.
모달을 추가하였다면 페이지에 메일 보내기 버튼을 생성하고 실행 대상에서 모달을 선택합니다.
메일 전송 워크플로우
이메일을 보내는 워크플로우를 추가한 후 이 워크플로우를 반복 실행하여 여러 명의 고객에게 메일을 보낼 수 있도록 구성하려고 합니다.
이를 위해서는 반복되면서 바뀌는 고객 이름과 고객 이메일을 변수로 입력받아야 합니다. 변수 설정에서 customerName과
customerEmail을 변수로 설정합니다. inputs.customerName 변수를 사용해 메시지 내용을 치환하는 자바스크립트를
추가합니다.
워크플로우 내에 스탭을 하나 더 추가하여 변수로 입력받은 수신 이메일 주소와 모달에서 입력한 제목, 마지막으로 고객 이름이 들어간 자바스크립트의 실행 결과를 내용에 입력하면 메일을 보낼 수 있는 워크플로우 완성입니다.
선택한 여러 개 데이터 워크플로우로 반복 실행
홉스에서는 여러번 워크플로우를 반복해서 실행할 수 있도록 반복 실행 기능을 제공합니다. table1.selectedRows는 선택한
고객 데이터를 배열로 가지고 있습니다. 이 데이터를 데이터 소스 "반복 실행"의 배열에 입력합니다.
메일을 전송하기 위해 반복 내부의 데이터 소스를 "다른 워크플로우 실행"으로 변경합니다. 방금 전 만든 메일 전송
워크플로우를 선택하면 변수를 입력할 수 있습니다. 현재 table1.selectedRows는
[ { email: "sample@example.com", name: "홍길동" } ] 형태의 배열이기 떄문에 고객 이메일을 {{ item.email }}로
고객 이름을 {{ item.name }}으로 가지고 올 수 있습니다. 이 데이터를 미리 설정해둔 변수에 넣어줍니다.
워크플로우 설정이 모두 완료되었습니다. 이제 마지막으로 테이블 밑에 버튼을 추가하고, 반복 실행 워크플로우를 실행하도록 만들면 모든 기능 추가가 완료됩니다. 이제 전송 버튼을 눌러 테스트 하면 이메일이 아래와 같이 전송됩니다.
마치며
마지막으로 배포 버튼을 통해 모든 팀원들이 사용할 수 있도록 페이지를 배포하겠습니다.
여러명의 고객에게 이메일을 보낼 수 있는 페이지가 추가 되었습니다. 테이블에서 고객을 선택하고 버튼을 눌러 고객별로 개인화된 메일을 보낼 수 있습니다.
위와 같은 기능의 어드민이 필요하신가요? 아래 링크에서 일정을 알려주세요. 고객 알림 메일 전송 어드민을 10분만에 만들 수 있는 홉스에 대해서 더 자세히 소개 드리겠습니다.
정보 설계부터 화면 구성까지 어드민에 관한 고민이라면 무엇이든 이야기 나누고 싶습니다.
이 링크에서 일정을 잡아주세요.