실제로 완벽하게 작동하는 맞춤형 Mailchimp 템플릿을 만드는 방법

게시 됨: 2021-06-22

모든 이메일을 처음부터 코딩하는 것은 너무 오랜 시간이 걸리므로 재사용이 가능하고 검증된 이메일 템플릿을 사용하면 워크플로 효율성을 크게 높일 수 있습니다. 그러나 자체 템플릿을 구축하는 것 자체도 모험이 될 수 있습니다. 이메일 서비스 제공업체 현황 보고서에 따르면 두 번째로 인기 있는 이메일 서비스 제공업체(ESP)인 Mailchimp의 경우에도 마찬가지입니다.

이메일을 개발하는 데 선호하는 방법이 있을 수 있지만 Mailchimp용 사용자 지정 템플릿의 경우 템플릿이 작동하는 데 시간을 낭비하지 않도록 몇 가지 매우 구체적인 지침을 따르는 것이 중요합니다. 그리고 나는 스스로 많은 시간을 잃었다고 말합니다!

사용자 지정 Mailchimp 템플릿을 만드는 과정을 안내하면서 코드를 구성하는 방법, 버튼을 만드는 방법, 이미지 크기까지 모두 Mailchimp 기술 관점에서 다루어야 합니다.

이것이 바로 이 블로그 게시물에서 Mailchimp 및 기타 전문가와 협력하여 Mailchimp 템플릿이 실제로 완벽하게 작동할 수 있도록 하는 이유입니다.

Mailchimp의 미리 빌드된 템플릿과 사용자 지정 템플릿의 차이점

Mailchimp에는 이메일을 만드는 데 사용할 수 있는 상당한 템플릿 라이브러리가 있습니다. 각각은 끌어서 놓기 편집기와 콘텐츠 레이아웃을 위해 선택할 수 있는 여러 이메일 모듈 내에서 편집할 수 있습니다.

그렇다면 맞춤 템플릿을 만드는 이유는 무엇입니까?

Mailchimp의 템플릿은 편집 가능성이 높기 때문에 모든 브랜드에서 고유한 브랜드 색상과 스타일로 사용할 수 있습니다. 이로 인해 사용량을 모니터링하고 브랜드 아이덴티티를 이메일에서 이메일로 일관되게 유지하는 것이 어려울 수 있습니다. 사용자 지정 템플릿을 만들면 템플릿에 구축한 많은 스타일이 변경되지 않습니다.

또한 사용자 정의 템플릿의 편집 환경이 다릅니다. 끌어서 놓기 편집기가 없습니다. 대신 구현하는 템플릿 언어에 따라 복제, 전환 또는 제거할 수 있는 모듈과 요소를 만드십시오. 이것은 원치 않는 레이아웃 및 편집을 방지하는 또 다른 방법입니다.

맞춤형 Mailchimp 템플릿을 코딩하는 방법

나만의 Mailchimp 이메일 템플릿을 만들 준비가 되셨습니까? 올바르게 수행하는 데 필요한 팁과 요령을 계속 읽으십시오.

목표와 최종 사용자에 대해 생각하십시오.

시작하기 전에 템플릿의 목표와 템플릿을 사용할 사람들에 대해 먼저 생각하는 것이 중요합니다. 예를 들어, 많은 세부 정보와 유연성이 있는 템플릿이 필요할 수 있습니다. 또는 팀의 덜 기술적인 구성원이 채택하는 것이 간단하고 쉬워야 할 수도 있습니다.

이메일 마케팅 컨설턴트이자 마케팅 동기 부여자인 Joolz Joseph은 다음과 같이 말합니다.

졸즈 조셉

“'우리가 이것으로 무엇을 달성하려고 합니까?'라고 자문해 보십시오.

여러 이메일 유형에 사용할 수 있으므로 다양한 블록에 대해 많은 유연성이 필요한 포괄적인 템플릿입니까? 아니면 판촉 템플릿, 온보딩 시리즈 또는 뉴스레터와 같이 더 엄격한 것입니까?

적용할 수 있는 블록이 많은 템플릿에는 큰 이점이 있지만 때로는 많은 옵션에 압도될 수 있는 사람들을 위해 2~3개의 더 짧은 템플릿을 더 쉽게 관리할 수 있습니다.

처음에 이 짧은 고려 사항을 통해 목표와 최종 사용자를 염두에 두고 템플릿을 구축할 수 있습니다.

