이메일 템플릿 작성

전자 메일 템플릿을 만든 후 시각적 디자인 공간을 사용하여 전자 메일 템플릿의 구조적 구성 요소와 콘텐츠 구성 요소를 작성합니다.

구조 및 콘텐츠 추가 structure-content

  1. 콘텐츠 디자인을 시작하려면 Structures ​에서 항목을 드래그하여 캔버스에 놓습니다.

    구조 ​에서 필요한 만큼 항목을 추가하고 오른쪽 창에서 각 항목의 설정을 편집합니다.

    note tip
    TIP
    n:n 열 구성 요소를 선택하여 선택한 열 수(3개에서 10개 사이)를 정의합니다. 열 아래로 화살표를 이동하여 각 열의 너비를 정의할 수도 있습니다.

    구조를 캔버스로 드래그하고 설정을 조정하십시오 {width="800" modal="regular"}

    각 열 크기는 구조 구성 요소의 전체 너비의 10%보다 작을 수 없습니다. 빈 열만 제거할 수 있습니다.

  2. 콘텐츠 섹션을 확장하고 하나 이상의 구조 구성 요소에 필요한 만큼 콘텐츠 구성 요소를 추가합니다.

    콘텐츠 요소를 캔버스로 드래그하고 설정을 조정하십시오 {width="800" modal="regular"}

  3. 필요한 경우 설정 또는 스타일 탭에서 각 구성 요소를 추가로 사용자 지정할 수 있습니다.

    예를 들어 각 구성 요소의 텍스트 스타일, 패딩 또는 여백을 변경할 수 있습니다.

  4. 조건부 콘텐츠를 추가하고 조건부 규칙에 따라 타겟팅된 프로필로 콘텐츠를 조정하려면 콘텐츠 구성 요소를 선택하고 구성 요소 도구 모음에서 조건부 콘텐츠 활성화 아이콘을 클릭합니다.

    자세한 내용은 조건부 콘텐츠 ​를 참조하세요.

사용자 정의 CSS 추가

이메일 템플릿 디자인 공간 내에 직접 사용자 지정 CSS를 추가할 수 있습니다. 사용자 지정 CSS를 사용하여 콘텐츠의 모양을 보다 유연하게 제어하고, 고급 및 특정 스타일을 적용할 수 있습니다. 이미지, 단추 및 텍스트와 같은 구성 요소를 포함하기 전에 이 최상위 수준의 스타일을 추가하는 것이 좋습니다.

캔버스에 콘텐츠 구성 요소가 하나 이상 있는 경우 왼쪽 탐색 트리에서 본문 구성 요소를 선택하여 사용자 지정 CSS 편집기에 액세스합니다.

본문 스타일에 액세스 {width="800" modal="regular"}

  1. 오른쪽에 표시되는 스타일 탭에서 사용자 지정 CSS 추가 ​를 클릭합니다.

    note note
    NOTE
    사용자 지정 CSS 추가 단추는 Body 구성 요소를 선택한 경우에만 사용할 수 있습니다. 그러나 사용자 지정 CSS 스타일을 그 안의 모든 구성 요소에 적용할 수 있습니다.

    사용자 지정 CSS 추가 팝업 편집기에 자리 표시자 코드 주석이 표시됩니다.

  2. 편집기에 CSS 코드를 입력합니다.

    사용자 지정 CSS가 올바르고 적절한 구문을 따르는지 확인하십시오. 입력한 CSS가 올바르지 않으면 오류 메시지가 표시되고 CSS를 저장할 수 없습니다. 자세한 내용은 CSS 유효성을 참조하세요.

  3. 사용자 지정 CSS를 저장하려면 저장 ​을 클릭합니다.

    사용자 지정 스타일 시트가 기존 콘텐츠에 적용됩니다. 사용자 지정 CSS가 필요에 따라 적용되는지 확인할 수 있습니다. 스타일 시트 응용 프로그램을 변경하고 조정하는 방법에 대한 자세한 내용은 문제 해결을 참조하십시오.

