설명서CampaignCampaign Standard 설명서

이메일 디자인 기초 designing-an-email-content-from-scratch

Last update: Fri Jul 19 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

작성 대상:

  • 초급
  • 사용자

이메일 콘텐츠 에디션을 마스터하는 방법에 대해 알아봅니다. 이메일 Designer을 사용하면 사전 정의된 고유한 콘텐츠로 시작하거나 사용하지 않고 이메일 및 템플릿을 만들 수 있습니다.

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

  1. 이메일을 만들고 해당 콘텐츠를 엽니다.
  2. 구조 구성 요소를 추가하여 이메일을 구성합니다. 전자 메일 구조 편집을 참조하세요.
  3. 구조 구성 요소에 콘텐츠 구성 요소 및 조각을 삽입합니다. 조각 및 콘텐츠 구성 요소 추가를 참조하십시오.
  4. 이미지를 추가하고 이메일 텍스트를 편집합니다. 이미지 삽입을 참조하세요.
  5. 개인화 필드, 링크 등을 추가하여 이메일을 개인화합니다. 개인화 필드 삽입, 링크 삽입 및 전자 메일에 동적 콘텐츠 정의를 참조하세요.
  6. 이메일의 제목 줄을 정의합니다. 전자 메일의 제목 줄 개인화를 참조하십시오.
  7. 이메일을 미리 봅니다.
  8. 콘텐츠를 저장하고 대상자를 정의하고 전송을 적절하게 예약했는지 확인한 후 메시지를 계속 진행합니다.

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

NOTE
이메일 콘텐츠를 처음부터 디자인하지 않으려면 기본 제공 콘텐츠 템플릿을 사용할 수 있습니다. 자세한 내용은 콘텐츠 템플릿을 참조하세요.

이메일 구조 정의 defining-the-email-structure

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

전자 메일 구조를 편집하려면:

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

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

  3. 이메일 형태를 만드는 데 필요한 구조 구성 요소를 드래그 앤 드롭합니다.

    파란색 선은 구조 구성 요소를 놓기 전에 정확한 위치를 나타냅니다. 다른 구성 요소 위, 사이 또는 아래에 드롭할 수 있지만 안쪽에는 드롭할 수 없습니다.

    note note
    NOTE
    일부 이메일 프로그램에서는 열 스택이 호환되지 않을 수 있습니다. 지원되지 않을 경우, 열이 스택되지 않습니다.
    이메일에 배치되면 콘텐츠 구성 요소 또는 조각이 이미 내부에 배치되지 않은 한 구성 요소를 이동하거나 제거할 수 없습니다.

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

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

    note note
    NOTE
    각 열 크기는 구조 구성 요소 전체 폭의 10% 이상이어야 합니다. 비어 있는 열만 제거할 수 있습니다.

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

프리 헤더 사용 preheader

프리 헤더는 받은 편지함에서 이메일을 볼 때 제목 줄 다음에 오는 짧은 요약 텍스트입니다. 프리 헤더는 더 높은 열기 속도를 제공합니다.

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

사전 헤더 콘텐츠에 Content block, Dynamic content 또는 Personalization fields ​을(를) 추가할 수 있습니다.

NOTE
일부 이메일 프로그램에서는 프리 헤더가 호환되지 않을 수 있습니다. 지원되지 않을 경우, 프리 헤더가 표시되지 않습니다.

콘텐츠 구성 요소 사용 about-content-components

콘텐츠 구성 요소는 이메일에 배치되면 편집할 수 있는 비어 있는 원시 구성 요소입니다.

구조 구성 요소에 원하는 만큼 콘텐츠 구성 요소를 추가할 수 있습니다. 구조 구성 요소 내부 또는 다른 구조 구성 요소로 이동할 수도 있습니다.

다음은 이메일 Designer에서 사용할 수 있는 구성 요소 목록입니다.

Button

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

버튼을 재사용할 수 있는 조각으로 저장할 수도 있습니다. 자세한 내용은 콘텐츠 조각 만들기 및 조각으로 콘텐츠 저장을 참조하세요.

전자 메일 Designer에 대체 이미지를 표시하려면 Fallback view ​을(를) 선택하십시오.

Text

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

Divider

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

HTML

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

NOTE
사용 가능한 HTML 구성 요소는 제한된 옵션을 사용하여 편집할 수 있습니다. 모든 스타일이 인라인 상태가 아니면 HTML 코드의 head 섹션에 적절한 CSS를 추가해야 합니다. 그렇지 않으면 이메일이 응답하지 않습니다. Preview 단추를 사용하여 콘텐츠의 응답성을 테스트합니다(메시지 미리 보기 참조).

단순히 외부 콘텐츠가 이메일 Designer을 준수하도록 하기 위해, Adobe에서는 메시지를 처음부터 만들고 기존 이메일의 콘텐츠를 조각 및 구성 요소로 복사할 것을 권장합니다.

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

NOTE
새 콘텐츠는 원본 이메일의 정확한 사본이 되지 않지만 아래 단계는 가능한 한 가까워지는 메시지를 만드는 과정을 안내합니다.

콘텐츠를 복사하기 전

  1. 원래 이메일에서 보낼 각 이메일에 고유한 섹션에서 재사용 가능한 섹션을 식별합니다.
  2. 사용할 모든 이미지와 에셋을 저장합니다.
  3. HTML에 익숙하다면 원래 HTML 콘텐츠를 다른 부분으로 분할하십시오.

비디오 video-settings

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

NOTE
일부 이메일 프로그램에서는 비디오가 호환되지 않을 수 있습니다. 지원되지 않을 경우, 대체 항목이 표시됩니다.

이미지

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

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

Social

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

슬라이드 carousel-settings

  1. 구조 구성 요소 내부에 Carousel 구성 요소를 끌어서 놓습니다.

  2. 컴퓨터에서 이미지를 검색하여 선택하십시오.

  3. Settings 창에서 회전판에 놓을 축소판 수를 설정합니다.

  4. 컴퓨터에서 대체 이미지를 선택하십시오.

슬라이드 구성 요소는 일부 이메일 프로그램과 호환되지 않습니다. 이메일에서 캐러셀이 지원되지 않는 경우 이미지를 대신 표시하려면 폴백을 업로드하십시오.

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

관련 항목:

recommendation-more-help
3ef63344-7f3d-48f9-85ed-02bf569c4fff