예를 들어 판촉 템플릿은 주요 목표와 클릭 유도문안(CTA)에 초점을 맞춰야 하는 반면 뉴스레터에는 모두 다른 여러 CTA가 있을 수 있습니다.

이 모든 것이 템플릿 디자인에 반영되어야 합니다. 또한 프로모션을 실행하는 사람이 옵션이 제한되어 있는 경우 관련 콘텐츠를 더 쉽게 추가할 수 있습니다!

모든 가능성을 포착하는 단일 템플릿을 수행하면 브랜드에 있는 이메일이 될 수 있지만 가능한 한 효과적이지 않을 수 있으므로 먼저 한 단계 뒤로 물러서서 달성하고자 하는 것과 어떤 종류의 템플릿(또는 템플릿)이 이를 수행하는 데 가장 도움이 될 것입니다."

팁을 주셔서 감사합니다, Joolz! 템플릿의 목표를 알고 나면 구축에 착수할 수 있습니다.

CSS 스타일링 포함

언급할 가치가 있는 첫 번째 사항 중 하나는 플랫폼 내에 템플릿을 저장할 때 Mailchimp가 포함된 CSS 스타일을 자동으로 인라인한다는 것입니다. 따라서 개발 작업을 시작할 때 모든 스타일을 포함하고 코드 팽창을 제한하는 것이 더 쉬울 수 있습니다.

모듈 행 만들기

코드를 구성할 때 편집 가능하게 하려는 블록, 특히 재정렬할 수 있기를 원하는 블록에 대해 생각하십시오. 이러한 블록은 행 내에 있어야 합니다. 예를 들면 다음과 같습니다.

<!--modules that can be re-ordered-->
<!--module 1-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 1-->
<!--module 2-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 2-->

부모 테이블을 닫으면 이 시점 이후에 행을 재정렬할 수 없습니다.

버튼 제한 고려

버튼을 코딩하는 방법에는 여러 가지가 있습니다. 그러나 사용자 정의 Mailchimp 템플릿에서 작동하는 것은 패딩된 버튼뿐입니다. 편집 가능한 버튼의 앵커 태그에 적용된 많은 스타일이 자동으로 제거되기 때문입니다. 앵커 태그 내에 배치하는 VML 코드 및 범위의 형식도 조정할 수 있습니다.

패딩된 버튼 방법은 패딩 및 기타 버튼 스타일을 부모 테이블 셀에 적용해야 하므로 버튼의 텍스트만 클릭할 수 있음을 의미합니다. Mailchimp의 광범위한 문서는 버튼 코드(궁금한 경우 기타 HTML 이메일 제한 사항)에 대한 자세한 내용을 제공합니다.

편집 가능한 자리 표시자에 정확한 크기의 이미지 사용

버튼과 마찬가지로 이미지를 편집 가능하게 만들면 약간의 코드가 사라집니다. 이번에는 제거되는 너비와 높이를 정의하는 HTML 속성입니다. Outlook은 이것들에 의존하며 Mailchimp 편집 환경은 또한 편집기를 사용하여 이러한 속성을 다시 넣을 때까지 이미지의 실제 크기를 렌더링합니다.

이로 인해 크기의 두 배인 이미지인 레티나 이미지를 사용하여 이메일에서 축소하는 것이 약간 까다로워집니다.

템플릿에 코딩하는 모든 자리 표시자에 대해 1x 이미지를 사용하는 것이 좋습니다. 그런 다음 템플릿이 캠페인에 사용될 때 이미지 편집기의 설정 탭에서 너비와 높이를 정의하여 2배 이미지(망막 이미지)에 대한 자리 표시자를 전환합니다.

Mailchimp의 템플릿 언어 적용

템플릿 내에서 편집 가능한 영역을 정의하려면 Mailchimp의 템플릿 언어를 구현해야 합니다. 생성하는 템플릿의 종류에 따라 포함해야 할 사항을 설명하는 충분한 문서가 있습니다.

여러 브랜드에서 사용할 수 있는 고도로 사용자 정의 가능한 템플릿의 경우 CSS 스타일을 편집 가능하게 만들 수 있습니다. 이렇게 하려면 편집 가능한 스타일에 대한 Mailchimp의 가이드를 따르세요.

이 연습의 목적을 위해 편집 가능성을 콘텐츠로만 제한하는 템플릿을 만드는 방법을 살펴보겠습니다. 그리고 이렇게 하려면 템플릿 내의 HTML 요소에 다음 언어를 추가해야 합니다.

