콘텐츠로 건너뛰기
개발자 문서지원 데모 요청 로그인
Pushwoosh.com

HTML 코드 편집기로 이메일 콘텐츠 만들기

Youtube 비디오: HTML로 처음부터 이메일 콘텐츠 만들기

HTML에 능숙하고 직접 코드를 작성하는 것을 선호한다면 Pushwoosh HTML 코드 편집기를 사용하여 이메일을 만들 수 있습니다.

이메일 콘텐츠 만들기

Anchor link to

이메일 콘텐츠 만들기를 시작하려면 HTML 코드를 HTML 탭에 붙여넣으세요. 편집기는 작업하는 동안 실시간 이메일 미리보기를 제공합니다.

또는 하단 패널에 있는 HTML 파일 업로드를 클릭하여 HTML 파일을 업로드할 수도 있습니다.

이메일에 개인화된 터치를 추가하려면 사용자 지정 태그를 사용하세요. 이를 위해:

  1. 편집기 하단에 있는 태그 아이콘을 클릭합니다.
  2. 원하는 태그와 수정자를 선택하고 필요한 경우 기본값을 제공합니다.
  3. 삽입을 클릭하여 사용자 지정 태그를 이메일 콘텐츠에 포함시킵니다.
태그 선택 및 기본값 옵션을 보여주는 사용자 지정 태그 삽입 인터페이스

이메일에 이모티콘을 포함하려면 편집기 하단에 있는 이모티콘 아이콘을 클릭하세요.

현지화 사용하기

Anchor link to

현지화를 통해 다양한 언어를 사용하는 사용자에게 개인화된 경험을 제공할 수 있습니다.

HTML 코드 편집기에서는 기본 언어를 정의하고 여러 언어 옵션을 추가하여 현지화를 사용할 수 있습니다. 예를 들어, 기본 메시지를 영어로 설정한 다음 독일어와 스페인어 번역을 포함할 수 있습니다. 이렇게 하면 이메일 콘텐츠가 각 사용자의 언어 기본 설정에 맞게 조정됩니다.

아래는 현지화 데이터를 구성하는 방법의 예시입니다. 여기서는 영어를 기본 언어로 사용하고 독일어와 스페인어 번역을 사용합니다.

{
  "default": {
    "button": "Shop now",
    "description": "For a limited time, you can enjoy a 20% discount on all our premium coffee blends",
    "subtitle": "Don't miss it",
    "title": "☕ Coffee Promotion Alert!"
  },
  "de": {
    "button": "Jetzt einkaufen",
    "description": "Für kurze Zeit erhalten Sie einen Rabatt von 20% auf alle unsere Premium-Kaffeemischungen",
    "subtitle": "Verpassen Sie es nicht",
    "title": "☕ Kaffee-Promotion Benachrichtigung!"
  },
  "es": {
    "button": "Comprar ahora",
    "description": "Por tiempo limitado, puedes disfrutar de un descuento del 20% en todas nuestras mezclas de café premium",
    "subtitle": "No te lo pierdas",
    "title": "☕ ¡Alerta de Promoción de Café!"
  }
}

현지화 데이터가 구성되어 편집기의 현지화 탭에 추가되면, 플레이스홀더를 사용하여 HTML 콘텐츠에 통합하세요. 플레이스홀더는 사용자의 언어 기본 설정에 따라 현지화된 텍스트를 콘텐츠에 동적으로 삽입합니다. HTML에서 이를 구현하는 방법은 다음과 같습니다.

{{title|text|}}
{{subtitle|text|}}
{{description|text|}}
{{button|text|}}

