콘텐츠로 건너뛰기

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

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

새 이메일 콘텐츠 만들기

Anchor link to
  1. Content → Email content로 이동합니다.
  2. 시작 방법을 선택합니다:
    • Create email content를 클릭하여 드래그 앤 드롭 편집기를 열고 처음부터 이메일을 만듭니다.
    • Create email content 옆의 화살표를 클릭한 다음 Use a template을 선택하여 갤러리의 사전 제작된 레이아웃에서 시작합니다.
    • Create email content 옆의 화살표를 클릭한 다음 HTML code를 선택하여 HTML 코드 편집기를 사용합니다. 자세히 알아보기
Use a template 및 HTML code를 보여주는 메뉴가 있는 이메일 콘텐츠 만들기 버튼

편집기 레이아웃 살펴보기

Anchor link to

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

상단 바

이메일 이름을 바꾸고, 변경 사항을 실행 취소하거나 다시 실행하고, 보내기 전에 문제를 파악하기 위해 Check를 실행하고, 작업을 저장합니다. 보내기 전에 이메일 확인하기를 참조하세요. 추가 작업을 위해 ⋮ 메뉴를 엽니다:

  • Preview: 수신자에게 렌더링될 이메일을 자체 데스크톱/모바일 토글로 확인합니다. 모바일 뷰 편집하기를 참조하세요.
  • Test email: 테스트 기기나 주소로 미리보기를 보냅니다. 테스트 이메일 보내기를 참조하세요.
  • Brand book: 저장된 로고, 색상, 글꼴 및 블록 기본값을 한 번의 클릭으로 이 이메일에 적용합니다. 자세히 알아보기
  • Brand styles 섹션: Brand book 을 열지 않고 저장된 브랜드를 적용하거나 블록별 스타일 재정의를 재설정합니다. 자세히 알아보기
  • Version history: 이 이메일의 이전에 저장된 버전을 보고 복원합니다. 이전 버전 복원하기를 참조하세요.
템플릿 이름, 실행 취소, 다시 실행, 테스트 이메일 및 저장이 있는 이메일 편집기의 상단 바 Submit for approval 버튼 옆에 Draft 버전 칩을 보여주는 이메일 콘텐츠 편집기

언어 / 제목 / 프리헤더 바

캔버스 위에서 편집 언어를 전환하고, 이메일의 제목과 프리헤더를 설정하고, Auto-translate를 사용하여 누락된 번역을 채웁니다. 언어 및 현지화 설정 방법 알아보기.

언어 전환기 및 텍스트 필드가 있는 캔버스 위의 언어, 제목 및 프리헤더 바

캔버스

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

Start with a block 프롬프트가 있는 이메일 편집기의 빈 캔버스

레이어 패널

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

카드, 이미지, 제목, 텍스트, 바닥글을 트리 구조로 나열하는 레이어 패널

오른쪽 패널

세 개의 탭 간에 전환합니다:

콘텐츠 블록 추가하기

Anchor link to
  1. 오른쪽 패널에서 Blocks 탭을 엽니다.
  2. 블록을 캔버스로 드래그하거나 블록을 클릭하여 이메일 끝에 추가합니다.
  3. 레이아웃이 준비될 때까지 블록을 계속 추가합니다.

각 블록 유형은 이메일에서 다른 목적을 수행합니다:

  • Heading: 제목 및 짧은 헤드라인
  • Text: 본문 및 긴 설명
  • Button: 클릭 가능한 행동 유도 버튼
  • Image: 미디어 스토어, 업로드 또는 URL의 사진
  • Video: YouTube 또는 Vimeo에서 열리는 클릭 가능한 비디오 포스터
  • Card: 하나의 레이아웃에 이미지, 제목, 텍스트, 버튼이 포함된 카드
  • Divider: 섹션을 구분하는 선
  • Columns: 나란히 배치된 레이아웃 (2, 3 또는 4개의 동일한 열, 또는 33/67 및 67/33 분할)
  • Products: 제품 카드 그리드 — 제품을 직접 입력하거나 제품 카탈로그 또는 수신자의 버려진 장바구니에서 가져옵니다.
  • Timer: 제안 및 마감일을 위한 카운트다운
  • Menu: 탐색 또는 연락처 링크의 행 또는 열
  • Social: 소셜 프로필에 연결되는 아이콘
  • HTML: 양식, 설문조사 또는 내장 비디오와 같은 사용자 지정 HTML