mc:edit 는 템플릿 내의 특정 요소에 대한 콘텐츠 편집 작업을 제공하는 데 사용됩니다. 템플릿 내에서 각 인스턴스에 대해 고유한 이름을 사용해야 합니다.

mc:hideable 은 템플릿 내의 특정 요소에 대한 숨기기/표시 작업을 제공하는 데 사용됩니다.

mc:label 은 애플리케이션 내에서 편집 가능한 섹션의 이름을 지정하는 데 사용되는 선택적 태그입니다.

mc:repeatable 은 템플릿 내의 특정 요소에 대한 복제 작업을 제공하는 데 사용됩니다.

mc:variant 는 HTML의 개별 블록 사이를 전환하는 방법을 제공하는 데 사용됩니다.

Mailchimp 템플릿 언어에 대한 자세한 내용은 이 문서를 참조하십시오.

Mailchimp 병합 태그 포함

템플릿 및 캠페인 내에서 활용할 수 있는 병합 태그가 많이 있습니다. 적용할 것을 권장하는 태그는 다음과 같습니다.

*|MC_PREVIEW_TEXT|*
이 미리보기 텍스트 병합 태그를 빌드에 추가하여 캠페인 설정 중에 미리보기 텍스트 필드에 추가된 콘텐츠가 이메일에 삽입되도록 합니다. 미리보기 텍스트 해킹은 일반적으로 미리보기 텍스트가 Mailchimp 내에서 작동하지 않는 후 공백을 만들기 위해 Litmus 이메일에 추가합니다. 두려워하지 마십시오. Mailchimp는 사용자 지정 템플릿에 대해 이 작업을 수행하는 이상적인 방법을 문서화했습니다.

*|구독 취소|*
템플릿의 머리글 및/또는 바닥글에서 이 병합 태그를 구독 취소 링크에 추가하여 사람들이 원할 경우 목록에서 제외할 수 있도록 합니다. 또한 법적 요구 사항이므로 이것을 잊지 마십시오.

*|업데이트_프로파일|*
가입자에게 정보를 업데이트하거나 기본 설정을 관리할 수 있는 기회를 제공합니다.

*|아카이브|*
이 병합 태그를 '온라인 보기' 링크에 추가하여 사람들이 웹 브라우저에서 귀하의 이메일을 볼 수 있는 기회를 제공하십시오.

Mailchimp에 템플릿을 추가하는 방법

이제 템플릿을 코딩했으므로 작동할 준비가 된 것입니다.

'캠페인 > 이메일 템플릿'으로 이동하고 '템플릿 만들기' 버튼을 클릭하여 템플릿을 가져옵니다.

템플릿을 Mailchimp로 가져오는 가장 쉬운 방법은 HTML과 이미지가 포함된 zip을 업로드하는 것입니다. Mailchimp가 이미지 경로를 관리하기 때문입니다.

Mailchimp: 템플릿의 시작점 선택

템플릿 이름을 지정하고 zip 파일로 이동하면 템플릿 편집기에서 템플릿이 열립니다. 여기에서 조정하고, 이미지 및 기타 자산이 저장된 콘텐츠 스튜디오에 액세스하고, 템플릿 렌더링을 테스트할 수 있습니다.

이 편집기에서 작업을 마치면 저장하고 닫을 수 있으며 템플릿을 사용할 준비가 된 것입니다.

템플릿이 Mailchimp에서 작동하는지 확인하십시오.

일반적인 HTML 실수가 많기 때문에 팀, 클라이언트 또는 다른 사람들에게 사용하도록 보내기 전에 Mailchimp에서 편집 환경이 어떤지 확인하는 것이 좋습니다. 이렇게 하려면 주 메뉴에서 '만들기'로 이동한 다음 '이메일'을 선택하고 '정기 캠페인'을 계속하십시오.

제목 및 미리보기 텍스트와 같은 일부 캠페인 세부정보를 추가할 수 있습니다. 이렇게 하면 병합 태그와 미리보기 텍스트 코드가 올바르게 구현되었는지 확인할 수 있습니다.

'디자인 이메일'을 클릭하면 사용하려는 템플릿을 선택할 수 있습니다. '저장된 템플릿' 탭에서 맞춤 템플릿을 찾습니다.

Mailchimp에서 템플릿 선택

템플릿을 선택하면 편집 가능한 모든 섹션을 테스트할 수 있는 Mailchimp 편집 환경으로 이동합니다.

