이메일 디자인 기초

이메일 콘텐츠 버전을 마스터하는 방법을 알아봅니다. 이메일 디자이너를 사용하면 사전 정의된 콘텐츠를 사용하거나 사용하지 않고 이메일 및 템플릿을 만들 수 있습니다.

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

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

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

노트

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

전자 메일 구조 정의

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

전자 메일 구조를 편집하려면 다음을 수행하십시오.

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

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

  3. 전자 메일 모양을 만드는 데 필요한 구조 구성 요소를 끌어다 놓습니다.

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

    노트

    열 스택은 모든 이메일 프로그램과 호환되지 않습니다. 지원되지 않는 경우에는 열이 스택되지 않습니다.

    전자 메일에 배치되면 이미 내부에 컨텐츠 구성 요소나 조각을 배치하지 않은 한 구성 요소를 이동하거나 제거할 수 없습니다.

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

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

    노트

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

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

사전 헤더 사용

사전 헤더는 받은 편지함에서 전자 메일을 볼 때 제목란을 따르는 간단한 요약 텍스트입니다. preheader가 더 높은 공개 비율을 전달합니다.

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

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

노트

preheader가 모든 이메일 프로그램과 호환되지 않습니다. 지원되지 않는 경우 preheader가 표시되지 않습니다.

컨텐츠 구성 요소 사용

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

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

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

Button

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

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

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

Text

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

Divider

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

HTML

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

노트

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

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

다시 생성할 수 없는 컨텐츠가 있는 경우 Html 컨텐츠 구성 요소를 사용하여 원래 이메일에서 HTML 코드를 복사하여 붙여넣을 수 있습니다. 계속하기 전에 HTML을 잘 알고 있는지 확인하십시오.

노트

새 컨텐츠는 원래 이메일의 정확한 사본이 아니지만 아래 단계는 최대한 가까운 메시지 작성을 안내합니다.

컨텐츠를 복사하기 전에

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

비디오

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

노트

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

이미지

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

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

Social

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

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

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

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

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

회전 메뉴 구성 요소는 모든 이메일 프로그램과 호환되지 않습니다. 이메일에서 회전판이 지원되지 않는 경우 이미지를 표시하려면 대체 항목을 업로드하십시오.

노트

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

관련 항목:

이 페이지에서는