영상 튜토리얼: Salesforce Marketing Cloud에 이메일 업로드
Figma Emailify 플러그인에서 Salesforce Marketing Cloud로 HTML 이메일을 업로드하는 방법을 보여 주는 영상이에요.
텍스트 단락에 AMPscript 링크(예: %%=v(@url)=%%)가 필요하다면, Figma 기본 링크 필드는 이를 잘못된 URL로 보고 막아요. 이럴 때는 Emailify의 특수 AMPscript 링크 형식인 https://ampscript.invalid/?%%=v(@url)=%%를 대신 사용하세요. 그러면 Emailify가 내보낸 HTML에 원래의 AMPscript 태그를 그대로 출력해요.
Emailify 내보내기 패널의 드롭다운 목록에서 Marketing Cloud (API) 옵션을 선택한 다음 아래 단계에 따라 인증 자격 증명을 확인하세요.
- Salesforce Marketing Cloud 계정에 로그인하세요.
- Marketing Cloud -> Setup -> Platform Tools ("Apps") -> Installed Packages로 이동하세요.
- New를 클릭하세요.
- 패키지 이름과 설명을 입력하세요.
- 향상된 기능(enhanced functionality)으로 패키지를 만들도록 선택하세요.
- 패키지를 Save하세요.
- Components 아래에서 Add Component를 클릭하세요.
- API Integration을 선택하세요(API 연동 컴포넌트는 한번 추가하면 제거할 수 없어요).
- Server-to-server integration 유형을 선택하세요.
- 컴포넌트 속성을 설정하세요. Emails(Channels 아래)와 Documents and Images, Saved Content(Assets 아래)에 Read와 Write 권한을 허용해야 해요.
- Save를 클릭해 컴포넌트를 저장하세요.
연동을 만들고 나면 위에서 만든 새 연동에서 다음 필수 정보를 복사해 Emailify 내보내기 설정에 붙여 넣으세요.
- Client ID(예: 3e8poc4erkli6ghjavq8kuio)
- Client Secret(예: EOjPb4HPWwtyUkcb5CnCpo5C)
- REST Base URL(예: https://mcvb5-qrzy845tggex49976pmz38.rest.marketingcloudapis.com/)
준비가 되면 Upload As 드롭다운에서 Template 또는 HTML Email을 고른 다음 Upload To Marketing Cloud 버튼을 클릭해 선택한 Figma 이메일을 Marketing Cloud로 내보내세요. 기본값인 Template 옵션은 기존의 템플릿 기반 이메일 동작을 그대로 유지해요. 업로드한 에셋을 Content Builder에서 편집 가능한 HTML 이메일로 열고 싶다면 HTML Email을 고르세요.
업로드한 Salesforce 이메일이나 템플릿을 기본 루트 위치가 아닌 특정 Content Builder 폴더에 넣고 싶다면, 업로드하기 전에 Salesforce 계정을 연결하고 Emailify 내보내기 패널에서 Template Folder를 고르세요. Content Builder (Default)로 그대로 두면 기존 동작이 유지돼요.
Salesforce Content Builder에 이미지 업로드
이메일에 사용한 이미지도 Salesforce Marketing Cloud에서 호스팅하고 싶다면, 이제 Emailify의 CDN 드롭다운에서 Salesforce Content Builder 옵션을 사용할 수 있어요.
- Emailify 내보내기 패널에서 Marketing Cloud (API) 또는 Marketing Cloud (oAuth) 옵션을 선택하고 먼저 Salesforce Marketing Cloud 계정을 연결하세요.
- CDN 드롭다운을 열고 Salesforce Content Builder를 고르세요.
- Emailify가 이미지를 업로드할 Content Builder 폴더를 고르세요.
- 평소처럼 이메일을 내보내세요.
Emailify가 이메일에 쓰인 이미지를 선택한 Salesforce Content Builder 폴더에 자동으로 업로드한 다음, 이메일이나 템플릿을 업로드하기 전에 내보낸 HTML의 이미지 URL을 게시된 Salesforce 에셋 URL로 바꿔요.
Template Folder와 이미지용 Content Builder 폴더는 서로 달라도 돼요. HTML 이메일, 템플릿, 이미지 에셋을 각각 다른 폴더에 보관하는 팀에 유용해요.
같은 이메일을 같은 Content Builder 폴더로 다시 내보내면, Salesforce가 이미지 이름이 이미 사용 중이라고 알려도 실패하지 않고 가능한 경우 일치하는 기존 이미지 에셋을 재사용해요.
Salesforce Marketing Cloud 추가 옵션
Salesforce Marketing Cloud 내보내기에 선택적으로 켤 수 있는 옵션이 몇 가지 더 있어요.
콘텐츠 슬롯 추가
Slot 토글을 켜면 내보낸 HTML에 <div data-type="slot" data-key="uniqueKeyHere" data-label="Drop Blocks or Content Here"></div> 태그가 자동으로 추가돼요. 그러면 Marketing Cloud 편집기에서 다른 콘텐츠를 이메일로 드래그 앤 드롭할 수 있어요. 이 옵션은 Template으로 업로드할 때 사용할 수 있고, HTML Email로 업로드하면 슬롯 컨테이너가 빠져요.
별칭(Alias) 태그 추가
Aliases 토글을 켜면 Figma 디자인의 버튼, 이미지, 소셜 아이콘, 내비게이션 바 링크에 alias="Your Figma layer name" 속성이 자동으로 추가돼요. 이 값은 레이어 패널에 표시된 각 Figma 레이어 이름으로 자동으로 채워져요.
이렇게 하면 내보낸 HTML의 <a> 태그 링크에 디자인과 관련된 이름(예: “Hero CTA Button”)으로 별칭을 지정해 추적 데이터를 관리하기 쉬워져요.
전환(Conversion) 태그 추가
Conversions 토글을 켜면 내보낸 HTML의 모든 <a> 링크 태그에 conversion="true" 속성이 자동으로 추가돼요.
RedirectTo AMPscript 추가
RedirectTo를 켜면 Salesforce Marketing Cloud로 내보낼 때 절대 경로인 http://, https:// 링크 대상을 AMPscript로 자동으로 감싸요. 팀원들은 컴포넌트마다 AMPscript를 작성하지 않고 Emailify에 일반 웹 URL을 입력하면 돼요.
<a href="%%=RedirectTo('https://example.com/page')=%%">Read more</a>이 옵션은 기본적으로 꺼져 있고, 템플릿과 HTML 이메일을 포함한 Marketing Cloud ZIP 및 API 내보내기에서 사용할 수 있어요. 개별 HTML 블록 파일과 Outlook 버튼 링크에도 적용돼요. 기존 별칭과 전환 속성은 그대로 유지돼요.
기존 AMPscript 링크와 동적 템플릿 코드가 들어 있는 URL은 바뀌지 않아요. Salesforce 수신 거부/프로필 토큰, 이메일 주소, 전화 링크, 상대 URL, 페이지 앵커도 마찬가지예요. 이메일의 다른 AMPscript에는 영향을 주지 않아요. 미리보기 링크와 일반 텍스트 버전에는 일반 URL이 그대로 남아요.
이메일을 가져오거나 업로드한 뒤에는 Salesforce Marketing Cloud에서 테스트 이메일을 보내 쿼리 매개변수를 포함해 링크가 예상한 대상으로 연결되는지 확인하세요.
노출(Impression) 태그 추가
Impressions 토글을 켜면 내보낸 HTML에서 모든 Row, Wrapper, Hero 레이어가 여는 태그 %%=BeginImpressionRegion("your_figma_layer_name")=%%와 닫는 태그 %%=EndImpressionRegion()=%%로 이루어진 Salesforce Marketing Cloud Impression 태그로 자동으로 감싸져요.
HTML 블록 파일
Blocks를 켜면 ZIP에 추가 .html 파일이 포함돼요. Emailify가 각 행을 별도의 HTML 파일로 내보내므로 Salesforce Marketing Cloud에서 재사용 가능한 모듈로 사용할 수 있어요.
다만 각 블록의 HTML 코드에는 여전히 CSS/style 태그와 <head></head> 태그 안의 다른 요소가 필요하다는 점에 유의하세요. 이 방식을 쓴다면 이런 요소를 따로 추출하는 데 시간이 조금 걸려요.
참고로 이 토글은 Emailify 내보내기 설정 패널에서 Marketing Cloud (Zip) 플랫폼 옵션을 선택했을 때만 사용할 수 있고, API 옵션을 선택하면 보이지 않아요.