> ## Documentation Index > Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt > Use this file to discover all available pages before exploring further. # 드래그 앤 드롭으로 이메일 디자인하기 > OneSignal의 드래그 앤 드롭 이메일 빌더를 사용하여 반응형 이메일을 시각적으로 만드세요. 설정, 행, 콘텐츠 블록, 개인화, 준수 링크에 대해 알아보세요. ## 개요 OneSignal 드래그 앤 드롭 이메일 빌더를 사용하면 사용자의 받은 편지함에 표시되는 것과 정확히 같은 반응형 이메일을 시각적으로 디자인할 수 있습니다—완전한 HTML을 작성할 필요 없이 말이죠. 세 가지 핵심 구성 요소를 사용하여 이메일을 만듭니다: * **설정** – 전체 이메일에 적용되는 글로벌 스타일과 레이아웃 * **행** – 구조와 반응성을 제어하는 수평 레이아웃 컨테이너 * **콘텐츠** – 텍스트, 이미지, 버튼, HTML과 같은 개별 블록 아래 섹션에서 각 구성 요소와 이메일을 만드는 권장 순서를 설명합니다. 다음을 원한다면 드래그 앤 드롭 이메일 빌더를 사용하세요: * 완전한 HTML 관리 없이 이메일을 시각적으로 디자인 (HTML 블록 사용 가능) * 캠페인 간에 행이나 템플릿을 재사용 * 비기술적 팀 멤버가 안전하게 콘텐츠를 편집할 수 있도록 허용 완전한 HTML 제어, 모든 곳에서의 사용자 정의 폰트, 또는 고급 다크 모드 로직이 필요하다면 [HTML 에디터](./design-emails-with-html)를 사용하세요. ### 권장 빌드 플로우 최상의 결과를 얻고 렌더링 문제를 줄이려면 이 순서를 따르세요: 1. **설정**에서 글로벌 스타일 설정 2. **행**을 사용하여 레이아웃 구조 추가 3. **콘텐츠** 블록 삽입 4. 개인화 및 링크 추가 5. 구독 취소 링크 추가 (마케팅 이메일용) 6. 템플릿으로 저장하거나 발송 완성 시 이메일은 다음을 충족해야 합니다: * 너비가 600px 이하 * 모바일과 데스크톱에서 깔끔하게 렌더링 * 필수 준수 링크 포함 **렌더링 또는 전달률 문제를 일으키는 일반적인 실수:** * **구독 취소 링크 누락** — 마케팅 이메일에는 필수입니다. 없으면 받은 편지함 제공자가 이메일을 스팸으로 표시할 가능성이 높아집니다. * **600px보다 넓은 이메일** — 모바일에서 가로 스크롤이 생기고 많은 클라이언트에서 레이아웃이 깨집니다. * **행의 배경 이미지** — Outlook과 일부 모바일 클라이언트는 이를 렌더링하지 않습니다. 대신 이미지 블록을 사용하세요. * **대체 폰트 없음** — 사용자 정의 웹 폰트는 일부 클라이언트에서만 로드됩니다. 항상 시스템 폰트 대체 옵션을 선언하세요. * **지나치게 큰 이미지** — 1MB를 초과하는 이메일은 느리게 로드되거나 차단될 수 있습니다. 개별 이미지는 200KB 미만으로 유지하세요. *** ## 설정 설정은 이메일의 기본 레이아웃과 스타일을 정의합니다. 명시적으로 재정의되지 않는 한 이러한 값들이 행과 콘텐츠 블록에 계단식으로 적용됩니다. Global settings panel in the Drag and Drop Editor | 디자인 설정 | 설명 | | ---------- | ------------------------------------------- | | 콘텐츠 영역 너비 | 이메일의 너비(픽셀). **권장:** `600px`. | | 콘텐츠 영역 정렬 | 콘텐츠를 왼쪽 또는 중앙에 정렬. | | 배경색 | 콘텐츠 영역 뒤의 색상. | | 콘텐츠 영역 배경색 | 콘텐츠 영역 내의 색상. | | 기본 폰트 | 재정의되지 않는 한 모든 텍스트에 적용. 사용자 정의 폰트는 HTML이 필요. | | 링크 색상 | 모든 링크의 기본 색상. | | 언어 | 접근성을 위해 HTML `lang` 속성 설정. 기본값은 영어. | **권장 기본값:** 일관성을 보장하고 블록별 재정의를 줄이기 위해 설정에서 가능한 한 많은 스타일링을 구성하세요. *** ## 행 행은 이메일의 수평 레이아웃을 정의합니다. 각 행은 하나 이상의 열을 포함할 수 있고, 각 열은 콘텐츠 블록을 포함할 수 있습니다. 구조를 구축하기 위해 에디터에 행을 드래그 앤 드롭하세요. Adding rows to structure an email 행을 사용하여 레이아웃과 간격을 제어하세요. 주요 레이아웃 결정에 개별 콘텐츠 블록에 의존하는 것은 피하세요. ### 저장된 행 저장된 행을 사용하면 이메일과 템플릿 전체에서 헤더, 푸터 또는 반복 섹션을 재사용할 수 있습니다. 행의 **저장 아이콘**을 클릭하여 저장하세요. Saving a row for reuse **Rows > Saved rows**에서 저장된 행에 액세스하세요. Selecting a saved row 저장된 행 카테고리: * **Empty** – 빈 행 템플릿 * **My Saved Rows** – 본인 또는 팀이 만든 행 * **Sample Rows** – OneSignal 예시 ### 행 속성 행 수준 설정을 편집하려면 행의 바깥쪽 가장자리를 클릭하세요. 마우스를 올렸을 때 **행** 대신 **콘텐츠**가 표시된다면 콘텐츠 블록을 선택한 것입니다. 라벨에 **행**이 표시될 때까지 바깥쪽 컨테이너 가장자리를 클릭하세요. | 행 속성 | 설명 | | ----- | ----------------------------------------------- | | 배경 | 행 뒤의 색상이나 이미지. **권장:** 일관성을 위해 설정에서 배경색 설정. | | 테두리 | 테두리 색상, 너비, 스타일. | | 레이아웃 | 모바일이나 데스크톱에서 행 표시하거나 숨기기. | | 열 | 열 추가, 제거, 크기 조정 및 열 패딩 조정. | | 삭제/복제 | 행을 선택하고 **삭제** 또는 **복제** 아이콘을 사용하여 제거하거나 복사하세요. | 행에서 배경 이미지 사용은 피하세요. 이메일 클라이언트 지원이 일관되지 않습니다. 행에 이미지만 있다면 대신 **이미지 블록**을 사용하세요. *** ## 콘텐츠 콘텐츠 블록은 수신자가 보는 요소들입니다—텍스트, 이미지, 버튼, 구분선, HTML. 콘텐츠 블록을 행의 열로 드래그하세요. 열 너비에 자동으로 맞춰집니다. Available content blocks **콘텐츠 블록 결정 규칙:** * 대부분의 텍스트에는 **텍스트 블록**을 사용하세요. * 시각적 요소나 사용자 정의 타이포그래피에는 **이미지 블록**을 사용하세요. * 고급 스타일링이나 동작이 필요한 경우에만 **HTML 블록**을 사용하세요. ### 사용자 정의 폰트 드래그 앤 드롭 에디터는 기본적으로 시스템 폰트를 지원합니다. 사용자 정의 폰트를 사용하려면 HTML 블록을 사용해야 합니다. ```html HTML block theme={null}

