멋진 HTML 이메일, 문돌이도 할수 있다!
문돌이의 得tem 시리즈
(헤더이미지 - Photo by Yogas Design on Unsplash)
"득템 (得tem)" 이란 어떤 형태로든지 통상적인 수준보다 좋은 아이템을 입수한 상황을 뜻하는 게임 용어를 말한다. 문돌이의 得tem 시리즈를 통해 개발자들에게 천대받고, 디자이너들에게 무시받으며 꾸역꾸역 "기획자"로서 삶을 사는 많은 문돌이들에게 유용할 만한 팁들을 하나씩 소개하고자 한다.
** 1화 보기 - 크롬 브라우저로 업무시간에 온라인쇼핑 대놓고 하는법
** 2화 보기 - 문돌이를 멘붕시키는 URL의 세계
사람들이 소셜미디어에 대한 피로감이 점점 높아지다 보니 요즘 이메일 채널이 다시 뜨기 시작한다. 이바닥도 복고 열풍이 불어오듯, 뉴닉 같은 아주 핫한 뉴스레터는 사람들이 "고작" 이메일이라고 무시하던 채널에서 무려 십만유저 이상을 모았을 정도다.
뉴스레터 하나로 무려 12만 이상의 구독자를 모은 무서운 넘들하지만 이메일은 웹 보다도 더 오래된 아주 고전적인 채널인 탓에, 우리같은 문돌이가 저렇게 현란한 이미지와 반응형 디자인이 잘 정리된 이메일을 보내는것은 쉽지 않은 일이다. 가끔 이메일에 있는 에디터 툴을 활용해서 막 이미지도 삽입하고 색깔도 칠해보는 문돌이들이 있긴 한데, 자칫 촌스러운 디자인에 이미지가 덕지덕지 첨부되어 수십메가 넘는 이메일을 보내서 반송되는 경험을 하기도 한다.
오늘 글에서는 코딩을 몰라도 지메일 하나로 심플하고 잘생긴 HTML 반응형 이메일을 보내는 신공에 대해 소개하려고 한다. 자칫 HTML코드가 넘쳐나는 화면에서 겁먹고 포기하는 분들이 있는데, 절대로 어렵지 않으니 꼭 한번 따라해 보길 바란다.
1. 이메일 템플렛 HTML 코드를 다운받자
오늘 글의 재료로 사용하기 위해 간단히 HTML 이메일 템플렛을 만들어 봤다. 아래 드랍박스에서 다운받을 수 있다 (바이러스, 피싱.. 그런거 아니니 걱정하지 마시고^^).
https://www.dropbox.com/s/b3mmwyfdmd40kpk/test-email.html?dl=0
다운받아서 test-email.html파일을 클릭하면 당신이 메인으로 사용중인 인터넷 브라우저가 열리면서 아래와 같은 HTML 문서가 열릴거다.
문단에 써있는 라틴어는 그냥 내용을 채우기 위해 들어가는 Lorem ipsum이라는 유명한 placeholder이니 신경쓰지 말자.본 문서를 수정하려면 모든 컴퓨터에 설치되어 있는 문서 편집기 (텍스트 에디터)로 편집할 수 있는데, 코드 수정하기에 편한 인터페이스가 아니므로 이번 기회에 우리 문돌이들도 개발자들의 최애템중 하나인 서브라임 텍스트를 설치하도록 하자. 무료로 사용 가능하고, 이거로 문서 편집을 하고 있으면 갑자기 내가 개발자가 된 것 같은 기분이 든다.
Subline Text - https://www.sublimetext.com/
(사용중에 가끔 구매하라는 팝업이 뜨는데, 그냥 취소 버튼을 누르면 된다)
서브라임 코드 에티터를 설치하고 위에서 다운받은 test-email.html 파일을 열면 아래와 같은 화면이 나온다.
스벅에서 일할떄 이 화면을 그냥 켜놓기만 해도 내가 뭔가 개발자 같은 착각에 빠질 수 있다.복잡해 보이는 HTML 코드들 때문에 여기서 포기하고 글을 닫으려는 분들은 제발 포기하지 말고 한번만 따라해 보자. 코딩 1도 몰라도 누구나 아래 지시대로 따라만 하면 HTML로 꾸며진 깔끔한 이메일을 보낼 수 있다.
우선 위 템플릿은 다음 9개의 코드 요소가 들어있다.
1) 반응형 디자인
아래 이미지에서 보듯이 위 코드로 이메일을 보내면 데스크탑에서는 깔끔하게 중앙에 위치해서 보이고, 모바일에서는 좌우가 꽉 차게 잘 보여진다.
위 코드로 보낸 이메일을 데스크탑에서 열었을 때
모바일로 열었을 때저게 뭐 대수인가 생각할 수 있는 문돌이들이 있을듯 하여, 아래와 같은 예시를 준비했다. 우선, 이메일에 글을 쓸때 줄넘김 없이 문장을 연결해서 아래와 같이 쓰게 되면, 화면이 좌우로 기다란 데스크탑에서는 문장 한 줄 한 줄이 너무 길어서 보기 힘든 경우가 많다.
줄넘김 없이 문장을 연결해서 쓴 이메일을 데스크탑에서 열었을 경우 이런 익숙한 그림이...이 문제를 해결하기 위해 어떤 문돌이들은 특정 부분마다 줄넘김 (엔터)을 계속 해줘서 데스크탑에서도 너무 양 옆으로 늘어지지 않게 아래처럼 보내기도 한다.
한 문장에도 여러번 줄넘김을 한 이메일위 처럼 이메일을 보내면 대부분의 데스크탑에서는 괜찮게 보일 순 있지만, 화면 너비가 아주 제각각인 모바일에서는 간혹 줄넘김을 잘못할 경우 아래처럼 문장이 밀리는 현상이 발생한다. 특히 아이폰 SE같이 더 작은 화면의 모바일폰에서 열 경우 저 현상은 더욱 심해진다.
줄넘김을 잘못하다 보면 모바일에서는 문장이 저렇게 밀려 보일 수 있다.즉, 모바일이던 데스크탑이던 어떤 화면에서든지 깔끔하게 잘 보여지는 이메일을 보내기 위해서는 HTML 코드로 넓이를 500-600px 사이로 제한하고 중앙 정렬을 하면서 내용에 프레임을 씌우는 반응형 디자인이 필요하고, 1번 코드는 그 반응형 디자인을 위한 부분이다.
2) 로고 헤더
보통 잘생긴 뉴스레터나 기업 이메일은 상단에 대표이미지나 로고가 박혀있고, 그걸 클릭하면 해당 서비스로 넘어갈 수 있게 해 주는데, 이 템플릿의 2번 코드가 바로 그 부분이다. 템플릿에는 필자가 운영중인 리뷰헌트라는 서비스의 로고가 들어 있는데, 아래 순서대로 본인 로고로 변경하면 된다.
2번 코드에서 a href="https://review.hunt.town/?ref=yh-gmail" 라고 적힌 부분은 해당 로고를 클릭했을때 넘겨줄 사이트 주소를 의미한다. 저 따옴표 안에 있는 주소를 본인 제품/서비스 주로로 입력하도록 한다. 예를들어 필자의 브런치 주소로 넘기고 싶으면 a href="https://brunch.co.kr/@andrewyhc" 이렇게 바꿔주면 된다.
다음 줄에 있는 src="https://i.imgur.com/9m41pZx.png" 라고 적힌 부분은 저 로고 이미지를 불러오는 코드인데, 이 부분은 조금 설명이 필요하다. 우리가 통상 이메일에서 보는 이미지들은 사실 이미지에 첨부된게 아니라 어딘가에 "서버"라는 곳에 올라가 있는 이미지의 경로를 직접 불러와서 보여주는 것들이다. 그런데 우리 문돌이들보고 클라우드 서버를 파서 이미지를 업로드하고 그 경로를 따오라고 한다면... 매우 막막한 일이 될 것인데, 이 작업을 마법같이 쉽게 해주는 곳이 imgur라는 사이트가 있다.
여기에 무료로 계정을 만들고 이미지 파일을 업로드 할 수 있는데, 이미지를 올린 후에 (public으로 올리지 말고 hidden으로 올려서 다른 사람들은 못보게 하자) 우측 상단 내 유저 아이디 클릭 > Images > 아까 올린 이미지 클릭하면 아래와 같은 팝업창이 뜨는데, 저기서 두번째에 있는 Direct Link라는 URL이 바로 이메일에서 경로 주소로 쓸 수 있는 URL이다. 이걸 복사해서 위 src=" " <-- 요 따옴표 안에 주소를 입력해 주면 된다.
imgur를 활용하면 이미지 서버와 같은 효과를 얻을 수 있다.
간혹 본인 로고가 위에 내가 예시로 쓴 로고보다 너비가 작을 경우 로고 이미지가 지나치게 비대해 보이는 경우가 생길 수 있는데, 이때는 당황하지 말고 저 코드에 max-width: 143px; 라고 적힌 부분의 숫자를 줄여주면 된다. 이렇게 수정을 하면서 이게 제대로 잘 보이는지를 확인하려면 코드 수정 > 저장 후에 해당 문서를 (test-email.html) 다시 브라우저로 열면 된다.
3) 구분선
저 코드 부분 전체가 화면에서 보이는 구분선인데, 본인 이메일에서 필요할떄 마다 저 코드 부분 전체를 복사해서 붙여넣기 하면 화면에 회색 구분선이 생긴다.
4) 일반 문단
이메일의 일반 문단에 해당하는 코드이다. 저 Lorem ipsum.... 어쩌고 하는 내용 부분만 본인이 원하는 내용으로 수정하면 된다.
5, 6) 불릿포인트
가끔 내용을 댕댕이 리스트나 숫자 리스트로 나열해야 하는 분들을 위해 넣어놓은 코드인데, 필요 없는 사람들은 5 - 6번 전체를 삭제해도 된다. 5번은 댕댕이로 표현되는 리스트, 6번은 1, 2, 3, 4 ... 이렇게 숫자가 적힌 리스트가 보이는 코드인데, <li> ... </li> 요 사이에 내용을 본인이 원하는 내용으로 수정해 주면 된다.
7) 이미지
위에 2번 로고 삽입이랑 비슷한 맥락이다. 이메일에 이미지를 보여주고 싶을 때는 어딘가 서버에 올라가 있는 이미지의 "경로"를 보여주는 방식인건데, 해당 코드에서 src="https://steemitimages.com/640x0/https://cdn.steemitimages.com/DQmdZZLcyLv6Z1BXQ7mfarYq5a2MnAhimaJfCq2KAxYoSKT/main.png" 요 부분에 따옴표 안의 링크를 본인 이미지 경로로 바꿔주면 된다.
원하는 이미지를 아까 imgur에 업로드해서 다이렉트 링크를 따서 저기에 입력해도 되는데, 혹시 일반적인 인터넷에 있는 이미지를 따오는 경우 한가지 팁을 알려주려고 한다.
내가 이미지 스탁 사이트에서 이런 사진을 - https://unsplash.com/photos/aiBYhrzsQw4 - 이메일 본문에 삽입하고 싶을 때, 저 사진 페이지에서 상단 주소창에 있는 주소를 저기 src 부분에 입력하는 분들이 있을텐데, 그렇게 한 후 html파일을 열면 아래와 같은 엑박을 경험하게 될거다.
해당 이미지 경로 불러오기를 실패해서 그런건데, 이미지 경로 주소를 따기 위해서는 해당 이미지에서 마우스 우측 버튼 클릭을 하면 Copy Image Address 라는 메뉴가 있다 (크롬 기준인데 익스플로러에서는 명칭이 다를 수 있음). 해당 버튼을 클릭해서 복사한 주소를 위 src 코드 주소에 넣으면 이미지가 아래처럼 제대로 보여진다.
대부분의 이미지에서 마우스 우측 버튼을 클릭하면 이미지 경로를 딸 수 있다.
저기서 딴 이미지 경로 주소를 src 부분에 입력하면 이렇게 이미지를 제대로 불러온다.8) 버튼
뭔가 가장 중요한 액션 (잇어빌리티한 표현으로 콜투액션 call-to-action이라고 부른다)을 버튼으로 표현하고 싶을때 필요한 코드 부분이다. 8번 코드에서 다음 두가지 부분을 수정해 주면 되는데, a href="#" 라는 코드에 저 우물정 부분에 본인이 원하는 사이트의 주소를 넣으면 된다. 그리고 Learn More는 버튼 안에 있는 텍스트인데, 역시 원하는 내용으로 바꿔주면 된다. 예를들면 "더 읽어보기" "가입하기" "구독하기" 등등...
9) Unsubscribe 버튼
이건 개인적으로 보내는 이메일에서는 별로 중요한 내용은 아니지만, 10명 이상의 사람에게 보내는 이메일에서 이 버튼이 안들어가 있으면 스팸 메일로 분류될 수 있다. 9번 코드에서 href="mailto:your@email.com..." 라고 길게 적힌 부분에서 저 mailto 뒤에나오는 이메일 주소에 본인 이메일 주소를 입력해 준다. 상대방이 저 버튼을 클릭하면, 자동으로 이메일 클라이언트가 열리고 to에 본인 이메일 주소, 내용에 I Don't want to receive an email from your service! 라는 글이 자동으로 적혀진다.
위에 총 9개의 코드 요소들 중에서 본인이 필요한 부분만 남겨놓고 나머지는 삭제하면 되는데, 삭제할 때는 반드시 내가 박스로 구분해놓은 영역 전체를 잡아서 삭제하도록 한다. 해당 부분을 복붙할 경우 역시 내가 박스로 잡아놓은 코드 전체를 잡아서 그 박스 밑 부분에 엔터키로 공백을 만든 후에 복붙하면 된다.
2. 수정한 코드를 지메일에 붙여넣기
오늘 글의 가장 중요한 부분이니 잘 읽어주길 바란다. 위에서 열심히 작업한 html 파일을 지메일에 어떻게 적용할 수 있을까? 아래와 같은 순서로 작업하면 된다 (크롬 브라우저 기준으로 설명한다).
1) 개발자 도구 열기
New Message 작성 탭에서 본문 부분에 커서를 위치시켜 놓고 마우스 우측 버튼을 클릭하면 메뉴에 "Inspect"라는 탭을 클릭하면 아래 그림과 같은 개발자 도구가 열린다 (이메일 본문 부분에 커서가 위치한 상태에서 개발자 도구를 여는게 중요하다).
2) Edit as HTML
개발자 도구가 열리면 위에 커서가 위치한 부분의 HTML 코드가 선택된 채로 창이 열리는데, 여기서 해당 코드 위에서 다시 마우스 우측 버튼을 클릭하면 Edit as HTML이라는 버튼이 있다. 그걸 바로 클릭하자. 클릭하면 해당 코드부분 인풋창이 열리면서 코드를 수정할 수 있게 된다.
3) 코드 복붙하기
아까 서브라임 텍스트로 작업하던 html파일의 코드 전체를 선택하고 복사 -> 위 2번에 인풋창에 있는 코드 전체를 선택하고 붙여넣기한다. 즉, 2번 창에서 선택된 코드 전체를 우리가 지금까지 열심히 작업한 코드로 교체해 주는 작업이다. 복붙한 후에 엔터를 치지 말고 반드시 마우스로 다른 공백 부분을 클릭해야 한다. 그래야 입력된 코드가 적용된다. 코드가 적용되면 아래와 같이 짜짜잔~~~ 하고 우리가 작업한 깔끔한 디자인의 이메일이 삽입된다.
우리가 지금까지 열심히 작업한 코드를 이메일 인풋창에서 해당 부분의 코드와 교체해 주는 아주 중요한 작업이다.
지메일에서 바로 보여진다.위에 까지 잘 된 분들은 저 개발자 도구를 닫고 (인터넷 창을 닫지 말고 개발자 도구 창만 닫아야 한다), 이 후 부터는 원래 하던것 처럼 보내는 사람 주소, 제목 등을 입력하고 바로 전송하면 된다. 이렇게 작업한 이메일을 보내면 문돌이들도 아래 그림처럼 깔끔하게 반응형으로 디자인된 HTML 이메일을 자유자재로 보낼 수 있다.
데스크탑에서 적당한 너비와 깔끔한 중앙 정렬이 잡힌 이메일이 도착했다!!
모바일에서도 매우 깔끔한 디자인의 이메일이 도착했다!!여기까지 따라하느라 정말 수고 많았다. 하지만, 개발 코드만 보면 괜히 위축되는 우리 문돌이들에게 위 작업이 그닥 쉽지는 않을것이며, 위와같은 HTML 작업을 해서 보내더라도 통상 다음과 같은 문제가 발생한다.
1. 이메일 클라이언트마다 코드 스타일이 달라서 특정 클라이언트에서 내용이 깨질 수 있다.
2. 이미지 경로 불러오기가 실패해서 이미지 엑박이 뜰 수 있다.
3. 마진, 패딩, 너비, 높이 등의 스타일 코드를 불러오는 방식이 이메일 클라이언트마다 상이하기 때문에 내가 열심히 잡아놓은 마진등의 규격이 다 깨질 수 있다.
위와같은 노가다 없이 대량의 이메일을 HTML로 잘 스타일링해서 보내고 싶을 경우 그냥 유료 서비스를 쓰는것을 추천한다. 해외에서는 메일침프 (https://mailchimp.com/)라는 곳이 제일 유명한데, 국내에는 얼마전부터 자주 보이는 스티비라는 서비스가 있다.
하지만 이런 HTML 이메일을 직접 보내보면, 본인이 이메일 세계에 대해 몰랐던 많은 내용을 공부할 수 있으니 꼭 한번쯤은 직접 시도해 봤으면 한다. 혹시 따라하다가 막히거나 잘 모르겠는 부분은 댓글로 남겨주시기 바란다.
이 간단해 보이는 팁 하나를 쓰기 위해서 수 많은 시행착오와 스샷 작업이 동반된다. 보답으로 꼭 이 글을 공유해서 코딩을 전혀 모르는 다른 문돌이들에게 전달될 수 있도록 하자 �
글쓴이는 노마드태스크 (Nomadtask)라는 퀘스트 기반의 글로벌 마케팅 캠페인 플랫폼의 Co-founder 및 디자이너로 일하고 있다. 원래는 비즈니스를 전공하고 기획자로 일하다가 스타트업을 창업하고 본업을 스타트업 파운더+디자이너로 전향했는데, 그 과정에서 득템한 다양한 스킬들을 연재하고 있다.
노마드태스크 - https://nomadtask.com/
