이메일 디자인 기초

이메일 컨텐츠 에디션을 마스터하는 방법을 살펴볼 수 있습니다. 이메일 디자이너는 사전 정의된 컨텐츠를 사용하거나 사용하지 않고 이메일 및 템플릿을 만들 수 있습니다.

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

  1. 이메일을 만들어 컨텐츠를 엽니다.
  2. 구조 구성 요소를 추가하여 이메일 모양을 만듭니다. 이메일 구조 편집을 참조하십시오.
  3. 구조 구성 요소에 컨텐츠 구성 요소 및 조각을 삽입합니다. 조각 및 콘텐츠 구성 요소 추가를 참조하십시오.
  4. 이미지를 추가하고 이메일 텍스트를 편집합니다. 이미지 삽입을(를) 참조하십시오.
  5. 개인화 필드, 링크 등을 추가하여 이메일을 개인화합니다. 개인화 필드 삽입, 링크 삽입이메일에서 동적 컨텐츠 정의를 참조하십시오.
  6. 이메일의 제목 줄을 정의합니다. 이메일 제목 줄 맞춤화를 참조하십시오.
  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 코드의 head 섹션에 올바른 CSS를 추가해야 합니다. 그렇지 않으면 이메일이 응답적이지 않습니다. Preview 단추를 사용하여 내용의 응답성을 테스트합니다(메시지 미리 보기 참조).

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

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

노트

새 컨텐츠는 원본 이메일의 정확한 사본이 아니지만, 아래 단계를 통해 가능한 한 가까운 메시지를 만들 수 있습니다.

컨텐츠를 복사하기 전

  1. 원본 이메일에서 전송할 각 이메일에 대해 고유한 섹션에서 재사용 가능한 섹션을 식별합니다.
  2. 사용하려는 모든 이미지와 에셋을 저장합니다.
  3. HTML에 익숙한 경우 원본 HTML 컨텐츠를 다른 부분으로 분할합니다.

비디오

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

노트

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

이미지

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

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

Social

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

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

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

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

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

Carousel 구성 요소는 모든 이메일 프로그램과 호환되지 않습니다. 캐러셀이 이메일에서 지원되지 않는 경우 대신 이미지를 표시하도록 폴백을 업로드합니다.

노트

회전판 구성 요소는 다음 이메일 플랫폼과 호환됩니다.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).

관련 항목:

이 페이지에서는