다음 시나리오를 고려해 보세요: 커피 블렌드에 대한 기간 한정 할인을 광고하고 있습니다. 위에서 언급한 현지화 구조를 사용하면 다양한 언어를 사용하는 사용자에게 프로모션 메시지를 효과적으로 전달할 수 있습니다. 프로모션을 위한 HTML 코드는 다음과 같을 수 있습니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☕ Coffee Promotion Alert</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    background-color: #fff;
    padding: 20px;
    margin: 10px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ff6f61;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  .button:hover {
    background-color: #ff5733;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>{{title|text|}}</h1>
    <p>{{description|text|}}</p>
    <a href="https://www.example.com/promotion" class="button">{{button|text|}}</a>


  </div>
</body>
</html>

이 설정을 사용하면 사용자의 언어가 독일어인 경우 이메일을 독일어로 보게 되고, 영어를 선택한 사용자는 영어로, 스페인어를 선택한 사용자는 스페인어로 이메일을 받게 됩니다. 이렇게 하면 모든 수신자가 선호하는 언어로 메시지를 받게 됩니다.

이메일 콘텐츠 블록 삽입 및 결합하기

Anchor link to

Pushwoosh를 사용하면 한 이메일 콘텐츠를 다른 이메일 콘텐츠에 삽입하여 결합할 수 있습니다. 이를 통해 헤더, 푸터 또는 특정 콘텐츠 블록과 같은 요소를 여러 이메일에서 쉽게 재사용할 수 있습니다.

예를 들어, 이메일 콘텐츠 A(헤더)와 이메일 콘텐츠 B(뉴스레터)가 있는 경우, 매번 콘텐츠를 수동으로 복사하지 않고도 이메일 콘텐츠 A를 이메일 콘텐츠 B에 삽입할 수 있습니다.

구문

Anchor link to

한 콘텐츠를 다른 콘텐츠에 삽입하려면 다음 구문을 사용하세요:

{% email_content "AAAAA-BBBBB" %}

여기서 “AAAAA-BBBBB”는 삽입하려는 이메일 콘텐츠의 ID입니다. ID는 이메일 콘텐츠 목록의 콘텐츠 이름 아래에서 찾을 수 있습니다.

콘텐츠 이름과 고유 식별자를 보여주는 이메일 콘텐츠 ID 표시

예시

두 개의 콘텐츠가 있다고 가정해 보겠습니다:

  • 헤더 콘텐츠(ID: “AAAAA-BBBBB”)는 미리 정의된 헤더 디자인을 가지고 있습니다.
  • 뉴스레터 콘텐츠는 헤더를 포함하고 싶습니다.

헤더를 뉴스레터에 삽입하려면 다음을 사용합니다:

{% email_content "AAAAA-BBBBB" %}

이를 통해 여러 이메일 캠페인에서 미리 정의된 헤더를 쉽게 재사용할 수 있습니다. 시간을 절약하고 이메일 전반에 걸쳐 일관성을 보장합니다.

구독 취소 링크 추가하기

Anchor link to

수신자에게 향후 통신을 쉽게 거부할 수 있는 옵션을 제공하고, 규정을 준수하며, 이메일 수신에 대한 선호도를 존중하기 위해 이메일에 구독 취소 링크를 포함해야 합니다.

다음과 같이 이메일에 구독 취소 링크를 추가하세요:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Unsubscribe </a>

속성 값 **%%PW_EMAIL_UNSUBSCRIBE%%**는 이메일 메시지를 보낼 때 Pushwoosh 구독 취소 링크로 대체됩니다. 수신자가 이 링크를 따라가면 이메일 수신을 거부하게 되며, 해당 이메일 메시지의 메시지 기록에서 구독 취소율에 포함됩니다.

이메일 콘텐츠 저장하기

Anchor link to

이메일 작성을 마친 후, 편집기 상단에 있는 저장 버튼을 클릭하세요.

이름과 레이블 필드를 보여주는 이메일 콘텐츠 저장 대화상자

나타나는 새 창에서 이메일에 명확한 이름을 지정하세요. 제목 줄과 동일하게 할 수 있습니다. 또한 이메일 목록에서 쉽게 찾을 수 있도록 레이블을 만드세요.

아직 발신자 정보를 설정하지 않았다면, 이 작업도 반드시 수행하세요. 그런 다음 저장을 클릭합니다.

이제 이메일 콘텐츠가 준비되었으므로 이메일 캠페인에서 사용할 수 있습니다. 자세히 알아보기

테스트 이메일 보내기

Anchor link to

이메일 캠페인을 보내기 전에 테스트 이메일을 보내 수신자의 받은 편지함에서 콘텐츠가 어떻게 표시되는지 미리 볼 수 있습니다. 이를 통해 캠페인을 최종 확정하기 전에 레이아웃, 콘텐츠 및 개인화된 요소를 검토하여 정확성을 확인할 수 있습니다. 필요한 경우 테스트 결과에 따라 콘텐츠를 조정하세요.

테스트 이메일을 보내려면 이메일 편집기에서 테스트 이메일을 클릭하세요.

이메일 편집기 인터페이스의 테스트 이메일 버튼

열리는 창에서:

  1. 이메일 주소 필드에 테스트 이메일을 받을 이메일 주소를 입력합니다.

KYC가 완료되지 않은 경우, 이메일을 입력하는 대신 테스트 주소 목록에서 확인된 이메일 주소를 선택해야 합니다.

확인된 테스트 이메일 주소 선택 드롭다운
  1. 이메일에 동적 콘텐츠(개인화된 데이터를 위한 플레이스홀더)가 포함된 경우, 테스트 목적으로 샘플 값을 추가합니다.

예를 들어:

  • Age (integer): 나이 플레이스홀더를 나타내는 숫자를 입력합니다 (예: 21).
  • FirstName (string): 샘플 이름을 입력합니다 (예: David).

이 값들은 테스트 이메일에서 실제 수신자 데이터를 대체하여 동적 콘텐츠가 어떻게 표시되는지 확인할 수 있게 해줍니다.

  1. 필요한 세부 정보를 모두 입력한 후, 테스트 이메일 보내기를 클릭하여 제공된 이메일 주소로 테스트 메시지를 보냅니다.
샘플 데이터 필드가 있는 테스트 이메일 보내기 확인 대화상자