드래그 앤 드롭으로 이메일 만들기

드래그 앤 드롭 편집기를 사용하면 HTML을 사용하지 않고도 Campaigns 또는 Canvases를 위한 완전히 커스텀되고 개인화된 이메일 메시지를 만들 수 있습니다.

편집기 소개

드래그 앤 드롭 편집기는 콘텐츠와 행을 두 가지 핵심 구성 요소로 사용하여 추가적인 HTML 사용 없이 워크플로를 간소화합니다.

콘텐츠 및 행 편집기 구성 요소

콘텐츠	행

콘텐츠

콘텐츠에는 메시지에 사용할 수 있는 다양한 유형의 콘텐츠를 나타내는 일련의 타일이 포함되어 있습니다. 이들은 기본, 미디어, 고급의 세 가지 카테고리로 구성됩니다.

• 기본
• 미디어
• 고급

행

행은 열을 사용하여 메시지 섹션의 가로 구성을 정의하는 구조적 단위입니다. 빈 행 또는 Content Blocks를 사용할 수 있습니다. 둘 이상의 열을 사용하면 서로 다른 콘텐츠 요소를 나란히 배치할 수 있습니다. 이렇게 하면 시작할 때 선택한 템플릿에 관계없이 메시지에 필요한 모든 구조적 요소를 추가할 수 있습니다.

텍스트 블록 내부에 이미지 중첩하기

드래그 앤 드롭 편집기에서는 단락이나 다른 텍스트 블록 내부에 이미지를 중첩할 수 없습니다. 텍스트 레이아웃 옆이나 안에 이미지를 배치하려면 행에서 열을 사용하세요. 예를 들어, 데스크톱에서는 모바일에서 숨기기가 적용된 다중 열 행을 사용하고, 별도의 모바일 전용 행(필요에 따라 데스크톱에서 숨기기 및 모바일에서 쌓지 않기 적용)을 사용하면 작은 화면에서도 이미지와 텍스트가 깔끔하게 정렬됩니다.

카드 스타일

카드 스타일은 열 사이에 간격을 추가하고 모서리를 둥글게 만들 수 있는 행 속성입니다. 카드 스타일 서식을 사용하면 새로운 제품 기능, 사용 후기, 특별 혜택, 뉴스 업데이트 등 가장 중요한 콘텐츠를 강조하는 데 도움이 되는 시각적으로 더 매력적인 레이아웃을 만들 수 있습니다.

드래그 앤 드롭 편집기 사용하기

이메일 메시지를 Campaign으로 보낼지 Canvas로 보낼지 확실하지 않으신가요? Campaigns는 단일 타겟 메시징에 적합하고, Canvases는 다단계 사용자 여정에 적합합니다.

메시지를 작성할 위치를 선택한 후, 드래그 앤 드롭 이메일을 만드는 단계를 살펴보겠습니다.

1단계: 템플릿 선택하기

편집 환경으로 드래그 앤 드롭 편집기를 선택한 후 다음을 선택할 수 있습니다:

• 빈 템플릿으로 시작하기.
• 사전 디자인된 Braze 드래그 앤 드롭 이메일 템플릿 사용하기.
• 저장된 드래그 앤 드롭 이메일 템플릿 사용하기.

템플릿 섹션에서 모든 템플릿에 접근할 수도 있습니다.

템플릿을 선택하면 이메일 배리언트 아래에 발송 정보와 이메일 본문을 포함한 이메일 개요가 표시됩니다.

그런 다음 이메일 본문 편집을 선택하여 드래그 앤 드롭 편집기에서 이메일 구조를 디자인하기 시작합니다.

2단계: 이메일 만들기

드래그 앤 드롭 편집 환경은 발송 설정, 콘텐츠, 미리보기 및 테스트 세 가지 섹션으로 나뉩니다. 이메일 본문을 만드는 핵심 작업은 콘텐츠 섹션에서 이루어집니다. 이메일을 만들기 전에 이메일 작성 환경을 안내하는 주요 구성 요소를 이해하는 것이 중요합니다. 복습이 필요한 경우 편집기 소개를 참조하세요.

준비가 되면 드래그 앤 드롭 콘텐츠 블록을 사용하여 이메일을 만드세요.

