HTML 이메일을 만드는 방법

게시 됨: 2022-01-28

HTML 이메일을 만드는 것은 생각만큼 어렵지 않습니다. 개발자가 될 필요도 없고 코딩 방법을 알 필요도 없습니다.

WYSIWYG(What You See Is What You Get) 이메일 편집기를 사용한 적이 있다면 이미 HTML 이메일을 생성한 것입니다. 끌어서 놓는 각 모듈은 HTML과 인라인 CSS로 구성되어 다양한 이메일 요소의 모양과 동작을 정의합니다.

따라서 대부분의 이메일 편집기에서 끌어서 놓기 도구로 디자인할 수 있다면 이메일을 작성하기 위해 HTML을 알아야 하는 이유는 무엇입니까?

좋은 질문.

대부분의 이메일 편집기는 모듈 내에서 상당한 양의 제어를 제공하지만 이메일의 모든 핵심적인 측면을 조정할 수는 없습니다. 다음과 같이 변경하려면 HTML이 필요할 수 있습니다.

  • 글꼴 크기
  • 대체 텍스트
  • 테두리
  • 여백
  • 심
  • 이미지 크기
  • 그림 물감

Twilio SendGrid의 이메일 편집기 를 사용해 보셨습니까 ? 끌어서 놓기 모듈 과 HTML 편집을 조합하여 이메일을 만들 수 있습니다. 이와 같은 강력한 조합을 통해 이메일의 모양과 느낌을 완벽하게 제어할 수 있으므로 모든 메시지에서 일관되고 최고 수준의 브랜드 경험을 보장할 수 있습니다.

다행히 HTML 이메일을 코딩하는 것은 그리 까다롭지 않습니다. 아래에서 더 나은 이메일을 만드는 데 필요한 팁과 이메일 구조 노하우를 알려드립니다.

HTML 이메일 코딩을 위한 5가지 팁

HTML 이메일 코딩은 비교적 간단하지만 이메일 클라이언트와 받은 편지함은 까다로울 수 있습니다. 받는 사람의 클라이언트, 브라우저 또는 장치에 관계없이 메시지가 멋지게 보이도록 하려면 다음 모범 사례를 따르십시오.

1. 반응형 이메일 만들기

수신자는 다양한 운영 체제, 장치, 화면 크기, 브라우저 및 전자 메일 응용 프로그램에서 전자 메일 메시지를 엽니다. 이러한 각 요소는 이메일을 다르게 렌더링하므로 이메일이 응답 하고 대부분의 받은 편지함에서 의도한 대로 작동하는지 확인하는 것이 귀하의 임무입니다.

반응형 이메일 템플릿을 많이 찾을 수 있지만 HTML 이메일을 처음부터 코딩할 때 작업이 조금 더 복잡합니다. 다음은 이메일 응답성을 높이는 데 도움이 되는 몇 가지 사항입니다.

  • 미디어 쿼리 포함: 미디어 쿼리를 사용하면 이메일 템플릿을 다양한 장치에 적용할 수 있습니다.
  • 단일 열 사용: 데스크톱에서 2열 이메일을 읽는 것은 쉬울 수 있지만 모바일 장치에서는 다소 밀도가 높을 수 있습니다.
  • 글꼴 크기 늘리기: 13 또는 14포인트 글꼴보다 작게 사용하지 마십시오.
  • 링크 간격두기: 링크가 너무 가깝기 때문에 독자가 실수로 잘못된 링크를 클릭하는 것을 원하지 않습니다.
  • Alt 태그 추가: Alt 태그는 이미지 로드에 실패한 경우 이미지를 설명합니다.

2. 이미지를 아껴서 추가

이미지는 이메일 캠페인에 큰 도움이 되지만 너무 많이 사용하지 않도록 주의하십시오. 이미지가 너무 많으면 로드 시간이 길어지고 이메일을 렌더링하기 어려울 수 있습니다.

더 빨리 로드되고 전체 화면을 차지하지 않는 더 작은 이미지를 사용하십시오. 또한 "너비" 및 "최대 너비"와 같은 반응형 크기 조정 요소를 추가하여 모든 장치와 이메일 클라이언트에서 이미지가 제대로 로드되도록 합니다.

3. 단순하게 유지

이메일의 목적을 기억하십시오. 많은 이메일 디자이너는 예술과 창의성에 빠져서 이메일의 전반적인 목표를 잊어버립니다.

