Skip to content

드래그 앤 드롭으로 이메일 생성

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

편집기 소개

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

콘텐츠

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

기본 블록은 이메일의 기초입니다. 이 블록을 사용하면 이메일 본문에 다음 요소를 추가할 수 있습니다:

  • 제목
  • 단락
  • 목록
  • 버튼
  • 구분선
  • 스페이서

미디어 블록을 사용하면 이미지, 동영상, 소셜 미디어 아이콘 및 링크, 커스텀 아이콘 등 다양한 시각적 콘텐츠를 추가할 수 있습니다.

드래그 앤 드롭 편집기가 이러한 블록으로 워크플로를 간소화하지만, 고급 블록을 사용하여 HTML을 삽입하거나 이메일 본문에 메뉴를 추가할 수도 있습니다. 직접 작성한 HTML을 사용하면 메시지 렌더링에 영향을 줄 수 있다는 점에 유의하세요.

행

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

카드 스타일

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

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

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

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

1단계: 템플릿 선택

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

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

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

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

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

예시 이메일 본문이 포함된 "이메일 배리언트" 섹션.

2단계: 이메일 작성

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

준비가 되면 드래그 앤 드롭 콘텐츠 블록을 사용하여 이메일을 작성합니다.

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

드래그 앤 드롭 이메일을 추가로 커스터마이징하는 다른 방법은 기타 커스터마이징을 확인하세요.

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

3단계: 발송 정보 추가

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

  1. 발송 정보에서 보낸 사람 표시 이름 + 주소로 이메일을 선택합니다. 보낸 사람 표시 이름 + 주소 커스터마이징을 선택하여 커스터마이징할 수도 있습니다.
  2. 회신 주소로 이메일을 선택합니다. 회신 주소 커스터마이징을 선택하여 커스터마이징할 수도 있습니다.
  3. 다음으로 BCC 주소로 이메일을 선택하여 이 주소에서 이메일을 볼 수 있도록 합니다.
  4. 이메일에 제목란을 추가합니다. 선택적으로 프리헤더와 프리헤더 뒤의 공백도 추가할 수 있습니다.

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

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

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

4단계: 이메일 테스트

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

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

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

미리보기 및 테스트 발송

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

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

미리보기 링크 복사를 선택하여 랜덤 사용자에게 이메일이 어떻게 보일지 보여주는 공유 가능한 미리보기 링크를 생성하고 복사할 수도 있습니다. 이 링크는 7일 후에 다시 생성해야 합니다.

이메일 템플릿에 대한 편집 사항은 이전에 생성된 링크에 반영되지 않습니다. 편집 사항을 확인하려면 새 링크 미리보기를 생성해야 합니다.

"미리보기 링크 복사" 버튼과 생성된 링크를 복사하는 이메일 미리보기.

Inbox Vision 사용

Inbox Vision을 사용하면 이메일 클라이언트 및 모바일 기기의 관점에서 이메일 캠페인을 볼 수 있습니다. Inbox Vision을 사용하여 이메일 메시지를 테스트하려면 미리보기 및 테스트 섹션에서 Inbox Vision을 선택하고 Inbox Vision 실행을 선택합니다.

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

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

드래그 앤 드롭 편집기를 사용하여 이메일 메시지를 디자인하고 만든 후, Campaign 또는 Canvas의 나머지 부분을 계속 구축합니다.

업데이트된 HTML 엔진에 대해

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

평균 내보내기 HTML 데이터 크기가 줄어들어 로딩 및 렌더링이 빨라지고, 모바일 클리핑이 줄어들며, 대역폭 소비가 감소했습니다.

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

  • <div> 요소 기반 디자인에서 표준 <table> 형식 코드베이스로 마이그레이션
  • 편집기 블록이 간결하게 재코딩됨
  • 최종 HTML 코드가 태그 사이의 공백을 제거하도록 압축됨
  • 투명 구분선이 자동으로 콘텐츠 패딩으로 변환됨

기타 커스터마이징

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

자동 너비 이미지

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

드래그 앤 드롭 편집기의 콘텐츠 탭에 있는 자동 너비 옵션.

색상 레이어링

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

드래그 앤 드롭 편집기의 색상 레이어링 예시.

콘텐츠 패딩

드래그 앤 드롭 편집기의 블록 옵션.

패딩을 조정하려면 블록 옵션으로 스크롤하여 더 많은 옵션을 선택합니다. 패딩을 세밀하게 조정하여 이메일이 딱 맞게 보이도록 할 수 있습니다.

콘텐츠 배경

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

언어 속성

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

이메일의 "언어" 값 설정.

개인화

드래그 앤 드롭 편집기의 개인화 추가 옵션.

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

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

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

동적 이미지

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

텍스트 방향

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

오른쪽에서 왼쪽 및 왼쪽에서 오른쪽 텍스트 정렬을 전환하는 버튼이 있는 이메일 드래그 앤 드롭 편집기 메뉴.

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

HTML

링크에 대한 HTML 속성

링크에 대해 "clicktracking" 속성이 꺼진 "속성" 섹션.

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

일반적인 사용 사례는 Braze를 통해 발송할 때 클릭 추적을 비활성화하기 위해 앵커 태그에 속성을 삽입하는 것입니다.

  • SendGrid: clicktracking = "off"
  • SparkPost: data-msys-clicktrack = "0"

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

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

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

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

마지막으로, 메시지의 접근성을 높이는 데 도움이 되는 사전 정의된 속성을 사용할 수 있습니다. 자세한 내용은 Braze에서 접근 가능한 메시지 작성 문서를 참조하세요.

커스텀 head 태그

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

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

허용되는 태그 및 태그별 속성
New Stuff!