그럼에도 불구하고 초기 스타트업 마케팅에서는 이메일 채널이 매우 필수적인데, 새로운 고객 발굴을 위해서 초기 스타트업이 돈은 없지요, 남는건 내 시간과 노가다요, 이메일은 보내는데 돈들어가지 않지요... 그래서 이메일 채널을 활용하는게 그 첫번째 이유이고, 두번째 이유는 고객 관리를 위해서 대표나 마케터가 직접 1:1로 고객에게 메일 보낼 일이 많기 때문이다.

대기업들이야 비싼 비용의 전문 이메일 관리 툴을 사용한다지만, 초기 스타트업에서 그거에 돈쓰는건 (이메일이 메인채널이 아니고서야) 돈낭비다. 대부분이 아마도 지메일을 쓸 것이다. 그럼 여기서 나도 그랬고 많은 문돌이들이 항상 아쉬워 하던게 뭐냐면, 우리도 다른 회사들이 보내는 이메일처럼 멋드러진 헤더, 배경, 버튼들을 자유자재로 삽입해서 이메일을 보내고 싶지만 어떻게 보내는지 몰라서 그냥 항상 플레인한 이메일만 보내거나, 간신히 포샵으로 만든 회사 로고를 이메일에 이미지로 첨부해서 보내곤 하던 거다.

우리 문돌이들도 저렇게 멋드러진 헤더, 배경, 버튼들이 들어간 이메일을 보내보고 싶지만 방법을 모른다!!

그렇다! 오늘의 주제는 바로 아주 기본적이고 기초적인 HTML의 지식과 구글 지메일만 있으면 누구나 저런 멋드러진 이메일을 뿌려댈 수 있는 문돌이의 이메일 마케팅 방법론이다.

Step 1. 무료 이메일 템플릿 소스코드 다운받기

시중에 이메일 HTML 템플릿 서비스를 하는 수 많은 서비스가 존재한다. 구글에 HTML email template 만 검색해 봐도 한 10페이지는 나온다. 이거 다 찾아보면서 시간낭비 할거 없이 내가 추천하는 다음 사이트를 활용하도록 하자. 바로 Campain Monitor 라는 사이트이다.

고퀄의 이메일 소스코드를 공짜로 다운받을 수 있는 착한 사이트이다.

위 캠페인 모니터 사이트에서는 여러가지 형태의 이메일 템플렛을 보여주고 내가 원하는 형태를 골라서 약간의 커스토마이제이션을 한 후에 소스코드를 통째로 다운받을 수 있는 사이트이다. 그런데 1 이메일 계정당 한번만 무료로 다운받을 수 있는듯 하니 처음부터 사이트 회원가입부터 하지 말고, 우선 이메일 템플렛들을 둘러본 후에 먼저 사용할 템플릿을 결정하도록 하자.

결정할 때 주의할 것은, 너무 현란한 디자인을 고르지 말라는 것이다. 현란한 디자인은 곧 내가 디자인 작업을 통해 채워나가야 할 이미지 부분이 많아지는 건데, 첫째는 우리같은 문돌이들이 저런 이미지 작업을 너무 많이하다 보면 촌스러워지기 마련이고, 둘째는 요즘 고객들이 저런 현란한 디자인의 이메일은 아예 '광고성 스팸 이메일'로 여기는 경향이 있어서 오히려 마이너스이기 때문이다.

나는 딱 로고, 헤더, 버튼이 하나씩만 들어가있는 템플릿을 선택하였다.

최대한 심플한 디자인의 템플릿을 선택하도록 하자.

