드래그 앤 드롭 편집기로 이메일 콘텐츠 만들기

Pushwoosh 내장 편집기에서 코드를 작성하지 않고 이메일 콘텐츠를 제작하세요. 콘텐츠 블록, 이미지, 버튼, 개인화된 텍스트 및 규정을 준수하는 푸터가 포함된 재사용 가능한 레이아웃을 얻게 되며, 이를 Customer Journey 나 일회성 이메일에서 사용할 수 있습니다.

새 이메일 콘텐츠 만들기

Content → Email content로 이동합니다.
시작 방법을 선택합니다:
- Create email content를 클릭하여 드래그 앤 드롭 편집기를 열고 처음부터 이메일을 제작합니다.
- Create email content 옆의 화살표를 클릭한 다음 Use a template을 선택하여 갤러리의 사전 제작된 레이아웃에서 시작합니다.
- Create email content 옆의 화살표를 클릭한 다음 HTML code를 선택하여 HTML 코드 편집기를 사용합니다. 더 알아보기

Use a template 및 HTML code를 보여주는 메뉴가 있는 이메일 콘텐츠 만들기 버튼

편집기 레이아웃 살펴보기

이메일을 열면 내장 편집기에 다음과 같은 영역이 있습니다:

상단 바

이메일 이름 변경, 변경 사항 실행 취소 또는 다시 실행, 작업 저장 또는 테스트 이메일 전송.

언어 / 제목 / 프리헤더 바

캔버스 위에서 편집 언어를 전환하고 이메일의 제목과 프리헤더를 설정합니다. 설정 방법 알아보기.

캔버스

수신자가 보게 될 이메일을 확인하고 레이아웃에서 직접 텍스트, 이미지, 버튼을 편집합니다. 빈 이메일에는 Start with a block이 표시됩니다.

레이어 패널

이메일의 모든 블록을 캔버스와 동일한 순서로 트리 형태로 나열합니다. 왼쪽 가장자리에서 열어 중첩된 블록을 선택하거나 행을 드래그하여 콘텐츠 순서를 변경합니다.

오른쪽 패널

Blocks를 사용하여 이메일에 콘텐츠를 추가하고, Settings를 사용하여 전체 이메일에 한 번에 적용되는 스타일을 지정합니다. 이메일 전체 스타일 구성을 참조하세요.

이메일 제작 시작하기

Blocks 패널에서 캔버스로 블록을 드래그하거나, 패널에서 블록을 클릭하여 추가합니다.
레이아웃이 준비될 때까지 같은 방법으로 블록을 계속 추가합니다.
이메일 전체 스타일링이 필요할 때 Settings 탭을 엽니다.

콘텐츠 블록 추가

Blocks 탭을 열고 캔버스로 블록을 드래그하거나, 블록을 클릭하여 추가합니다. 사용 가능한 블록:

Heading: 이메일의 제목 및 짧은 헤드라인
Text: 본문 및 긴 설명
Button: 클릭 가능한 행동 유도 문구
Image: 미디어 스토어의 사진, 업로드 또는 URL
Divider: 섹션을 시각적으로 구분하는 선
2 columns: 나란히 있는 두 개의 동일한 열
3 columns: 나란히 있는 세 개의 동일한 열
4 columns: 나란히 있는 네 개의 동일한 열
33 / 67: 왼쪽이 너비의 약 33%, 오른쪽이 약 67%를 차지하는 두 개의 열
67 / 33: 왼쪽이 너비의 약 67%, 오른쪽이 약 33%를 차지하는 두 개의 열
Timer: 제안 및 마감일을 위한 카운트다운
Menu: 탐색 또는 연락처와 같은 링크의 행 또는 열
Social: 소셜 프로필에 연결되는 아이콘
HTML: 양식, 설문조사 또는 내장 비디오와 같은 사용자 지정 HTML

제목 및 텍스트

Heading 및 Text 블록은 수신자가 이메일에서 읽는 내용을 담습니다. 캔버스에서 텍스트를 편집하고 도구 모음으로 서식을 지정합니다.

