이메일 디자인 기초

이메일 컨텐츠 에디션을 마스터하는 방법을 살펴보십시오. 이메일 디자이너는 사전 정의된 컨텐츠 사용 여부와 상관없이 이메일 및 템플릿을 만들 수 있습니다.

이메일 디자이너를 사용하여 이메일 컨텐츠를 처음부터 만들고 디자인하는 주요 단계는 다음과 같습니다.

  1. 이메일을 만들어 내용을 엽니다.
  2. 구조 구성 요소를 추가하여 이메일 모양을 만듭니다. 이메일 구조 편집을 참조하십시오.
  3. 구조 구성 요소에 컨텐츠 구성 요소 및 조각을 삽입합니다. 조각 및 컨텐츠 구성 요소 추가를 참조하십시오.
  4. 이미지를 추가하고 이메일 텍스트를 편집합니다. 이미지 삽입을 참조하십시오.
  5. 개인화 필드, 링크 등을 추가하여 이메일을 개인화합니다. 개인화 필드 삽입, 링크 삽입 및 이메일에 동적 컨텐트 정의를 참조하십시오.
  6. 이메일의 제목 줄을 정의합니다. See Personalizing the subject line of an email.
  7. 이메일 미리 보기.
  8. 컨텐츠를 저장하고 대상을 정의하고 전송을 올바르게 예약했는지 확인한 후 메시지를 계속 진행합니다.

소개 비디오도 확인할 수 있습니다.

노트

이메일 컨텐츠를 처음부터 디자인하지 않으려면 바로 사용 가능한 컨텐츠 템플릿을 사용할 수 있습니다. 자세한 내용은 컨텐츠 템플릿을 참조하십시오.

이메일 구조 정의

이메일 디자이너는 이메일의 구조를 쉽게 정의할 수 있도록 해줍니다. 간단한 드래그 앤 드롭 동작으로 구조적 요소를 추가하고 이동하여 몇 초 안에 이메일 모양을 디자인할 수 있습니다.

이메일 구조를 편집하려면:

  1. 기존 컨텐츠를 열거나 새 이메일 컨텐츠를 만듭니다.

  2. 왼쪽에 있는 Structure components + 아이콘을 선택하여 에액세스합니다.

  3. 이메일을 구성하는 데 필요한 구조 구성 요소를 드래그하여 놓습니다.

    파란색 선은 구조 구성 요소를 놓치기 전에 정확한 위치를 재구성합니다. 위에, 다른 구성 요소 사이 또는 아래에 놓을 수 있지만 내부에 놓을 수는 없습니다.

    노트

    열 스택은 일부 이메일 프로그램과 호환되지 않습니다. 지원되지 않는 열은 스택되지 않습니다.

    이메일에 배치하면 이미 컨텐츠 구성 요소나 안에 배치된 조각이 없는 한 구성 요소를 이동하거나 제거할 수 없습니다.

  4. 하나 이상의 열로 구성된 여러 구조 구성 요소를 사용할 수 있습니다.

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

    노트

    각 열 크기는 구조 구성 요소의 전체 너비의 10% 미만일 수 없습니다. 비어 있지 않은 열은 제거할 수 없습니다.

구조를 정의하면 컨텐츠 조각 및 구성 요소를 이메일에 추가할 수 있습니다.

프리헤더 사용

사전 헤더는 받은 편지함에서 이메일을 볼 때 제목 줄 뒤에 오는 간단한 요약 텍스트입니다. 프리헤더는 더 높은 공개 비율을 제공합니다.

편집 상자를 Preheader 선택하고 컨텐츠를 완료합니다.

사전 헤더 컨텐츠 Content block​에 하나 Dynamic content 또는 Personalization fields 를 추가할 수 있습니다.

노트

사전 헤더는 모든 이메일 프로그램과 호환되지 않습니다. 지원되지 않는 경우 미리 머리글이 표시되지 않습니다.

컨텐츠 구성 요소 사용

컨텐츠 구성 요소는 원시 빈 구성 요소로서, 한 번 이메일에 배치되면 편집할 수 있습니다.

구조 구성 요소에서 원하는 만큼 컨텐츠 구성 요소를 추가할 수 있습니다. 구조 구성 요소 안이나 다른 구조 구성 요소로 이동할 수도 있습니다.