각 블록의 설정, 블록 저장 및 재사용 방법, 버튼 및 텍스트의 링크 유형에 대해서는 이메일 콘텐츠 블록 참조를 참조하세요.

특정 수신자에게 콘텐츠 표시하기

Anchor link to

일부 수신자에게만 블록을 표시하려면 표시 조건을 설정하세요.

모바일 뷰 편집하기

Anchor link to

콘텐츠 블록을 추가한 후 모바일로 전환하여 휴대폰에서 어떻게 보이는지 확인하고 조정합니다. 캔버스 위의 언어 전환기 옆에 있는 Desktop / Mobile 토글을 사용하여 실제 휴대폰 너비의 완전히 편집 가능한 모바일 뷰로 전환합니다. 데스크톱 레이아웃이 어떻게 적응하는지 미리 보는 대신, 구독자가 휴대폰에서 보게 될 방식 그대로 콘텐츠를 선택, 편집 및 재정렬합니다.

모바일에서 재정의할 수 있는 모든 설정 옆에는 확인란이 있습니다. 확인란이 꺼져 있으면 힌트가 상속된 데스크톱 값을 표시하고 설정은 계속해서 그 값을 사용합니다. 확인란을 켜서 모바일에 대한 별도의 값을 설정합니다. 다시 끄면 데스크톱 값으로 돌아갑니다.

기기별로 다른 패딩 및 글꼴 크기 설정하기

Anchor link to
  • 패딩: 모든 블록, 열, 카드 및 개별 요소(예: 텍스트, 이미지 또는 버튼)에는 모바일용으로 재정의할 수 있는 패딩 컨트롤이 있습니다. 캔버스를 Mobile로 전환하고 Padding 옆의 확인란을 켠 다음 새 값을 설정합니다. 확인란을 켤 때까지 데스크톱 패딩은 동일하게 유지됩니다.
  • 글꼴 크기: 텍스트 요소에서 **Font size (mobile)**을 켜서 모바일 전용 크기를 설정합니다. 이 재정의가 없으면 큰 헤드라인은 휴대폰 화면에 맞게 자동으로 축소됩니다.

모바일에서 열이 쌓이는 방식 제어하기

Anchor link to

Columns 레이아웃은 기본적으로 휴대폰에서 수직으로 쌓입니다. 모바일 뷰에서 Stack columns를 사용하여 각 Columns 블록이 어떻게 동작할지 설정합니다:

  • Stack: 열이 위에서 아래로 단일 열로 흐릅니다(기본값).
  • Keep row: 열이 나란히 유지되어 데스크톱 레이아웃을 보존합니다.
  • Reverse: 열이 역순으로 쌓입니다. 이미지 + 텍스트 행에 유용합니다: 데스크톱에서는 이미지를 오른쪽에 유지하지만 모바일에서는 상단에 표시합니다.
Columns 블록에 대한 Stack, Keep row, Reverse 옵션이 있는 오른쪽 패널의 모바일 섹션

기기별로 콘텐츠 표시 또는 숨기기

Anchor link to

블록이나 요소의 설정을 열고 Visibility 아래의 Hide on mobile 또는 Hide on desktop을 사용하여 한 기기에서만 표시되도록 설정하면, 두 개의 템플릿을 유지하지 않고도 기기별 배너, CTA 또는 탐색을 구축할 수 있습니다.

선택된 블록에 대한 Hide on mobile 및 Hide on desktop 확인란이 있는 가시성 설정

이메일 전체 스타일링 및 바닥글 구성하기

Anchor link to

주요 레이아웃이 완성된 후 Settings 탭을 열어 전체 이메일에 적용되는 글꼴, 색상, 간격을 설정하고, Footer에 회사 정보와 구독 취소 링크를 채웁니다. 여기의 기본값은 캔버스에서 재정의할 때까지 새 블록을 일관되게 유지합니다. 자세히 알아보기

이메일 저장하기

Anchor link to

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

이전 버전 복원하기

Anchor link to