편집 가능한 요소를 편집하려면 해당 요소를 클릭하기만 하면 오른쪽에 편집 창이 나타납니다.

Mailchimp 템플릿에서 요소 편집

참고 사항 : 때때로 내 콘텐츠 블록을 재정렬하지 못할 수 있으므로 블록을 클릭할 때 위아래 화살표가 있는 아이콘이 표시되지 않으면 재정렬하려는 블록을 복제해 보십시오. 이동하려는 블록을 새 위치로 드래그한 후 원하지 않는 추가 블록을 삭제할 수 있습니다.

Mailchimp 템플릿에서 블록 재정렬

이메일 렌더링을 테스트하는 것을 잊지 마십시오.

항상 그렇듯이, 특히 이메일 캠페인을 생성하는 데 사용된 후에는 다양한 이메일 클라이언트가 템플릿을 어떻게 렌더링하는지 확인하는 것이 매우 중요합니다.

이러한 테스트를 통해 템플릿의 문제를 식별하고 Mailchimp의 코드 제거 기능 중 일부를 발견했습니다. 철저하고 자동화된 사전 전송 테스트를 위해 받은 편지함 또는 Litmus 테스트 주소로 '미리보기' 및 '테스트 이메일 보내기'로 이동하여 캠페인 및 템플릿 편집기에서 쉽게 테스트할 수 있습니다.

또한 Litmus와 Mailchimp는 이메일을 최대한 철저하고 효율적으로 테스트할 수 있도록 여러 가지 방식으로 통합됩니다. '미리보기 모드 시작'으로 이동하고 '받은 편지함' 탭을 선택하여 Mailchimp의 받은 편지함 미리 보기 내에서 Litmus 기반 이메일 테스트를 실행합니다. Litmus Plus 또는 Enterprise 플랜을 사용하면 Chrome에서 Litmus Extension을 구축하고 Litmus와 Mailchimp 간에 이메일을 동기화할 때 중요한 사전 전송 요소를 테스트하는 기능을 포함하여 추가 테스트 및 시간 절약 통합에 액세스할 수 있습니다.

바로 사용할 수 있는 사용자 지정 템플릿 가져오기

바로 사용할 수 있는 편집 가능한 Mailchimp 템플릿을 찾고 있다면 언제든지 도와드리겠습니다.

무료 리트머스 제작 Mailchimp 템플릿

시작하는 데 도움이 되도록 다크 모드에 최적화된 맞춤형 Mailchimp 템플릿을 만들었습니다. 반복 가능한 행, 가변 콘텐츠 블록 및 Mailchimp 친화적인 버튼이 있습니다.

Mailchimp 템플릿 다운로드 →

Litmus의 무료 Mailchimp 이메일 템플릿

무료 Litmus 빌드 Mailchimp 템플릿(.zip 파일)을 가져옵니다. 그런 다음 코드를 자세히 살펴보고 Mailchimp에서 편집 가능한 무료 구독자 사랑 이메일 템플릿의 미니 버전을 만들기 위해 Mailchimp의 템플릿 코드를 어떻게 적용했는지 확인하세요.

Mailchimp 파트너가 만든 이메일 템플릿

더 많은 옵션을 보려면 Mailchimp 서비스 파트너가 디자인한 멋진 이메일 템플릿이 있는 Mailchimp Marketplace를 확인하세요.

Mailchimp Marketplace의 Mailchimp 템플릿

신규 가입자 온보딩이든 신제품 홍보이든 마케팅 목표에 따라 이메일 템플릿을 검색할 수 있습니다. 자신에게 딱 맞는 템플릿을 선택하여 구매한 다음 브랜드에 맞게 사용자 지정을 시작하세요. 설치나 코딩이 필요하지 않습니다.

완벽한 맞춤형 Mailchimp 템플릿을 사용할 수 있습니다.

자신만의 편집 가능한 템플릿을 코딩하든 다른 사람의 템플릿을 사용자 정의하든 관계없이 보다 효율적인 이메일 작성 프로세스로 나아가고 있으며 브랜드에 오류 없는 이메일을 만들기 위해 신뢰할 수 있는 프로세스를 밟고 있습니다.

Mailchimp 템플릿이 멋진지 확인하세요.

Litmus를 사용하여 90개 이상의 이메일 클라이언트, 앱 및 장치에서 이메일을 미리 보고 브랜드에 오류가 없는 구독자 경험을 보장하십시오. 매번.

Litmus 무료 평가판 받기 →