Stripo 드래그 앤 드롭 이메일 편집기 설정

Published: 2024년 10월 22일 · Last updated: 2026년 7월 21일 · By Marcus Biel

Maildroppa 이메일 편집기의 오른쪽에는 이메일 콘텐츠의 구조와 모양을 설정하고 맞춤화하는 데 도움이 되는 도구를 제공하는 이메일 설정 열이 있습니다. 이 열은 콘텐츠와 모양의 두 탭으로 나뉩니다.

콘텐츠 탭

콘텐츠 탭에서는 이메일 콘텐츠를 디자인하고 구성합니다. 여기에는 구조와 블록이라는 두 가지 주요 섹션이 있습니다.

1. 구조

구조는 콘텐츠를 행과 열로 배치하여 이메일의 레이아웃을 정의합니다. 다음과 같은 다양한 사전 디자인 레이아웃 중에서 선택할 수 있습니다.

• 단일 열
• 2열
• 다중 열

이 옵션에만 제한되지 않습니다. 여러 블록을 조합하여 원하는 맞춤 레이아웃을 만들 수 있으므로 디자인 요구 사항에 맞게 완전히 유연하게 구성할 수 있습니다.

• 드래그 앤 드롭: 이 섹션에서 구조를 간단히 드래그하여 이메일 디자인 영역에 놓으면 콘텐츠를 추가할 수 있습니다.
• 맞춤 설정: 구조를 추가한 후 이미지, 텍스트, 버튼과 같은 다양한 콘텐츠 블록을 넣을 수 있습니다.

2. 블록

블록은 이메일을 구성하기 위해 구조 안에 배치하는 콘텐츠 요소입니다.

사용 가능한 블록 유형은 다음과 같습니다.

• 이미지: 이미지(PNG, JPG, GIF)를 업로드하고 모양을 맞춤 설정합니다.
• 텍스트: 메시지를 전달할 텍스트를 추가하고 서식을 지정합니다.
• 버튼: 텍스트, 링크, 스타일을 맞춤 설정할 수 있는 클릭 가능한 버튼을 추가합니다.
• 스페이서: 다른 블록 사이의 레이아웃을 조정할 빈 공간을 삽입합니다.
• 동영상: YouTube, Vimeo 등의 플랫폼에서 동영상 콘텐츠를 삽입합니다.
• HTML: 고급 이메일 콘텐츠 맞춤 설정을 위해 사용자 지정 HTML 및 CSS 코드를 추가합니다.

각 블록은 유연하고 맞춤 설정할 수 있도록 설계되어 브랜드의 분위기와 스타일에 맞는 이메일을 만들 수 있습니다.

콘텐츠 블록 상세 설명

이미지 블록

Stripo의 드래그 앤 드롭 이메일 편집기에서 이미지 블록을 사용하면 이메일 캠페인에 이미지를 추가하고 맞춤 설정할 수 있습니다.

이미지 블록 추가

이메일에 이미지 블록을 추가하는 방법은 두 가지입니다.

방법 1

구조 안의 "여기에 콘텐츠 놓기" 영역 위에 마우스를 올린 다음 이미지 아이콘을 클릭합니다. 선택한 구조가 즉시 이미지 블록으로 전환됩니다.

방법 2

콘텐츠 탭의 블록 섹션으로 이동합니다. 이미지 블록을 이메일 레이아웃에서 원하는 구조로 드래그합니다. 이 방법을 사용하면 이미지를 배치할 위치를 더 세밀하게 제어할 수 있습니다.

이미지 업로드

이미지 블록을 추가한 후에는 두 가지 방법으로 이미지를 업로드할 수 있습니다.

드래그 앤 드롭

컴퓨터에서 이미지 파일(PNG, JPG, GIF)을 이미지 블록 안에 표시되는 업로드 상자로 직접 드래그하여 놓을 수 있습니다.

컴퓨터에서 업로드

또는 이미지 블록의 클라우드 아이콘을 클릭하여 파일 브라우저를 열고 컴퓨터에서 이미지(최대 2MB)를 선택할 수 있습니다. 선택한 이미지는 블록과 오른쪽 콘텐츠 탭에 모두 표시됩니다.

이미지 변경

이미지를 교체하려면 콘텐츠 탭에 있는 이미지 변경 옵션을 사용합니다. 원형 이미지 변경 아이콘을 클릭하면 새 이미지를 업로드하거나 외부 URL의 이미지에 연결할 수 있습니다.

이미지 편집

이미지를 업로드한 후 플랫폼에서 직접 추가로 편집할 수 있습니다. Stripo에 내장된 이미지 편집기를 사용하면 이메일 편집기를 벗어나지 않고 이미지를 향상하고 조정할 수 있습니다.

이미지 편집기 열기

1. 이미지를 업로드한 후 이미지 편집 버튼을 클릭합니다. 이미지 편집기 인터페이스가 열립니다.
2. 편집기 상단 메뉴 막대에 다양한 도구가 표시됩니다.