Heading 또는 Text 블록을 클릭하여 캔버스에서 내용을 편집합니다. 텍스트를 선택하면 굵게, 기울임꼴, 밑줄, 정렬, 링크 버튼 및 텍스트 스타일 드롭다운이 있는 서식 도구 모음이 나타납니다.

스타일 및 서식 옵션을 보여주는 텍스트 서식 도구 모음이 있는 캔버스에서 선택된 제목 블록

병합 태그는 수신자의 프로필에서 태그 값을 이메일에 삽입하는 자리 표시자로, 각 구독자가 개인화된 내용을 볼 수 있도록 합니다. 추가하려면 텍스트를 선택하고 도구 모음에서 Merge Tags를 클릭한 다음 계정에서 태그를 선택합니다.

이미지

Image 블록은 이메일에 사진을 표시합니다. 캔버스에서 선택하여 오른쪽 패널에서 Image 설정을 엽니다.

Add image / Replace image: 블록이 비어 있을 때 Add image를 클릭하거나, 사진이 이미 설정되어 있을 때 Replace image를 클릭합니다. 파일을 업로드하거나 미디어 스토어에서 선택할 수 있습니다.
Image URL: 호스팅된 이미지 링크를 붙여넣습니다.
Alt text: 접근성을 위해 이미지를 설명합니다.
Link URL: 이미지를 클릭했을 때 링크를 엽니다. 사용 가능한 링크 유형은 링크 추가를 참조하세요.
Link target: 링크를 같은 탭 또는 새 탭에서 엽니다.
File: 이미지를 추가한 후 사용 중인 파일의 경로를 표시합니다.

Spacing에서 Padding을 켜서 이미지 주위에 공간을 추가합니다. 모든 면에 동일한 패딩을 사용하려면 All sides를 사용하거나, More options를 켜서 각 면을 개별적으로 설정합니다.

Replace image, Image URL, Alt text, Link URL, Link target, File 및 Padding이 있는 이미지 설정 패널

버튼

Button은 이메일에서 클릭 가능한 행동 유도 문구입니다.

Button 블록을 클릭하여 캔버스에서 레이블을 편집합니다. 도구 모음을 사용하여 글꼴 크기, 텍스트 색상, 굵게, 기울임꼴, 밑줄 및 정렬을 변경합니다.

수신자가 버튼을 클릭했을 때 발생하는 작업을 설정하려면:

도구 모음에서 링크 아이콘을 클릭하여 Insert/Edit Link를 엽니다.
또는 오른쪽 패널의 Link 섹션에서 Action type 및 URL을 사용합니다.

사용 가능한 작업 유형은 링크 추가를 참조하세요.

오른쪽 패널의 Styles 아래:

Alignment: 왼쪽, 가운데 또는 오른쪽.
Background, Text color, Font size, Font family: 각 옵션을 켜서 기본 모양을 재정의합니다.
Border radius, Border color, Border width: 버튼의 모양과 윤곽선.
Width: 고정된 버튼 너비를 설정하거나 자동으로 둡니다.
Padding: 버튼 내부에 공간을 추가합니다. 균일한 패딩을 위해 All sides를 사용하거나, More options를 켜서 각 면을 개별적으로 설정합니다.

Alignment, Background, Text color, Font size, Border radius 및 Padding이 있는 오른쪽 패널의 버튼 스타일 설정

구분선

Divider는 콘텐츠 블록 사이의 수평선입니다. 이메일에서 섹션을 시각적으로 구분하는 데 사용합니다.

설정 패널에서 선 스타일(실선, 파선, 점선), 색상, 두께, 너비를 구성합니다.

오른쪽 패널에 선 스타일, 색상, 두께 및 너비 옵션이 있는 구분선 블록 설정

HTML

HTML 블록을 사용하면 사용자 지정 HTML을 이메일에 붙여넣을 수 있습니다. 사용자 지정 양식, 설문조사 또는 내장 비디오에 사용하세요.