NOTE
모든 콘텐츠를 제거하면 CSS 섹션이 더 이상 본문 스타일 패널에 표시되지 않고 이전에 정의한 사용자 지정 CSS가 더 이상 적용되지 않습니다. 콘텐츠를 다시 추가하면 CSS 스타일 섹션이 다시 나타나고 사용자 지정 CSS가 다시 적용됩니다.

조각 추가

NOTE
전자 메일 콘텐츠의 테마 모드 ​와(과) 수동 모드 간에 조각이 상호 호환되지 않습니다. 테마가 적용되는 전자 메일 콘텐츠에서 조각을 사용하려면 테마 모드 ​에서도 조각을 만들어야 합니다.

시각적 조각은 Adobe Journey Optimizer B2B edition의 여러 콘텐츠 에셋에서 참조할 수 있는 재사용 가능한 디자인 구성 요소입니다. 일반적으로 미리 만들고 빠르게 삽입하여 보다 빠르고 일관성 있는 작성을 가능하게 하는 콘텐츠 블록입니다.

다음 예제에서는 콘텐츠를 작성할 때 조각을 추가하는 단계에 대해 간략하게 설명합니다.

  1. 조각 목록을 열려면 조각 아이콘( 조각 아이콘 )을 선택합니다.

    다음과 같은 작업을 수행할 수 있습니다.

    • 목록을 정렬합니다.
    • 목록을 검색, 검색 또는 필터링합니다.
    • 축소판 보기와 목록 보기 간에 전환합니다.
    • 최근에 만들어진 조각을 반영하도록 목록을 새로 고칩니다.

    목록에서 조각 선택 {width="700" modal="regular"}

  2. 조각을 구조 구성 요소로 끌어다 놓습니다.

    편집기는 이메일 구조의 섹션/요소 내에서 조각을 렌더링합니다.

    note tip
    TIP
    이메일 내의 전체 수평 레이아웃을 차지하도록 조각을 추가하려면 1:1 열 구조를 추가한 다음 조각을 끌어서 놓습니다.

    조각의 콘텐츠는 구조 내에서 동적으로 업데이트되어 콘텐츠가 콘텐츠에 표시되는 방식을 보여 줍니다.

recommendation-more-help

사용자 지정 가능한 조각의 편집 가능한 필드

시각적 조각에는 사용자 정의할 수 있는 편집 가능한 필드가 포함될 수 있습니다. 사용자 정의 필드를 사용하면 원래 조각에 영향을 주지 않고 조각을 콘텐츠에 통합할 때 매개 변수를 수정하고 맞춤 경험을 만들 수 있습니다. 콘텐츠 작성자는 텍스트, 이미지 및 단추 구성 요소의 사용자 지정을 위한 조각을 디자인할 수 있습니다. 포함된 조각에 편집 가능한 필드가 있는 구성 요소가 포함된 경우 기본값을 변경하여 콘텐츠에 맞게 사용자 지정할 수 있습니다.

  1. 조각 구성 요소를 선택합니다.

    오른쪽에 표시되는 설정에는 기본값이 있는 편집 가능한 필드가 포함되어 있습니다.

    조각 구성 요소 매개 변수 변경 {width="700" modal="regular"}

  2. 필요에 따라 편집 가능한 필드를 변경합니다.

템플릿을 저장한 후 요약에서 사용한 사람 탭을 선택하면 조각 세부 정보 페이지에 해당 템플릿이 표시됩니다.

에셋 추가

시각적 컨텐츠 편집기의 왼쪽 탐색 막대에서 Marketo Engage Assets( Marketo Engage Assets 아이콘 ) 아이콘 또는 Experience Manager Assets( AEM Assets 아이콘 ) 아이콘을 선택합니다. 에셋 선택기에서 소스 라이브러리에 저장된 에셋을 직접 선택할 수 있습니다.