선택해서 들어가면 간단한 드래그-앤-드랍 방식으로 로고도 넣고, 이미지도 교체하고, 내용도 바꾸고 할 수 있는 커스토마이제이션 페이지가 나오는데, 한가지 팁을 주자면, 이 페이지에서 너무 내용도 다 바꾸고 이미지 교체하는 작업을 하지 말고 일단 필요한 섹션만 대충 채워서 다음 단계로 가도록 하자. 왜냐하면 그들도 먹고 살아야 하기 때문에 내가 애써서 여기에 내용 다 채워놓고 한시간 걸려서 이메일 작업을 완료하고 소스코드를 내 이메일로 보내는 버튼을 클릭했는데 이메일이 오지 않더라.. 그래서 다시 이 사이트 들어가서 내가 작성한 이메일 다운받으려고 했더니.. 돈을 내야 열람이 가능했다 ㅜㅜ. 애써서 작성했던 내용 어디다 따로 저장도 안해놨었기에 어쩔수 없이 처음부터 작업했던 경험이 있다.

요 창에서 내가 보낼 이메일을 아예 만들고 있지 말고, 내가 필요한 섹션들만 대충 채워서 마무리하자.

요 창에서 맨 밑의 'Download...' 버튼을 누르면 된다.

Step 2. 이메일에 사용될 이미지를 어딘가에 업로드 하기

나도 완전 순혈 문돌이였을때 착각하고 있던게 뭐냐면, 이메일에 들어있던 각종 이미지들이 그 이메일에 첨부되서 같이 오는걸로 알고 있었다는 거다. 예를들어, 위 그림에 있는 이메일에 보이는 샐러드볼 사진이 이메일에 같이 첨부되어 와서 저기에 표시되는 것 처럼 이해했던 걸 말한다. 물론 이메일에 실제로 이미지를 첨부 및 디스플레이 해서 보내는 사람들도 있는데, 그러면 이메일 용량이 어마무지하게 커져서 x욕먹는다.

우리가 받는 이메일에 표시되는 각종 이미지들은 대부분 그들 서버에 먼저 업로드되어, 이메일에서는 그 이미지의 주소만 호출해서 보여주는거지, 그 이메일에 직접 첨부되어 있는게 아니다. 따라서 우리가 저런 간지나는 이메일을 보내려면 거기에 쓸 이미지들을 우선 서버에 업로드해야 하는데 대부분의 순혈문돌이들은 그 서버라는게 뭔지도 잘 모르는 경우가 많다.

이런 우리같은 순혈 문돌이들을 위해 디자인된 아주 막강한 이미지 공유 사이트가 있으니 바로 imgur 라는 사이트 이다.

이걸 한국말로 '임어'라고 읽는지 '임거'라고 읽는지 고민했었는데 알고보니 '이미저'라고 읽는거더라...

위 사이트는 내 알기로 원래 웃낀 이미지 공유하는 서비스인데 나같은 많은 순혈 문돌이들이 이미지 서버처럼 사용하는 공간이다. 이 사이트에 회원가입 후 원하는 이미지를 업로드 한 후에 그 이미지를 클릭하면 다음과 같은 창이 뜬다. 이 창에서 'Direct Link'라는 부분이 바로 우리가 있다가 HTML 소스 코드 손 볼때 사용할 이미지 주소이니 잘 기억해 놓도록 하자.

Imgur에 이미지를 업로드하면 저렇게 다양한 이미지 링크 및 소스코드를 제공한다.

Step 3. 이메일 HTML 작업하기

자, 이제 클라이막스이자 우리에게는 가장 어려운 작업이 남았다. 바로 아까 다운받은 이메일 소스코드를 코딩해서 내가 보내려는 이메일 컨텐츠로 만드는 작업이다.

우선 아까 CampaignMonitor에서 이메일로 보내준 소스코드 파일을 다운받아서 열어보면 아마도 index.html이라는 파일과 이미지가 들어있는 폴더로 구성되어 있을 것이다. 거기서 index.html이라는 파일을 메모장, 노트패드++, 서브라임텍스트 등의 프로그램으로 열어준다. 메모장 보다는 노트패드++이나 서브라임텍스트 같은 HTML에디터 프로그램을 이번 기회에 본인 컴퓨터에 깔아놓는 것도 나중을 위해 도움이 된다 (모두 무료 프로그램들이다).

자, 이제 index.html 파일을 열어서 코드를 보면 순혈 문돌이의 입장에서는 머리가 아득해지고 겁이 덜커덕 나기 마련이다. 겁먹지 말고, 그리고 다른거는 그냥 놔두고 내가 건드리라고 하는 것만 건드리면 된다.

