메인 콘텐츠로 건너뛰기

​
개요

OneSignal 드래그 앤 드롭 이메일 빌더를 사용하면 사용자의 받은 편지함에 표시되는 것과 똑같이 이메일을 시각적으로 디자인할 수 있습니다. 세 가지 핵심 구성 요소로 구성됩니다:
  • Settings – 메시지 전체에 적용되는 전역 구성
  • Rows – 콘텐츠를 가로로 배치하는 구조적 컨테이너
  • Content – 이미지, 텍스트, 버튼과 같은 개별 블록
이 가이드는 각 구성 요소와 이를 사용하여 이메일을 만드는 방법을 안내합니다. 추가 기능에 대한 자세한 내용은:

​
자체 템플릿 가져오기

이미 이메일 템플릿이 있나요? 다음 옵션을 사용하여 OneSignal 앱에 추가할 수 있습니다:
  1. 이메일 템플릿 전달
  2. Create Template API
  3. HTML 에디터에 HTML을 복사하여 붙여넣기

​
설정

설정은 메시지의 기본 스타일과 레이아웃을 제어합니다. 이러한 설정은 명시적으로 재정의하지 않는 한 행과 콘텐츠 블록으로 계단식으로 전달됩니다.

빌더에 대한 설정을 보여주는 이미지

디자인 설정설명
Content area width픽셀 단위의 이메일 너비. 기본값은 600px입니다.
Content area alignment콘텐츠를 왼쪽 또는 가운데로 정렬합니다.
Background color콘텐츠 영역 뒤의 배경색.
Content area background color콘텐츠 영역 내의 배경색.
Default font행 또는 콘텐츠 수준에서 사용자 지정하지 않는 한 이메일 전체에 적용되는 글꼴. 사용자 지정 글꼴에는 HTML이 필요합니다.
Link color모든 하이퍼링크 텍스트의 색상.
Language접근성을 위해 HTML의 lang 속성을 설정합니다. 기본값은 영어입니다.

​
행

행은 이메일 레이아웃의 가로 빌딩 블록입니다. 각 행에는 여러 열과 콘텐츠 블록이 포함될 수 있습니다. 행을 이메일 에디터로 끌어다 놓기만 하면 추가됩니다.

여러 행을 사용하는 기능을 보여주는 이미지

각 행과 해당 열은 전역 설정을 재정의할 수 있어 디자인과 반응성에 대한 세밀한 제어를 제공합니다.

​
행 삭제 및 복제

행을 선택하고 삭제 및 복제 아이콘을 사용하세요.

행을 삭제하고 복제하는 기능을 보여주는 이미지

​
저장된 행

템플릿 전체에서 재사용하려면 행의 저장 아이콘을 클릭하세요. 저장된 행에 대한 업데이트는 선택적으로 해당 행을 사용하는 모든 템플릿에 적용될 수 있습니다.

행을 저장하는 방법

저장된 행에 액세스하려면 Rows 탭으로 이동하여 저장된 행 드롭다운을 여세요:

저장된 행 선택

드롭다운 카테고리:
  • Empty – 빈 행 템플릿
  • My Saved Rows – 저장한 행
  • Sample Rows – OneSignal의 미리 만들어진 템플릿

​
행 속성

행을 클릭하여 속성을 편집하세요. 행 위에 마우스를 올렸을 때 “Row”라는 단어가 표시되는지 확인하세요. 그렇지 않으면 Content 블록을 선택하게 됩니다.
행 속성설명
Backgrounds콘텐츠 영역 뒤의 배경색 또는 이미지. 권장: 일관성을 위해 설정에서 배경색을 설정하세요. 클릭 가능한 콘텐츠가 없는 경우 행 배경 이미지 대신 Image Block을 사용하는 것을 고려하세요.
Borders테두리 색상, 너비 및 스타일.
Layout모바일과 데스크톱에서 행을 사용자 지정하거나 숨깁니다.
Columns행 내에서 열을 추가, 제거, 조정하고 더 많은 Content 블록을 추가합니다. 열에 특정한 패딩을 조정합니다.

​
콘텐츠

콘텐츠 블록은 이미지, 텍스트, 버튼 등 메시지의 핵심을 나타냅니다. 콘텐츠 블록을 행 열로 끌어다 놓으면 너비에 맞게 조정됩니다. 각 블록에는 패딩, 글꼴 크기, 정렬과 같은 자체 설정이 있습니다.

이메일을 디자인하기 위해 드래그 앤 드롭 콘텐츠 블록을 선택

​
사용자 지정 글꼴