환영합니다!

구독해주셔서 감사합니다.

``` 많은 이메일 클라이언트(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 사용 (많은 클라이언트가 ` ``` 다크 모드에서 올바르게 렌더링되지 않는 콘텐츠 블록을 위에서 정의한 CSS 클래스를 사용하는 HTML 블록으로 교체하세요. ```html email-header theme={null} ``` ```html email-body theme={null} ``` ```html email-button theme={null} ``` 미리보기 모드로 돌아가서 다크 모드 스타일이 올바르게 적용되었는지 확인하세요. *** ## 작업 저장 이메일 디자인을 향후 사용을 위해 [**템플릿**](./templates)으로 저장하세요. Save email as a template *** ## FAQ ### 사용자 정의 구독 취소 링크를 어떻게 추가하나요? 기본 `[unsubscribe_url]`을 자신의 URL로 교체하세요. 수신자가 구독 취소할 때 OneSignal에서 이메일 구독 상태를 업데이트하는 것은 사용자의 책임입니다. 설정 방법은 [사용자 정의 구독 취소 페이지 만들기](./create-custom-unsubscribe-page)를 참조하세요. ### Outlook에서 이메일이 다르게 보이는 이유는 무엇인가요? Windows의 Outlook은 Microsoft Word 렌더링 엔진을 사용하며, 이는 최신 CSS를 지원하지 않습니다. 일반적인 문제로는 무시되는 `max-width`, 축소되는 배경 이미지, 로드되지 않는 웹 폰트 등이 있습니다. Outlook에서 특별히 테스트하고 이미지에 명시적인 `width`와 `height` 속성이 있는 인라인 CSS를 사용하세요. ### 최대 이메일 크기는 얼마인가요? 총 이메일 크기(HTML + 이미지)를 1MB 미만으로 유지하세요. 102KB를 초과하는 HTML 이메일은 Gmail에 의해 잘리며, "전체 메시지 보기" 링크 뒤에 콘텐츠가 숨겨집니다. 이 임계값을 유지하기 위해 이미지를 최적화하고 사용하지 않는 코드를 제거하세요. ### 여러 캠페인에서 이메일의 일부를 재사용할 수 있나요? 예. 행의 저장 아이콘을 클릭하여 임의의 행을 **저장된 행**으로 저장하세요. 저장된 행은 **Rows > My Saved Rows**에 표시되며 모든 이메일에 드래그할 수 있습니다. 전체 이메일 재사용을 위해서는 전체 디자인을 [템플릿](./templates)으로 저장하세요. ### 발송 전에 이메일을 어떻게 미리보기하나요? 상단 툴바의 **미리보기** 버튼을 사용하여 데스크톱과 모바일에서 이메일이 어떻게 렌더링되는지 확인하세요. 실제 테스트를 보내려면 **테스트 이메일 발송**을 클릭하고 수신자 주소를 입력하세요. 테스트 이메일은 받은 편지함으로 전달되어 실제 이메일 클라이언트에서 렌더링, 링크, 개인화를 확인할 수 있습니다. ### 이메일에서 이모지가 작동하나요? 예, 하지만 이메일 클라이언트에 따라 다르게 렌더링됩니다. Windows의 Outlook이 가장 불일치합니다 — 이모지가 흑백 윤곽이나 상자로 표시될 수 있습니다. 이모지가 제목 줄이나 CTA 텍스트의 일부라면 발송 전에 클라이언트 간에 테스트하세요. ### 기존 HTML 이메일 템플릿을 어떻게 가져오나요? 기존 HTML 템플릿을 OneSignal에 가져오는 세 가지 방법이 있습니다: 1. [이메일 템플릿 전달](./email-template-forwarding)을 사용하여 OneSignal에 이메일 전달 2. [Create Template API](/reference/create-template)를 사용하여 프로그래밍 방식으로 HTML 업로드 3. HTML을 [HTML 에디터](./design-emails-with-html)에 직접 복사 및 붙여넣기 ## 관련 문서 OneSignal로 이메일 발송에 대한 엔드투엔드 가이드. 완전한 HTML 제어, 다크 모드 재정의, 고급 스타일링. 캠페인 전반에서 이메일 디자인을 저장하고 재사용하세요. 준수를 위한 기본 또는 사용자 정의 구독 취소 링크 추가. 태그, Liquid 구문, 동적 콘텐츠로 이메일을 개인화하세요. 제목 줄, 콘텐츠, 발송 시간을 테스트하여 참여도를 최적화하세요.