1.
가로수길 근처에서 디자인회사를 운영하는 분이 계십니다. 3주전 웹을 알고 싶다고 해서 방문, 2시간정도 교육을 하였습니다. 교육이라고 하지만 궁금한 점을 설명하고 최소한 준비하여야 할 기술을 알려드렸습니다. HTML, CSS3와 관련한 기술적 지식입니다. 웹을 위하여 무리해서 개발자를 채용하지 말고 그동안 해왔던 디자인적인 능력을 살릴 수 있는 방향으로 찾았으면 하는 바람도 전하였습니다. 다시 시간이 흘러 어제 갑자기 메일이 한통 날라왔습니다. 시간이 지난 후 확인한 내용을 보니, 정의당 부대표 후보로 출마한 분의 홍보물이었고 홍보 이미지를 이용하여 웹메일을 보내도록 도움을 달라는 내용이었습니다. 제가 웹개발을 직접하는 것도 아니라서, 파트너로 협력하고 있는 후배에게 문의를 했습니다. HTML 태그중 Map을 이용하라고 하면서 사례를 보내주었습니다. 프로젝트를 마무리하는 단계라 바빠서 “혹 도움을 줄 수 있는지” 문의를 했더니, “가능하다”고 합니다. 기쁜 마음으로 맡겼는데 저녁약속때문에 내일이나 가능하다는 답변을 돌아왔습니다. 하루가 지난 오늘, 토요일. 아침 나절 주말농장을 다녀와서 메일을 보니 아직 결과물이 없더군요. 어쩔 수 없이 어제 받은 자료를 기초로 조사를 했습니다. 여기에 정리하는 내용은 어제 저녁부터 오늘 아침까지 조사해서 결과물을 만든 과정을 담고 있습니다.
일반적으로 발송용 메일을 작성할 때 텍스트 보다는 HTML을 이용하는 경우가 많습니다. 국내의 경우 발송용 메일서비스를 전문적으로 제공해주는 곳들이 많더군요. 제가 아는 후배가 하는 처음서비스도 같은 유형입니다. 해외도 비슷하더군요. 여러 서비스들이 있었습니다. 다만 국내와 다른 점이 있었습니다. Gmail이나 wordpress와 같이 개방형 플랫폼을 이용하여 직접 발송용 메일기능을 구현할 수 있도록 다양한 서비스들이 있었습니다.
Beautiful Email Marketing for Gmail
MailPoet: How to Run Your Email Marketing Campaign Within WordPress
워드프레스를 기반으로 블로그를 운영하는 입장이라 Mailpoet는 관심이 갑니다. 나중에 사용해볼 계획이고 Flashissue는 잠시 사용해보았지만 볼편하더군요. 결국 실마리는 다른 곳에서 찾았습니다.
How to Create a HTML Email in Gmail
2.
앞서 소개한 방법을 습득한 후 참고용 이메일을 분석하였습니다. 다음과 같은 코드가 <div></div>사이에 있더군요.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<img style="BORDER-BOTTOM:rgb(0,0,0) 0px solid;BORDER-LEFT:rgb(0,0,0) 0px solid;WIDTH:700px;min-height:10713px;VERTICAL-ALIGN:baseline;BORDER-TOP:rgb(0,0,0) 0px solid;BORDER-RIGHT:rgb(0,0,0) 0px solid" title="당 대표 후보 기호 3번 심상정 첫번째 뉴스레터" alt="" src="https://ci5.googleusercontent.com/proxy/nKgVOsLAJpbo-6fkGT6ZncCygxUcLlfGgdddPyLeZg1BMYbtUQr2xJRM42KTe4d4dU7Id1SS-HN1vKXcUpTDUa8occMKQ7VjXb5_NsW94CWZAWJHgnjLhBLygW3nUOS9h8Au4ZjUHg=s0-d-e1-ft#http://mailer.assembly.go.kr/namoeditor/binary/images/000054/1st_newsletter_1.jpg" usemap="#14e2ea334372f4ce_simlink" class="CToWUd a6T" tabindex="0"> <div class="a6S" dir="ltr" style="opacity: 0.01; left: 706.6875px; top: 11156.96875px;"><div id=":15r" class="T-I J-J5-Ji aQv T-I-ax7 L3 a5q" role="button" tabindex="0" aria-label="Download attachment " data-tooltip-class="a1V" data-tooltip="Download"><div class="aSK J-J5-Ji aYr"></div></div></div> <map name="14e2ea334372f4ce_simlink"> <area href="http://www.ozmailer.com/oele/oqh7f_3u50h_z768ui.php" shape="rect" coords="0, 5857, 700, 6320" target="_blank"> <area href="http://www.ozmailer.com/oele/oqh7g_3u50h_z768ui.php" shape="rect" coords="0, 6340, 700, 6923" target="_blank"> <area href="http://www.ozmailer.com/oele/oqh7h_3u50h_z768ui.php" shape="rect" coords="0, 6944, 700, 7438" target="_blank"> <area href="http://www.ozmailer.com/oele/oqh7i_3u50h_z768ui.php" shape="rect" coords="0, 7459, 700, 8156" target="_blank"> <area href="http://www.ozmailer.com/oele/oqh7j_3u50h_z768ui.php" shape="rect" coords="0, 8177, 700, 8786" target="_blank"> <area href="http://www.ozmailer.com/oele/oqh7k_3u50h_z768ui.php" shape="rect" coords="0, 8807, 700, 9380" target="_blank"> <area href="http://www.ozmailer.com/oele/oqh7l_3u50h_z768ui.php" shape="rect" coords="0, 9400, 700, 9974" target="_blank"> </map> |
첫째는 이미지의 위치이고 두번째 이미지 받기 세번째가 Image Map입니다. 제가 할 부분입니다.
우선 발송하고자 하는 이미지를 준비하였습니다. 최초 홍보물로 나온 파일의 크기가 25M정도라서 2M 전후로 줄였습니다. Mediafile에 올려서 IMG 태그를 사용하려고 했는데 파일을 가져오지 않네요. 아는 분의 서버에 올려놓고 작업을 진행하였습니다. 다음으로 Image Map을 도와줄 서비스를 수소문했습니다. 제가 사용한 공개서비스입니다.
여기서 다음과 같은 HTML 코드를 얻었습니다.
|
1 2 3 4 5 6 7 |
<map name="14e32f5d38b4aab7_Map"> <area alt="MAP1" title="부대표 연설 영상" href="https://youtu.be/GtCUqWLrfhI" shape="rect" coords="1,2005,700,2504" target="_blank"> <area alt="MAP2" title="첫 유세를 시작하며 (2015.6.21)" href="http://www.justice21.org/48300" shape="rect" coords="1,2526,700,3017" target="_blank"> <area alt="MAP3" title="더 커지는 것을 두려워하지 맙시다. (2015.6.22)" href="http://www.justice21.org/48327" shape="rect" coords="1,3575,700,3999" target="_blank"> <area alt="MAP4" title="진보재편은 미래로 가는 길입니다 (2015.6.23)" href="http://www.justice21.org/48378" shape="rect" coords="1,6260,700,6365" target="_blank"> <area alt="MAP5" title="부대표 후보자 전화유세 음성 (2015.6.27)" href="http://soundcloud.com/smallake/acs-624" shape="rect" coords="1,8202,700,8697" target="_blank"> </map> |
이제 준비물을 가지고 gmail에서 웹메일을 만들 차례입니다. 먼저 gmail에서 Compose를 선택합니다. 아래 그림과 같은 순서대로 작업을 합니다.
Edit as HTML 을 선택한 후 <div></div>만 남깁니다.
마지막으로 앞서 작업한 코드를 복사해서 넣습니다.
|
1 2 3 4 5 6 7 8 |
<img src="httphttp://www.zininzin.co.kr/1/gomisabook/TAK/TAK_20150627_1.jpg" width="700" height="8813" border="0" usemap="#14e32f5d38b4aab7_Map"> <map name="14e32f5d38b4aab7_Map"> <area alt="MAP1" title="부대표 연설 영상" href="https://youtu.be/GtCUqWLrfhI" shape="rect" coords="1,2005,700,2504" target="_blank"> <area alt="MAP2" title="첫 유세를 시작하며 (2015.6.21)" href="http://www.justice21.org/48300" shape="rect" coords="1,2526,700,3017" target="_blank"> <area alt="MAP3" title="더 커지는 것을 두려워하지 맙시다. (2015.6.22)" href="http://www.justice21.org/48327" shape="rect" coords="1,3575,700,3999" target="_blank"> <area alt="MAP4" title="진보재편은 미래로 가는 길입니다 (2015.6.23)" href="http://www.justice21.org/48378" shape="rect" coords="1,6260,700,6365" target="_blank"> <area alt="MAP5" title="부대표 후보자 전화유세 음성 (2015.6.27)" href="http://soundcloud.com/smallake/acs-624" shape="rect" coords="1,8202,700,8697" target="_blank"> </map> |
이상의 작업을 마친 후 다시 compose 화면으로 돌아오면 HTML:로 만들어진 메일을 확인할 수 있습니다. 굳이 이렇게 복잡한 작업을 할 필요가 있을지, 의문을 가질 듯 합니다. 다만 약간의 팁으로 보다 좋은 메일을 보낼 수 있으면 좋을 일이라고 생각합니다. 메일 발송서비스를 이용하지 않더라도 약간 HTMl지식만 있으면 충분히 가능합니다.
그런데 메일을 받으면서 궁금했습니다. 앞서 코드를 보면 이미지의 크기를 지정했습니다. 만약 100%와 같이 비율로 하면 Image Map이 정상적으로 동작할까요? 하지 않았습니다. Responsive Image Map을 손쉽게 하는 방법을 찾으려고 합니다. 모바일로 정보접근을 하는 사람이 많으므로.
