Advertisement
  1. Web Design
  2. Email Design
Webdesign

HTML 이메일 템플릿 처음부터 제작하기

by
Length:LongLanguages:

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

Final product image
What You'll Be Creating

모든 과정을 이해하는 최고의 방법은 처음부터 끝까지 직접 제작해보는 것입니다. 오늘은 HTML 이메일 템플릿을 처음부터 구축하면서 이메일 디자인에 그 방법을 실행해 보도록 하죠.

시작

시작하기에 앞서 제가 여기 사용한 소스의 출처를 알려드리겠습니다.

이전 튜토리얼에서 설명했듯이 여러분은 XHTML doctype을 사용해 HTML 이메일 코드를 작성할 것입니다.

위의 정리된 코드에 나머지 HTML 구조를 짜기 시작하면 됩니다.

Body와 Main 테이블 작성

우선, <body> 태그를 시작으로 이메일의 전반적인 구조를 작성하겠습니다. 예상 못 했던 공간이 생기지 않게 body 속성에서 margin과 padding 값을 0으로 합니다.

테이블의 width 값도 100%로 하겠습니다. body 태그의 스타일은 전혀 적용되지 않기 때문에 이렇게 하면 이메일에서 진짜 body 태그처럼 동작할 것입니다. 이메일의 body에 배경색을 입히고 싶으면 이 커다란 테이블에 관련 코드를 대신 적용하세요.

테이블에서 의도치 않은 공간이 생기지 않도록 cellpadding과 cellspacing 값을 0으로 합니다.

메모: 모든 테이블 속성에 border="1"을 남겨둘게요. 작업을 진행하면서 레이아웃 윤곽을 알 수 있거든요. 최종 단계에서 Find(찾기)와 Replace(대체하기) 기능을 이용해 이 속성을 뺄 것입니다.

1

HTML에서 사용 가능한 속성이 있는 경우에는 CSS 대신 그 속성을 사용하세요.

이제 컨테이너 테이블 안에 600픽셀 너비의 테이블을 가운데 넣습니다. 600픽셀은 이메일에 가장 안전한 최대 너비이며, 다양한 해상도의 데스크톱과 웹메일 클라이언트에서 문제없이 보입니다.

너비 속성을 이용해 CSS 대신 HTML로 테이블 너비를 입력합니다. HTML 이메일 개발에서의 황금률: HTML에 속성이 있다면 CSS 말고 그 속성을 사용하세요.

짧은 '안녕하세요!' 인사말을 이 테이블로 교체하겠습니다.

border-collapse 값을 collapse로 지정하는 인라인 스타일 속성도 추가합니다. 그렇게 하지 않으면 아웃룩의 새 버전에서 border와 테이블 사이에 미세한 공간이 생깁니다.

2

구조와 헤더(Header) 작성

디자인에서 우리는 이메일이 논리적인 세 영역으로 구성되었음을 알 수 있습니다. 따라서 우리는 줄마다 제작해 보겠습니다.

작성한 줄 하나를 복사해서 총 3개를 만들죠. 저는 줄마다 쉽게 구분되도록 그 안에 있는 텍스트를 바꿨습니다.

3

이제 디자인에 맞춰 색상을 넣겠습니다. bgcolor는 유효한 HTML 속성이기 때문에 배경색을 적용하는데 CSS 말고 이 속성을 사용하겠습니다. 단축한 3글자는 때로 작동하지 않으므로 반드시 총 6글자인 헥스 코드(hex code)를 사용하세요.

4

다음에는 Row 1에 집중하겠습니다. 셀에서 padding값을 변경하고 이미지를 삽입하도록 하죠.

패딩(Padding) 사용

이메일에서 padding을 사용할 때는 항상 (위, 오른쪽, 아래, 왼쪽) 값을 하나하나 명시해야 합니다. 그렇게 하지 않으면 예상치 못한 결과가 나올 수 있습니다. 여러분은 padding: 10px 10px 8px 5px; 같이 문장을 간단히 적을 수 있습니다. 다만 문제가 생기면 padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left:5px; 처럼 길게 작성하고 싶을 것입니다.