사용 가능한 이미지 편집 도구

• 필터 한 번의 클릭으로 다음과 같은 다양한 필터를 적용합니다.

  • 그레이스케일
  • 흑백
  • 선명하게
  • 반전
  • 세피아
  • 밝기
  • 색상

• 크기 조정 이미지의 크기를 조정합니다. 다음 작업을 수행할 수 있습니다.

  • 특정 너비와 높이를 지정합니다.
  • 가로세로 비율을 유지합니다.

• 자르기 유지할 이미지 영역을 선택하고 원하지 않는 부분을 제거합니다.

• 변형 이미지를 회전하거나 뒤집습니다.

  • 가로
  • 세로

• 그리기 그리기 도구를 사용하여 이미지 위에 선이나 사용자 지정 도형과 같은 자유 형식 요소를 추가합니다.

• 텍스트 이미지에 직접 텍스트를 추가합니다. 다음 항목을 맞춤 설정할 수 있습니다.

  • 글꼴
  • 크기
  • 색상
  • 정렬

• 도형 및 스티커 다음 요소를 겹쳐 이미지의 완성도를 높입니다.

  • 미리 만들어진 도형
  • 재미있는 스티커

• 프레임 다양한 프레임 중에서 선택하여 이미지에 세련된 테두리를 추가합니다.

• 모서리 모서리 스타일을 조정하여 깔끔한 모양을 만듭니다.

• 배경 더 깔끔한 모양을 위해 이미지의 배경을 제거하거나 교체합니다.

편집 내용 저장

원하는 변경을 마쳤으면 편집기 왼쪽 상단의 저장 버튼을 클릭합니다. 편집된 이미지가 이메일 레이아웃의 원본 이미지를 자동으로 대체합니다.

이미지 설정

이미지를 업로드한 후 오른쪽 콘텐츠 탭에서 제공되는 이미지 설정 옵션을 사용하여 이미지를 맞춤 설정할 수 있습니다.

링크

이미지에 링크를 추가합니다. 다음과 같은 다양한 링크 유형 중에서 선택할 수 있습니다.

• 웹사이트(HTTP, HTTPS)
• 메일(mailto:)
• 파일(ftp)
• 소셜 공유(Facebook, X (이전 Twitter), LinkedIn, Pinterest)

이 옵션은 링크 설정 드롭다운에서 찾을 수 있습니다.

대체 텍스트

이미지가 로드되지 않을 때 표시될 대체 텍스트를 추가합니다. 이 텍스트는 접근성에도 유용하며, 화면 판독기가 시각 장애가 있는 수신자에게 이미지를 설명할 수 있도록 합니다.

정렬

컨테이너 안에서 이미지가 정렬되는 방식을 선택합니다. 왼쪽, 가운데, 오른쪽으로 정렬할 수 있습니다.

크기

더하기/빼기 버튼을 사용하거나 원하는 크기를 입력하여 이미지의 너비와 높이를 수동으로 조정합니다.

"너비에 맞춤" 옵션을 활성화하면 이미지가 컨테이너의 전체 너비에 자동으로 맞춰집니다.

반응형 이미지

"반응형 이미지" 옵션을 활성화하면 특히 모바일 기기에서 이미지가 다양한 화면 크기에 맞게 조정됩니다.

패딩

이미지 주변의 패딩을 맞춤 설정하여 이미지와 주변 콘텐츠 사이의 공간을 조정합니다. 모든 면에 동일하게 패딩을 적용하거나 각 면(위, 아래, 왼쪽, 오른쪽)을 개별적으로 설정할 수 있습니다.

앵커 링크

이미지에 앵커 링크를 지정하면 수신자가 이미지를 클릭했을 때 같은 이메일 내의 특정 섹션으로 이동할 수 있습니다. 단, Gmail 및 Apple Mail과 같은 일부 이메일 클라이언트에서는 앵커 링크가 작동하지 않을 수 있습니다.

텍스트 블록

다음 설정을 사용하여 텍스트 블록의 모양과 기능을 맞춤 설정할 수 있습니다. 각 옵션을 사용하면 텍스트 표시 방식을 세밀하게 조정하여 디자인 선호 사항에 정확히 맞출 수 있습니다.

텍스트 도구 모음

텍스트 블록을 클릭하면 콘텐츠 영역 위에 텍스트 도구 모음이 표시되어 자주 사용하는 텍스트 서식 옵션에 빠르게 액세스할 수 있습니다. 도구 모음에서 사용할 수 있는 기능은 다음과 같습니다.

1. 문단 형식

일반 텍스트에는 일반을 선택하고, 이메일에서 구조화된 계층을 만들려면 다양한 제목 수준(제목 1~제목 6) 중에서 선택하여 문단 스타일을 설정합니다. 이를 통해 콘텐츠를 더 읽기 쉽고 체계적으로 구성할 수 있습니다.

2. 글꼴

