이메일 모듈: 자신 있게 고유한 이메일을 실제로 확장하는 방법

게시 됨: 2021-05-04

모듈식 이메일 템플릿에 대해 몇 년 동안 들어 보았을 수도 있지만 아직 도약하지 못했습니다. 아니면 당신이 아이디어에 처음일 수도 있습니다. 그렇다면 이메일 모듈은 정확히 무엇이며 사용해야 합니까? 간단한 대답은 '예'이며 이메일의 다른 질문과 달리 '상황에 따라 다릅니다'는 없습니다.

이메일 팀의 52%는 이메일 워크플로 현황 보고서에 따르면 처음부터 끝까지 이메일을 작성하는 데 2주 이상을 보냅니다. 모듈식 이메일은 프로세스 속도를 높여 효율성을 높입니다. 따라서 반복적인 코드에 시간을 덜 쓰고 혁신에 더 많은 시간을 할애할 수 있습니다. 당연합니다.

계속 읽으십시오:

  • 이메일 모듈이란 무엇입니까?
  • 모듈식 이메일의 이점
  • 모듈식 설계를 시작하는 방법

이메일 모듈이란 무엇입니까?

이메일 모듈은 다양한 조합으로 조합하여 이메일 또는 전체 이메일 템플릿 범위를 생성할 수 있는 재사용 가능한 콘텐츠 블록입니다. 구성 요소라고도 하는 모듈은 스니펫(클릭 유도문안 버튼과 같은 특정 이메일에 맞춤) 및 부분(이메일 바닥글과 같이 여러 이메일에서 일관됨)과 같은 몇 가지 종류로 제공됩니다.

모든 모듈은 광범위한 이메일 디자인 시스템 또는 브랜드 지침의 일부로 패턴 라이브러리에 보관할 수 있습니다. 따라서 팀은 깨지지 않는 브랜드 호환 이메일을 구축하기 위해 어떻게 조합하는지 정확히 알고 있습니다. 본질적으로 모듈식 이메일 디자인은 더 큰 디자인을 만들기 위해 함께 모인 더 작은 섹션 또는 모듈을 중심으로 진행됩니다. LEGO 블록과 마찬가지로 조합하여 무엇이든 만들 수 있습니다.

모듈식 이메일의 이점은 무엇입니까?

모듈식으로 전환하는 데는 많은 이점이 있으며 이미 몇 가지를 암시했습니다. 여전히 의심이 가는 경우 이점이 있습니다.

브랜드를 유지하고 오류가 없는 표준화

귀하의 로고 또는 브랜드 색상이 이메일에서 이메일로 약간 벗어나 있습니까? 모듈식 설계는 그러한 불일치를 처리합니다. 블록은 모두 사전 코딩되고 테스트되었으므로 모든 이메일에서 브랜드 표준을 유지하는 이메일을 생성하므로 안심할 수 있습니다. 실수 없이.

시간을 절약하고 이메일 워크플로 속도를 높입니다.

2020년 이메일 현황 설문조사 데이터에 따르면 마케팅 담당자의 약 35%가 이메일당 코딩 및 개발에 1~2시간을 소비합니다. 다른 34%는 최소 3시간이 걸립니다. 응답자의 절반 이상이 한 번에 6개 이상의 이메일을 처리하므로 개발 시간이 빠르게 증가합니다.

이메일 디자인이 표준화되어 더 이상 처음부터 이메일을 코딩하는 것에 대해 걱정할 필요가 없습니다. 이렇게 하면 많은 시간을 절약할 수 있으므로 이메일을 더 빨리 받을 수 있습니다. 개인적으로 이제 10분 안에 이메일을 작성할 수 있습니다.

유연성과 창의성

템플릿은 딱딱하고 지루하다는 인식을 갖는 경향이 있습니다. 그러나 모듈식 템플릿? 그들은 재미있다. 이메일의 일부이기 때문에 필요에 맞게 조합할 수 있으므로 매번 같은 레이아웃에 얽매이지 않아도 됩니다.

그리고 귀하의 블록은 살아있는 이메일 디자인 시스템의 일부입니다. 유연성과 창의성을 유지하기 위해 디자인 시스템이 성장함에 따라 계속해서 새로운 것을 추가할 수 있음을 의미합니다.

드래그 앤 드롭 이메일 빌더에서 사용할 수 있습니다.