이메일 디자이너의 사용 가능한 구성 요소 목록은 다음과 같습니다.

Button

각 단추를 처음부터 편집하지 않고 여러 단추를 사용해야 하는 경우 컨텍스트 도구 모음을 사용하여 구성 Button 요소를 복제할 수 있습니다.

단추를 다시 사용할 수 있는 조각으로 저장할 수도 있습니다. 자세한 내용은 컨텐츠 조각 만들기 및 컨텐츠 를 조각으로 저장을 참조하십시오.

이메일 디자이너 Fallback view 에 대체 이미지를 표시하려면 선택합니다.

Text

이 구성 요소를 사용하여 이메일에 텍스트를 삽입합니다. **Component Settings**​에서 텍스트의 색상, 스타일 및 크기를 조정할 수 있습니다.

Divider

이 구성 요소를 사용하여 이메일에 분할된 줄을 삽입합니다. **Component Settings**​에서 줄바꿈 줄의 색상, 스타일 및 크기를 선택할 수 있습니다.

Html

이 구성 요소를 사용하여 기존 HTML의 다른 부분을 복사하여 붙여넣습니다. 이를 통해 무료 모듈식 HTML 구성 요소를 만들 수 있습니다.

노트

무료 HTML 구성 요소는 제한된 옵션으로 편집할 수 있습니다. 모든 스타일이 인라인되지 않은 경우 HTML 코드의 헤드 섹션에 올바른 CSS를 추가해야 이메일이 응답성이 적용되지 않습니다. 이 Preview 단추를 사용하여 컨텐츠의 응답성을 테스트합니다(메시지 미리 보기 참조).

간단하게 이메일 디자이너와 호환되는 외부 컨텐츠를 만들려면 메시지를 처음부터 만들고 기존 이메일의 내용을 조각 및 구성 요소로 복사하는 것이 좋습니다.

다시 만들 수 없는 컨텐츠가 있는 경우 컨텐츠 구성 요소를 사용하여 원본 이메일의 HTML 코드를 복사하여 붙여넣을 수 Html 있습니다. 계속하기 전에 HTML에 익숙해야 합니다.

노트

새 컨텐츠는 원본 이메일의 정확한 사본이 되지는 않지만, 아래 단계는 가능한 한 가까운 메시지 작성을 안내해 줍니다.

**컨텐츠를 복사하기 전에**

1. 원본 이메일에서 전송할 각 이메일에 대해 고유한 섹션에서 재사용 가능한 섹션을 확인합니다.
1. 사용할 모든 이미지 및 에셋을 저장합니다.
1. HTML에 익숙한 경우 원본 HTML 내용을 다른 부분으로 분할합니다.

비디오

비디오 구성 요소를 이메일의 구조 구성 요소에 삽입하고 에 비디오 링크를 입력합니다 Component Settings.

노트

비디오는 일부 이메일 프로그램과 호환되지 않습니다. 지원되지 않는 경우 폴백이 표시됩니다.

이미지

이 구성 요소를 사용하여 이메일에 이미지를 삽입합니다.

이미지 구성 요소를 구조 구성 요소에 삽입하고 찾아보기를 클릭하여 컴퓨터에서 이미지 파일을 업로드합니다.

Social

이 구성 요소를 사용하여 이메일에 소셜 미디어 페이지에 대한 링크를 삽입합니다. 표시할 링크와 해당 아이콘의 크기를 선택할 수 있습니다 Component Settings.

  1. 구성 요소를 구조 구성 요소 안에 Carousel 드래그하여 놓습니다.

  2. 컴퓨터에서 이미지를 찾아 선택합니다.

  3. 회전판에서 원하는 축소판 수를 Settings 설정합니다.

  4. 컴퓨터에서 대체 이미지를 선택합니다.

회전판 구성 요소는 일부 이메일 프로그램과 호환되지 않습니다. 회전판이 이메일에서 지원되지 않는 경우 대신 이미지를 표시하는 대비책을 업로드합니다.

노트

회전판 구성 요소는 다음 이메일 플랫폼과 호환됩니다.Apple Mail 7, Apple Mail 8, Mac용 Outlook 2011, Mac용 Outlook 2016, Mozilla Thunderbird, iPad 및 iPad mini iOS, iPhone iOS, Android, AOL(Chrome, Firefox 및 Safari).

관련 항목:

이 페이지에서는