설정에서 찾을 수 없는 글꼴이 필요한 경우 HTML 블록을 사용하여 사용자 지정 글꼴을 추가할 수 있습니다. 예를 들어: 
<!-- 이메일 상단의 HTML 블록에 붙여넣기 -->
<style type="text/css">
  /* Bebas Neue 선언 (웹 글꼴을 지원하는 클라이언트에서만 로드됨) */
  @font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9Wlhzg.ttf') format('truetype');
  }
</style>

<h1 style="font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
           font-size:36px; line-height:1.2; margin:0; text-transform:uppercase;">
  환영합니다!
</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;">
  구독해 주셔서 감사합니다.
</p>
드래그 앤 드롭 에디터에서 사용하는 방법:
  1. 이메일 상단에 HTML 블록을 추가하고 스니펫을 붙여넣으세요.
  2. Bebas Neue로 더 많은 헤드라인을 원한다면:
    • 추가 HTML 블록을 사용하고 동일한 h1 스타일을 복사하거나,
    • 텍스트 블록을 사용하고 인라인 CSS를 font-family:'Bebas Neue', Arial, Helvetica, sans-serif;로 설정하세요.
많은 이메일 클라이언트(예: Gmail, Windows용 Outlook)는 웹 글꼴을 로드하지 않습니다. 위 스택에서 자동으로 Arial/Helvetica로 폴백합니다.특정 글꼴을 “강제”하려면 원하는 글꼴이 있는 이미지를 사용하고 이메일에 이미지를 추가하는 것을 고려하세요. 이는 일부 경우에 더 많은 제어를 허용합니다.

​
이미지 및 비디오

업로드된 이미지는 팀 전체에서 액세스할 수 있습니다. 자르기, 필터링 등과 같이 이미지에 적용할 효과를 에디터에서 직접 변경할 수 있습니다. 이미지 및 비디오에 대한 URL을 사용할 수 있습니다. 제공된 URL을 통해 사용할 수 있는지 확인하세요.

​
링크

링크 추적은 기본적으로 활성화되어 있습니다. 다중 링크 추적을 사용할 수 있습니다. 자세한 내용은 링크 및 딥 링킹을 참조하세요.

​
구독 취소 링크

모든 마케팅 이메일에는 구독 취소 링크가 포함되어야 합니다. 구독 취소 링크가 없으면 이메일이 스팸으로 표시될 가능성이 높아집니다. 자세한 내용은 구독 취소 링크를 참조하세요. OneSignal은 사용할 때 사용자의 이메일 구독을 취소하는 기본 구독 취소 링크를 제공합니다. 원하는 경우 자체 사용자 지정 구독 취소 URL을 포함할 수도 있습니다. 이메일 구독을 올바르게 관리하는지 확인하세요(사용자 지정 구독 취소 페이지 만들기의 세부 정보). 다음을 통해 OneSignal의 기본 [unsubscribe_url]을 이메일에 추가하세요:
  • HTML Block: <a href="[unsubscribe_url]">구독 취소</a>
  • 텍스트를 선택하고 에디터의 Special links 옵션을 사용하거나 URL 필드에 [unsubscribe_url]을 설정하세요

이메일에 구독 취소 링크 추가

​
HTML 블록

HTML 블록으로 사용자 지정 HTML을 추가하세요. JavaScript는 지원되지 않습니다. 인라인 CSS가 권장됩니다. 일부 이메일 클라이언트는 class 또는 ID 속성을 제거합니다.
사용자 지정 HTML 블록은 다크 모드 재정의와 같은 고급 스타일을 추가하기에 가장 좋은 곳입니다. 자세한 내용은 다크 모드 스타일링 모범 사례를 참조하세요.
<div style="background: red;">이제 사용자 지정 스타일이 있습니다!</div>

​
개인화

리퀴드 템플릿을 사용하여 메시지를 개인화하세요. 예: {{ first_name | default: "there" }}

태그 치환 사용을 보여주는 이미지

자세한 내용:

​
이모지

이모지는 이메일 플랫폼마다 다르게 렌더링될 수 있습니다.

다양한 이메일 클라이언트에서 이모지가 렌더링되는 방식을 보여주는 이미지

​
작업 저장

이메일 디자인을 템플릿으로 저장하여 나중에 사용할 수 있습니다.

템플릿으로 저장하는 방법을 보여주는 이미지

​
FAQ

​
다크 모드를 어떻게 고려하나요?

대부분의 이메일은 다크 및 라이트 모드에서 올바르게 표시되지만 테스트하는 것을 권장합니다! 추가 지침은 다크 모드 스타일링 모범 사례를 참조하세요.

​
사용자 지정 구독 취소 링크를 어떻게 추가하나요?

자세한 내용은 사용자 지정 구독 취소 페이지 만들기를 참조하세요.

​
관련 문서