소스코드를 열어보면 내가 모르는 언어의 세계에 머리가 아득해질 수 있다.

본론에 들어가기에 앞서 HTML에 관한 아주 기본적인 내용만 간략하게 집고 넘어가도록 한다. 크게 5가지의 기본 개념만 알면 되는데, 지금 100% 이해 못하더라도 이메일 보내는데 큰 지장은 없다.

1. 웹문서는 크게 HTML 부분과 스타일 (CSS) 부분이 있다.

우리가 지금 하려는 이메일이니 지금 보고있는 웹사이트 페이지니 하는걸 모두 '웹문서'라고 부른다. 이런 웹문서는 크게 HTML 부분과 스타일 부분으로 이루어져 있는데, 지금 보고 있는 이 글의 제목, 내용 등등의 글씨, 이미지 부분, 즉 '컨텐츠'와 관련된 내용들이 HTML 부분이고, 이 글씨의 크기, 마진, 폰트, 이미지 크기, 배치 등과 관련된 걸 스타일 부분이라고 말한다. 굳이 이 두개를 나눠서 이해해야 하는 이유는 있다가 HTML 코드 수정할때 컨텐츠 부분과 스타일 부분을 나눠서 코딩해야 하기 때문이다.

2. HTML 태그는 열고 닫는 개념이 있다.

지금 읽고 있는 2번 부분의 컨텐츠를 HTML 태그로 표현해 보면 대충 이런식으로 생겼다.

<div>
<h3>2. HTML 태그는 열고 닫는 개념이 있다.</h3>
<p>지금 읽고 있는 2번 부분의 컨텐츠를 HTML 태그로 표현해 보면 대충 이런식으로 생겼다.</p>
</div>

<> 이 안에 표현된걸 태그라고 부르는데 보다시피 모두 두번씩 써 있다. 즉, <div>태그로 열고, 마지막에 </div>로 닫는 개념이다. 이걸 코드블록이라고 부른다. 모든 HTML태그는 이런식으로 열고 닫는 코드블록으로 이루어져 있다.

3. 웹문서는 태그들의 겹겹 레이어로 이루어진다.

위의 코드에 3번 내용까지 합쳐서 HTML 코드로 표현해 보면, 다음과 같다.

<div>
    <h3>2. HTML 태그는 열고 닫는 개념이 있다.</h3>
    <p>지금 읽고 있는 2번 부분의 컨텐츠를 HTML 태그로 표현해 보면 대충 이런식으로 생겼다.</p>
</div>
<div>
    <h3>3. 웹문서는 태그들의 겹겹 레이어로 이루어진다.</h3>
    <p>위의 코드에 3번 내용까지 합쳐서 HTML 코드로 표현해 보면, 다음과 같다.</p>
</div>

보다시피 한 문단을 <div>라는 레이어가 감싸고 있고, 이 레이어 위에 제목인 <h3>태그와 내용인 <p>태그의 레이어가 위치해 있다. 문단이 바뀌면 역시 또 다른 <div>레이어가 생기고 그 위에 새로운 내용의 레이어들이 올려지는 형태로 코드가 이루어지는 것이다.

4. 스타일관련 코드를 HTML 태그 안에 입력할 수 있다.

원래 스타일을 담당하는 CSS, 즉, Cascading Style Sheets이라는건 별도의 파일에다가 한꺼번에 작성하여 컨텐츠만 들어있는 HTML 파일에서 CSS파일을 불러와서 적용하는 방식인데, 그렇게 안하고 아예 한 파일에대가 스타일 코드를 적용할 수도 있다. 뭐 이런 내용은 알 필요 없고 우리가 알아야 하는건 문서의 스타일을 담당하는 코드를 HTML 코드 안에 바로 입력해서 문서를 보기 좋게 만든다는 것에 있다. 예를들면 다음과 같이 만든다. 3번에서 사용된 코드를 재사용해서 각 문단의 마진이나 문장을 볼드채로 한다던지 등등의 스타일을 바꾸는 코드이다.

