◎ 스티비 툴로 인터랙티브한 메일 만들기(2023) ◎
•
스티비 툴은 디자인 솔루션 스타트업 ‘슬로워크’에서 만든 이메일 마케팅 툴입니다. 스타트업들을 중심으로 많은 곳에서 쓰고 있습니다. (스티비 주소 : https://stibee.com/ )
단순히 이메일 제작, 발송만이 아니라, 모바일 최적화된 링크를 추출 가능하고, 유튜브, 홈페이지 등과 연동하여 인터랙티브하게 구성이 가능하여, 다양한 홍보 툴로 활용이 가능합니다.
•
스티비 소개 및 장단점 안내 https://brunch.co.kr/@eunaaah/4
•
스티비와 PPT*로 배너를 디자인해서 만드는 노하우를 몇개 알려드리지요.
•
초보용으로 누구나 할 수 있는 PPT로 합니다.
스티비로 메일 새로 만들기
•
기존 메일 폼을 복사해서 쓰실 분은 굳이 다 안 봐도 됩니다.
•
로그인하시고 대시보드 상단 “이메일” 클릭하여 아래 화면에서 “새로만들기” 클릭
주소록 선택
•
먼저 주소록을 선택합니다. 따로 없으면 샘플을 하나 만들고, 1명만 등록해도 됩니다. (본인 이메일 등)
A/B 테스트
•
중요하지 않습니다. 그냥 아니오로 해도 됩니다.
발송 정보
•
이메일 제목과 발신자 이름을 맞게 입력해주시면 됩니다.
•
저는 예시 사업으로, 아래와 같이 입력했습니다. 이러면 오른쪽 미리보기가 가능합니다.
템플릿
•
다양한 목적에 따른 템플릿들이 있습니다. 제로베이스에서 새로 만드는 경우에는, 좋은 템플릿을 골라서 쓰셔도 됩니다.
•
저는 그냥 빈 템플릿에 직접 만들겠습니다.
콘텐츠
•
아래와 같은 빈 화면이 나왔습니다. 여기서 오른편의 각종 기능(상자, 스타일)들을 활용해 메일을 디자인하면 됩니다.
이미지
•
이메일 타이틀을 PPT로 만든 이미지를 넣겠습니다.
•
•
적절한 디자인을 윈도우 기본기능인 화면 캡쳐 로 캡쳐해서 PPT에 놓고, 맑은고딕체 등 깔끔한 글씨체로 적으면 그럭저럭 이쁘게 나옵니다. 위 화면의 첫번째 헤드디자인을 PNG파일로 저장해서 삽입하겠습니다.
•
위와 같이 그림이 들어갔습니다. 이렇게 디자인하면 됩니다.
•
오른쪽에는 위 그림에 테두리를 넣거나 / 상하단 여백을 넣거나 빼거나 늘/줄이는 기능이 있습니다. 적절히 활용해 이쁘게 만드시면 됩니다.
텍스트
•
이번에는 텍스트를 삽입해보겠습니다. 왼편의 텍스트 (1단, 2단이 있음)를 끌어와 안에 텍스트를 타이핑치면 됩니다. 글자 크기, 색깔 등을 모두 자유롭게 바꿀 수 있으며, 글씨에 하이퍼링크를 따로 연결할 수 있습니다.
•
아래 텍스트편집박스에 빨간 표시한 버튼이 하이퍼링크 삽입란입니다. 이 기능이 이미지나 곳곳에 있는데 이걸 통해 자유롭게 웹 링크를 걸어줄 수 있습니다.
대제목
•
•
위는 PPT에서 도형 그림으로 글씨 박스를 만든 겁니다. 이중 하나를 택일해서 삽입하겠습니다.
•
위에 텍스트박스가 밋밋한 것 같네요. 텍스트박스에 테두리 선을 입혀보겠습니다.
•
위와 같이 텍스트박스를 선택하고, 테두리 색상을 정해주고, 두께를 정해주면 됩니다. (두께를 정해주지 않으면, 테두리가 안 생깁니다)
공고 이미지와 버튼 삽입
•
공고이미지는 망고보드로 사전에 작업한 포스터 이미지를 넣겠습니다. 역시 위에서처럼 이미지 삽입을 하시면 됩니다.
•
참고로 스티비 무료버전은 이미지 용량제한이 있기에, 포스터 대용량 이미지는 올라가지 않을 수 있습니다. 이 경우 크기조절을 해서 올리시기 바랍니다.
•
[참고] 이미지나 텍스트를 위아래 순서를 바꾸거나 복사/삭제하는 버튼은 이미지나 텍스트 박스를 클릭하면 좌우와 아래와 같이 뜹니다.
•
이 포스터에 하이퍼링크를 걸고 싶다면, 이미지를 클릭시 활성화되는 아래 기능을 활용하면 됩니다. 버튼은 각각, 문단중 이미지 위치, 하이퍼링크, 이미지 교체 기능입니다. 포스터에, 실제 공지, 공고 링크를 하이퍼링크로 걸면, 이미지 클릭시 바로 뜨게 할 수 있습니다.
•
(실제로 공고링크를 이미지에 걸어보겠습니다)
버튼 삽입
•
유사한 기능을 신청버튼 클릭! 등으로 구현할 수도 있습니다. 옆의 버튼 기능은 1개, 또는 2개의 버튼을 끌어와 아래 화면처럼 구현 가능합니다. 역시 하이퍼링크를 넣으면 버튼 클릭시 그 링크로 가게 할 수 있습니다.
•
아래와 같이 버튼 두개를 삽입해보았습니다. 화면이 좀 넓어 보이네요. 그 경우에는 오른편 “상자”의 상단/하단 여백을 좁게 해주면 됩니다.
푸터 넣기
•
푸터는 본 이메일 발신기관, 연락처, 수신거부 등의 기능을 삽입 가능합니다.
•
삽입하면 아래와 같이 뜹니다. 안에 내용을 편집하면 됩니다.
•
푸터에 위와 같이 저희 기관 기준, 기관명, 이메일, 주소, 대표연락처를 삽입했습니다.
•
더해서, 왼편의 SNS 공유와 구분선도 하나씩 넣어보았습니다.
•
SNS 공유를 넣으면, 웹에서 보기 등을 통해 이메일 고유의 링크를 따서, 카카오톡 등에 공유하기 쉽게 됩니다.
이메일 보내기
•
큰 틀은 이제 완성된 것 같습니다. 그럼 먼저 화면 상단 오른편의 “테스트발송”을 통해 테스트메일을 보내봅니다.
•
보통 제 자신에게 보내서 확인하면 됩니다.
•
테스트도 괜찮으면, 이제 “발송하기”를 누르면 아래 화면이 뜹니다.
•
앞서 했던 모든 단계를 재확인하는 과정입니다. 다 보고 문제가 없으면 “지금 발송하기”를 클릭해서 주소록 대상자들에게 보내면 됩니다.
•
[Tip] 카카오톡 공유 등은 위 메일을 보낸 연후, 발송완료한 이메일을 클릭해서, 이메일 url을 딸 수 있습니다. 이 url을 통해 모바일에서 깔끔하게 카톡/문자 등으로 공유 가능합니다.
(아래화면 참조)
•
[Tip 2] 무역협회 CRM 등 시스템을 통해 보내고 싶은 분은, 한명에게라도 이렇게 발송을 한 후, 발송한 메일 전체를 복사하여 붙여넣기 하면, url 등이 모두 살아있는 채로 작동합니다. 다만 이건 반드시 테스트 등을 통해 확인하여 문제 없을 경우에 한해 활용을 권장합니다.
기존 메일 템플릿 디자인하기
•
활용할 기존 메일의 아래 버튼을 클릭해 복사합니다.
•
복사한 새 메일 템플릿을 적절히 변형해서 작업합니다.
아카이빙 페이지 발행
•
정기적으로 보내는 뉴스레터라면, 아카이빙 페이지를 통해, 그간 보낸 메일을 한데 모아 관리할 수 있습니다.
•
관련 안내 :
아카이빙 페이지를 만들면, 외부 홍보에도 쓸모있고 / 기안후 결과보고할 때 이 페이지 링크 하나로 끝난다는 장점이 있습니다. 광주전남 아카이빙 페이지 링크 참고하도록 공유합니다.
•
실제 발송한 이메일 중 선택적으로 아카이빙할 수 있다는 점도 참고.
(광주전남 아카이빙 실제 사례) https://page.stibee.com/archives/100644
(스타트업실 아카이빙 실제 사례) https://page.stibee.com/archives/30432
•
아카이빙은 위와 같이 “발송완료”한 메일에 해당 페이지 오른쪽 클릭후 “아카이빙 발행하기”를 누르면
•
위와 같이 아카이빙 “예”로 주소록 별로 아카이빙 페이지를 만들고 관리할 수 있습니다.
오픈율/클릭률 확인
•
• 기본적으로 메일 발송의 성공이 얼마나 되는지, 링크의 클릭률, 수신거부에 대한 내용까지 확인 가능하며, 클릭맵 또한 가능합니다.
[신규기능/ 21. 9. 25일자]
[디자인 참고용]
•
•
(무료이미지) 픽사베이 https://pixabay.com/ko/
◦
500만장 넘는 무료 이미지
•
(무료 이미지) 언스프래쉬 https://unsplash.com/
•
저작권 없는 무료 이미지 모음 (2020 best) https://brainshareme.com/free-image-sites/
•
(무료 아이콘 모음) https://brainshareme.com/free-icon-sites/
•
•
유료이미지?) https://www.shutterstock.com/ko/
•
디자인 노하우
•
이미지 배경 투명화 https://citynetc.tistory.com/55
고급기능 - 메일머지
•
이메일 제목에 구독자 이름을 넣기: %$사용자필드값$%