padding으로 더 큰 문제가 발생하게 되면 (가령, 전송 플랫폼에서 CSS를 제거하면) 사용하지 마세요. 차라리 빈 셀을 넣어 공간을 만드세요. 공간을 메울 용도로 GIF를 만들지 마세요. 해당 셀에  style="line-height: 0; font-size: 0;"를 적고, 셀 안에는 &nbsp;를 작성하고 셀의 정확한 높이나 너비 값을 지정하면 됩니다. 예제가 여기에 있습니다.

P 태그나 DIV가 아닌 TD 태그에 padding을 사용하면 안전합니다. P 태그와 DIV의 경우에는 예상을 넘어 더 크게 보입니다.

padding을 셀에 추가하기 위해 인라인 CSS를 이용하겠습니다. 그다음 이미지를 넣고 alt 텍스트를 입력합니다. 그리고 style="display:block;"을 추가하는데, 이는 몇몇 이메일 클라이언트에서 이미지 아래 여백이 보이는 것을 방지하는 일반적인 해결 방식입니다.  td 태그에 align="center"를 넣어 이미지를 가운데 정렬합니다. alt 태그도 적습니다. 이는 대개 이미지가 뜨지 않는 채로 이메일이 로딩될 때 중요합니다.

메모: 헤더의 내용이 메시지에서 매우 중요하다면, 이미지만 있는 헤더는 사용하지 마세요. 대다수의 클라이언트가 자동으로 이미지를 차단한다는 것을 잊지 마세요. 그러니 이메일의 내용이 정말 중요하다면 그 내용을 이미지에 결코 담아서는 안 됩니다. 어쨌든, 이 예제에서 헤더는 중요하지 않네요.

6

콘텐츠 영역 제작

우선, 중간 셀에 padding을 넣습니다. 그러면 디자인에 맞춰 그 안에 있는 테이블 주변에 공간이 생기게 됩니다.

7

메인 콘텐츠용으로 3줄로 짜인 테이블을 추가하겠습니다. 한 줄에는 헤드라인이 있고, 다른 한 줄에는 소개 텍스트가 있으며, 마지막 한 줄에는 2개의 열이 들어갑니다.  테이블 너비를 픽셀 단위가 아닌 100%로 하겠습니다. 이메일을 반응형으로 만들고 싶다면, 너빗값을 추적하는 데 유용하기 때문입니다. 늘 모든 속성에 픽셀 단위로 값을 지정한다면 결국에는 미디어 쿼리에 수많은 값을 지정하는 일로 마칠 수 있습니다. 반면 중첩된 테이블 너비를 퍼센트로 지정하면, 부모 요소의 너비를 조정할 때 이에 맞춰 모든 값이 변경될 것입니다.

8

이제는 콘텐츠를 넣고 가운데 셀에 padding을 줍니다.

9

Row 3에 콘텐츠가 들어갈 열을 2개 추가하겠습니다. 2개 열 사이에 '여백'을 주겠지만, margin은 사용하지 못하므로 2개의 열 중간에 빈 열이 있는 3열짜리 테이블을 만들겠습니다.

퍼센트 사용을 고수하고 싶은데, 콘텐츠의 크기가 정확하다면 그 값을 퍼센트로 바꾸는 것이 어려울 수 있습니다. (이 예제에서는 열 너비가 48.1%가 될 터인데 혼동될 수 있겠지요.) 이런 이유로, 이미지 2개는 260px 너비이니까 우리는 가운데 20px 여분의 열과 260px 너비 열 2개를 만들 것입니다. (총 540px이 됩니다. 테이블의 600px 너비에서 양쪽 30px의 padding 값을 뺀 값이네요.) 잊지 말고 font-size와 line-height 값을 0으로 하고, 줄 바꿈 없는 공백인 &nbsp;를 가운데 여백 셀에 넣습니다.  

한 셀에 있는 글의 양이 다른 셀보다 더 많을지라도 맨 위로부터 수직 정렬되도록 양쪽 셀에 valign"top"으로 지정해 줍니다. 수직 정렬의 기본 값은 "middle" 입니다.

10

양쪽 열에 이미지와 콘텐츠를 넣어봅시다. 줄이 여러 개 필요한데 colspan이나 rowspan 태그를 사용하지 못하기 때문에 다른 테이블을 중첩시키겠습니다.  각 열에서 이미지와 카피 글 사이에 padding도 어느 정도 줄 것입니다.