1. 행 패널을 선택합니다. 행 구성을 기본 편집기로 드래그 앤 드롭합니다. 이렇게 하면 이메일 콘텐츠의 레이아웃이 설정됩니다.
   • 참고: 새 구성은 기존 섹션의 상단 또는 하단으로 드래그해야 합니다.
   • 행 구성을 선택하면 행 배경색, 이미지, 커스텀 열 크기를 추가로 사용자 지정할 수 있는 행 속성 설정이 나타납니다.
2. 콘텐츠 패널을 선택합니다. 원하는 콘텐츠 타일을 행 구성 요소로 드래그 앤 드롭합니다.
   • 콘텐츠 타일을 기본 편집기로 직접 드래그할 수도 있습니다. 이렇게 하면 타일에 대한 행이 생성됩니다.
   • 타일을 선택하고 콘텐츠 속성 및 블록 옵션에서 필드를 조정하여 타일을 더 세부적으로 다듬을 수 있습니다. 여기에는 자간, 패딩, 줄 높이 등의 편집이 포함됩니다.

드래그 앤 드롭 이메일을 추가로 사용자 지정할 수 있는 다른 방법은 기타 사용자 지정을 확인하세요.

이메일을 만들 때 데스크톱과 모바일 보기 사이를 전환하여 사용자 그룹에 이메일 메시지가 어떻게 보이는지 미리 볼 수 있습니다. 이를 통해 콘텐츠가 반응형인지 확인하고 중간중간 필요한 조정을 할 수 있습니다.

3단계: 발송 정보 추가하기

이메일 메시지 디자인과 작성을 완료한 후에는 발송 설정 섹션에서 발송 정보를 추가할 차례입니다.

1. Sending Info에서 From Display Name + Address로 사용할 이메일을 선택합니다. Customize From Display Name + Address를 선택하여 커스텀할 수도 있습니다.
2. Reply-To Address로 사용할 이메일을 선택합니다. Customize Reply-To Address를 선택하여 커스텀할 수도 있습니다.
3. 다음으로, BCC Address로 사용할 이메일을 선택하여 해당 주소에서 이메일을 볼 수 있도록 합니다.
4. 이메일에 제목란을 추가합니다. 필요에 따라 프리헤더도 추가할 수 있습니다. 프리헤더 뒤에 공백을 추가하려면 Add whitespace after preheader 체크박스를 선택합니다.

오른쪽 패널의 미리보기에 추가한 발송 정보가 표시됩니다. 이 정보는 설정 > 이메일 환경설정 > 발송 구성으로 이동하여 업데이트할 수도 있습니다.

이메일 첨부 파일 추가하기

발송 설정 > 고급에서 다음 방법으로 이메일 첨부 파일을 추가할 수 있습니다:

• 파일 업로드: 컴퓨터에서 이메일로 직접 파일을 드래그 앤 드롭하거나 찾아보기를 통해 업로드합니다. Braze는 업로드 전에 파일 유형과 크기(기본값 최대 2 MB)를 검증하며, 검증된 파일은 미디어 라이브러리에 업로드됩니다. 2 MB 제한을 초과하는 파일은 업로드할 수 없습니다.
• 미디어 라이브러리 사용: 미디어 라이브러리에 이미 저장된 에셋을 찾아보고 선택합니다. PDF, Word 문서, Excel 파일, PowerPoint 프레젠테이션이 모두 지원됩니다.
• URL에서 추가: 파일을 가리키는 URL을 입력하고 표시할 파일명을 제공합니다. Braze는 이메일 작성 중에 임의의 URL에 대해 크기를 확인할 수 없으므로, 파일 크기는 발송 시점에 적용됩니다.

고려해야 할 구체적인 모범 사례는 이메일 가이드라인을 참조하세요.

이메일 헤더 개인화하기 (고급)

발송 설정 아래에서 이메일 헤더 및 이메일 추가 항목에 대한 개인화를 추가할 수 있으며, 이를 통해 다른 이메일 서비스 공급자에게 추가 데이터를 전송할 수 있습니다. 수신자의 이름을 포함하는 등 이메일 헤더를 개인화하면 이메일 열람 가능성을 높이는 데 기여할 수 있습니다.