NOTE
Adobe Experience Manager as a Cloud Services가 프로비저닝된 경우 사용자 계정에 필요한 권한이 있는 경우 Marketo Engage Design Studio와 Adobe Experience Manager Assets as a Cloud Service의 저장소에 액세스할 수 있습니다. 이들 저장소는 분리되어 있으며 동기화되지 않습니다. 두 소스 중 하나에서 이미지 자산을 사용할 수 있습니다.
  • 이미지 자산을 구조 구성 요소로 끌어다 놓아 새 자산을 추가합니다.

    Marketo Engage 에셋을 캔버스로 드래그하고 설정을 조정하십시오 {width="800" modal="regular"}

  • 캔버스에서 기존 이미지 자산을 선택하여 바꾸고 이미지 소스 도구에서 자산 선택 ​을 클릭합니다.

    원본 라이브러리에서 자산 선택 {width="600" modal="regular"}

소스 유형에서 에셋을 사용하는 방법에 대한 자세한 내용은 콘텐츠 작성에 에셋 사용을 참조하십시오.

레이어, 설정 및 스타일 탐색

시각적 디자인 공간의 콘텐츠로 작업할 때 탐색 트리를 사용하여 구성 요소, 열 및 콘텐츠 요소에 액세스할 수 있습니다. 왼쪽의 탐색 트리 아이콘( 탐색 트리 아이콘 )을 클릭하여 트리를 표시합니다.

콘텐츠 레이어 액세스 {width="800" modal="regular"}

다음 예에서는 열이 있는 구조 구성 요소 내에서 패딩 및 세로 정렬을 조정하는 단계를 간략하게 설명합니다.

  1. 캔버스에서 구조 구성 요소의 열을 직접 선택하거나 왼쪽에 표시된 탐색 트리 ​를 사용합니다.

  2. 열 도구 모음에서 열 선택 도구를 클릭하고 편집할 열을 선택합니다.

    구조 트리에서 선택할 수도 있습니다. 해당 열에 대한 편집 가능한 매개 변수는 오른쪽의 설정스타일 탭에 표시됩니다.

    비주얼 디자이너에 표시되는 열 구성 요소 {width="800" modal="regular"}

  3. 열 속성을 편집하려면 오른쪽의 스타일 탭을 클릭하고 필요에 따라 변경합니다.

    • Background ​의 경우 필요에 따라 배경색을 변경합니다.

      투명 배경에 대한 확인란 선택을 취소합니다. 단색 대신 이미지를 배경으로 사용하려면 배경 이미지 설정을 사용하도록 설정하십시오.

    • 정렬 ​에 대해 위쪽, 중간 또는 아래쪽 아이콘을 선택합니다.

    • 패딩 ​에 대해 모든 면에 대한 패딩을 정의합니다.

      패딩을 미세 조정하려면 각 면에 대해 다른 패딩을 선택하십시오. 동기화를 중단하려면 잠금 아이콘을 클릭하십시오.

    • 고급 섹션을 확장하여 열의 인라인 스타일을 정의합니다.

    선택한 열의 스타일을 변경합니다 {width="700" modal="regular"}

  4. 필요한 경우 이 단계를 반복하여 구성 요소의 다른 열에 대한 맞춤 및 패딩을 조정합니다.

  5. 변경 내용을 저장합니다.

콘텐츠 개인화

Journey Optimizer B2B edition에서는 중괄호 {}로 묶은 개인화된 콘텐츠로 식을 만들 수 있는 인라인 단순 구문을 사용합니다. 동일한 콘텐츠 또는 필드에 제한 없이 여러 표현식을 추가할 수 있습니다.

예:

  • Hello {{lead.firstName}} {{lead.lastName}}
  • Hello {%= lead.mktoName ?: "Marketer" %}
NOTE
이제 Journey Optimizer B2B edition이 일관된 경험을 위해 다른 Adobe Experience Platform 애플리케이션과 일치하도록 이메일의 개인화 토큰에 대한 카멜 대/소문자 구문을 따릅니다. 이 토큰 형식은 Handlebars 템플릿 언어와(과) 완전히 호환됩니다. 이 변경 전에 추가된 모든 토큰은 자동으로 업데이트됩니다.

