이메일 템플릿 작성
전자 메일 템플릿을 만든 후 시각적 디자인 공간을 사용하여 전자 메일 템플릿의 구조적 구성 요소와 콘텐츠 구성 요소를 작성합니다.
구조 및 콘텐츠 추가 structure-content
-
콘텐츠 디자인을 시작하려면 Structures 에서 항목을 드래그하여 캔버스에 놓습니다.
구조 에서 필요한 만큼 항목을 추가하고 오른쪽 창에서 각 항목의 설정을 편집합니다.
note tip TIP n:n 열 구성 요소를 선택하여 선택한 열 수(3개에서 10개 사이)를 정의합니다. 열 아래로 화살표를 이동하여 각 열의 너비를 정의할 수도 있습니다. 각 열 크기는 구조 구성 요소의 전체 너비의 10%보다 작을 수 없습니다. 빈 열만 제거할 수 있습니다.
-
콘텐츠 섹션을 확장하고 하나 이상의 구조 구성 요소에 필요한 만큼 콘텐츠 구성 요소를 추가합니다.
-
필요한 경우 설정 또는 스타일 탭에서 각 구성 요소를 추가로 사용자 지정할 수 있습니다.
예를 들어 각 구성 요소의 텍스트 스타일, 패딩 또는 여백을 변경할 수 있습니다.
-
조건부 콘텐츠를 추가하고 조건부 규칙에 따라 타겟팅된 프로필로 콘텐츠를 조정하려면 콘텐츠 구성 요소를 선택하고 구성 요소 도구 모음에서 조건부 콘텐츠 활성화 아이콘을 클릭합니다.
자세한 내용은 조건부 콘텐츠 를 참조하세요.
사용자 정의 CSS 추가
이메일 템플릿 디자인 공간 내에 직접 사용자 지정 CSS를 추가할 수 있습니다. 사용자 지정 CSS를 사용하여 콘텐츠의 모양을 보다 유연하게 제어하고, 고급 및 특정 스타일을 적용할 수 있습니다. 이미지, 단추 및 텍스트와 같은 구성 요소를 포함하기 전에 이 최상위 수준의 스타일을 추가하는 것이 좋습니다.
캔버스에 콘텐츠 구성 요소가 하나 이상 있는 경우 왼쪽 탐색 트리에서 본문 구성 요소를 선택하여 사용자 지정 CSS 편집기에 액세스합니다.
-
오른쪽에 표시되는 스타일 탭에서 사용자 지정 CSS 추가 를 클릭합니다.
note note NOTE 사용자 지정 CSS 추가 단추는 Body 구성 요소를 선택한 경우에만 사용할 수 있습니다. 그러나 사용자 지정 CSS 스타일을 그 안의 모든 구성 요소에 적용할 수 있습니다. 사용자 지정 CSS 추가 팝업 편집기에 자리 표시자 코드 주석이 표시됩니다.
-
편집기에 CSS 코드를 입력합니다.
사용자 지정 CSS가 올바르고 적절한 구문을 따르는지 확인하십시오. 입력한 CSS가 올바르지 않으면 오류 메시지가 표시되고 CSS를 저장할 수 없습니다. 자세한 내용은 CSS 유효성을 참조하세요.
-
사용자 지정 CSS를 저장하려면 저장 을 클릭합니다.
사용자 지정 스타일 시트가 기존 콘텐츠에 적용됩니다. 사용자 지정 CSS가 필요에 따라 적용되는지 확인할 수 있습니다. 스타일 시트 응용 프로그램을 변경하고 조정하는 방법에 대한 자세한 내용은 문제 해결을 참조하십시오.
조각 추가
시각적 조각은 Adobe Journey Optimizer B2B edition의 여러 콘텐츠 에셋에서 참조할 수 있는 재사용 가능한 디자인 구성 요소입니다. 일반적으로 미리 만들고 빠르게 삽입하여 보다 빠르고 일관성 있는 작성을 가능하게 하는 콘텐츠 블록입니다.
다음 예제에서는 콘텐츠를 작성할 때 조각을 추가하는 단계에 대해 간략하게 설명합니다.
-
조각 목록을 열려면 조각 아이콘(
다음과 같은 작업을 수행할 수 있습니다.
- 목록을 정렬합니다.
- 목록을 검색, 검색 또는 필터링합니다.
- 축소판 보기와 목록 보기 간에 전환합니다.
- 최근에 만들어진 조각을 반영하도록 목록을 새로 고칩니다.
-
조각을 구조 구성 요소로 끌어다 놓습니다.
편집기는 이메일 구조의 섹션/요소 내에서 조각을 렌더링합니다.
note tip TIP 이메일 내의 전체 수평 레이아웃을 차지하도록 조각을 추가하려면 1:1 열 구조를 추가한 다음 조각을 끌어서 놓습니다. 조각의 콘텐츠는 구조 내에서 동적으로 업데이트되어 콘텐츠가 콘텐츠에 표시되는 방식을 보여 줍니다.
사용자 지정 가능한 조각의 편집 가능한 필드
시각적 조각에는 사용자 정의할 수 있는 편집 가능한 필드가 포함될 수 있습니다. 사용자 정의 필드를 사용하면 원래 조각에 영향을 주지 않고 조각을 콘텐츠에 통합할 때 매개 변수를 수정하고 맞춤 경험을 만들 수 있습니다. 콘텐츠 작성자는 텍스트, 이미지 및 단추 구성 요소의 사용자 지정을 위한 조각을 디자인할 수 있습니다. 포함된 조각에 편집 가능한 필드가 있는 구성 요소가 포함된 경우 기본값을 변경하여 콘텐츠에 맞게 사용자 지정할 수 있습니다.
-
조각 구성 요소를 선택합니다.
오른쪽에 표시되는 설정에는 기본값이 있는 편집 가능한 필드가 포함되어 있습니다.
-
필요에 따라 편집 가능한 필드를 변경합니다.
템플릿을 저장한 후 요약에서 사용한 사람 탭을 선택하면 조각 세부 정보 페이지에 해당 템플릿이 표시됩니다.
에셋 추가
시각적 컨텐츠 편집기의 왼쪽 탐색 막대에서 Marketo Engage Assets(
-
이미지 자산을 구조 구성 요소로 끌어다 놓아 새 자산을 추가합니다.
-
캔버스에서 기존 이미지 자산을 선택하여 바꾸고 이미지 소스 도구에서 자산 선택 을 클릭합니다.
소스 유형에서 에셋을 사용하는 방법에 대한 자세한 내용은 콘텐츠 작성에 에셋 사용을 참조하십시오.
레이어, 설정 및 스타일 탐색
시각적 디자인 공간의 콘텐츠로 작업할 때 탐색 트리를 사용하여 구성 요소, 열 및 콘텐츠 요소에 액세스할 수 있습니다. 왼쪽의 탐색 트리 아이콘(
다음 예에서는 열이 있는 구조 구성 요소 내에서 패딩 및 세로 정렬을 조정하는 단계를 간략하게 설명합니다.
-
캔버스에서 구조 구성 요소의 열을 직접 선택하거나 왼쪽에 표시된 탐색 트리 를 사용합니다.
-
열 도구 모음에서 열 선택 도구를 클릭하고 편집할 열을 선택합니다.
구조 트리에서 선택할 수도 있습니다. 해당 열에 대한 편집 가능한 매개 변수는 오른쪽의 설정 및 스타일 탭에 표시됩니다.
-
열 속성을 편집하려면 오른쪽의 스타일 탭을 클릭하고 필요에 따라 변경합니다.
-
Background 의 경우 필요에 따라 배경색을 변경합니다.
투명 배경에 대한 확인란 선택을 취소합니다. 단색 대신 이미지를 배경으로 사용하려면 배경 이미지 설정을 사용하도록 설정하십시오.
-
정렬 에 대해 위쪽, 중간 또는 아래쪽 아이콘을 선택합니다.
-
패딩 에 대해 모든 면에 대한 패딩을 정의합니다.
패딩을 미세 조정하려면 각 면에 대해 다른 패딩을 선택하십시오. 동기화를 중단하려면 잠금 아이콘을 클릭하십시오.
-
고급 섹션을 확장하여 열의 인라인 스타일을 정의합니다.
-
-
필요한 경우 이 단계를 반복하여 구성 요소의 다른 열에 대한 맞춤 및 패딩을 조정합니다.
-
변경 내용을 저장합니다.
콘텐츠 개인화
Journey Optimizer B2B edition에서는 중괄호 {}
로 묶은 개인화된 콘텐츠로 식을 만들 수 있는 인라인 단순 구문을 사용합니다. 동일한 콘텐츠 또는 필드에 제한 없이 여러 표현식을 추가할 수 있습니다.
예:
Hello {{lead.firstName}} {{lead.lastName}}
Hello {%= lead.mktoName ?: "Marketer" %}
콘텐츠를 처리할 때 Journey Optimizer B2B edition은 표현식을 Experience Platform 데이터베이스에 포함된 데이터로 대체합니다. 첫 번째 예제는 Hello John Doe 입니다.
다음 예제에서는 리드/계정 속성과 시스템 토큰을 사용하여 콘텐츠를 개인화하는 단계를 간략하게 설명합니다.
-
텍스트 구성 요소를 선택하고 도구 모음에서 개인화 추가 아이콘을 클릭합니다.
이 작업은 Personalization 편집 대화 상자를 엽니다.
-
토큰 옆에 있는 더하기(+) 기호를 클릭하여 토큰을 추가합니다.
대체(잠재 고객에 대해 해당 필드를 사용할 수 없을 때 표시되는 기본 텍스트)를 사용하여 토큰을 추가하려면 자세히 아이콘(…)을 클릭하고 대체 텍스트를 사용하여 삽입 을 선택합니다.
-
포함할 추가 토큰 또는 기타 정적 텍스트를 추가합니다.
-
저장 을 클릭합니다.
개인화 스크립팅은 시각적 디자인 공간에 표시됩니다. 필요할 때 변경하려면 이 옵션을 선택할 수 있습니다.
연결된 URL 추적 편집
-
추적할 콘텐츠에 연결된 모든 URL을 표시하려면 왼쪽의 링크 아이콘(
-
필요한 경우 편집(
링크에 태그 를 추가할 수도 있습니다.
옵션 보기
시각적 디자인 공간에서 사용할 수 있는 보기 및 콘텐츠 유효성 검사 옵션을 활용합니다.
-
사전 설정된 확대/축소 옵션에서 콘텐츠를 확대/축소합니다.
-
데스크탑, 모바일 또는 텍스트 전용/일반 텍스트에서 컨텐츠 보기를 전환합니다.
- 여러 장치에서 콘텐트 미리 보기를 위해 눈 아이콘을 클릭합니다.
- 기본 제공 장치 중 하나를 선택하거나 사용자 지정 차원을 입력하여 콘텐츠를 미리 봅니다.
추가 옵션
전자 메일 디자인 영역 상단의 자세히… 메뉴에서 다음 작업을 수행할 수 있습니다.
템플릿 작업에 액세스하려면
- 템플릿 재설정 - 디자인 캔버스를 빈 슬레이트로 지우고 빌드 콘텐츠를 다시 시작하려면 이 옵션을 클릭합니다.
- 조각으로 저장 - 여러 전자 메일 또는 전자 메일 템플릿에서 재사용할 조각으로 템플릿의 전체 또는 일부를 저장합니다. 조각의 이름과 설명을 입력하고 사용 가능한 조각 목록에 저장합니다.
- 디자인 변경 - 전자 메일 디자인 페이지로 돌아가기. 여기에서 다른 템플릿을 선택하여 디자인 프로세스를 재시작할 수 있습니다. 빈 캔버스(클래식 모드)를 사용하거나 브랜드 테마(테마 모드)를 사용하여 콘텐츠를 처음부터 디자인하도록 선택할 수도 있습니다.
- HTML 내보내기 - zip 파일로 패키지된 HTML 형식의 로컬 시스템에 시각적 캔버스의 콘텐츠를 다운로드합니다.