Pushwoosh는 Save를 클릭할 때마다 스냅샷을 저장합니다. 이에 액세스하려면 상단 바의 ⋮ 메뉴를 열고 Version history를 선택합니다. 이메일이 한 번 이상 저장된 후에 사용할 수 있습니다.

왼쪽 패널에는 저장된 버전이 최신순으로 나열되며, 작성자, 타임스탬프 및 현재 버전에 Latest 배지가 표시됩니다. 버전을 선택하여 오른쪽에서 미리 본 다음 Restore를 클릭하여 편집기로 로드합니다.

왼쪽에 저장된 버전이 있고 오른쪽에 이메일 미리보기가 있는 버전 기록 패널

복원하면 버전의 HTML 콘텐츠, 로케일 변형 및 테마가 저장되지 않은 변경 사항으로 로드됩니다. Settings 탭에서 설정된 이메일 전체 스타일링 및 바닥글은 건드리지 않습니다. Save를 클릭할 때까지 아무것도 덮어쓰지 않습니다. 복원을 취소하려면 Cmd/Ctrl+Z를 누릅니다. Pushwoosh는 이메일당 가장 최근 20개의 버전을 보관하며, 승인을 기다리는 버전은 절대 제거되지 않습니다.

보내기 전에 이메일 확인하기

Anchor link to

상단 바에서 Check를 클릭하여 Smart check를 열고 일반적인 문제에 대해 이메일을 스캔합니다:

  • 링크가 없는 버튼
  • 채워지지 않은 AI 플레이스홀더
  • 빈 이미지 슬롯 및 누락된 alt 텍스트
  • WCAG AA를 충족하지 않는 텍스트 대비
  • 비어 있거나 너무 긴 제목
  • 마케팅 이메일 바닥글에 발신자 우편 주소 누락
  • Gmail의 잘림 한계(~102KB, 이후 Gmail이 메시지를 자름)를 초과하는 콘텐츠
  • 번역되지 않은 콘텐츠
  • 확인되지 않은 채로 남겨진 미검토 번역
  • 종료 날짜가 이미 지난 카운트다운 타이머
  • 깨지거나 비어 있는 규칙, 연결된 블록을 잃어버린 분기, 또는 계정에 동적 콘텐츠가 비활성화되어 적용되지 않는 표시 조건
  • 추가한 모든 언어에서 확인된 제목, 프리헤더, 바닥글 또는 본문의 깨진 Liquid 구문
  • API 액세스 토큰이 없는 Catalog rule, Cart 또는 Recommendations를 사용하는 Products 블록
Liquid 구문 오류, 버튼 링크 오류, 누락된 우편 주소 및 빈 프리헤더가 있는 스마트 체크 패널

결과를 클릭하면 캔버스에서 영향을 받는 요소로 바로 이동합니다.

Smart check는 열 때마다 Liquid 구문을 자동으로 검증합니다 — 별도로 클릭할 버튼이 없습니다. 검사가 실행되는 동안 패널에는 **Checking Liquid syntax…**가 표시됩니다. Smart check는 이 검사가 완료될 때까지 모든 것이 통과되었다고 보고하지 않으므로, 느리거나 실패한 Liquid 검사가 거짓 “모두 정상” 뒤에 숨을 수 없습니다.

테스트 이메일 보내기

Anchor link to

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

  1. 상단 바의 ⋮ 메뉴를 열고 Test email을 선택합니다.
상단 바의 오버플로 메뉴에 있는 테스트 이메일 옵션
  1. 열리는 창에서 최대 50명의 수신자를 추가합니다: 하나 이상의 저장된 테스트 기기를 선택하거나, 유효한 이메일 주소를 입력하여 목록에 추가합니다. 수신자를 제거하려면 해당 수신자의 **×**를 클릭합니다.
추가된 두 명의 수신자가 칩으로 표시되고 각각 제거할 수 있는 ×가 있는 테스트 이메일 보내기 대화 상자
  1. Send를 클릭하여 선택한 모든 수신자에게 테스트 메시지를 보냅니다. 모든 주소가 실패하면 Pushwoosh는 대화 상자에 오류를 표시합니다. 일부만 실패하면 실패한 주소를 토스트에 나열하고 나머지는 여전히 전달합니다.

저장된 이메일 콘텐츠 사용하기

Anchor link to

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