메인 콘텐츠로 건너뛰기

​
개요

OneSignal 드래그 앤 드롭 이메일 빌더를 사용하면 사용자의 받은 편지함에 표시되는 것과 정확히 같은 반응형 이메일을 시각적으로 디자인할 수 있습니다—완전한 HTML을 작성할 필요 없이 말이죠. 세 가지 핵심 구성 요소를 사용하여 이메일을 만듭니다:
  • 설정 – 전체 이메일에 적용되는 글로벌 스타일과 레이아웃
  • 행 – 구조와 반응성을 제어하는 수평 레이아웃 컨테이너
  • 콘텐츠 – 텍스트, 이미지, 버튼, HTML과 같은 개별 블록
이 가이드는 각 구성 요소를 안내하고 처음부터 끝까지 이메일을 만드는 권장 방법을 보여줍니다.
다음을 원한다면 드래그 앤 드롭 이메일 빌더를 사용하세요:
  • 완전한 HTML 관리 없이 이메일을 시각적으로 디자인 (HTML 블록 사용 가능)
  • 캠페인 간에 행이나 템플릿을 재사용
  • 비기술적 팀 멤버가 안전하게 콘텐츠를 편집할 수 있도록 허용
완전한 HTML 제어, 모든 곳에서의 사용자 정의 폰트, 또는 고급 다크 모드 로직이 필요하다면 HTML 에디터를 사용하세요.

​
권장 빌드 플로우 (기본값)

최상의 결과를 얻고 렌더링 문제를 줄이려면 이 순서를 따르세요:
  1. 설정에서 글로벌 스타일 설정
  2. 행을 사용하여 레이아웃 구조 추가
  3. 콘텐츠 블록 삽입
  4. 개인화 및 링크 추가
  5. 구독 취소 링크 추가 (마케팅 이메일용)
  6. 템플릿으로 저장하거나 발송
완성 시 이메일은 다음을 충족해야 합니다:
  • 너비가 600px 이하
  • 모바일과 데스크톱에서 깔끔하게 렌더링
  • 필수 준수 링크 포함

​
자체 템플릿 가져오기

이미 HTML 이메일 템플릿이 있다면 다음을 통해 OneSignal에 추가할 수 있습니다:
  1. 이메일 템플릿 전달
  2. Create Template API
  3. HTML 에디터에 HTML 복사 및 붙여넣기

​
설정

설정은 이메일의 기본 레이아웃과 스타일을 정의합니다. 명시적으로 재정의되지 않는 한 이러한 값들이 행과 콘텐츠 블록에 계단식으로 적용됩니다.
빌더 설정
디자인 설정설명
콘텐츠 영역 너비이메일의 너비(픽셀). 권장: 600px.
콘텐츠 영역 정렬콘텐츠를 왼쪽 또는 중앙에 정렬.
배경색콘텐츠 영역 뒤의 색상.
콘텐츠 영역 배경색콘텐츠 영역 내의 색상.
기본 폰트재정의되지 않는 한 모든 텍스트에 적용. 사용자 정의 폰트는 HTML이 필요.
링크 색상모든 링크의 기본 색상.
언어접근성을 위해 HTML lang 속성 설정. 기본값은 영어.
권장 기본값: 일관성을 보장하고 블록별 재정의를 줄이기 위해 설정에서 가능한 한 많은 스타일링을 구성하세요.

​
행

행은 이메일의 수평 레이아웃을 정의합니다. 각 행은 하나 이상의 열을 포함할 수 있고, 각 열은 콘텐츠 블록을 포함할 수 있습니다. 구조를 구축하기 위해 에디터에 행을 드래그 앤 드롭하세요.
이메일 구축을 위한 행 추가
행을 사용하여 레이아웃과 간격을 제어하세요. 주요 레이아웃 결정에 개별 콘텐츠 블록에 의존하는 것은 피하세요.

​
행 삭제 및 복제

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

​
저장된 행

템플릿 전체에서 재사용하려면 행의 저장 아이콘을 클릭하세요. 저장된 행에 대한 업데이트는 선택적으로 해당 행을 사용하는 모든 템플릿에 적용될 수 있습니다.
저장된 행에 액세스하려면 Rows 탭으로 이동하여 저장된 행 드롭다운을 여세요:
드롭다운 카테고리:
  • Empty – 빈 행 템플릿
  • My Saved Rows – 저장한 행
  • Sample Rows – OneSignal의 미리 만들어진 템플릿

​
행 속성

행 수준 설정을 편집하려면 행의 바깥쪽 가장자리를 클릭하세요.
마우스를 올렸을 때 행 대신 콘텐츠가 표시된다면 콘텐츠 블록을 선택한 것입니다. 라벨에 행이 표시될 때까지 바깥쪽 컨테이너 가장자리를 클릭하세요.
행 속성설명
배경행 뒤의 색상이나 이미지. 권장: 일관성을 위해 설정에서 배경색 설정.
테두리테두리 색상, 너비, 스타일.
레이아웃모바일이나 데스크톱에서 행 표시하거나 숨기기.
열열 추가, 제거, 크기 조정 및 열 패딩 조정.
행에서 배경 이미지 사용은 피하세요. 이메일 클라이언트 지원이 일관되지 않습니다. 행에 이미지만 있다면 대신 이미지 블록을 사용하세요.

