MailChimp에 이메일 업로드

Emailify는 MailChimp와 기본 연동되어 있어서 Figma 플러그인에서 MailChimp 템플릿으로 HTML 이메일을 바로 업로드할 수 있어요.

영상 튜토리얼: MailChimp에 이메일 업로드

Figma Emailify 플러그인에서 MailChimp로 HTML 이메일을 업로드하는 방법을 보여 주는 영상이에요.

텍스트 단락에 Mailchimp 병합 태그 링크(예: *|UNSUB|*)가 필요하다면, Figma 기본 링크 필드는 이를 잘못된 URL로 보고 막아요. 이럴 때는 Emailify의 특수 Mailchimp 링크 형식인 https://mailchimp.invalid/?*|UNSUB|*를 대신 사용하세요. 그러면 Emailify가 내보낸 HTML에 원래의 Mailchimp 병합 태그를 그대로 출력해요.

Emailify 내보내기 패널의 드롭다운 목록에서 MailChimp (API) 옵션을 선택한 다음 유효한 MailChimp API 키를 붙여 넣으세요. API 키는 MailChimp 계정 설정 페이지에서 생성할 수 있어요.

준비가 되면 Upload To MailChimp 버튼을 클릭하세요. Figma에서 선택한 이메일이 HTML로 내보내지고 MailChimp 템플릿 페이지에 자동으로 업로드돼요. 이 페이지는 MailChimp 대시보드 메뉴에서 Content를 클릭한 다음 Email templates를 클릭해도 열 수 있어요.

MailChimp 캠페인 편집기에서 이미지 편집 가능하게 만들기 ​

기본적으로 HTML 템플릿을 업로드하면 텍스트 콘텐츠 영역과 행을 MailChimp 캠페인 편집기에서 편집할 수 있어요. Emailify 내보내기 설정에서 Editable Images 토글을 켜면 이미지도 편집 가능하게 만들 수 있어요(선택 사항).

편집 가능한 이미지를 켜면 @2x 레티나 이미지 대신 @1x 이미지가 사용돼요. Editable Images 토글로 템플릿의 이미지를 MailChimp에서 편집 가능하게 만들 수 있지만, 아쉽게도 MailChimp는 편집 가능한 @2x 레티나 이미지를 지원하지 않아서 이미지가 @1x로 대체돼요. 편집할 수 없더라도 @2x 레티나 이미지를 원한다면 이 옵션을 꺼 두세요.

MailChimp 편집기에서 이미지가 흐릿한 문제(템플릿이 편집 가능한 경우) ​

아쉽게도 MailChimp는 편집 가능한 @2x 레티나 이미지를 지원하지 않아서 Editable Images 토글을 켜면 이미지가 @1x 해상도로 내보내져요. 편집할 수 없더라도 @2x 레티나 이미지를 원한다면 Editable Images 토글 옵션을 꺼 두세요.

로컬 .zip 내보내기 파일을 MailChimp에 직접 업로드(MailChimp API 미사용) ​

.zip 파일 업로드로 이메일 템플릿을 MailChimp에 직접 업로드하고 싶다면 Export HTML 드롭다운 목록에서 MailChimp (Zip) 옵션을 선택한 다음 Export For MailChimp 버튼을 클릭하세요.

내보내기가 끝나면 Download your .zip file 버튼을 클릭하고, 파일을 컴퓨터에 저장한 뒤 압축을 푸세요. 그런 다음 위의 화면 녹화처럼 압축을 푼 메인 폴더 안의 _zips (For upload to MailChimp) 폴더에서 .zip 파일을 업로드할 수 있어요.

MailChimp의 HTML 수정과 Gmail 렌더링 ​

MailChimp는 업로드된 HTML 이메일 템플릿을 발송 전에 자동으로 수정해요. 이 변경은 강제로 적용되며 끌 수 없어요.

알려진 수정 사항은 다음과 같아요.

  • 하나로 합쳐진 @media 쿼리 블록을 별도의 미디어 쿼리 여러 개로 분리
  • CSS 규칙을 다시 쓰거나 구조 변경
  • 일부 CSS 선택자에서 " 따옴표 문자 제거(예: a[href^="tel:"]가 a[href^=tel:]로 바뀜)

이런 변경은 특히 Gmail에서 의도하지 않은 부작용을 일으킬 수 있어요. Gmail은 CSS 파서가 엄격해서 잘못된 선택자나 속성이 하나라도 있으면 <style> 태그 안의 모든 스타일을 무시해요. 그 결과 열 너비가 적용되지 않거나 레이아웃이 예상치 않게 쌓이는 문제가 생길 수 있어요.

Emailify는 가능한 경우 플러그인에서 내보내는 과정에서 MailChimp 전용 우회 처리를 적용해 알려진 문제를 피해요. 하지만 이런 수정은 HTML이 업로드된 뒤에 일어나기 때문에 일부 동작은 저희가 제어할 수 없어요(사용자 지정 CSS를 추가로 넣는 경우에는 더욱 그래요).

MailChimp로 발송할 때 Gmail에서만 레이아웃 문제가 생긴다면, Figma에서 내보낸 원본 HTML보다는 이런 자동 템플릿 변환 때문일 가능성이 매우 높아요.