4단계: 이메일 테스트하기

발송 정보를 추가한 후에는 이메일을 테스트할 차례입니다.

미리보기 및 테스트 섹션으로 이동합니다. 여기에서 사용자로서 이메일을 미리 보거나 테스트 메시지를 보낼 수 있습니다. 이 섹션에는 다양한 모바일 및 웹 클라이언트에서 이메일이 올바르게 렌더링되었는지 확인할 수 있는 받은편지함 비전도 포함되어 있습니다.

실제 편집기, 받은편지함 비전, 실제 테스트 이메일에서 동일한 이메일의 세 가지 다른 버전을 볼 수 있으므로 모든 플랫폼에서 세부 사항을 일치시키는 것이 중요합니다.

미리보기 및 테스트 발송

사용자로서 미리보기 탭에서 다음 사용자 유형을 선택하여 메시지를 미리 볼 수 있습니다.

• 랜덤 사용자: Braze가 데이터베이스에서 사용자를 무작위로 선택하고 해당 사용자의 속성 또는 이벤트 정보를 기반으로 이메일을 미리 봅니다.
• 사용자 선택: 이메일 주소 또는 외부 ID를 기반으로 특정 사용자를 선택할 수 있습니다. 해당 사용자의 속성 및 이벤트 정보를 기반으로 이메일이 미리 표시됩니다.
• 커스텀 사용자: 사용자를 사용자 지정할 수 있습니다. Braze가 사용 가능한 모든 속성 및 이벤트에 대한 입력 필드를 제공합니다. 미리보기 이메일에서 보고 싶은 정보를 입력할 수 있습니다.

미리보기 링크 복사를 선택하여 랜덤 사용자에게 이메일이 어떻게 보일지 보여주는 공유 가능한 미리보기 링크를 생성하고 복사할 수도 있습니다. 자세한 내용은 공유 가능한 미리보기를 참조하세요.

받은편지함 비전 사용하기

받은편지함 비전을 사용하면 이메일 클라이언트 및 모바일 기기의 관점에서 이메일 Campaigns를 볼 수 있습니다. 받은편지함 비전을 사용하여 이메일 메시지를 테스트하려면 미리보기 및 테스트 섹션에서 받은편지함 비전을 선택하고 받은편지함 비전 실행을 선택합니다.

이메일 메시지의 세부 사항을 테스트하고 확인하는 것이 중요합니다. 예를 들어, 이메일 메시지의 배경 이미지가 이미지 사이에 흰색 선이나 끊김이 나타나는 경우가 있거나, Windows Outlook과 같은 클라이언트에서 배경 이미지가 표시되지 않을 수 있습니다. 받은편지함 비전을 사용하면 클라이언트 간의 이러한 차이를 식별하는 데 도움이 됩니다. 이 경우 대체 배경색을 설정하여 이미지가 예상대로 렌더링되도록 합니다.

자세한 내용은 테스트 메시지 보내기를 참조하세요.

드래그 앤 드롭 편집기를 사용하여 이메일 메시지를 디자인하고 만든 후, Campaign 또는 Canvas의 나머지 부분을 계속 만들어 보세요.

업데이트된 HTML 엔진 소개

드래그 앤 드롭 편집기에서 HTML을 생성하는 기본 엔진이 최적화 및 업데이트되어 HTML 파일 압축 및 렌더링과 관련된 이점이 생겼습니다.

평균 내보낸 HTML 데이터 용량이 줄어들어 로드 및 렌더링 속도가 빨라지고, 모바일 클리핑이 줄어들며, 대역폭 소비가 감소합니다.

다음 업데이트를 기반으로 HTML 렌더링이 개선되어 조건부 주석 및 CSS 미디어 쿼리 수가 최소화되었습니다. 결과적으로 HTML 파일이 더 작고 효율적으로 코딩됩니다.

• <div> 요소 기반 디자인에서 표준 <table aria-label="받은편지함 비전 사용하기"> 형식 코드베이스로 마이그레이션 받은편지함 비전 사용하기
• 편집기 블록 (이메일)이 간결하게 재코딩되었습니다
• 최종 HTML 코드가 태그 사이의 공백을 제거하도록 압축됩니다
• 투명 구분선이 자동으로 콘텐츠 패딩으로 변환됩니다