기본 글꼴은 Arial이지만 Georgia, Helvetica, Courier New와 같은 일반적인 글꼴을 비롯해 다양한 글꼴 중에서 선택할 수 있습니다. 검색 기능을 사용하여 특정 글꼴을 빠르게 찾을 수도 있습니다.

3. 글꼴 크기

글꼴 크기를 8pt에서 72pt까지 조정할 수 있습니다. 기본값은 대부분의 이메일 본문 텍스트에 적합한 14pt입니다. 드롭다운에서 원하는 글꼴 크기를 빠르게 설정할 수 있습니다.

4. 텍스트 스타일

다음 옵션을 사용하여 텍스트 스타일을 지정합니다.

• 굵게(B): 텍스트를 굵게 표시하여 강조합니다.
• 기울임꼴(I): 텍스트를 기울여 보다 스타일리시하게 표시합니다.
• 밑줄(U): 텍스트에 밑줄을 추가하며, 일반적으로 하이퍼링크에 사용됩니다.
• 취소선(S): 텍스트 가운데 선을 그어 수정되었거나 삭제된 내용을 표시합니다.

5. 고급 텍스트 스타일(점 3개 메뉴)

도구 모음의 점 3개를 클릭하면 추가 옵션이 펼쳐집니다.

• 아래 첨자: 기준선 아래로 텍스트를 내립니다(각주나 화학식에 유용).
• 위 첨자: 기준선 위로 텍스트를 올립니다(지수나 서수에 일반적으로 사용).
• 서식 지우기: 적용된 서식을 모두 제거하고 텍스트를 기본 스타일로 되돌립니다.

6. 텍스트 및 배경색

• 텍스트 색상: 텍스트 색상 버튼을 클릭하여 팔레트에서 선택하거나 정확한 색상 지정을 위해 16진수 코드를 입력합니다.
• 배경색: 텍스트의 배경(강조) 색상을 선택합니다.

7. 텍스트 정렬

블록 안에서 텍스트를 정렬합니다.

• 왼쪽 정렬: 텍스트를 왼쪽에 맞춥니다.
• 가운데: 텍스트를 가운데에 배치합니다.
• 오른쪽 정렬: 텍스트를 오른쪽에 맞춥니다.
• 양쪽 맞춤: 블록 너비 전체에 텍스트를 균등하게 배치합니다.

8. 목록

순서 있는 목록(번호 매기기)과 순서 없는 목록(글머리 기호)을 만듭니다.

• 글머리 기호 목록 삽입/제거: 글머리 기호를 추가하거나 제거합니다.
• 번호 매기기 목록 삽입/제거: 번호 매기기 목록을 추가하거나 제거합니다.

9. 줄 바꿈

텍스트 블록 내 줄 바꿈을 활성화하거나 비활성화합니다. 활성화하면 긴 텍스트 줄이 자동으로 다음 줄로 이동합니다.

10. 들여쓰기

텍스트의 들여쓰기를 조정합니다.
- **들여쓰기 늘리기**: 텍스트를 여백에서 더 멀리 이동하여 하위 항목이나 인용문에 유용합니다.
- **들여쓰기 줄이기**: 들여쓰기를 줄여 텍스트를 왼쪽 여백에 가깝게 이동합니다.
![텍스트 들여쓰기](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. 하이퍼링크 삽입

이메일 콘텐츠에서 하이퍼링크를 추가, 편집, 관리하는 방법을 알아보세요.

링크 추가 또는 편집 단계

a) 텍스트 강조 표시

하이퍼링크로 만들 텍스트를 선택합니다.

b) 링크 아이콘 클릭

텍스트 도구 모음에서 링크 아이콘을 클릭합니다.

c) 설정 패널에서 링크 편집

링크 옵션이 있는 오른쪽 설정 패널이 표시됩니다.

• 링크 필드: URL을 입력하거나 사전 정의된 옵션에서 선택합니다.
• 태그: 구독자를 분류하거나 자동화를 실행할 태그를 추가합니다.

발송 후 링크 수정

구독자 2,365명에게 새 캠페인을 발송한 뒤 단순한 오타 때문에 링크 하나가 깨진 것을 발견하는 것보다 더 난감한 일은 없습니다. 블랙 프라이데이 판매도 물거품이 되죠!

다행히 이메일이 구독자에게 이미 발송된 후에도 깨진 링크를 수정할 수 있습니다.

a) 캠페인 보기

개요에서 발송된 캠페인을 찾고 점 3개를 클릭한 다음 캠페인 보기를 선택합니다.

b) 링크 또는 태그 수정

캠페인 세부 정보의 링크 목록으로 스크롤하여 다음 작업을 수행합니다.

• 링크 대상 업데이트: 잘못된 URL을 수정합니다.
• 태그 관리: 자동화를 위한 태그를 추가하거나 제거합니다.

참고: 링크 리타게팅 기능을 사용하려면 캠페인 설정에서 클릭 추적이 활성화되어 있어야 합니다.

