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