Show Menu
화제×

빠른 시작 이메일 컨텐츠 디자인

이메일 디자이너는 이메일을 만드는 네 가지 방법을 제공합니다.
새로 시작하는 이메일을 만들 수 있습니다.
  • 구조 및 컨텐츠 구성 요소를 손쉽게 추가하여 빈 캔버스에서 이메일을 만들고 컨텐츠를 개인화하여 신속하게 전달할 수 있습니다. 스타일 요소를 완벽하게 관리할 수도 있습니다. 자세한 내용은 빠르게 시작하거나 전체 설명서를 참조하십시오.
  • 템플릿을 선택하고 여기에서 새 이메일 컨텐츠를 작성하여 바로 사용할 수 있는 템플릿에서 이메일을 만들 수 있습니다. 자세한 내용
기존 컨텐츠가 있는 이메일을 만들 수도 있습니다.
  • 기존 HTML 컨텐츠(외부에서 또는 레거시 편집기에서 작성)를 변환할 수 있습니다. 자세한 내용
  • 호환성 모드에서 기존 HTML 컨텐츠를 바로 가져올 수 있습니다. 자세한 내용

기존 컨텐츠 없음

처음부터 이메일 만들기

이메일을 손쉽게 작성하고 구성 요소를 추가하고 컨텐츠를 개인화하여 신속하게 전달할 수 있습니다. 필요한 경우 스타일링 옵션을 컨텐츠에 적용할 수 있습니다. 스타일 설정 및 인라인 속성 관리에 대한 자세한 내용은 이메일 스타일 편집을 참조하십시오.

제목 줄 추가

이메일을 보낼 때는 제목이 필수입니다. 자세한 내용은 이메일의 제목 줄 정의를 참조하십시오.
  1. 이메일을 만듭니다.
  2. 홈 페이지를 닫습니다.
  3. 이메일 디자이너 홈 페이지(홈 아이콘을 통해 액세스)의 Properties 탭으로 이동하여 Subject 섹션을 채웁니다.

구조 구성 요소 추가

구조 구성 요소는 이메일의 레이아웃을 정의합니다. 자세한 내용은 이메일 구조 정의를 참조하십시오.
구조 구성 요소에서 사용할 레이아웃의 구성 요소를 드래그하여 놓습니다.
이메일에 추가할 다양한 컨텐츠 레이아웃을 선택할 수 있습니다.

컨텐츠 구성 요소 추가

이미지, 텍스트 및 버튼과 같은 여러 컨텐츠 구성 요소를 이메일에 추가할 수 있습니다. 자세한 내용은 컨텐츠 구성 요소를 참조하십시오.
  • 이미지
  1. 컨텐츠 구성 ​요소에서 이미지를 드래그하여 구조 구성 요소 중 하나에 놓습니다.
  2. 찾아보기를 클릭합니다 .
  3. 컴퓨터에서 이미지 파일을 선택합니다.
  • 개인화를 통한 텍스트 제작
  1. 컨텐츠 구성 ​요소에서 텍스트를 드래그하여 구조 구성 요소 중 하나에 놓습니다.
  2. 구성 요소를 클릭하고 텍스트를 입력합니다.
  3. 개인화 필드를 추가하려면 도구 모음에서 개인화 필드 삽입을 클릭합니다.
  4. 필요한 필드(예: 이름)를 선택합니다.
  • HTML
  1. 컨텐츠 구성 ​요소에서 HTML을 드래그하여 구조 구성 요소 중 하나로 드롭합니다.
  2. 소스 코드 ​표시를 클릭합니다.
  3. HTML 콘텐츠를 입력합니다.
  4. 저장을 클릭합니다 .
HTML에 익숙한 경우 컨텐츠 구성 요소를 사용하여 원래 바닥글의 HTML 코드를 복사하여 붙여넣을 수 있습니다. Html 자세한 내용은 컨텐츠 구성 요소 정보를 참조하십시오.

이메일 구성 요소 스타일 지정

예를 들어 구성 요소의 패딩 변경을 통해 이메일 스타일을 조정할 수 있습니다. 스타일 설정 및 인라인 속성 관리에 대한 자세한 내용은 이메일 스타일 편집을 참조하십시오.
  1. 텍스트 구성 요소를 클릭합니다 .
  2. 오른쪽의 팔레트에서 패딩으로 이동합니다 .
  3. 잠금 아이콘을 클릭하여 상단 및 하단 또는 오른쪽 및 왼쪽 매개 변수 간의 동기화를 중단합니다.
  4. 필요에 따라 패딩 조정
  5. 저장을 클릭합니다 .
이제 이메일을 저장하고 전송할 수 있습니다.

기본 템플릿에서 컨텐츠 작성