예시

이 리드 양식은 새해 세일 프로모션 코드를 보내기 위해 이메일 주소를 수집합니다.

이메일 필드와 내 코드 받기 버튼이 있는 이메일 편집기의 HTML 리드 양식

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #CC0000;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
</style>
</head>
<body>

<h2>Get your New Year Sale code</h2>
<p>Enter your email and we'll send you an exclusive promo code for up to 50% off.</p>

<div id="form">
  <input type="email" placeholder="Your email address" />
  <button type="button">Get my code</button>
</div>

</body>
</html>

이 설문조사는 수신자가 어떤 카테고리를 쇼핑하고 있는지 묻고 각 옵션을 관련 세일 페이지에 연결합니다.

사용자가 무엇을 쇼핑하는지 묻는 네 가지 카테고리 옵션이 있는 이메일 편집기의 HTML 설문조사

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    color: #222;
  }
  .option:hover { border-color: #CC0000; background: #fff5f5; }
</style>
</head>
<body>

<h2>What are you shopping for?</h2>
<p>Pick a category and go straight to your deals</p>

<a class="option" href="https://example.com/sale/clothing">👗 Clothing</a>
<a class="option" href="https://example.com/sale/electronics">📱 Electronics</a>
<a class="option" href="https://example.com/sale/beauty">💄 Beauty</a>
<a class="option" href="https://example.com/sale/home">🏠 Home & Living</a>

</body>
</html>

이 예시는 새해 세일 프로모션 비디오를 이메일에 삽입합니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>New Year Sale — Up to 50% Off</h1>

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
</div>

</body>
</html>

HTML 블록에 직접 구독 취소 링크를 추가할 수도 있습니다:

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

%%PW_EMAIL_UNSUBSCRIBE%% 자리 표시자는 이메일이 전송될 때 Pushwoosh 구독 취소 URL로 대체됩니다.

메뉴

Menu 블록은 여러 개의 클릭 가능한 항목을 행 또는 열에 배치합니다. 탐색 바나 회사 연락처 목록에 사용하세요.

각 메뉴 항목에 대해 다음을 설정합니다:

Label: 수신자가 보는 텍스트
URL: 항목이 열리는 위치
Target: 같은 탭 또는 새 탭

블록 설정에서 다음을 설정할 수도 있습니다:

Direction: 수평 또는 수직
Alignment: 왼쪽, 가운데 또는 오른쪽
Separator: 항목 사이의 선택적 구분선
글꼴, 크기, 굵기, 글자 간격 및 링크/텍스트 색상

항목 레이블, URL, 방향, 정렬 및 구분선 옵션이 있는 메뉴 블록 설정

소셜

Social 블록은 프로필에 연결되는 소셜 미디어 아이콘 행을 표시합니다. 이메일에서 수신자를 Facebook, Instagram, X 및 기타 플랫폼으로 보내는 데 사용하세요.

플랫폼 항목을 추가한 다음 정렬, 아이콘 크기 및 아이콘 사이의 간격을 설정합니다.

카운트다운 타이머

Timer 블록은 이메일의 카운트다운입니다. 기간 한정 제안, 반짝 세일 및 이벤트 알림에 사용하세요.

설정 방법:

Countdown에서 End date와 End time을 설정한 다음, 타이머 레이블의 Timezone과 Language를 선택합니다.
Labels를 켜서 숫자 아래에 “일 / 시간 / 분 / 초” 캡션을 표시하거나, 끄면 숫자만 표시됩니다.
Appearance에서 Background, Digits color, Labels color 및 숫자(기본 40px)와 레이블(기본 16px)의 글꼴 크기를 설정합니다.
필요에 따라 Spacing(패딩)을 조정합니다.

카운트다운 종료 날짜 및 시간, 레이블, 모양 및 간격 옵션이 있는 타이머 블록 설정

열

Columns는 캔버스를 나란히 있는 섹션으로 분할하여 한 행에 콘텐츠를 서로 옆에 배치할 수 있도록 합니다.

다음 블록 중 하나를 캔버스로 드래그합니다:

2 columns: 두 개의 동일한 열
3 columns: 세 개의 동일한 열
4 columns: 네 개의 동일한 열
33 / 67: 왼쪽 열 약 33% 너비, 오른쪽 약 67%
67 / 33: 왼쪽 열 약 67% 너비, 오른쪽 약 33%

그런 다음 각 열에 콘텐츠를 추가합니다. 이메일의 모든 열에 대한 간격을 변경하려면 Settings → Columns defaults를 열고 외부 패딩, 열 패딩 및 열 사이의 간격을 조정합니다.

링크 추가

Insert/Edit Link 대화 상자를 사용하여 수신자가 버튼이나 선택한 텍스트를 클릭했을 때 발생하는 작업을 설정합니다. Action type을 선택한 다음 해당 작업에 대한 필드를 채웁니다.

웹사이트 열기

수신자가 클릭하면 링크를 엽니다. URL에 주소를 입력합니다.

Action type Open Website와 URL 필드가 있는 링크 삽입/편집 대화 상자

환경 설정 링크 관리

수신자가 수신할 이메일 카테고리를 선택할 수 있는 구독 환경 설정 센터에 대한 링크를 추가합니다. 링크는 자동으로 삽입됩니다.

구독 취소 링크

수신자가 규정 및 선호도에 따라 수신을 거부할 수 있도록 합니다.

HTML 블록에 구독 취소 링크를 추가할 수도 있습니다:

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

%%PW_EMAIL_UNSUBSCRIBE%% 자리 표시자는 이메일이 전송될 때 Pushwoosh 구독 취소 URL로 대체됩니다.

수신자가 구독 취소 링크를 클릭하면 어떻게 되나요

구독 환경 설정 센터가 활성화된 경우

수신자는 해당 이메일에 할당된 카테고리(예: 뉴스레터)에서만 구독이 취소됩니다. 카테고리 이름은 Unsubscribed Email Categories 태그에 추가됩니다.

재구독 및 환경 설정 관리 옵션이 있는 확인 화면이 나타납니다. 더 알아보기.

구독 환경 설정 센터가 활성화되지 않은 경우

수신자는 모든 마케팅 이메일 수신을 거부하고 Unsubscribed Emails 태그가 true로 설정됩니다. 거래 이메일은 영향을 받지 않으며 계속 전송됩니다. 메시지 유형에 대해 더 알아보기.

클릭 수는 메시지 기록의 구독 취소율에 계산됩니다.

웹 버전 링크

수신자가 받은 편지함에서 이메일을 보는 데 문제가 있는 경우 유용한 이메일의 웹 버전에 액세스할 수 있도록 합니다.

구독 양식 확인 링크

구독 양식 제출에 대한 확인 링크를 삽입합니다(예: 이중 옵트인 확인). 이중 옵트인에 대해 더 알아보기.

이메일 전체 스타일 구성

이메일 설정은 전체 이메일의 스타일을 제어합니다: 문서 크기 및 배경, 발신자 관련 옵션 및 블록의 기본 스타일.

오른쪽 패널에서 Settings 탭을 엽니다.

블록 및 열에 대한 문서, 이메일 옵션 및 기본 스타일 섹션이 있는 설정 탭

사용 가능한 섹션:

Document: 전체 이메일 영역의 크기 및 모양: 너비, 패딩, 배경색, 배경 이미지 또는 그라데이션, 텍스트 색상, 글꼴 모음 및 블록 사이의 간격.
Email options: 이메일에 대해 브라우저에서 보기 및 구독 취소 링크를 켜거나 끕니다.
Block defaults: 나중에 추가하는 블록에 대한 공유 시작 스타일로, 캔버스에서 블록을 재정의할 때까지 새 콘텐츠가 이메일과 일치하도록 합니다.
Columns defaults: 모든 열 레이아웃에 대한 간격: 외부 패딩, 각 열 내부의 패딩 및 열 사이의 간격.
Card defaults: 레이아웃에서 콘텐츠를 그룹화하는 카드 컨테이너의 시작 모양으로, 카드를 개별적으로 스타일링할 때까지 적용됩니다.
Button group defaults: 여러 버튼이 그룹으로 함께 있을 때의 간격 및 정렬.
Button defaults: 새 버튼 블록의 시작 모양으로, CTA가 이메일 전체에서 일관성을 유지하도록 하며, 개별적으로 스타일링할 때까지 적용됩니다.
Divider defaults: 새 구분선 블록의 시작 선 스타일, 색상, 두께 및 너비.

기본값은 개별 블록이 재정의하지 않는 모든 곳에 적용됩니다.

이메일 푸터 구성

모든 이메일에는 법적으로 요구되는 발신자 정보 및 구독 취소 링크를 위한 Footer 블록이 포함됩니다. 레이어 패널에서 Footer를 선택하여 설정을 엽니다.

Load from account를 사용하여 저장된 계정 수준 푸터를 가져오거나, Save as account default를 사용하여 현재 푸터를 향후 이메일의 시작점으로 재사용합니다.

Email type: Marketing 또는 Transactional. 구독 취소 가시성은 이 설정을 따릅니다.
Logo: 로고 URL을 설정하거나 갤러리에서 선택한 다음 너비를 px 단위로 설정하고 선택적 클릭스루 링크를 설정합니다.
Company name, Postal address, Copyright: 푸터의 발신자 신원.

Links & badges에서:

Footer links: 개인정보처리방침 또는 약관과 같은 레이블이 있는 링크를 추가합니다.
App store badges: 대상 URL이 있는 App Store 또는 Google Play 배지를 추가합니다.
Social links: 소셜 프로필에 연결되는 아이콘을 추가합니다.

계정에서 로드, 이메일 유형, 로고, 회사 이름, 우편 주소, 저작권 및 링크 및 배지가 있는 푸터 설정

Style에서:

Text color: 푸터 텍스트 색상을 설정합니다.
Font size (px): 푸터 글꼴 크기를 설정합니다.
Alignment: 왼쪽, 가운데 또는 오른쪽.
Underline links: 푸터 링크에 밑줄을 긋도록 설정합니다.

Options에서:

Unsubscribe link text: 마케팅 이메일의 관리되는 구독 취소 링크에 대한 레이블입니다. 거래 이메일에서는 생략됩니다.

이메일 콘텐츠 현지화

캔버스 위의 언어 전환기를 사용하여 언어를 추가하고 언어별로 콘텐츠를 편집합니다. 언어 추가 방법 알아보기.

현재 언어에 대해 아직 번역하지 않은 콘텐츠는 흐리게 표시됩니다. 입력을 시작하여 번역을 만듭니다. 번역을 할 때까지 기본 언어가 계속 표시됩니다.

이메일 편집기에서 흐리게 표시된 번역되지 않은 콘텐츠가 보이는 캔버스 위의 언어 전환기

이메일 저장

상단 바에서 Save를 클릭하여 변경 사항을 저장합니다. 상단 바의 Undo/Redo를 사용하여 편집 내용을 단계별로 되돌리거나 앞으로 이동합니다.

테스트 이메일 보내기

이메일 캠페인을 보내기 전에 테스트 이메일을 보내 수신자의 받은 편지함에서 콘텐츠가 어떻게 표시될지 미리 볼 수 있습니다.

상단 바에서 Test email을 클릭합니다.

열리는 창에서 저장된 테스트 기기를 선택하거나 이메일 주소를 입력합니다.

테스트 기기를 선택하거나 이메일 주소를 입력하는 필드가 있는 테스트 이메일 보내기 대화 상자

Send를 클릭하여 선택한 주소로 테스트 메시지를 보냅니다.

저장된 이메일 콘텐츠 사용

이제 이메일 콘텐츠가 준비되었으므로 이메일 캠페인에 사용할 수 있습니다. 사용 방법에 대해 더 알아보기