​
콘텐츠

콘텐츠 블록은 사용자가 보는 실제 요소들입니다—텍스트, 이미지, 버튼, 구분선, HTML. 콘텐츠 블록을 행의 열로 드래그하세요. 열 너비에 자동으로 맞춰집니다.
사용 가능한 콘텐츠 블록
콘텐츠 블록 결정 규칙:
  • 대부분의 텍스트에는 텍스트 블록을 사용하세요.
  • 시각적 요소나 사용자 정의 타이포그래피에는 이미지 블록을 사용하세요.
  • 고급 스타일링이나 동작이 필요한 경우에만 HTML 블록을 사용하세요.

​
사용자 정의 폰트

드래그 앤 드롭 에디터는 기본적으로 시스템 폰트를 지원합니다. 사용자 정의 폰트를 사용하려면 HTML 블록을 사용해야 합니다.
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>
권장 기본값: 본문 텍스트에는 시스템 폰트를, 제목에만 사용자 정의 폰트를 사용하세요.
많은 이메일 클라이언트(Gmail과 Windows용 Outlook 포함)는 웹 폰트를 로드하지 않습니다. 항상 대체 폰트를 포함하거나 보장된 타이포그래피를 위해 이미지를 사용하세요.특정 폰트를 “강제”하려면 원하는 폰트를 사용한 이미지 사용을 고려해보세요.

​
이미지 및 비디오

OneSignal 대시보드에 이미지를 업로드하여 팀이 액세스할 수 있게 만들 수 있습니다. 에디터에서 직접 자르기, 필터링 등의 이미지 효과를 변경하고 적용할 수 있습니다. 이미지와 비디오의 URL도 사용할 수 있습니다. 제공된 URL을 통해 접근 가능한지 확인하세요.

​
이메일용 권장 이미지 크기

화면 비율:
  • 헤더/배너 이미지: 3:1 또는 4:1 (예: 600×200 또는 600×150)
  • 히어로 이미지: 16:9 또는 2:1 (예: 600×338 또는 600×300)
  • 정사각형 이미지: 1:1 (예: 300×300) — 제품 그리드에 적합
  • 썸네일: 1:1 또는 4:3
  • 최대 너비: 600–700px가 표준 (대부분의 이메일 클라이언트)
  • 레티나 디스플레이를 위해 2x로 디자인 (예: 1200px 너비, 600px로 표시)
파일 크기:
  • 개별 이미지를 100–200KB 미만으로 유지
  • 총 이메일 크기(이미지 포함)를 1MB 미만으로 유지
  • 작을수록 = 빠른 로딩 시간과 더 나은 전달률
파일 형식:
  • JPG: 사진에 최적
  • PNG: 그래픽, 로고, 투명성에 최적
  • GIF: 간단한 애니메이션용 (파일 크기를 작게 유지)
  • WebP: 이메일에서 아직 광범위하게 지원되지 않음 — 피하세요
기타 팁:
  • 접근성과 이미지가 로드되지 않을 때를 위해 항상 alt 텍스트 포함
  • 스타일링에 인라인 CSS 사용 (많은 클라이언트가 <style> 태그 제거)
  • 배경 이미지 피하기 (일관되지 않은 지원)
  • 클라이언트 간 테스트 (Gmail, Outlook, Apple Mail 모두 다르게 렌더링)
    • Outlook은 종종 이미지 차원을 무시하므로 HTML에서 width와 height 속성 설정

​
링크

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

​
구독 취소 링크

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

​
HTML 블록

HTML 블록은 사용자 정의 마크업과 스타일링을 허용합니다.
  • JavaScript는 지원되지 않음
  • 인라인 CSS 권장
  • 일부 클라이언트가 클래스와 ID 제거
HTML 블록은 다크 모드 재정의와 같은 고급 스타일링에 가장 적합한 위치입니다. 다크 모드 스타일링 모범 사례를 참조하세요.

​
개인화

liquid 템플릿을 사용하여 메시지를 개인화하세요. 예: {{ first_name | default: "there" }}
Liquid 템플릿을 사용한 메시지 개인화
자세한 내용은 메시지 개인화와 Liquid 구문 사용을 참조하세요.

​
이모지

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

​
작업 저장

이메일 디자인을 향후 사용을 위해 템플릿으로 저장할 수 있습니다.

​
FAQ

​
다크 모드를 어떻게 처리하나요?

대부분의 이메일은 다크 모드에서 허용 가능하게 렌더링되지만 테스트해보세요. 고급 다크 모드 스타일링을 위해서는 HTML 블록을 사용하세요. 다크 모드 스타일링 모범 사례를 참조하세요.

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

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

​
관련 문서