고객 환영 메시지, 뉴스레터 및 재참여 이메일과 같은 즉시 사용 가능한 템플릿으로 이메일을 작성하여 개인화할 수 있습니다.
  1. 이메일을 만들어 컨텐츠를 엽니다. 자세한 내용은 이메일 만들기를 참조하십시오.
  2. 홈 아이콘을 클릭하여 Email Designer 홈 페이지에 액세스합니다.
  3. 탭을 Templates 클릭합니다.
  4. 기본 HTML 템플릿을 선택합니다. 다양한 템플릿은 여러 유형의 요소를 다양하게 조합하여 제공합니다. 예를 들어 '페더' 템플릿에는 여백이 있지만 '아스트로' 템플릿에는 여백이 없습니다. 자세한 내용은 컨텐츠 템플릿을 참조하십시오.
  5. 이메일 디자이너 홈 페이지(홈 아이콘을 통해 액세스)의 Properties 탭으로 이동하여 Subject 섹션을 채웁니다.
  6. 이러한 요소를 결합하여 다양한 이메일 변형을 만들 수 있습니다. 예를 들어 구조 구성 요소를 선택하고 컨텍스트 도구 모음에서 을 클릭하여 이메일 섹션을 복제할 Duplicate 수 있습니다.
  7. 왼쪽에 있는 파란색 화살표를 사용하여 요소를 이동시켜 구조 구성 요소를 다른 요소 아래 또는 위로 드래그할 수 있습니다. 자세한 내용은 이메일 구조 편집을 참조하십시오.
  8. 구성 요소를 이동하여 각 구조 요소의 구성을 변경할 수도 있습니다. 자세한 내용은 조각 및 구성 요소 추가를 참조하십시오.
  9. 필요에 따라 각 요소의 컨텐츠를 수정합니다.이미지, 텍스트, 링크.
  10. 필요한 경우 컨텐츠에 스타일 옵션을 적용할 수 있습니다. 자세한 내용은 이메일 스타일 편집을 참조하십시오.

기존 컨텐츠 사용

여러 이메일에 재사용할 수 있도록 결합할 수 있는 모듈형 템플릿과 단편의 프레임워크를 구축하려면 이메일 HTML을 이메일 디자이너 템플릿으로 변환하는 것이 좋습니다.

HTML 컨텐츠 변환

이 사용 사례는 HTML 이메일을 이메일 디자이너 구성 요소로 신속하게 변환하는 방법을 제공합니다.
이 섹션은 HTML 코드에 익숙한 사용자를 위한 것입니다.
호환성 모드와 마찬가지로 HTML 구성 요소는 제한된 옵션을 사용하여 편집할 수 있습니다.즉석 에디션만 수행할 수 있습니다.
이메일 디자이너 외부에서 원본 HTML이 재사용 가능한 섹션으로 구분되어 있는지 확인합니다.
  1. 이메일 디자이너를 열어 빈 이메일 컨텐츠를 만듭니다.
  2. 본문 수준 속성을 설정합니다.배경색, 폭 등 자세한 내용은 이메일 스타일 편집을 참조하십시오.
그렇지 않은 경우 HTML에서 다른 블록을 잘라냅니다. 예를 들어, 다음은 명확하게 식별된 섹션입니다.
<!-- 3 COLUMN w/CTA (SCALED) -->
<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" style="max-width:680px;">
<tbody>
<tr>
<td class="padh10" align="center" valign="top" style="padding:0 5px 20px 5px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
...
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- //3 COLUMN w/CTA (SCALED) -->

모든 블록을 식별했으면 이메일 디자이너에서 기존 이메일의 각 섹션에 대해 다음 절차를 반복합니다.
  1. 구조 구성 요소를 추가합니다. 자세한 내용은 이메일 구조 편집을 참조하십시오.
  2. HTML 구성 요소를 추가합니다. 자세한 내용은 조각 및 구성 요소 추가를 참조하십시오.
  3. HTML을 해당 구성 요소에 복사하여 붙여 넣습니다.
  4. 모바일 보기로 전환합니다. 자세한 내용은 이 섹션을 참조하십시오.
    CSS가 없으므로 반응형 보기가 끊어집니다.
  5. 이 문제를 해결하려면 소스 코드 모드로 전환하고 스타일 섹션을 새 스타일 섹션에 복사하여 붙여 넣습니다. 예:
    <style type="text/css">
    a {text-decoration:none;}
    body {min-width:100% !important; margin:0 auto !important; padding:0 !important;}
    img {line-height:100%; text-decoration:none; -ms-interpolation-mode:bicubic;}
    ...
    </style>
    
    
    이 스타일 뒤에 다른 사용자 지정 스타일 태그에 스타일을 추가해야 합니다.
    이메일 디자이너가 생성한 CSS는 수정하지 마십시오.
    • <style data-name="default" type="text/css">(##)</style>
    • <style data-name="supportIOS10" type="text/css">(##)</style>
    • <style data-name="mediaIOS8" type="text/css">(##)</style>
    • <style data-name="media-default-max-width-500px" type="text/css">(##)</style>
    • <style data-name="media-default--webkit-min-device-pixel-ratio-0" type="text/css">(##)</style>
  6. 모바일 보기로 돌아가 콘텐츠가 올바르게 표시되는지 확인하고 변경 내용을 저장합니다.

HTML 이메일 가져오기 및 편집

컨텐츠를 업로드할 때 이메일 디자이너의 WYSIWYG 편집기와 완벽하게 호환되고 편집이 가능하려면 특정 태깅을 포함해야 합니다.
업로드된 HTML의 전체 또는 일부가 예상 태그 지정 기능과 호환되지 않으면 컨텐츠가 '호환성 모드'로 로드되어 UI를 통해 버전 가능성을 제한합니다.
콘텐트가 호환성 모드로 로드되면 여전히 인터페이스를 통해 다음 수정 작업을 수행할 수 있습니다(사용할 수 없는 작업은 숨겨짐).
  • 텍스트 변경 또는 이미지 변경
  • 링크 및 개인화 필드 삽입
  • 선택한 HTML 블록에서 일부 스타일 옵션 편집
  • 조건부 컨텐츠 정의
이메일에 새 섹션 추가 또는 고급 스타일 지정과 같은 기타 수정 사항은 HTML 모드를 통해 이메일의 소스 코드에서 직접 수행해야 합니다. 호환성 모드에서는 드래그 앤 드롭을 사용할 수 없지만 기존 편집기와 동일한 기능 세트가 보장됩니다.
기존 이메일을 이메일 디자이너와 호환되는 이메일로 전환하는 방법에 대한 자세한 내용은 이 섹션을 참조하십시오.