기타 커스터마이징

드래그 앤 드롭 이메일을 계속 작성하면서, 이러한 크리에이티브 세부 사항을 조합하여 각 이메일 본문을 추가로 커스터마이징하여 오디언스의 관심과 흥미를 이끌어낼 수 있습니다.

자동 너비 이미지

이메일에 추가된 이미지는 자동으로 자동 너비로 설정됩니다. 이 설정을 조정하려면 자동 너비를 끄고 필요에 따라 너비 퍼센트를 조정하세요.

색상 레이어링

색상 레이어링을 사용하면 이메일 배경, 콘텐츠 영역, 다양한 콘텐츠 구성 요소의 색상을 변경할 수 있습니다. 앞에서 뒤로의 색상 순서는 콘텐츠 구성 요소 색상, 콘텐츠 영역 배경색, 배경색입니다.

콘텐츠 패딩

패딩을 조정하려면 블록 옵션까지 스크롤하고 추가 옵션을 선택하세요. 패딩을 세밀하게 조정하여 이메일을 원하는 대로 완성할 수 있습니다.

콘텐츠 배경

행 구성에 배경 이미지를 추가하면 이메일 캠페인에 더 많은 디자인과 시각적 콘텐츠를 포함할 수 있습니다.

언어 속성

설정 탭으로 이동하여 원하는 언어를 선택하면 언어 속성을 설정할 수 있습니다. 메시지가 동적 언어 값을 가진 사용자를 대상으로 하는 경우 사용자 속성 {{${language}}} 를 타겟팅할 수도 있습니다.

개인화

드래그 앤 드롭 이메일 편집기에서는 기본 Liquid가 지원됩니다. 이메일에 개인화를 추가하려면:

1. 콘텐츠 섹션에서 개인화를 선택합니다.
2. 개인화 유형을 선택합니다. 여기에는 기본(표준) 속성, 기기 속성, 커스텀 속성 등이 포함됩니다.
3. 추가할 속성을 검색합니다.
4. 생성된 Liquid 스니펫을 복사하여 이메일 본문에 붙여넣습니다.

Liquid 개인화는 이미지 블록과 버튼 링크 유형 필드에서는 지원되지 않습니다.

동적 이미지

이미지 소스 속성에 연결된 콘텐츠 또는 Liquid를 포함하여 이메일 메시징에 동적 이미지를 포함하도록 선택할 수 있습니다. 예를 들어, 정적 이미지 대신 이미지 URL로 https://example.com/images/?imageBanner={{first_name}} 를 삽입하면 이미지에 사용자의 이름을 포함할 수 있습니다. 이를 통해 각 사용자에게 맞춤화된 이메일을 제공할 수 있습니다.

텍스트 방향

메시지를 작성할 때, 해당 텍스트 방향 버튼을 선택하여 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽으로 텍스트 방향을 토글할 수 있습니다. 아랍어나 히브리어와 같은 언어로 메시지를 작성할 때 이 옵션을 사용할 수 있습니다.

오른쪽에서 왼쪽 메시지의 최종 모습은 서비스 제공업체가 렌더링하는 방식에 크게 좌우됩니다. 가능한 한 정확하게 표시되는 오른쪽에서 왼쪽 메시지를 작성하기 위한 모범 사례는 오른쪽에서 왼쪽 메시지 만들기를 참조하세요.

HTML

링크에 HTML 속성 추가

드래그 앤 드롭 편집기에서 링크, 버튼, 이미지 및 비디오를 사용할 때, 콘텐츠 섹션의 속성 아래에서 새 속성 추가를 선택하여 이메일의 HTML 태그에 추가 정보를 첨부할 수 있습니다. 이는 메시지 개인화, 세분화 및 스타일링에 특히 유용할 수 있습니다.

일반적인 사용 사례는 Braze를 통해 발송할 때 특정 링크의 클릭 추적을 비활성화하는 것입니다. 두 가지 방법으로 이를 수행할 수 있습니다:

• 링크 모듈 속성 사용: 링크 요소(예: 버튼 또는 링크 모듈)를 선택한 다음, 속성 아래에서 새 속성 추가를 사용하여 추가합니다:
  • SendGrid의 경우, 이름에 clicktracking을, 값에 off를 사용합니다.
  • SparkPost의 경우, 이름에 data-msys-clicktrack을, 값에 0을 사용합니다.