첫째, 사람들이 귀하의 이메일을 열 수 있기를 바랍니다. 다음으로 사용자가 클릭하고 조치를 취하기를 원합니다. 웹사이트를 방문하거나, 블로그 게시물을 읽거나, 구매하거나, 이벤트에 등록하는 일이 될 수 있습니다.

일을 단순하게 유지하십시오. 수신자에게 가치를 제공하고 콘텐츠로 유인한 다음 클릭 유도문안으로 유도하십시오. 그게 다야 대부분의 경우 다른 모든 것은 보풀입니다.

이메일에 다른 HTML 요소를 추가할 때 다음과 같이 자문해 보십시오. "이것이 이메일의 목적을 달성하는 데 도움이 되나요?" 그렇지 않은 경우 이메일 디자인에서 제거하십시오.

4. 사전 제작된 이메일 템플릿 사용

뛰어난 캠페인을 보내는 데 필요한 모든 것이 포함된 미리 작성된 HTML 이메일 템플릿 을 찾을 수 있습니다 . 템플릿은 이미 보기 좋고 반응이 빠른 이메일 디자인을 만들기 위해 많은 노력을 기울였습니다.

이메일 템플릿이 마음에 들지만 100% 만족하지 않는 경우 HTML을 다운로드하여 원하는 대로 수정할 수 있습니다. 이것은 HTML을 처음 접하는 사람들에게 훌륭한 이메일 편집 방법이 될 수 있습니다.

5. 이메일 테스트

먼저 테스트하지 않고 이메일을 보내지 마십시오. 이를 수행하는 구식 방법은 테스트 이메일을 다양한 이메일 주소(이메일 클라이언트 전체)로 보내고 다른 장치에서 열어보는 것입니다. 많은 시간과 두통을 낭비하는 것처럼 들린다면 당신 말이 맞습니다.

다행히 요즘에는 더 나은 방법이 있습니다.

Twilio SendGrid의 이메일 테스트 도구 는 디자인 편집기와 통합되어 단일 애플리케이션에서 문제를 해결할 수 있도록 도와줍니다. 이메일이 클라이언트, 브라우저 및 장치에서 어떻게 렌더링되는지 확인하는 데 도움이 됩니다. 예를 들어 Gmail을 사용하는 모바일 장치와 Outlook을 사용하는 데스크톱에서 이메일이 어떻게 보이는지 확인할 수 있습니다.

이메일 테스트 도구는 깨진 링크와 버튼, 스팸처럼 보이는 콘텐츠, 형식 문제를 찾는 데도 도움이 됩니다.

HTML 이메일 구조

HTML 이메일의 구조는 다음과 같습니다.

  • DOCTYPE
  • 머리글
  • 신체

DOCTYPE

<!DOCTYPE>을 사용하여 브라우저에 예상되는 내용을 알려줍니다. 이 경우에는 HTML 이메일이 됩니다.

머리글

헤더 섹션을 사용하여 스타일 지정, 크기 조정 및 메타 텍스트와 같은 요소를 포함합니다.

신체

텍스트, 이미지, 표, 링크 등과 같은 이메일의 시각적 요소에 본문을 사용합니다.

HTML 코드가 포함된 이메일 템플릿

다음은 HTML 코드가 포함된 이메일 템플릿의 예입니다. 이 여행 뉴스레터 이메일 템플릿 이 데스크탑, 태블릿 및 모바일 장치에서 어떻게 렌더링되는지 볼 수 있습니다 .

당신이 보는 것처럼? "템플릿 다운로드"를 클릭하면 HTML 코드 사본을 받은 편지함으로 보내드립니다. 그런 다음 이메일 디자인 편집기에 코드를 복사/붙여넣기하여 템플릿을 가져와 브랜드 및 캠페인에 맞게 조정할 수 있습니다.

Twilio SendGrid의 다른 이메일 템플릿 확인

더 많은 이메일 템플릿을 원하십니까? 운 좋게도 우리는 갤러리로 가득 차 있습니다 . 뉴스레터, 비밀번호 재설정 또는 약속 알림 템플릿이 필요한지 여부에 관계없이 무료 템플릿 갤러리에는 모든 것이 있습니다.

또한 이러한 디자인은 반응형이므로 이메일이 클라이언트, 브라우저 및 장치에서 멋지게 보이도록 합니다. 아, 그리고 템플릿이 무료라고 언급했습니까?

사전 제작된 템플릿을 사용하여 지금 더 나은 HTML 이메일을 만들어 보세요 .