이메일 모듈의 또 다른 좋은 점은 무엇입니까? 기본적으로 "플러그 앤 플레이"이므로 Litmus Builder의 끌어서 놓기 Visual Editor와 같은 끌어서 놓기 전자 메일 빌더를 위해 완벽하게 제작되었습니다. 설정만 하면 준비가 완료됩니다.

코더가 아닌 사람도 이메일을 작성할 수 있습니다.

재사용 가능한 콘텐츠 블록이 비주얼 편집기에서 설정되면 코드를 건드리지 않고도 이메일을 작성할 수 있습니다. 이는 코더가 아닌 사용자도 이메일을 작성할 수 있음을 의미합니다! 실수로 무언가를 깨뜨릴 수 있다는 걱정은 더 이상 하지 않아도 됩니다.

이메일 생산 확장

기술 능력에 관계없이 누구나 모듈식 이메일을 빠르게 만들 수 있으므로 전체 이메일 제작 프로세스를 쉽게 확장하고 이메일 마케팅 프로그램을 성장시킬 수 있습니다. 다양한 구독자 세그먼트에 대한 개인화된 이메일과 같은 것에 집중하십시오. 이전에는 영원히 걸렸을 것입니다.

이메일 받은 편지함 확인

브랜드에 오류 없는 이메일을 빠르게 생성

Litmus Builder를 사용하여 하나의 원활한 흐름에서 이메일을 작성, 미리보기 및 QA 테스트하십시오. 더 이상 도구 사이를 왔다갔다 할 필요가 없습니다.

방법 알아보기 →

모듈식 설계를 시작하는 방법

이메일 디자인 시스템을 만드는 것으로 시작하는 것이 좋습니다. 이 단계부터 시작할 필요는 없지만 이메일 모듈이 분류되고 표준화되었는지 확인하는 좋은 방법입니다. 그렇지 않은 경우 사용할 때 많은 스타일 지정이 필요한 매우 기본적인 모듈을 만들 수 있습니다. 또는 유지 관리에 많은 유지 관리가 필요할 수 있다는 사실을 알고 양식화된 블록을 생성할 수 있습니다.

디자인 시스템이 완성되면 사실 기다리지 마십시오. 디자인 시스템은 이메일을 계속 작성함에 따라 변경될 살아있는 것입니다. 전체 시스템이 완성될 때까지 기다리는 대신 템플릿을 만들기에 충분한 블록이 확보되는 즉시 코딩을 시작하세요.

시작하는 방법은 다음과 같습니다.

1. 이메일을 감사하여 일반적으로 사용되는 섹션을 확인합니다.

이메일 감사를 완료하여 패턴을 발견했는지 확인하십시오. 이메일 전체에서 반복되는 섹션은 무엇입니까? 계속해서 사용하는 머리글 및 바닥글 블록이 있습니까? 1열 및 2열 콘텐츠 블록은 어떻습니까? 이것들은 모두 모듈의 좋은 후보입니다.

이메일 모듈이 있는 이메일 템플릿
뉴스레터의 모듈 예

모듈화할 섹션과 섹션 사용 방법(참여 규칙 포함)을 목록으로 만들거나 문서화합니다. 처음부터 구성 요소를 구성하면 특히 패턴 라이브러리를 계속 확장함에 따라 팀 전체에서 구성 요소를 더 쉽게 찾고 올바르게 사용할 수 있습니다. 머리글, 본문 및 바닥글에 대한 콘텐츠 블록에 레이블을 지정하는 것만큼 기본적일 수 있습니다. 또는 팀 또는 클라이언트별로 분류합니다.

저는 Litmus의 디자인 라이브러리에 있는 카테고리를 사용하여 섹션 및 이메일 유형별로 제 작업을 구성하는 것을 좋아합니다.

2. 기준 및 브랜드 가이드라인 결정

디자이너와 개발자는 모듈을 생성할 때 협력하여 요소 간 간격 및 모듈 간 간격과 같은 표준이 생성되고 유지되도록 해야 합니다.

이메일 패딩 가이드라인
스니펫 내에서 유지 관리하는 뉴스레터의 간격 예

그리고 이해 관계자가 글꼴 및 색상과 같은 이메일 관련 브랜드 지침에 동의했는지 확인하십시오.

3. 이메일 상용구 구축

모든 모듈은 스켈레톤 또는 상용구 HTML에 넣어야 합니다. 이렇게 하면 이메일을 어떻게 배치할 것인지에 대한 최고의 유연성을 얻을 수 있습니다. 상용구를 구성하는 방법에는 여러 가지가 있지만 모든 상용구에는 상단에 여는 태그, 헤더 콘텐츠, 재설정 및 브랜드 스타일, 닫는 태그가 있는 섹션이 포함됩니다.

