드래그 앤 드롭으로 이메일 디자인하기

​

개요

• 설정 – 전체 이메일에 적용되는 글로벌 스타일과 레이아웃
• 행 – 구조와 반응성을 제어하는 수평 레이아웃 컨테이너
• 콘텐츠 – 텍스트, 이미지, 버튼, HTML과 같은 개별 블록

​

권장 빌드 플로우

1. 설정에서 글로벌 스타일 설정
2. 행을 사용하여 레이아웃 구조 추가
3. 콘텐츠 블록 삽입
4. 개인화 및 링크 추가
5. 구독 취소 링크 추가 (마케팅 이메일용)
6. 템플릿으로 저장하거나 발송

​

설정

​

행

​

저장된 행

• Empty – 빈 행 템플릿
• My Saved Rows – 본인 또는 팀이 만든 행
• Sample Rows – OneSignal 예시

​

행 속성

​

콘텐츠

​

사용자 정의 폰트

<!-- Place this into a HTML block at the top of your email -->
<style type="text/css">
  /* Declare Bebas Neue (only loads in clients that support web fonts) */
  @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>

​

이미지 및 비디오

​

이메일용 권장 이미지 크기

​

링크

​

구독 취소 링크

• 에디터 (특수 링크)
• HTML 블록

1. 구독 취소 링크로 만들 텍스트를 선택하세요.
2. 툴바에서 링크 아이콘을 클릭하세요.
3. 특수 링크 > 구독 취소를 선택하세요.

HTML 블록에 다음을 붙여넣으세요:

<a href="[unsubscribe_url]">Unsubscribe</a>

​

HTML 블록

• 다크 모드 재정의 — prefers-color-scheme CSS 추가. 아래 다크 모드 스타일링을 참조하세요.
• 사용자 정의 폰트 — 대체 스택과 함께 @font-face 규칙 선언.
• 고급 레이아웃 — 다중 열 그리드, 조건부 콘텐츠, 또는 Outlook 전용 마크업.

​

개인화

​

다크 모드

​

다크 모드 스타일링이 필요한가요?

• 브랜드 색상 섹션 — 채도가 높은 색상은 다크 모드에서 거칠게 보여 가독성을 해칩니다
• 흰색/밝은 배경의 로고 또는 아이콘 — 배경은 반전될 수 있지만 이미지는 밝게 유지되어 보이지 않을 수 있습니다
• 색상 배경의 텍스트 — 반전된 배경이 반전되지 않은 텍스트 색상과 충돌할 수 있습니다
• 클릭 유도 버튼 — 버튼 배경이 예상치 못한 색상으로 반전될 수 있습니다

​

에디터에서 다크 모드 미리보기

​

이메일 클라이언트의 다크 모드 처리 방식

• 순수 흰색(#FFFFFF)과 순수 검정(#000000)을 피하세요. 완전 반전 클라이언트의 영향을 줄이기 위해 오프화이트와 진한 회색을 사용하세요.
• 투명 PNG는 주의해서 사용하세요. 어떤 배경색과도 잘 어울리지만, 투명 배경의 어두운 로고는 다크 모드에서 보이지 않게 됩니다. 로고에는 밝은 외곽선을 추가하거나 배경이 내장된 버전을 사용하세요.
• 텍스트가 포함된 이미지에서 어두운 텍스트는 흰색으로 외곽선을 추가하여 가독성을 보장하세요. 어두운 배경의 흰색 텍스트는 검정으로 외곽선을 추가하세요.

​

드래그 앤 드롭으로 다크 모드 스타일링

1

이메일 상단에 HTML 블록 추가

이메일의 첫 번째 행에 HTML 블록을 드래그하세요.

2

다크 모드 CSS 추가

HTML 블록에 다음을 붙여넣으세요. prefers-color-scheme: dark 미디어 쿼리는 수신자의 이메일 클라이언트가 다크 모드일 때만 스타일을 적용합니다.

HTML block

<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<style>
  :root {
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    .email-body {
      background-color: #1a1a1a !important;
      color: #f0f0f0 !important;
    }

    .email-header {
      background-color: #2d2d2d !important;
    }

    .email-button {
      background-color: #0a84ff !important;
    }
  }
</style>

3

문제가 있는 콘텐츠를 HTML 블록으로 교체

다크 모드에서 올바르게 렌더링되지 않는 콘텐츠 블록을 위에서 정의한 CSS 클래스를 사용하는 HTML 블록으로 교체하세요.

email-header

email-body

email-button

<div class="email-header" style="background-color: #f5f5f5; padding: 0; text-align: center;">
  <img src="https://dashboard.onesignal.com/assets/email/your-email-strategy-starts-here.jpg"
       alt="Your email strategy starts here"
       width="600"
       style="display: block; width: 100%; max-width: 600px; height: auto;" />
</div>

​

작업 저장

​

FAQ

​

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

​

Outlook에서 이메일이 다르게 보이는 이유는 무엇인가요?

​

최대 이메일 크기는 얼마인가요?

​

여러 캠페인에서 이메일의 일부를 재사용할 수 있나요?

​

발송 전에 이메일을 어떻게 미리보기하나요?

​

이메일에서 이모지가 작동하나요?

​

기존 HTML 이메일 템플릿을 어떻게 가져오나요?

1. 이메일 템플릿 전달을 사용하여 OneSignal에 이메일 전달
2. Create Template API를 사용하여 프로그래밍 방식으로 HTML 업로드
3. HTML을 HTML 에디터에 직접 복사 및 붙여넣기

​

관련 문서