영상 튜토리얼: Customer.io에 이메일 업로드(영어)

이 영상에서는 Figma Emailify 플러그인에서 Customer.io로 HTML 이메일을 직접 업로드하는 방법을 보여 줘요.

Emailify에는 Customer.io 내보내기 옵션이 두 가지 있어요.

• Customer.io (API) 옵션은 이메일을 Customer.io Design Studio에 이메일이나 재사용 가능한 이메일 템플릿으로 바로 업로드해요.
• Customer.io (Zip) 옵션은 Customer.io에 직접 복사할 수 있는 ZIP 파일을 내보내요.

Customer.io Design Studio에 바로 업로드하기

Emailify 내보내기 패널의 드롭다운 목록에서 Customer.io (API) 옵션을 선택한 다음, 유효한 Customer.io App API Key를 붙여 넣고 워크스페이스에 맞는 Customer.io 리전을 선택하세요.

Customer.io 워크스페이스가 EU에서 호스팅된다면 Emailify에서 EU 리전을 선택하세요. 그렇지 않다면 기본값인 US 리전을 그대로 두세요.

Upload As 설정에서 Emailify가 Customer.io에 재사용 가능한 이메일 템플릿을 만들지, 일반 Design Studio 이메일을 만들지 선택하세요. 이전 버전과의 호환성을 위해 기본값은 Template이에요. 준비가 되면 Upload To Customer.io 버튼을 클릭하세요. Figma에서 선택한 이메일을 HTML로 내보내고 Customer.io Design Studio에 자동으로 업로드해요.

Customer.io 워크스페이스에서 Design Studio 이메일을 만들 수 있는 Customer.io App API 키가 필요해요.

Customer.io API로 업로드하면 Emailify는 지원되는 이메일 이미지를 기본적으로 Customer.io Assets에 업로드해요. Customer.io Assets의 emailify 폴더를 사용하며, 이 폴더가 없으면 자동으로 만들어요. Customer.io의 2 MB 파일 제한을 넘는 이미지처럼 Customer.io Assets가 받을 수 없는 이미지는 대신 Hypermatic에 업로드해서, Design Studio 이메일이나 템플릿이 계속 호스팅된 이미지 URL을 참조할 수 있게 해요.

Emailify에서 업로드한 Customer.io 이메일과 템플릿 업데이트

Customer.io 이메일이나 템플릿을 매번 새 항목으로 만들지 않고 자동으로 업데이트하고 싶다면, 플러그인 내보내기 설정에서 Enable Updatable Templates 토글을 켜세요(Upload As 설정이 Email이면 Enable Updatable Emails 토글).

그러면 업로드한 Figma 프레임의 레이어 이름 뒤에 customerioEmailId 또는 customerioTemplateId 값이 자동으로 추가되고, 다음에 플러그인에서 내보낼 때 같은 프레임을 API로 Customer.io에 다시 업로드하면 그 ID를 다시 사용해요.

참고로 처음 이메일이나 템플릿을 업로드하기 전에 Enable Updatable Templates 또는 Enable Updatable Emails 토글도 켜져 있는지 확인해야 해요. 그래야 원본 Customer.io 이메일 또는 템플릿 ID가 Figma 프레임 이름에 추가돼요. 이후 업데이트 토글이 계속 켜져 있다면, 다시 업로드할 때마다 이 ID로 Customer.io 계정의 같은 항목을 업데이트해요(매번 새 항목을 만들지 않아요).

Customer.io에서 이메일이나 템플릿을 업데이트하려면 처음 업로드를 받은 것과 같은 Customer.io 워크스페이스와 리전의 App API 키를 사용해야 해요.

Customer.io에 ZIP 내보내기 직접 업로드하기

Emailify 내보내기 패널의 드롭다운 목록에서 Customer.io (Zip) 옵션을 선택하세요. 준비가 되면 Export For Customer.io 버튼을 클릭해 Figma에서 선택한 이메일을 HTML로 내보내세요.

내보내기가 끝나면 .zip 파일을 컴퓨터에 다운로드해 압축을 풀고, 이메일 이름으로 된 폴더 안의 index.html 파일을 코드/텍스트 편집기에서 열어 파일의 HTML을 모두 복사하세요. 그런 다음 아래 단계를 따르세요.

• Customer.io 계정에 로그인하세요.
• 관리자 내비게이션에서 Content 메뉴 항목을 펼치세요.
• Email Layouts 메뉴 항목을 클릭하세요.
• Create Layout 버튼을 클릭하세요.
• Start from scratch 옵션을 클릭하세요.
• 레이아웃 이름을 입력하고 Create Layout을 클릭하세요.
• 내보낸 index.html 파일에서 복사한 HTML을 Edit 탭 편집기에 붙여 넣으세요.
• Save changes 버튼을 클릭하세요.

Customer.io에서 완전히 빈 레이아웃 만들기

완전히 빈 레이아웃을 사용하고 있는지 꼭 확인하세요! Customer.io는 기본적으로 새로 만든 레이아웃에 자체 HTML 태그(예: head, body 등)를 자동으로 추가해요. 이 코드를 제거하지 않으면 HTML 템플릿을 발송했을 때 깨져 보여요.

Customer.io에서 이메일을 만들기 시작할 때는 레이아웃을 선택해야 해요. 직접 만든 HTML 템플릿만 렌더링되도록 이 레이아웃은 완전히 비어 있어야 해요.

아래 스크린샷에서 볼 수 있듯이, 비어 보이는 Layout을 선택해도 실제로는 비어 있지 않아요(<html> 태그가 자동으로 들어가 HTML 템플릿 콘텐츠를 감싸고 있어요).

이 문제를 해결하려면 Customer.io가 빈 레이아웃에 추가하는 HTML을 직접 모두 제거하고 content 태그(아래)만 남겨 두세요.

Layout을 저장하고 content 태그만 남아 있으면 사용자 지정 HTML 템플릿이 의도한 대로 렌더링돼요.