이메일 상용구 코드
Mark Robbins의 Good Email Code에서 이 상용구를 가져오세요 →

Mark Robbins는 시작하는 데 도움이 되는 훌륭한 기본 이메일 템플릿을 만들었습니다. 이를 Jay Oram의 이메일에 대한 최신 표준 CSS 재설정 스타일 저장소와 결합하면 시작하기에 적절한 상용구를 갖게 될 것입니다.

4. 모듈 빌드

모듈은 다양한 방법으로 생성할 수 있습니다. 모듈과 일관성이 있는 한 결합될 때 함께 작동합니다. <table> 기반 모듈과 <tr> 기반 모듈의 두 가지 방법을 살펴보겠습니다.

<table> 기반 모듈 사용

각 모듈을 테이블에 래핑하여 테이블 스택이 모듈로 추가되도록 할 수 있습니다. 테이블 기반 모듈은 다음과 같습니다.

테이블 기반 이메일 모듈
장점 : 모듈이 깔끔하고 독립적입니다. 한 테이블의 레이아웃 스타일은 다른 모듈에 영향을 주지 않습니다.

단점 : 테이블을 쌓으면 얇은 흰색 선과 같은 Outlook에서 렌더링 문제가 발생할 수 있습니다.

<tr> 기반 모듈 사용

테이블 행을 기반으로 하는 모듈은 포함하는 테이블에 배치해야 합니다. 그런 다음, 다음과 같이 행을 서로 겹쳐서 포함하는 테이블에 행을 배치할 수 있습니다.

행 기반 이메일 모듈

장점 : Outlook에는 성가신 흰색 선 문제가 덜 있습니다.

단점 : 한 모듈의 렌더링 문제로 인해 다른 모듈의 렌더링 문제가 발생할 수 있습니다. 그리고 문제를 해결하기 위해 행 내부에 테이블을 중첩하려면 더 많은 코드가 필요할 수 있습니다.

5. 테스트, 테스트, 테스트!

두 모듈 방법 모두 하나의 구성 요소가 전체 이메일을 손상시키지 않는지 확인하기 위해 몇 가지 품질 보증(QA) 테스트를 수행해야 합니다.

모듈을 빌드하고 동시에 테스트하는 가장 좋은 방법은 Litmus Builder의 모든 모듈을 포함하는 하나의 큰 템플릿을 만드는 것입니다.

리트머스의 모듈식 이메일 템플릿

이를 통해 QA는 템플릿의 모듈을 테스트하여 모듈이 서로 어떻게 영향을 미치는지 확인할 수 있습니다. 또한 모듈 사이의 간격이 유지되도록 합니다. 모든 모듈이 추가되면 Litmus의 디자인 라이브러리에 스니펫 또는 부분으로 원활하게 복사 및 저장할 수 있습니다.

6. 이메일 제작 과정에서 모듈 사용 시작

모듈을 만든 후에는 빌드 프로세스에서 모듈을 사용하기만 하면 됩니다. 대부분의 코드 편집기는 코드나 상용구에 스니펫을 추가하는 방법을 제공합니다.

저는 리트머스 빌더를 사용합니다. 코드 편집기 보기에서 스니펫 트리거 단어 또는 삽입 메뉴를 사용하여 코드에 직접 스니펫을 추가할 수 있습니다. Litmus Builder의 끌어서 놓기 Visual Editor를 사용하면 말 그대로 스니펫을 제자리에 끌어다 놓기만 하면 됩니다.

리트머스 로고

모듈식 이메일 생성 시도

Litmus를 사용하면 쉽게 모듈화할 수 있습니다. 디자인 라이브러리에서 스니펫과 부분을 저장하고 구성합니다. 그런 다음 Litmus Builder의 Visual Editor를 사용하여 이메일을 빠르게 빌드하고 QA 테스트하십시오. 모듈이 포함된 완전히 최적화된 이메일 템플릿이 미리 로드되어 있으므로 바로 사용할 수 있습니다.

무료 평가판 시작 →

모듈화하자

유연한 이메일 디자인을 희생하지 않고 민첩하고 효율적이기를 원한다면 이메일 모듈을 좋아할 것입니다. 시간을 크게 절약하고 브랜드를 준수하고 창의적으로 만들 수 있습니다. 누가 그것을 원하지 않습니까? 한 번 해보세요. 나중에 감사할 것입니다.