Emailify로 동적 콘텐츠와 개인화 콘텐츠 추가

이메일 마케팅 플랫폼이 제공하는 병합 태그와 그 플랫폼 문법으로 작성한 사용자 지정 코드 블록을 함께 사용해 이메일에 동적 콘텐츠를 추가할 수 있어요.

영상 튜토리얼: Figma에서 HTML 이메일에 동적 콘텐츠 추가하기(영어)

이 영상에서는 Emailify 플러그인으로 Figma에서 HTML 이메일에 동적 콘텐츠를 추가하는 방법을 보여 줘요.

영상 튜토리얼: Figma에서 Klaviyo 이메일에 동적 상품 피드 추가하기(영어)

이 영상에서는 Emailify Figma 플러그인으로 사용자 지정 HTML 템플릿에 Klaviyo 상품 피드를 추가하는 방법을 보여 줘요.

영상 튜토리얼: Figma에서 Klaviyo 장바구니 이탈 플로 이메일 템플릿 만들기(영어)

이 영상에서는 Emailify Figma 플러그인으로 사용자 지정 HTML 템플릿에 Klaviyo 장바구니 이탈 플로를 추가하는 방법을 보여 줘요.

플랫폼별 개인화 콘텐츠 추가 ​

이메일 서비스 제공업체(예: MailChimp, Klaviyo 등)의 병합 태그를 추가해 받는 사람의 이름 같은 개인화 텍스트를 넣을 수 있어요. Emailify 텍스트 콘텐츠 레이어에 병합 태그를 넣기만 하면 돼요.

예를 들어 Figma 텍스트 레이어의 내용에 Hello, %FIRSTNAME% 또는 Hello, *|FNAME|*(플랫폼의 문법과 값에 따라 달라요)를 넣으면, 이메일이 발송될 때 병합 태그가 실제 데이터로 자동으로 바뀌어요.

이 태그는 이메일을 보내는 플랫폼마다 다르므로, 사용할 수 있는 태그는 사용 중인 이메일 서비스 제공업체의 템플릿 문서를 참고해 주세요.

플랫폼별 템플릿 변수 문서 ​

인기 있는 플랫폼 일부(전체 목록은 아니에요)의 링크는 다음과 같아요.

Row, Wrapper, Hero 레이어 사이에 if/else 로직 추가 ​

🧑‍💻 Custom Code 레이어 유형을 사용하면 디자인의 행 사이에 사용자 지정 템플릿 로직을 넣을 수 있어요. 사용하는 이메일 마케팅 플랫폼에 맞는 문법인지 반드시 확인해야 하지만, 대략 다음과 같은 모습이에요.

{% if customer_type == 'premium' %}

여기에 Emailify Row

{% else %}

여기에 다른 Emailify Row

{% endif %}

개인화/동적 이미지 추가 ​