여기에서는 열 너비가 100%인 HTML을 이용하여 이미지 너비를 지정하겠습니다. 한 번 더 말하지만, 이 이메일을 반응형으로 만들고 싶다면 부모 요소의 너비 값을 바꿔주는 미디어 쿼리를 사용하면 됩니다.  style="height: auto"를 사용해도 모든 클라이언트에 적용되지 못하므로 높이값을 픽셀 단위로 변경해야 합니다. (에헴 에헴, 아웃룩) 그러니까 픽셀로 지정하겠습니다. 이는 이미지가 픽셀값을 상속받지 못 하려면 미디어 쿼리에서 이미지에 height: auto !important가 있어야 한다는 의미입니다. 그러나 단 하나의 클래스로 이 작업이 가능합니다. 너빗값을 퍼센트로 했기 때문에 변경하지 않아도 됩니다. 변경하는 것이 적을수록 더 좋답니다.

13

푸터(Footer)

이제는 푸터 열에 padding을 넣겠습니다.

14

셀 안에 2개의 열이 들어가도록 또 하나의 테이블을 중첩시킵니다.

15

소셜 미디어 아이콘을 위한 작은 테이블을 만들겠습니다. 부모 셀의 속성을 align="right"로 지정합니다. (파란색 링크 테두리가 생기지 않도록) 이 이미지 링크에 border="0"으로 적혀있는지 확인하고 display:block도 잊지 말고 적용하세요.

17

이제는 텍스트를 입력하고, 셀 간의 여백이 커질 경우를 대비해서 셀에 너빗값을 지정합니다.  이 셀을 75%로, 다른 셀은 25%로 지정하겠습니다.

해냈습니다!  레이아웃이 완성됐어요.

검증

코드에 문제가 없는지 작업한 문서를 W3C Validator에서 돌려봅시다. 여러분이 튜토리얼을 정확하게 따랐다면 무사 통과할 것입니다.

email-build-valid

다음에는 이메일의 구조가 잘 되어 있는지 확인하기 위해 리트머스(Litmus)에서 테스트를 하겠습니다. 제가 실행한 테스트 결과에 대한 요점은 다음과 같습니다.

email-build-litmus
온라인에서 확인하기

텍스트 꾸미기

첫째 줄은 헤딩(heading)입니다. 글씨를 굵게 하려고 <b> 태그를 쓰겠습니다. 알다시피 HTML에 속성이 있다면 CSS 말고 그 속성을 사용하기 때문입니다.

또한, 텍스트가 있는 모든 셀에 이 인라인 스타일을 넣겠습니다.

다음에는 푸터 텍스트에 스타일을 적용하고, 구독 해지(unsubscribe) 링크를 정돈할 것입니다. CSS와 HTML <font> 태그를 사용해 구독 해지 텍스트 링크를 꾸며보겠습니다. 둘을 함께 쓰는 것은 링크의 기본색인 파란색이 절대로 나타나지 않게 하기 위한 최선의 방법입니다.

20

해냈습니다!   모두 들어갔습니다. 테두리를 없애고 나서 예쁘게 보이는지 보지요. 코드를 세심히 보면서 모든 border="1"border="0"으로 바꿔 주세요.

21

현재는 여백에서 좀 슬피 떠 있는 듯 보이네요. 첫 번째 600픽셀 너비의 테이블로 가서 아래의 코드를 적습니다.

자, 더는 떠 있는 듯이 보이지 않습니다. 마무리 손질로 (애플 메일처럼) 몇몇 웹메일 클라이언트에서 하단이 갑자기 끊기는 현상을 방지하기 위해 첫 셀 하단의 padding 값을 30픽셀로 하겠습니다. 그리고 상단 padding 값을 10픽셀로 주고요. 그러면 파란 헤더에 숨 쉴 틈이 조금 생깁니다.

23

이게 다예요!  최종 테스트를 해보지요.

email-build-litmus-finished
온라인에서 확인하기

마칠게요!

마치기 전, 작성된 주석을 지워 줍니다. 일부 이메일 클라이언트는 주석에서 막힐 수 있습니다. 고로 파일에서 불필요한 코드를 지우는 것이 현명합니다.

마지막 테스트를 할 적기입니다. 그다음에는 HTML 이메일을 보내도 됩니다!

학습한 것을 더 업그레이드 하고 싶으면 아래의 튜토리얼을 읽어 보세요.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.