콘텐츠를 처리할 때 Journey Optimizer B2B edition은 표현식을 Experience Platform 데이터베이스에 포함된 데이터로 대체합니다. 첫 번째 예제는 Hello John Doe ​입니다.

다음 예제에서는 리드/계정 속성과 시스템 토큰을 사용하여 콘텐츠를 개인화하는 단계를 간략하게 설명합니다.

  1. 텍스트 구성 요소를 선택하고 도구 모음에서 개인화 추가 아이콘을 클릭합니다.

    개인 설정 아이콘을 클릭합니다 {width="600"}

    이 작업은 Personalization 편집 대화 상자를 엽니다.

  2. 토큰 옆에 있는 더하기(+) 기호를 클릭하여 토큰을 추가합니다.

    대체(잠재 고객에 대해 해당 필드를 사용할 수 없을 때 표시되는 기본 텍스트)를 사용하여 토큰을 추가하려면 자세히 아이콘()을 클릭하고 대체 텍스트를 사용하여 삽입 ​을 선택합니다.

    토큰을 사용하여 개인화된 텍스트 만들기 {width="700" modal="regular"}

  3. 포함할 추가 토큰 또는 기타 정적 텍스트를 추가합니다.

  4. 저장 ​을 클릭합니다.

    개인화 스크립팅은 시각적 디자인 공간에 표시됩니다. 필요할 때 변경하려면 이 옵션을 선택할 수 있습니다.

    개인화 스크립트 선택 {width="600"}

연결된 URL 추적 편집

  1. 추적할 콘텐츠에 연결된 모든 URL을 표시하려면 왼쪽의 링크 아이콘( 링크 표시 아이콘 )을 클릭하십시오.

  2. 필요한 경우 편집( 편집 아이콘 ) 아이콘을 클릭하고 추적 유형 또는 레이블 ​을(를) 수정합니다.

    링크에 태그 ​를 추가할 수도 있습니다.

링크 추적에 액세스하려면 편집 아이콘을 클릭합니다 {width="500"}

옵션 보기

시각적 디자인 공간에서 사용할 수 있는 보기 및 콘텐츠 유효성 검사 옵션을 활용합니다.

  • 사전 설정된 확대/축소 옵션에서 콘텐츠를 확대/축소합니다.

  • 데스크탑, 모바일 또는 텍스트 전용/일반 텍스트에서 컨텐츠 보기를 전환합니다.

    • 여러 장치에서 콘텐트 미리 보기를 위해 아이콘을 클릭합니다.
    • 기본 제공 장치 중 하나를 선택하거나 사용자 지정 차원을 입력하여 콘텐츠를 미리 봅니다.

추가 옵션

전자 메일 디자인 영역 상단의 자세히… 메뉴에서 다음 작업을 수행할 수 있습니다.

템플릿 작업에 액세스하려면 자세히 클릭 {width="500"}

  • 템플릿 재설정 - 디자인 캔버스를 빈 슬레이트로 지우고 빌드 콘텐츠를 다시 시작하려면 이 옵션을 클릭합니다.
  • 조각으로 저장 - 여러 전자 메일 또는 전자 메일 템플릿에서 재사용할 조각으로 템플릿의 전체 또는 일부를 저장합니다. 조각의 이름과 설명을 입력하고 사용 가능한 조각 목록에 저장합니다.
  • 디자인 변경 - 전자 메일 디자인 페이지로 돌아가기. 여기에서 다른 템플릿을 선택하여 디자인 프로세스를 재시작할 수 있습니다. 빈 캔버스(클래식 모드)를 사용하거나 브랜드 테마(테마 모드)를 사용하여 콘텐츠를 처음부터 디자인하도록 선택할 수도 있습니다.
  • HTML 내보내기 - zip 파일로 패키지된 HTML 형식의 로컬 시스템에 시각적 캔버스의 콘텐츠를 다운로드합니다.
6ef00091-a233-4243-8773-0da8461f7ef0