Override Image Src 입력란에 값을 넣으면 이메일 디자인의 특정 이미지 레이어의 이미지 URL을 재정의할 수 있어요. 이미 어딘가에 업로드된 이미지의 URL(예: https://mycdn/img.jpg)이나 이메일 플랫폼 템플릿 언어의 동적 변수(예: { variable.my_image })를 사용할 수 있으며, HTML을 내보낼 때 <img /> 태그의 src 속성에 자동으로 추가돼요.

동적 이미지의 높이 설정하기(너비는 “auto”, 선택 사항) ​

동적 이미지 파일 URL의 크기를 미리 알 수 없어서, 높이는 직접 정하고 너비는 자연스럽게 맞춰지도록 하려면 Figma에서 다음과 같이 하세요.

  1. Figma UI에서 이미지 레이어의 Lock aspect ratio를 켜세요.
  2. Figma UI에서 이미지 레이어의 Max height 값을 설정하세요.

이렇게 설정하면 이미지가 기본 동작(고정 너비, 자동 높이) 대신 고정 높이(Figma의 최대 높이와 같음)와 자동으로 조정되는 너비로 렌더링돼요. 그래서 동적 이미지가 원래 가로세로 비율을 유지하면서도 세로 공간을 정확하게 차지해요.

이 동작은 동적 URL을 사용하는 이미지에만 적용돼요. Emailify에서 내보낸 정적 이미지나 MJML 플랫폼의 이미지에는 영향이 없어요.

긴 사용자 지정 텍스트 콘텐츠 자르기 ​

이메일 디자인에 긴 동적 텍스트 콘텐츠 태그를 넣으면 특정 요소나 배경 이미지 등의 높이가 인위적으로 늘어나 디자인에 영향을 줄 수 있어요. 실제 발송되는 이메일에서 동적 자리표시자 태그를 대체할 최종 콘텐츠는 동적 콘텐츠 태그 자체보다 짧을 수 있기 때문이에요.

이 영향을 줄이려면 Figma 텍스트 레이어가 지정한 최대 줄 수에서 잘리도록 설정할 수 있어요. 방법은 다음과 같아요.

  1. Figma Emailify 프레임 디자인에서 텍스트 레이어를 클릭하세요
  2. 텍스트 레이어의 텍스트 크기 조정 설정(영어) 값을 Auto width로 설정하세요
  3. ... 아이콘을 클릭해 Type settings 패널을 여세요
  4. Truncate text 옵션을 Truncate enabled로 설정하세요
  5. 그 아래의 Max lines 속성을 텍스트가 넘쳐 표시될 최대 줄 수로 설정하세요
  6. 텍스트 레이어의 Auto layout Horizontal resizing 속성 값을 Fill container로 설정하세요

이 설정은 동적 텍스트 전체 값이 필요 이상으로 높이를 차지하지 않도록 Figma 캔버스에서만 텍스트를 잘라요. 최종 HTML 내보내기에는 잘림이 전혀 포함되지 않아요. 동적 콘텐츠 태그를 사용하는 이메일 마케팅 플랫폼에서 최종 이메일을 수신자에게 보낼 때 동적 텍스트가 실제 콘텐츠로 자동으로 바뀌기 때문이에요.

긴 자리표시자 텍스트가 있어도 버튼을 좁게 유지하기 ​

나중에 더 짧은 날짜나 레이블로 바뀔 긴 변수나 자리표시자가 버튼에 들어 있다면, 텍스트 레이어 크기를 최종 레이블에 맞추세요. 그렇지 않으면 자리표시자 때문에 내보낸 버튼이 너무 넓어질 수 있고, Outlook에서는 이메일 플랫폼이 자리표시자를 바꾼 뒤에도 그 너비가 유지될 수 있어요.

  1. Figma에서 Button 안의 텍스트 레이어를 선택하세요.
  2. 해당 텍스트 레이어의 Horizontal resizing을 Fixed width로 설정하고, 예상되는 최종 날짜나 레이블에 맞는 너비를 고르세요.
  3. Type settings를 열고 Truncate text를 켠 다음 Max lines를 1로 설정하세요.
  4. 텍스트 레이어에는 변수나 자리표시자 전체를 그대로 두고 이메일을 다시 내보내세요.
  5. 이메일 플랫폼에서 테스트 이메일을 보내 최종 대체 텍스트가 들어간 버튼을 확인하세요. 영향을 받는다면 Outlook에서도 확인하세요.

잘림은 Figma 캔버스에서 자리표시자가 보이는 방식만 바꿔요. 내보낸 HTML에는 이메일 플랫폼이 대체할 수 있도록 자리표시자 전체가 그대로 남아 있어요. 보낼 것으로 예상되는 가장 긴 최종 레이블이 들어갈 만큼 너비를 충분히 잡으세요.

동적 색상과 폰트 패밀리 변수 추가 ​

동적 색상 변수 ​

이메일 디자인의 배경 색상, 텍스트 색상, 선 색상을 Figma 색상의 일반 hex 값(예: #000000) 대신 동적 코드 스니펫(예: {{ primary_color }})으로 렌더링하고 싶다면, Figma 색상 스타일(영어)을 만들고 색상 스타일 Name에 이중 중괄호가 들어가도록 하세요(예: {{ my_color_var_name }}). 그러면 Emailify 플러그인에서 HTML을 생성할 때 색상 스타일의 Name 값이 color, background-color, border-color CSS 값으로 자동 사용돼요.

동적 폰트 패밀리 변수 ​

마찬가지로 font-family CSS 값을 Figma의 일반 폰트 값(예: Arial, sans-serif) 대신 동적 코드 스니펫(예: {{ customer.font_family }})으로 렌더링하고 싶다면, Figma 텍스트 스타일(영어)을 만들고 텍스트 스타일 Name에 이중 중괄호가 들어가도록 하세요(예: {{ my_font_var_name }}). 그러면 Emailify 플러그인에서 HTML을 생성할 때 스타일의 Name 값이 font-family CSS 값으로 자동 사용돼요.

동적 데이터로 Data Table Row 반복 ​

이메일 플랫폼의 데이터를 반복하려면 Data Table Row를 선택하고 Settings를 여세요. Opening Code Wrapper(예: {% for product in collection.products %})와 Closing Code Wrapper(예: {% endfor %})에 반복 문법을 추가하세요. Emailify가 내보낸 HTML에서 해당 행의 <tr></tr> 요소 앞뒤에 태그를 넣어요.

Data Table Row 레이어에 래퍼 태그를 추가했다면 필요에 따라 행의 레이어 안에 동적 콘텐츠를 채울 수 있어요.

Settings를 연 다음 Figma에서 같은 유형의 Emailify 레이어를 여러 개 선택하면 설정을 일괄 적용할 수 있어요. 변경한 설정은 선택한 모든 레이어에 적용돼요.