링크 모양 맞춤 설정

오른쪽 설정 패널에서 링크의 모양을 조정할 수 있습니다.

• 링크 색상: 색상을 선택하거나 16진수 코드를 입력합니다.

• 링크 밑줄: 더 깔끔한 모양을 위해 링크 밑줄을 활성화하거나 비활성화합니다.

12. 개인화 태그

개인화 태그를 사용하여 수신자의 이름이나 기타 사용자 지정 필드와 같은 동적 콘텐츠를 추가합니다.

• 도구 모음에서 개인화 태그 드롭다운에 액세스하여 이름, 이메일, 국가와 같은 일반 필드를 선택하거나 사용자 지정 필드를 정의하면 수신자별로 이메일을 맞춤 설정할 수 있습니다.

13. 이모지

이모지를 포함하여 텍스트에 시각적인 매력을 더합니다.

• 도구 모음에서 이모지 아이콘을 클릭하면 분류된 이모지 목록이 열립니다.
• 호환성 참고: Outlook과 같은 일부 클라이언트에서는 이모지가 제대로 표시되지 않을 수 있으므로 이메일을 테스트하세요.

14. 표 및 특수 문자

도구 모음 끝에서 점 3개를 클릭하면 고급 옵션이 더 표시됩니다.

표 삽입

이메일 레이아웃을 개선하기 위해 표를 만들고 맞춤 설정합니다.

• 필요에 따라 행, 열, 셀 간격, 패딩, 테두리 크기를 지정합니다.

특수 문자 삽입

기호, 악센트 문자 및 기타 표준이 아닌 문자를 사용하여 텍스트를 보완합니다.

• 특수 문자 옵션에 액세스하여 다양한 문자를 찾아봅니다.

추가 텍스트 블록 설정(오른쪽 패널)

오른쪽 패널에서는 텍스트 블록의 모양과 기능을 폭넓게 제어할 수 있습니다. 사용 가능한 설정은 다음과 같습니다.

1. 텍스트 색상

색상 선택기를 사용하거나 16진수 코드를 입력하여 텍스트 색상을 지정합니다.

2. 배경색

텍스트 블록의 사용자 지정 배경색을 설정합니다. 기본적으로 배경은 투명합니다.

3. 링크별 설정

텍스트 블록에 링크가 포함되면 설정에 추가 옵션이 표시됩니다.

• 링크 색상: 색상 선택기 또는 16진수 코드를 사용하여 링크 색상을 조정합니다.

• 링크 밑줄: 텍스트 블록 내 링크의 밑줄 옵션을 켜거나 끕니다.

• 링크 편집: 콘텐츠 영역에서 링크를 선택하여 설정 패널에서 URL을 편집합니다. "태그"라는 드롭다운 메뉴를 사용하여 링크에 태그를 지정하거나 업데이트할 수도 있습니다.

4. 정렬

컨테이너 안에서 텍스트 블록을 왼쪽, 가운데, 오른쪽으로 정렬합니다.

5. 고정 높이

이 옵션을 활성화하여 텍스트 블록의 고정 높이를 설정합니다. 텍스트의 세로 정렬도 위, 가운데, 아래로 지정할 수 있습니다.

6. 줄 간격

텍스트 줄 사이의 간격을 조정합니다. 좁게, 보통, 넓게 중에서 선택합니다.

7. 패딩

텍스트 블록 주변의 공간을 조정합니다. 모든 면에 동일하게 패딩을 적용하거나 각 면(위, 아래, 왼쪽, 오른쪽)을 개별적으로 설정합니다.

8. 앵커 링크

독자가 이메일의 특정 섹션으로 이동할 수 있도록 앵커 링크를 만듭니다. 일부 이메일 클라이언트는 앵커 링크를 지원하지 않는다는 점에 유의하세요.

버튼 블록

버튼 블록을 사용하면 기능과 스타일을 맞춤 설정할 수 있는 클릭 가능한 버튼을 이메일에 추가할 수 있습니다.

링크 설정

링크 옵션은 수신자가 버튼을 클릭했을 때 실행되는 동작을 결정합니다.

사용 가능한 링크 유형

• 일반 사이트 링크(HTTP 또는 HTTPS): 사용자를 웹페이지로 이동시킵니다.
• 메일 링크: 사용자의 이메일 클라이언트를 열어 새 이메일을 작성합니다.
• 파일 링크(FTP, FTPS): FTP 서버의 파일로 연결합니다.
• Skype: Skype 통화 또는 채팅을 시작합니다.
• 전화(tel): 호환되는 기기에서 전화를 시작합니다.
• SMS: 수신자 번호가 미리 입력된 메시지 앱을 엽니다.
• Viber: 메시지나 통화를 위해 Viber 앱을 엽니다.
• 다른 프로토콜 유형: 위에 나열되지 않은 사용자 지정 프로토콜을 지정합니다.

소셜 공유 옵션