<div style="margin-top: 20px; margin-bottom: 10px; font-weight: bold;">
    <h3>2. HTML 태그는 열고 닫는 개념이 있다.</h3>
    <p>지금 읽고 있는 2번 부분의 컨텐츠를 HTML 태그로 표현해 보면 대충 이런식으로 생겼다.</p>
</div>
<div style="margin-top: 20px; margin-bottom: 10px; font-weight: bold;">
    <h3>3. 웹문서는 태그들의 겹겹 레이어로 이루어진다.</h3>
    <p>위의 코드에 3번 내용까지 합쳐서 HTML 코드로 표현해 보면, 다음과 같다.</p>
</div>

어디가 추가된 부분인지 보이는가? 바로 <div>가 <div style="margin-top: 20px; margin-bottom: 10px; font-weight: bold;">이렇게 바뀐 것이다. 즉, 이 <div>가 감싸고 있던 문단 전체의 윗쪽 마진을 20픽셀, 아래쪽 마진을 10픽셀, 이 안에 들어간 글씨는 볼드체로 표시하라는 스타일 명령어를 HTML 태그 안에 바로 삽입한 거다. 저 코드를 웹 브라우저에서 열어보면 2번 문단이 모두 볼드체로 되어있고 위 아래 마진이 벌어져 있는 걸 보게 될 것이다.

5. 클릭하면 다른 페이지로 유도하는 <a>태그

보통 이메일에서 버튼같은거나 이미지를 클릭하면 해당 사이트로 넘어가는걸 본 적 있을 것이다. 이런걸 담당하는 태그가 <a> 태그이고 이걸 앵커태그라고 부른다. 이 앵커태그는 <a href="넘어갈주소"></a> 이런 식으로 쓰인다. 역시 같은 예제에서 이번에는 제목을 누르면 네이버 사이트로 가는 코드를 넣는 법을 살펴보겠다.

<div style="margin-top: 20px; margin-bottom: 10px; font-weight: bold;">
<a href="http://www.naver.com/"><h3>2. HTML 태그는 열고 닫는 개념이 있다.</h3></a>
<p>지금 읽고 있는 2번 부분의 컨텐츠를 HTML 태그로 표현해 보면 대충 이런식으로 생겼다.</p>
</div>

어디가 바뀌었는지 보이는가? 바로 '2. HTML 태그는 열고 닫는 개념이 있다.' 이 제목을 클릭하면 네이버 웹사이트로 넘어가게 하는 앵커태그를 삽입한 것이다. 이 앵커태그는 원하는 클릭 부분의 코드에 <a href>와 </a>로 감싸는 형태로 클릭 경로를 만들어 준다.

HTML관련해서는 요 5개 정도만 알고 있어도 코드 수정에는 크게 문제가 없다. 하지만 이 방대한 웹브라우저의 세계에 대해 더 심오하게 공부해 보고 싶다면 내가 예전에 쓴 문돌이가 개발자랑 일할만큼만 프로그래밍 익히기 글을 꼭 읽어보길 바란다.

이제 본격적인 코드 수정에 들어가 보자. 아까 Campaign Monitor에서 보내준 소스코드를 다운받아 index.html 파일을 일단 클릭해서 웹 브라우저로 열어 보자. 클릭하면 다음과 같이 생겼을 것이다.

index.html 파일을 웹 브라우저 (크롬, 익스 같은걸 말함)로 열어보면 이렇게 생겼다

여기서 목표는 저 헤더 이미지랑, Hi there ... 하는 컨텐츠 부분, 그리고 푸터에 있는 소셜계정 버튼부분을 본인 내용에 맞는거로 바꿔보는 것이다. 빠른 이해를 위해 내가 얼마전에 발송한 인스타슈가를 홍보하는 이메일을 예시로 사용하도록 하겠다.