• HTML 블록 사용: HTML 블록을 삽입하고 앵커 태그 코드에 직접 클릭 추적 속성을 포함합니다:
  • SendGrid의 경우, <a href="your-url" clicktracking="off">Link text</a>를 사용합니다.
  • SparkPost의 경우, <a href="your-url" data-msys-clicktrack="0">Link text</a>를 사용합니다.

또 다른 일반적인 사용 사례는 특정 링크를 유니버설 링크로 지정하는 것입니다. 유니버설 링크는 앱으로 리디렉션되는 링크로, 사용자에게 통합된 경험을 제공합니다.

• SendGrid: universal = "true"
• SparkPost: data-msys-sublink = "open-in-app" (커스텀 서브 경로를 구성해야 함)

유니버설 링크를 설정하려면 유니버설 링크 및 App Links를 참조하세요.

또는 Branch 또는 AppsFlyer와 같은 기여도 파트너와 통합하여 유니버설 링크를 관리할 수 있습니다.

마지막으로, 메시지의 접근성을 높이기 위한 사전 정의된 속성을 사용할 수 있습니다. Braze에서 접근 가능한 메시지 작성하기 문서에서 이메일 클라이언트가 대체 텍스트를 표시하는 방식을 포함하여 자세히 알아보세요.

커스텀 head 태그

<head> 태그를 사용하여 이메일 메시지에 CSS와 메타데이터를 추가할 수 있습니다. 예를 들어, 이러한 태그를 사용하여 스타일시트나 파비콘을 추가할 수 있습니다. <head> 태그에서는 Liquid가 지원됩니다.

<head> 태그 외부에 추가된 내용은 이메일의 <body> 태그 뒤에 추가됩니다. 즉, 추가된 콘텐츠가 이메일에 표시됩니다.

태그별 허용 태그 및 속성

태그명	설명	예시
base	메시지 내 모든 상대 URL의 기본 URL을 지정합니다.	<base href="https://example.com" target="_blank">
link	메시지와 외부 리소스 간의 관계를 정의합니다.	<link href="styles.css" rel="stylesheet" type="text/css">
meta	페이지 설명이나 키워드 같은 메타데이터를 제공합니다.	<meta name="description" content="Free Web tutorials">
style	내부 CSS 스타일을 포함합니다.	<style type="text/css" media="screen">body { font-size: 16px; }</style>
title	브라우저 탭에 표시되는 문서 제목을 설정합니다.	<title>StyleRyde</title>

태그	속성	설명	예시
base	href	상대 URL에 사용할 기본 URL.	<base href="https://braze.com">
base	target	모든 하이퍼링크와 양식의 기본 타겟.	<base target="_blank">
link	href	외부 리소스의 URL.	<link href="style.css">
link	rel	현재 메시지와 링크된 메시지 간의 관계를 정의합니다.	<link rel="stylesheet">
link	type	링크된 리소스의 유형.	<link type="text/css">
link	sizes	아이콘의 크기를 지정합니다.	<link rel="icon" sizes="32x32" href="favicon-32.png">
link	media	스타일이 적용되는 미디어 또는 기기를 지정합니다.	<link rel="stylesheet" media="screen" href="style.css">
meta	name	브라우저 탭에 표시되는 문서 제목을 설정합니다.	<meta name="viewport" content="width=device-width, initial-scale=1">
meta	content	브라우저 탭에 표시되는 문서 제목을 설정합니다.	<meta name="description" content="Page about our newest products">
meta	charset	문자 인코딩을 선언합니다.	<meta charset="UTF-8">
meta	property	브라우저 탭에 표시되는 문서 제목을 설정합니다.	<meta property="og:title" content="Website title">
style	type	스타일 콘텐츠의 MIME 유형.	<style type="text/css">p { color: red; }</style>
style	media	스타일이 적용되는 미디어 또는 기기를 지정합니다.	<style media="print">body { font-size: 12pt; }</style>
title	속성 없음	title 태그는 속성을 허용하지 않습니다.	<title>Kitchenerie</title>