버튼을 소셜 공유 또는 이메일 공유용으로 설정할 수도 있습니다.

• Facebook
• X (이전 Twitter)
• LinkedIn
• Pinterest
• 이메일 공유

URL 필드

링크 유형 옆의 URL 필드(일반적으로 https://로 시작)에 링크 유형에 해당하는 구체적인 주소를 입력합니다.

버튼 레이블

클릭 유도 문구를 반영하도록 버튼 레이블을 맞춤 설정합니다. 기본 레이블은 "버튼"이지만 "자세히 알아보기", "지금 구독하기", **"지금 쇼핑하기"**와 같은 문구로 변경할 수 있습니다.

텍스트 스타일

텍스트 스타일 설정을 사용하면 버튼 텍스트의 모양을 조정할 수 있습니다.

글꼴 선택

다음과 같은 다양한 표준 글꼴 중에서 선택할 수 있습니다.

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

비표준 글꼴의 경우 다음 옵션도 사용할 수 있습니다.

• Arvo
• Lato
• Lora
• Merriweather
• Merriweather Sans
• Noticia Text
• Open Sans
• Playfair Display
• Roboto
• Source Sans Pro

글꼴 목록 상단의 검색 상자를 사용하면 특정 글꼴을 빠르게 찾을 수 있습니다.

글꼴 크기 및 서식

• 글꼴 크기: 버튼 텍스트를 얼마나 두드러지게 표시할지에 따라 8~72 중에서 선택합니다.
• 텍스트 서식: "B" 또는 "I" 아이콘을 사용하여 굵게 또는 기울임꼴을 적용해 버튼 텍스트를 강조합니다.

색상 설정

색상 설정을 조정하여 버튼의 모양을 맞춤 설정합니다.

1. 버튼 색상: 버튼의 배경색을 변경합니다. 기본값은 녹색( #31cb4b)입니다. 16진수 코드 필드 또는 색상 선택기를 사용하여 새 색상을 선택합니다.

2. 텍스트 색상: 버튼 텍스트의 색상을 지정합니다. 기본값은 흰색( #ffffff)입니다. 가독성을 위해 버튼 배경과 대비가 잘 되는 색상을 선택합니다.

3. 배경색: 버튼 컨테이너의 배경을 조정합니다. 기본적으로 투명하지만 이메일 배경에서 버튼이 돋보이도록 변경할 수 있습니다.

테두리 반경

테두리 반경 설정을 사용하여 버튼 모서리의 둥근 정도를 조절합니다.

• 기본값: 30(적당히 둥근 모서리).
• 범위: 0(각진 모서리)~100(알약 모양 버튼).

참고: Microsoft Outlook에서 둥근 모서리가 올바르게 표시되도록 하려면 모양 탭에서 "Outlook 지원" 옵션을 활성화하세요.

정렬

정렬 설정을 사용하여 콘텐츠 영역 안에서 버튼의 위치를 지정합니다.

• 옵션: 왼쪽, 가운데, 오른쪽.
• 일반적인 사용: 강조하려면 가운데 정렬을, 디자인의 일관성을 위해 왼쪽 또는 오른쪽 정렬을 사용합니다.

고정 높이

고정 높이 옵션을 활성화하여 버튼 크기를 일정하게 유지합니다.

1. 기본값: 비활성화.
2. 최소 높이: 44픽셀.
3. 콘텐츠 세로 정렬: 고정 높이가 활성화되면 버튼 콘텐츠를 정확하게 배치하도록 위, 가운데, 아래에 정렬할 수 있습니다.

아이콘이 있는 버튼

아이콘이 있는 버튼 옵션을 사용하면 버튼 텍스트 옆에 아이콘을 추가하여 시각적 매력을 높이고 클릭 유도 문구를 강화할 수 있습니다. 이 기능은 기본적으로 비활성화되어 있습니다.

• 지원 형식: 최대 파일 크기 2MB의 PNG, JPG, GIF 형식 아이콘을 업로드할 수 있습니다.
• 아이콘 위치: 버튼 텍스트의 왼쪽 또는 오른쪽에 아이콘을 표시하도록 선택합니다.

참고: 다음을 포함한 Windows용 Microsoft Outlook의 특정 버전에서는 아이콘이 표시되지 않습니다.

• Outlook 2002, 2007, 2010, 2013, 2016, 2019. 이는 해당 이메일 클라이언트가 HTML 이메일을 렌더링하는 방식 때문입니다. 잠재고객 중 상당수가 이러한 클라이언트를 사용하는 경우 이 제한을 고려하세요.

테두리 설정

버튼의 테두리를 맞춤 설정하여 스타일과 강조 효과를 더합니다.

• 테두리 너비: 왼쪽, 오른쪽, 위, 아래 각 면의 너비를 개별적으로 최대 40픽셀까지 설정합니다.
• 테두리 스타일: 실선, 점선, 점묘선 중에서 선택합니다.
• 테두리 색상: 색상 선택기를 사용하거나 16진수 코드를 입력하여 브랜드 또는 디자인 구성에 맞는 테두리 색상을 지정합니다.

내부 패딩

콘텐츠(텍스트와 아이콘)와 버튼 테두리 사이의 버튼 내부 공간을 조정합니다.

• 맞춤 설정 옵션: 왼쪽, 오른쪽, 위, 아래의 패딩 값을 최대 99픽셀까지 지정합니다.
• 영향: 내부 패딩은 버튼의 전체 크기와 버튼 안 콘텐츠의 위치에 영향을 줍니다.

외부 패딩

이메일 레이아웃의 다른 요소와 비교한 버튼의 위치를 조정하도록 버튼 외부의 공간을 제어합니다.

• 맞춤 설정 옵션: 왼쪽, 오른쪽, 위, 아래의 외부 패딩 값을 최대 40픽셀까지 설정합니다.
• 사용 사례: 버튼이 다른 콘텐츠나 이메일 가장자리에 너무 가깝게 표시되지 않도록 합니다.

앵커 링크 추가

앵커 링크를 사용하면 독자를 같은 이메일 내의 특정 섹션으로 이동시킬 수 있어 긴 뉴스레터에서 빠른 탐색을 제공합니다.

• 앵커 이름: 이메일 내의 대상을 정의하고 버튼을 이 앵커에 연결합니다. 클릭하면 이메일이 지정된 섹션으로 스크롤되어 사용자 탐색이 개선됩니다.

중요: 다음을 포함한 일부 이메일 클라이언트에서는 앵커 링크가 지원되지 않습니다.

• iOS Gmail 앱
• iOS Apple Mail
• Android용 Outlook 앱
• macOS용 Outlook 앱
• AMP 이메일

이메일을 철저히 테스트하여 다양한 이메일 클라이언트에서 기능이 작동하는지 확인하고 이 기능이 잠재고객에게 적합한지 판단하세요.

스페이서 블록

스페이서 블록을 사용하면 이메일 콘텐츠에 크기를 조정할 수 있는 공간을 추가하여 크기, 정렬, 모양, 내부 간격을 제어할 수 있습니다. 아래에서 일반 스페이서와 동적 스페이서라는 두 가지 스페이서 유형에 대해 설명합니다.

1. 일반 스페이서

일반 스페이서는 이메일의 섹션을 시각적으로 구분하는 선 요소입니다.

주요 설정

1. 선 두께 및 스타일 선의 두께, 스타일, 색상을 맞춤 설정합니다.

   • 두께: + 및 - 버튼을 사용하여 조정합니다(기본값 1).
   • 스타일: 실선, 점선, 점묘선 중에서 선택합니다.
   • 색상: 16진수 코드 또는 색상 선택기를 사용하여 사용자 지정 색상을 설정합니다(기본값: #cccccc).

2. 너비 스페이서 선이 콘텐츠에서 차지하는 너비를 지정합니다. + 및 - 버튼을 사용하여 너비를 픽셀 단위로 조정합니다.

3. 정렬 레이아웃에 맞게 선을 왼쪽, 가운데, 오른쪽에 정렬합니다.

4. 패딩 스페이서 주변의 내부 간격을 제어합니다.

   • 기본값: 모든 면의 패딩이 20으로 설정됩니다.
   • 더 보기 토글을 사용하여 각 면의 패딩을 지정합니다.
     • 위
     • 오른쪽
     • 아래
     • 왼쪽

사용 사례

일반 스페이서는 이메일 섹션 사이에 깔끔하고 시각적인 구분을 만들어 체계적이고 전문적인 레이아웃을 구성하는 데 적합합니다.

2. 동적 스페이서

동적 스페이서는 이메일 레이아웃에 여유 공간을 만들도록 설계된 보이지 않는 빈 공간 블록입니다.

주요 기능

1. 높이 조정 콘텐츠 영역에서 직접 또는 + 및 - 버튼을 사용하여 제어판에서 높이를 조정합니다. 높이에 따라 섹션 사이에 추가되는 세로 공간이 결정됩니다.

2. 배경색 기본적으로 스페이서의 배경은 투명하지만 16진수 코드나 색상 선택기를 사용하여 사용자 지정 배경색을 적용할 수 있습니다. 필요한 경우 스페이서를 보이는 블록으로 사용할 수 있습니다.

3. 반응형 동작 반응형 스페이서 옵션을 사용하면 다양한 화면 크기에 맞게 스페이서가 동적으로 조정되어 여러 기기에서 최적의 레이아웃을 유지합니다. 이 기능은 기본적으로 활성화되어 있습니다.

일반 스페이서와 동적 스페이서의 주요 차이점

• 동적 스페이서: 보이는 선 없이 빈 공간을 추가합니다.
• 일반 스페이서: 다음과 같은 선별 설정을 포함합니다.
  • 선 너비
  • 정렬
  • 선 스타일
  • 패딩

동적 스페이서는 이러한 기능을 지원하지 않으며 시각적 요소 없이 구분을 만드는 용도로만 설계되었습니다.

3. 앵커 링크 추가

두 스페이서 유형 모두에 앵커 링크를 적용할 수 있으므로 사용자는 이메일의 다른 부분에서 스페이서 위치로 바로 이동할 수 있습니다. 이는 긴 뉴스레터에서 이메일 내 탐색을 만들 때 특히 유용합니다.

참고: 다음을 포함한 일부 이메일 클라이언트에서는 앵커 링크가 지원되지 않습니다.

• Microsoft Outlook
• Gmail(모바일)

동영상 블록

동영상 블록을 사용하면 이메일에 동영상을 삽입하고 모양과 동작을 맞춤 설정할 수 있습니다. YouTube 및 Vimeo와 같은 플랫폼의 동영상 링크를 지원하므로 동영상 표시 방식을 유연하게 제어할 수 있습니다.

1. 동영상 링크

동영상 링크 필드에 동영상 URL을 추가합니다. 지원되는 플랫폼에는 YouTube, Vimeo 및 기타 삽입 가능한 서비스가 포함됩니다.

• 자동 동작: 유효한 URL을 추가하면 다음 작업이 수행됩니다.

  • 플랫폼의 동영상 썸네일을 사용하여 미리보기 이미지가 자동으로 생성됩니다.
  • 대체 텍스트 필드가 동영상 제목 또는 설명(사용 가능한 경우)으로 자동 입력됩니다.

• 편집 가능한 필드: 필요한 경우 생성된 미리보기 이미지와 텍스트를 수동으로 편집하거나 교체할 수 있습니다.

2. 대체 텍스트

대체 텍스트 필드는 동영상이 로드되지 않을 때 동영상 설명을 표시하여 접근성을 보장합니다.

• 지원되는 동영상 URL을 추가하면 자동으로 입력됩니다.
• 콘텐츠 요구 사항에 맞게 맞춤 설정할 수 있습니다.

3. 사용자 지정 썸네일

기본 동영상 미리보기를 교체할 사용자 지정 이미지를 업로드합니다.

• 활성화 방법: 사용자 지정 썸네일 옵션을 켭니다.
• 지원 형식: PNG, JPG 또는 GIF.
• 사용 시점: 생성된 썸네일이 이메일 디자인과 어울리지 않을 때 교체합니다.

4. 재생 버튼

동영상 썸네일 위에 표시되는 재생 버튼을 맞춤 설정합니다.

• 사용 가능한 옵션:
  • YouTube, Vimeo 또는 기타 재생 버튼 스타일 중에서 선택합니다.
  • 재생 버튼을 완전히 숨기려면 “없음”을 선택합니다.

5. 크기

이메일 디자인에 맞게 동영상 크기를 조정합니다.

• 너비 및 높이: + 및 - 버튼을 사용하거나 값을 직접 입력하여 크기를 제어합니다.
• 반응형 디자인: 다양한 기기에서 동영상이 자연스럽게 맞도록 합니다.

6. 너비에 맞춤

너비에 맞춤 토글을 활성화하면 동영상이 컨테이너 너비에 자동으로 맞춰집니다. 이를 통해 다양한 기기에서 동영상의 반응형 디자인을 유지할 수 있습니다.

7. 반응형 이미지

반응형 이미지 토글을 사용하면 모바일 기기에서 동영상 썸네일이 화면 너비에 맞게 조정됩니다.

• 참고: 반응형 동작은 기기와 이메일 클라이언트의 지원 여부에 따라 달라집니다.

8. 정렬

정렬 설정을 사용하여 블록 안에서 동영상의 가로 위치를 제어합니다.

• 왼쪽: 동영상을 왼쪽에 맞춥니다.
• 가운데: 동영상을 가운데에 배치합니다.
• 오른쪽: 동영상을 오른쪽에 맞춥니다.

9. 모바일 전용 옵션

모바일 기기에서 동영상의 동작과 모양을 맞춤 설정합니다.

1. 모바일에서 요소 숨기기 필요한 경우 모바일 기기에서 동영상 블록을 숨깁니다.

   • 참고: 이 기능은 미디어 쿼리 지원에 의존하므로 모든 이메일 클라이언트에서 작동하지 않을 수 있습니다.

2. 모바일 패딩 모바일 화면에서 동영상 주변의 패딩을 조정합니다.

   • 더 보기 토글을 사용하여 다음 각 면의 패딩 값을 설정합니다.
     • 위
     • 오른쪽
     • 아래
     • 왼쪽

10. AMPHTML 또는 HTML에 포함

동영상 블록이 특정 이메일 버전에 표시될지 선택합니다.

• AMPHTML 및 HTML 모두
• AMPHTML만
• HTML만

이 옵션을 사용하면 전달되는 이메일 버전에 따라 동영상이 적절하게 포함됩니다.

HTML 블록

HTML 블록을 사용하면 사용자 지정 HTML 및 CSS 코드를 이메일에 삽입할 수 있어 이메일 클라이언트 호환성을 준수하면서 고급 맞춤 설정을 유연하게 적용할 수 있습니다. 단일 HTML 요소를 추가하거나 전체 이메일을 디자인할 때 이 블록을 사용하여 원하는 디자인을 구현할 수 있습니다.

1. 코드 편집기 인터페이스

HTML 블록을 선택하면 콘텐츠 창에 검은색 코드 편집기 창이 표시됩니다. 이 편집기에서 사용자 지정 코드를 작성, 붙여넣기 또는 수정할 수 있습니다. 편집기는 두 섹션으로 구성됩니다.

• HTML 섹션: 이메일의 HTML 구조를 추가하거나 편집합니다.
• CSS 섹션: 콘텐츠 스타일을 지정할 별도의 CSS 편집기를 엽니다.

2. 글꼴 크기 조정

가독성을 높이기 위해 편집기에서 코드의 글꼴 크기를 조정합니다.

• A+ 버튼을 사용하여 글꼴 크기를 키웁니다.
• A- 버튼을 사용하여 글꼴 크기를 줄입니다.

3. 편집기 창 크기 조정

작업 방식에 맞게 코드 편집기 창의 크기를 조정합니다.

• 조정 방법:
  • 편집기 창 상단 중앙의 점 3개 위에 마우스를 올립니다.
  • 슬라이더 컨트롤을 위 또는 아래로 드래그하여 편집기 크기를 키우거나 줄입니다.

이 기능은 더 크거나 상세한 코드 블록을 관리할 때 특히 유용합니다.

4. CSS 편집기

CSS 편집기를 사용하면 HTML 콘텐츠의 스타일을 관리할 수 있으며, 코드 편집기 오른쪽 상단의 버튼을 통해 액세스할 수 있습니다.

중요 고려 사항:

• 제한된 지원: 많은 이메일 클라이언트는 Flexbox, Grid, 미디어 쿼리와 같은 고급 CSS 기능을 지원하지 않습니다.
• 기본 기능 사용: 최대한의 호환성을 위해 기본 인라인 CSS를 사용합니다.
• 사전 구성된 스타일: 주요 이메일 클라이언트에서 올바르게 렌더링되도록 보장하는 사전 구성된 스타일은 삭제하지 마세요.

5. 이메일 클라이언트 호환성

많은 이메일 클라이언트가 오래된 렌더링 엔진을 사용하므로 이메일 HTML에는 특별한 주의가 필요합니다.

주요 지침:

• 더 나은 지원을 위해 <div> 기반 레이아웃 대신 표 기반 레이아웃을 사용합니다.
• 애니메이션, Flexbox, Grid와 같은 고급 CSS 기능은 피합니다.
• 미디어 쿼리와 일부 CSS 속성은 일관되지 않게 작동할 수 있습니다.
• 테스트: 올바르게 렌더링되는지 확인하기 위해 여러 클라이언트(예: Gmail, Outlook, Apple Mail)에서 항상 이메일을 테스트합니다.

6. 패딩

패딩 설정은 HTML 콘텐츠 주변의 공간을 조정합니다.

• 기본 패딩: 기본값은 0입니다.
• 사용자 지정 패딩: 더 보기 토글을 활성화하여 다음 각 면의 패딩을 조정합니다.
  • 위
  • 오른쪽
  • 아래
  • 왼쪽

이 기능은 이메일 레이아웃 안에서 HTML 콘텐츠를 정렬하는 데 적합합니다.

7. 앵커 링크 추가

앵커 링크 추가 기능을 사용하면 이메일의 다른 위치에 HTML 블록으로 이동하는 클릭 가능한 링크를 만들 수 있습니다.

사용 방법:

• 옵션을 켜고 필드에 앵커 이름을 입력합니다.

제한 사항:

• 다음과 같은 일부 이메일 클라이언트에서는 앵커 링크가 지원되지 않습니다.
  • iOS Gmail 앱
  • iOS Apple Mail
  • Outlook 앱(Android 및 macOS)
  • AMP 이메일

8. 사용자 지정 HTML 작성

HTML 편집기는 이메일의 사용자 지정 HTML 구조를 작성하거나 붙여넣도록 설계되었습니다.

권장 사항:

• 간단하고 폭넓게 지원되는 HTML을 사용합니다.
• <div> 요소와 같은 복잡한 레이아웃이나 기능은 피합니다.
• 더 나은 호환성을 위해 표 기반 디자인을 사용합니다.

9. 성공을 위한 팁

1. 작게 시작하기: 이메일 개발이 처음이라면 특정 섹션에 HTML 블록을 사용합니다.
2. 코드 검증: HTML이 이메일 클라이언트 요구 사항을 준수하는지 확인합니다.
3. 철저히 테스트하기: 도구를 사용하여 여러 클라이언트와 기기에서 이메일을 미리 보고 테스트합니다.