HTML에디터 (메모장, 노트패드++, 서브라임텍스트 등등)로 열어서 한 중간 밑 부분으로 주르륵 내려가 보면 <body>라는 태그를 지나서 Hi there ... 어쩌고 하는 아래와 같은 부분이 보일 것이다. 이 부분을 중심으로 내가 표시해논 윗 부분이 바로 이메일 헤더 이미지가 들어가는 부분이고, 두번째 부분이 컨텐츠 영역이다.

이미지 헤더부분과 컨텐츠 부분은 한참 밑으로 내려야 보인다.

아까 미리 만들어서 Imgur에 올려놓은 이미지 헤더의 'Direct Link' 부분의 URL을 카피하여 위 코드의 '헤더이미지 부분에서 src="images/17-facebook.jpg" 라고 써있는 부분의 URL을 카피한 주소로 교체한다. 이는 이미지 부분에 원래 있던 경로를 내가 Imgur에 올려놓은 이미지 주소로 불러오는 코드 수정을 한 것이고, 이 파일을 웹 브라우저로 다시 열어보면 위에 있던 이메일 헤더 이미지가 다음 그림처럼 바뀌어 있는 것을 볼 수 있을 것이다.

이메일 헤더 이미지가 Imgur에 업로드한 이미지로 바뀌었다.

이제 내용을 바꿀 차례이다. 내용은 아까 위에서 언급한 두번째 코드 섹션, 즉 'Hi there...' 부분을 바꾸는 것이다. 보다시피 해당 문단은 'Hi there'의 제목 부분과 'Thank you...'로 시작되는 내용 부분으로 이루어져 있는 것을 알 수 있다. 본인의 내용에 맞게 제목과 내용을 바꿔주고 (스타일 부분은 건들지 말자), 혹시 추가 내용이 필요할 경우, 추가 내용이 같은 포맷으로 제목 + 내용으로 이루어져 있는 경우에는 위에 박스친 <div></div> 부분의 코드를 전체 복사해서 바로 밑에 줄에 복붙한 후에 내용을 바꿔 주면 된다. 예를들면 이런 식이다.

같은 <div></div> 코드 블록을 복붙해서 새로운 문단을 만들었다.

나는 불릿포인트로 내용 표현도 필요해서 위에서 언급 안한 HTML 태그도 쓰긴 했는데, 어렵진 않다. 불릿포인트는 <ul><li>내용1</li><li>내용2</li>...</ul> 이런 식으로 <ul>과 <li> 태그로 감싸주면 된다.

자, 이제 가장 중요한 Call-to-Action라고 불리는 이메일을 받은 사람들의 액션을 유도하는 버튼을 코딩할 차례이다. 물론 아까 다운받은 템플릿에 이미 버튼이 들어 있으나 (파란색의 'How was your recent order?'라고 써 있는 버튼), 이 부분에 들어가는 버튼 이름, 클릭 시 넘겨주는 사이트 URL, 그리고 색깔 등을 변경해야 한다.

'How was your recent order?' 라고 써있는 부분이 버튼과 관련된 코드이다.

위 코드에서 건드릴 부분은 다음 3가지이다.

'How was ...' 부분을 본인의 내용에 맞는 내용으로 변경

href="http://test.com" 부분에서 URL을 내 웹사이트로 변경

background-color: #00afd1; 이 부분이 버튼 색깔인데, 이걸 내가 맘에드는 색으로 변경 (#00adf1 이걸 컬러의 헥스코드라고 부르는데, 그냥 포토샵이나 그림판 겨서 맘에드는 색깔 클릭하고 컬러 정보 보면 거기에 저렇게 생긴 헥스코드를 보여준다. 이걸 복사해서 이 부분에 붙여넣으면 된다.

이 3부분을 변경한 코드는 다음과 같다.

자, 이제 마지막 부분이다. 맨 하단에 소셜 링크 부분인데, 이건 필요 없으면 아래 보이는 코드 부분을 통째로 지워버리면 된다. 필요한 사람들은 아래 코드에서 내가 밑줄 친 부분의 URL만 바꿔주면 되는데, 첫번째 밑줄이 페이스북 주소, 두번째는 인스타그램, 마지막인 링크드인이다. 이건 본인이 필요한 소셜 링크만 아까 Campaign Monitor에서 이메일 템플렛 다운받을때 미리 설정해 놓고 다운받았었으면 이 과정 안 거쳐도 된다.

이제 이메일의 모든 컨텐츠가 다 완성됐다. 아름답지 않은가? 이제 마지막 단계만 하면 끝이다.

최종 완성된 이메일 디자인이다.

Step 4. 작성한 HTML 코드를 지메일에 삽입해서 전송하기

이 단계부터는 왠만하면 크롬 브라우저로 하자. 익스에서는 어떻게 나오는지 내가 잘 모르기 때문이다. 이제 지메일로 가서 이메일 compose를 누른다. 이메일 입력창에 받는사람, 제목을 입력하고 다음 사진 처럼 내용 부분에 별표를 '********' 요런 식으로 여러개 입력한다.

저 ******* 부분을 드래그 해서 마우스 우측 버튼을 누르면 메뉴 중에서 'Inspect'라고 있는데 그걸 클릭하면 아래와 같이 다시한번 머리가 아득해지는 창이 하나 뜬다.

이건 브라우저에서 제공하는 개발관련 툴인데, 왠지 이거 켜 놓으면 내가 개발자스러워진 것 같은 착각이 든다.

저기 음영쳐진 부분을 클릭한 후 마우스를 올려놓고 또 우측 버튼을 누르면 'Edit as HTML'이라는 메뉴가 나오는데 그걸 클릭하면 아까 위에서 *******라고 쳐 놓은 부분을 수정할 수 있는 창이 나온다. (이 부분은 스샷을 찍으려고 하면 자꾸 사라져서 스샷을 못찍었는데, 혹시 ******* 부분이 안 보이면 창을 늘렸다 줄였다 하면 보인다.) 우리가 아까 작성한 이메일 HTML 코드 중에서 <body ...> 요 바로 밑에 있는 <div ...> 태그부터 맨 밑에 </body> 바로 위에 있는 </div> 태그 까지 드래그해서 복사한 후에 ******* 요 부분에 붙여넣는다.

<body> 태그 시작부분의 바로 밑의 <div>부터 맨 밑에 </body> 가 끝나는 바로 직전의 </div>까지가 우리가 복붙할 코드 부분이다.

위의 코드를 ******** 부분에 복붙한 후에 이메일을 보내면, 바로 아래와 같은 아주 아름다운 이메일이 온 것을 확인할 수 있다!!

모바일에서도 당연히 최적화되어 전달된다!!

사실 Step 1의 Campaign Monitor 웹사이트에서 내가 이메일 내용을 모두 완성한 버전을 다운 받았다면, Step 3은 그냥 건너 뛰어도 된다. 즉, 그냥 Imgur에 필요한 이미지를 업로드 한 후에 Step 3 부분에서 이미지 주소 바꿔치기하는 부분만 완료한 후에 Step 4를 진행해도 무방하다. 하지만, 이왕 HTML 세계에 들어온거, 태그 몇개 바꿔보면서 모양이나 디자인이 휙휙 바뀌는 경험을 해보는것도 분명 재미있을 것이다.

이 과정을 글로 표현하니까 뭔가 내용도 많아보이고 어려워 보일테지만, 이걸 직접 몇번 해보고 나면 이런 이메일 쓰는데 한시간도 안걸리게 된다. 그만큼 절대로 어려운 방법이 아니니까 비록 순혈 문돌이라 할 지라도 꼭 한번 도전해 보길 바란다.

글쓴이는 노마드태스크 (Nomadtask)라는 퀘스트 기반의 글로벌 마케팅 캠페인 플랫폼의 Co-founder 및 디자이너로 일하고 있다. 원래는 비즈니스를 전공하고 기획자로 일하다가 스타트업을 창업하고 본업을 스타트업 파운더+디자이너로 전향했는데, 그 과정에서 득템한 다양한 스킬들을 연재하고 있다.

노마드태스크 - https://nomadtask.com/

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari