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

게시일: 2024년 10월 22일 · 최종 업데이트: 2026년 9월 12일 · 작성자 Marcus Biel

Maildroppa 이메일 편집기 오른쪽에는 이메일 설정 패널이 있습니다. 이 패널에서 이메일 콘텐츠의 구조와 디자인을 설정할 수 있습니다. 패널은 **Content(콘텐츠)**와 Appearance(디자인) 탭으로 나뉩니다.

콘텐츠 탭

Content 탭에서는 이메일 콘텐츠를 디자인하고 배치합니다. 주요 섹션은 **Structures(구조)**와 **Blocks(블록)**입니다.

1. 구조

구조는 콘텐츠를 행과 열로 나누어 이메일의 레이아웃을 결정합니다. 다음과 같이 미리 만들어진 다양한 레이아웃 중에서 선택할 수 있습니다.

• 1열
• 2열
• 다중 열

이러한 기본 옵션 외에도 여러 블록을 조합해 원하는 레이아웃을 만들 수 있습니다. 디자인에 필요한 구성을 자유롭게 구현하세요.

• 드래그 앤 드롭: 이 섹션에서 구조를 끌어 이메일 디자인 영역에 놓은 뒤 콘텐츠를 추가하세요.
• 맞춤 설정: 구조를 추가한 다음 이미지, 텍스트, 버튼 등 다양한 콘텐츠 블록을 넣을 수 있습니다.

2. 블록

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

사용할 수 있는 블록 유형은 다음과 같습니다.

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

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

콘텐츠 블록 상세 안내

이미지 블록

Stripo의 드래그 앤 드롭 이메일 편집기에서는 이미지 블록으로 이메일 캠페인에 이미지를 추가하고 원하는 형태로 조정할 수 있습니다.

이미지 블록 추가하기

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

방법 1

구조 안의 "Drop Content Here" 영역에 마우스 포인터를 올린 다음 이미지 아이콘을 클릭하세요. 선택한 구조가 즉시 이미지 블록으로 바뀝니다.

방법 2

Content 탭의 Blocks 섹션으로 이동하세요. 이미지 블록을 끌어 이메일 레이아웃에서 원하는 구조에 놓으세요. 이 방법을 사용하면 이미지를 넣을 위치를 더 세밀하게 지정할 수 있습니다.

이미지 업로드하기

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

드래그 앤 드롭

컴퓨터에 있는 이미지 파일(PNG, JPG, GIF)을 끌어 이미지 블록 안의 업로드 상자에 바로 놓을 수 있습니다.

컴퓨터에서 업로드

이미지 블록의 구름 아이콘을 클릭하면 파일 선택 창이 열립니다. 컴퓨터에서 최대 2MB 크기의 이미지를 선택하세요. 선택한 이미지는 블록과 오른쪽 Content 탭에 모두 표시됩니다.

이미지 변경하기

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

이미지 편집하기

이미지를 업로드한 후 플랫폼 안에서 바로 편집할 수도 있습니다. Stripo에 내장된 이미지 편집기를 사용하면 이메일 편집기를 벗어나지 않고 이미지를 보정하거나 조정할 수 있습니다.

이미지 편집기 열기

1. 이미지를 업로드한 다음 Edit Image 버튼을 클릭하세요. 이미지 편집기 화면이 열립니다.
2. 편집기 상단 메뉴 막대에서 다양한 도구를 확인할 수 있습니다.

사용할 수 있는 이미지 편집 도구

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

  • 회색조
  • 흑백
  • 선명하게
  • 색상 반전
  • 세피아
  • 밝기
  • 색상

• 크기 조정 이미지 크기를 조정합니다. 다음과 같이 설정할 수 있습니다.

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

• 자르기 이미지에서 남길 영역을 선택하고 불필요한 부분을 잘라냅니다.

• 변형 이미지를 회전하거나 다음 방향으로 뒤집습니다.

  • 가로
  • 세로

• 그리기 그리기 도구로 이미지 위에 선이나 원하는 도형을 자유롭게 그립니다.

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

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

• 도형 및 스티커 이미지 위에 다음 요소를 추가해 꾸밀 수 있습니다.

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

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

• 모서리 모서리 스타일을 조정해 이미지를 깔끔하게 마무리합니다.

• 배경 이미지 배경을 제거하거나 교체해 더 깔끔하게 정리합니다.

편집 내용 저장하기

편집을 마치면 편집기 왼쪽 상단의 Save 버튼을 클릭하세요. 이메일 레이아웃의 원본 이미지가 편집한 이미지로 자동 교체됩니다.

이미지 설정

이미지를 업로드한 다음 오른쪽 Content 탭의 이미지 설정 옵션으로 표시 방식을 조정할 수 있습니다.

링크

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

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

이 옵션들은 링크 설정 드롭다운에서 확인할 수 있습니다.

대체 텍스트

이미지가 로드되지 않을 때 표시할 대체 텍스트를 추가합니다. 대체 텍스트는 스크린 리더가 시각 장애가 있는 수신자에게 이미지를 설명하는 데도 사용되어 접근성을 높여줍니다.

정렬

컨테이너 안에서 이미지의 정렬 방식을 선택합니다. Left(왼쪽), Center(가운데), Right(오른쪽) 중에서 선택할 수 있습니다.

크기

더하기·빼기 버튼을 사용하거나 원하는 값을 입력해 이미지의 너비와 높이를 직접 조정합니다.

"Adjust to Width" 옵션을 켜면 이미지가 컨테이너의 전체 너비에 자동으로 맞춰집니다.

반응형 이미지

"Responsive Image" 옵션을 켜면 다양한 화면 크기에 맞춰 이미지가 조정됩니다. 특히 모바일 기기에서 유용합니다.

패딩

이미지 주변의 패딩을 조정해 이미지와 주변 콘텐츠 사이의 간격을 설정합니다. 모든 방향에 같은 패딩을 적용하거나 Top(위), Bottom(아래), Left(왼쪽), Right(오른쪽) 값을 각각 지정할 수 있습니다.

앵커 링크

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

텍스트 블록

다음 설정으로 텍스트 블록의 디자인과 기능을 조정할 수 있습니다. 각 옵션을 활용해 텍스트 표시 방식을 세밀하게 조정하고 원하는 디자인에 맞춰보세요.

텍스트 도구 모음

텍스트 블록을 클릭하면 콘텐츠 영역 위에 텍스트 도구 모음이 나타납니다. 자주 사용하는 텍스트 서식 옵션을 빠르게 이용할 수 있으며, 다음 기능을 제공합니다.

1. 문단 형식

일반 본문에는 Normal을, 제목에는 Heading 1부터 Heading 6까지의 제목 수준을 선택해 문단 스타일을 지정하세요. 제목 수준을 활용하면 이메일 콘텐츠의 위계를 명확하게 나누어 읽기 쉽고 체계적으로 구성할 수 있습니다.

2. 글꼴

기본 글꼴은 Arial입니다. Georgia, Helvetica, Courier New 등 널리 쓰이는 글꼴을 비롯해 다양한 글꼴을 선택할 수 있습니다. 검색 기능으로 원하는 글꼴을 빠르게 찾을 수도 있습니다.

3. 글꼴 크기

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

4. 텍스트 스타일

다음 옵션으로 텍스트 스타일을 지정하세요.

• Bold(B): 텍스트를 굵게 표시해 강조합니다.
• Italic(I): 텍스트를 기울임꼴로 표시해 스타일을 더합니다.
• Underline(U): 텍스트에 밑줄을 긋습니다. 주로 하이퍼링크에 사용합니다.
• Strikethrough(S): 텍스트 가운데 선을 그어 수정하거나 삭제한 내용을 표시합니다.

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

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

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

6. 텍스트 및 배경색

• Text Color(텍스트 색상): 이 버튼을 클릭해 팔레트에서 색상을 선택하거나 16진수 색상 코드를 입력해 정확한 색상을 지정하세요.
• Background Color(배경색): 텍스트 뒤에 표시할 강조 색상을 선택하세요.

7. 텍스트 정렬

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

• Align Left(왼쪽 정렬): 텍스트를 왼쪽에 맞춥니다.
• Center(가운데 정렬): 텍스트를 가운데에 배치합니다.
• Align Right(오른쪽 정렬): 텍스트를 오른쪽에 맞춥니다.
• Justify(양쪽 맞춤): 블록의 양쪽 끝에 맞춰 텍스트를 고르게 배치합니다.

8. 목록

번호가 있는 목록과 글머리 기호가 있는 목록을 만듭니다.

• Insert/Remove Bulleted List: 글머리 기호를 추가하거나 제거합니다.
• Insert/Remove Numbered List: 번호 매기기 목록을 추가하거나 제거합니다.

9. 자동 줄 바꿈

텍스트 블록의 자동 줄 바꿈을 켜거나 끕니다. 켜면 한 줄에 들어가지 않는 긴 텍스트가 자동으로 다음 줄로 이어집니다.

10. 들여쓰기

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

11. 하이퍼링크 삽입

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

링크 추가 또는 편집 단계

a) 텍스트 선택

하이퍼링크로 만들 텍스트를 선택하세요.

b) 링크 아이콘 클릭

텍스트 도구 모음에서 링크 아이콘을 클릭하세요.

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

링크 옵션이 있는 오른쪽 설정 패널이 나타납니다.

• 링크 필드: URL을 입력하거나 미리 정의된 옵션 중에서 선택하세요.
• 태그: 구독자를 분류하거나 자동화를 시작하는 데 사용할 태그를 추가하세요.

발송 후 링크 수정하기

새 캠페인을 구독자 2,365명에게 발송한 뒤, 단순한 오타로 링크 하나가 열리지 않는다는 사실을 알게 되면 무척 난감합니다. 블랙 프라이데이 매출 기회를 놓칠 수도 있습니다.

다행히 Maildroppa에서는 구독자에게 이메일을 이미 발송한 뒤에도 잘못된 링크를 수정할 수 있습니다.

a) 캠페인 보기

개요 화면에서 발송한 캠페인을 찾으세요. 점 3개를 클릭한 다음 View Campaign을 선택하세요.

b) 링크 또는 태그 수정

캠페인 상세 화면에서 링크 목록까지 아래로 스크롤한 뒤 다음 작업을 할 수 있습니다.

• 링크 대상 변경: 잘못된 URL을 수정합니다.
• 태그 관리: 자동화에 사용할 태그를 추가하거나 제거합니다.

참고: 링크 대상을 변경하려면 캠페인 설정에서 **Click Tracking(클릭 추적)**이 켜져 있어야 합니다.

링크 디자인 설정하기

오른쪽 설정 패널에서 링크의 표시 방식을 조정할 수 있습니다.

• Link Color(링크 색상): 색상을 선택하거나 16진수 색상 코드를 입력하세요.

• Underline Links(링크 밑줄): 밑줄을 켜거나 꺼서 링크를 깔끔하게 표시하세요.

12. 개인화 태그

개인화 태그로 수신자의 이름이나 기타 사용자 지정 필드처럼 수신자에 따라 달라지는 콘텐츠를 추가하세요.

• 도구 모음의 Personalization Tags 드롭다운에서 First Name(이름), Email(이메일), Country(국가) 등 일반 필드를 선택하거나 사용자 지정 필드를 정의해 수신자별로 이메일을 맞춤 설정할 수 있습니다.

13. 이모지

이모지를 넣어 텍스트에 시각적 표현을 더할 수 있습니다.

• 도구 모음의 이모지 아이콘을 클릭하면 이모지가 분류별로 표시되어 쉽게 찾아볼 수 있습니다.
• 호환성 참고: Outlook 등 일부 이메일 클라이언트에서는 이모지가 제대로 표시되지 않을 수 있으므로 이메일을 테스트하세요.

14. 표 및 특수 문자

도구 모음 끝의 점 3개를 클릭하면 추가 고급 옵션이 나타납니다.

표 삽입

표를 만들고 세부 설정을 조정해 이메일 레이아웃을 구성하세요.

• 필요에 따라 행, 열, 셀 간격, 패딩, 테두리 두께를 지정하세요.

특수 문자 삽입

기호, 악센트가 있는 문자, 기타 특수 문자로 텍스트의 표현을 보완할 수 있습니다.

• Special Characters 옵션을 열어 다양한 문자를 살펴보세요.

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

오른쪽 패널에서는 텍스트 블록의 디자인과 기능을 더욱 세밀하게 조정할 수 있습니다. 사용할 수 있는 설정은 다음과 같습니다.

1. 텍스트 색상

색상 선택기를 사용하거나 16진수 색상 코드를 입력해 텍스트 색상을 지정하세요.

2. 배경색

텍스트 블록의 배경색을 원하는 색상으로 설정하세요. 기본 배경은 투명합니다.

3. 링크별 설정

텍스트 블록에 링크가 있으면 설정에 추가 옵션이 나타납니다.

• Link Color(링크 색상): 색상 선택기나 16진수 색상 코드로 링크 색상을 조정하세요.

• Underline Links(링크 밑줄): 텍스트 블록 안에 있는 링크의 밑줄을 켜거나 끄세요.

• 링크 편집: 콘텐츠 영역에서 링크를 선택한 뒤 설정 패널에서 URL을 편집하세요. "Tags" 드롭다운에서 링크에 태그를 지정하거나 변경할 수도 있습니다.

4. 정렬

컨테이너 안에서 텍스트 블록을 Left(왼쪽), Center(가운데), **Right(오른쪽)**로 정렬하세요.

5. 고정 높이

Fixed Height 옵션을 켜서 텍스트 블록의 높이를 고정하세요. 텍스트의 세로 정렬도 Top(위), Middle(가운데), Bottom(아래) 중에서 선택할 수 있습니다.

6. 줄 간격

텍스트의 줄 사이 간격을 조정합니다. Tight(좁게), Normal(보통), Wide(넓게) 중에서 선택하세요.

7. 패딩

텍스트 블록 주변의 간격을 조정합니다. 모든 방향에 같은 패딩을 적용하거나 Top(위), Bottom(아래), Left(왼쪽), Right(오른쪽) 값을 각각 지정하세요.

8. 앵커 링크

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

버튼 블록

버튼 블록으로 이메일에 클릭 가능한 버튼을 추가할 수 있습니다. 버튼의 기능과 스타일은 원하는 대로 설정할 수 있습니다.

링크 설정

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

사용할 수 있는 링크 유형

• 일반 웹사이트 링크(HTTP 또는 HTTPS): 웹페이지로 이동합니다.
• 이메일 링크: 사용자의 이메일 클라이언트에서 새 이메일 작성 창을 엽니다.
• 파일 링크(FTP, FTPS): FTP 서버에 있는 파일로 연결합니다.
• Skype: Skype 통화나 채팅을 시작합니다.
• 전화(tel): 지원되는 기기에서 전화를 겁니다.
• SMS: 받는 사람의 전화번호가 미리 입력된 상태로 메시지 앱을 엽니다.
• Viber: 메시지를 보내거나 통화할 수 있도록 Viber 앱을 엽니다.
• 기타 프로토콜 유형: 위 목록에 없는 사용자 지정 프로토콜을 지정합니다.

소셜 공유 옵션

버튼을 소셜 미디어나 이메일 공유용으로 설정할 수도 있습니다.

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

URL 필드

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

버튼 문구

유도하려는 행동에 맞게 버튼 문구를 설정하세요. 기본 문구는 "Button"이며, "자세히 알아보기", "지금 구독하기", "지금 쇼핑하기" 등으로 바꿀 수 있습니다.

텍스트 스타일

Text Style 설정에서 버튼 텍스트의 표시 방식을 조정할 수 있습니다.

글꼴 선택

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

• 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. 배경색: 버튼 컨테이너의 배경색을 조정합니다. 기본 배경은 투명하지만, 색상을 변경해 이메일 배경에서 버튼이 돋보이게 할 수 있습니다.

모서리 둥글기

Border Radius 설정으로 버튼 모서리의 둥근 정도를 조정하세요.

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

참고: Microsoft Outlook에서도 둥근 모서리가 올바르게 표시되도록 Appearance 탭의 "Support of Outlook" 옵션을 켜세요.

정렬

Alignment 설정으로 콘텐츠 영역 안에서 버튼의 위치를 지정하세요.

• 선택 항목: Left(왼쪽), Center(가운데), Right(오른쪽).
• 일반적인 활용: 버튼을 강조할 때는 가운데 정렬을, 전체 디자인과의 일관성을 맞출 때는 왼쪽이나 오른쪽 정렬을 사용합니다.

고정 높이

Fixed Height 옵션을 켜면 버튼 크기를 일정하게 유지할 수 있습니다.

1. 기본 상태: 꺼짐.
2. 최소 높이: 44픽셀.
3. 콘텐츠 세로 정렬: 고정 높이를 켜면 버튼 안의 콘텐츠를 Top(위), Middle(가운데), **Bottom(아래)**으로 정렬해 위치를 세밀하게 조정할 수 있습니다.

아이콘이 있는 버튼

Button with Icon 옵션을 사용하면 버튼 문구 옆에 아이콘을 넣을 수 있습니다. 아이콘으로 시각적 효과를 더하고 행동 유도 문구를 강조할 수 있습니다. 이 기능은 기본적으로 꺼져 있습니다.

• 지원 형식: PNG, JPG, GIF 형식의 아이콘을 업로드할 수 있으며, 최대 파일 크기는 2MB입니다.
• 아이콘 위치: 버튼 문구의 Left(왼쪽) 또는 **Right(오른쪽)**에 아이콘을 배치하세요.

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

• Outlook 2002, 2007, 2010, 2013, 2016, 2019. 이는 해당 이메일 클라이언트의 HTML 이메일 렌더링 방식에 따른 제한입니다. 수신자 중 이러한 클라이언트를 사용하는 비중이 높다면 이 점을 고려하세요.

테두리 설정

버튼 테두리를 조정해 스타일을 더하고 버튼을 강조하세요.

• 테두리 두께: 왼쪽, 오른쪽, 위, 아래 테두리 두께를 각각 최대 40픽셀까지 설정할 수 있습니다.
• 테두리 스타일: Solid(실선), Dashed(파선), Dotted(점선) 중에서 선택하세요.
• 테두리 색상: 색상 선택기를 사용하거나 16진수 색상 코드를 입력해 브랜드나 전체 디자인에 맞는 색상을 지정하세요.

내부 패딩

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

• 설정 옵션: Left(왼쪽), Right(오른쪽), Top(위), Bottom(아래) 패딩을 각각 최대 99픽셀까지 지정할 수 있습니다.
• 적용 효과: 내부 패딩에 따라 버튼의 전체 크기와 버튼 안 콘텐츠의 위치가 달라집니다.

외부 패딩

버튼 바깥쪽 간격을 조정해 이메일의 다른 요소와 버튼 사이의 배치를 맞춥니다.

• 설정 옵션: Left(왼쪽), Right(오른쪽), Top(위), Bottom(아래) 외부 패딩을 각각 최대 40픽셀까지 지정할 수 있습니다.
• 활용 예시: 버튼이 다른 콘텐츠나 이메일 가장자리에 너무 가깝게 붙지 않도록 간격을 확보합니다.

앵커 링크 추가

앵커 링크를 사용하면 독자가 같은 이메일의 특정 섹션으로 바로 이동할 수 있습니다. 긴 뉴스레터를 빠르게 탐색할 때 유용합니다.

• 앵커 이름: 이메일 안에서 이동할 위치를 지정하고 버튼을 해당 앵커에 연결하세요. 버튼을 클릭하면 지정한 섹션으로 스크롤되어 이메일을 편리하게 탐색할 수 있습니다.

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

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

여러 이메일 클라이언트에서 충분히 테스트해 기능이 작동하는지 확인하고, 수신자에게 적합한 기능인지 판단하세요.

스페이서 블록

스페이서 블록은 이메일 콘텐츠에 간격을 추가하는 요소입니다. 크기, 정렬, 표시 방식, 내부 간격을 조정할 수 있습니다. 아래에서는 일반 스페이서와 동적 스페이서 두 가지 유형을 설명합니다.

1. 일반 스페이서

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

주요 설정

1. 선 두께 및 스타일 선의 두께, 스타일, 색상을 설정하세요.

   • 두께: +, - 버튼으로 조정합니다. 시작값은 1입니다.
   • 스타일: solid(실선), dashed(파선), dotted(점선) 중에서 선택하세요.
   • 색상: 16진수 색상 코드나 색상 선택기로 원하는 색상을 지정하세요. 기본값은 #cccccc입니다.

2. 너비 구분선이 콘텐츠 영역에서 차지할 너비를 지정하세요. +, - 버튼으로 픽셀 단위로 조정할 수 있습니다.

3. 정렬 레이아웃에 맞춰 구분선을 왼쪽, 가운데, 오른쪽으로 정렬하세요.

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

   • 기본값: 모든 방향의 패딩이 20으로 설정되어 있습니다.
   • More 토글을 켜면 다음 방향의 패딩을 각각 지정할 수 있습니다.
     • Top(위)
     • Right(오른쪽)
     • Bottom(아래)
     • Left(왼쪽)

활용 예시

일반 스페이서는 이메일의 섹션을 시각적으로 깔끔하게 구분하는 데 적합합니다. 이를 통해 체계적이고 전문적인 레이아웃을 만들 수 있습니다.

2. 동적 스페이서

동적 스페이서는 눈에 보이는 요소 없이 빈 공간만 추가하는 블록입니다. 이메일 레이아웃에 여유 있는 간격을 만들 때 사용합니다.

주요 기능

1. 높이 조정 콘텐츠 영역에서 직접 높이를 조정하거나 설정 패널의 +, - 버튼을 사용하세요. 높이 값에 따라 섹션 사이에 추가되는 세로 간격이 달라집니다.

2. 배경색 스페이서의 기본 배경은 투명합니다. 16진수 색상 코드나 색상 선택기로 배경색을 지정하면 필요에 따라 눈에 보이는 블록으로 활용할 수도 있습니다.

3. 반응형 동작 Responsive Spacer 옵션을 사용하면 스페이서가 화면 크기에 따라 동적으로 조정되어 여러 기기에서 적절한 레이아웃을 유지합니다. 이 기능은 기본적으로 켜져 있습니다.

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

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

동적 스페이서는 이러한 설정을 지원하지 않으며, 시각적 요소 없이 콘텐츠 사이를 띄우는 용도로만 사용합니다.

3. 앵커 링크 추가

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

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

• Microsoft Outlook
• 모바일용 Gmail

동영상 블록

동영상 블록으로 이메일에 동영상을 삽입하고 표시 방식과 동작을 설정할 수 있습니다. YouTube, Vimeo 등의 플랫폼에 있는 동영상 링크를 지원하며, 동영상이 표시되는 방식을 유연하게 조정할 수 있습니다.

1. 동영상 링크

Link to Video 필드에 동영상 URL을 입력하세요. YouTube, Vimeo를 비롯해 동영상 삽입을 지원하는 다른 서비스도 사용할 수 있습니다.

• 자동 처리: 유효한 URL을 입력하면 다음 항목이 자동으로 설정됩니다.

  • 해당 플랫폼의 동영상 썸네일을 바탕으로 미리보기 이미지가 생성됩니다.
  • 동영상 제목이나 설명이 있으면 Alternate Text 필드에 자동으로 입력됩니다.

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

2. 대체 텍스트

Alternate Text 필드는 동영상이 로드되지 않을 때 설명을 표시해 접근성을 확보합니다.

• 지원되는 동영상 URL을 입력하면 자동으로 채워집니다.
• 콘텐츠에 맞게 직접 수정할 수 있습니다.

3. 사용자 지정 썸네일

기본 동영상 미리보기를 대신할 이미지를 업로드하세요.

• 설정 방법: Custom Thumbnail 옵션을 켜세요.
• 지원 형식: PNG, JPG, GIF.
• 활용 시점: 자동으로 생성된 썸네일이 이메일 디자인과 어울리지 않을 때 교체하세요.

4. 재생 버튼

동영상 썸네일 위에 표시되는 재생 버튼을 설정하세요.

• 선택 가능한 옵션:
  • YouTube, Vimeo 또는 기타 재생 버튼 스타일 중에서 선택하세요.
  • 재생 버튼을 완전히 숨기려면 “None”을 선택하세요.

5. 크기

이메일 디자인에 맞게 동영상 크기를 조정하세요.

• 너비 및 높이: +, - 버튼을 사용하거나 값을 직접 입력해 크기를 조정하세요.
• 반응형 디자인: 다양한 기기에서 동영상이 화면에 자연스럽게 맞도록 설정하세요.

6. 너비에 맞춤

Adjust to Width 토글을 켜면 동영상이 컨테이너 너비에 자동으로 맞춰집니다. 이를 통해 여러 기기에서도 반응형 디자인을 유지할 수 있습니다.

7. 반응형 이미지

Responsive Image 토글을 켜면 모바일 기기에서 동영상 썸네일이 화면 너비에 맞게 조정됩니다.

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

8. 정렬

Alignment 설정으로 블록 안에서 동영상의 가로 위치를 조정하세요.

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

9. 모바일 전용 옵션

모바일 기기에서 동영상이 표시되고 작동하는 방식을 설정하세요.

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

   • 참고: 미디어 쿼리를 지원해야 사용할 수 있는 기능이므로 일부 이메일 클라이언트에서는 작동하지 않을 수 있습니다.

2. 모바일 패딩 모바일 화면에서 동영상 주변의 패딩을 조정하세요.

   • More 토글을 켜면 다음 방향의 패딩을 각각 설정할 수 있습니다.
     • Top(위)
     • Right(오른쪽)
     • Bottom(아래)
     • Left(왼쪽)

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. 패딩

Padding 설정으로 HTML 콘텐츠 주변의 간격을 조정합니다.

• 기본 패딩: 기본값은 0입니다.
• 사용자 지정 패딩: More 토글을 켜면 다음 방향의 패딩을 각각 조정할 수 있습니다.
  • Top(위)
  • Right(오른쪽)
  • Bottom(아래)
  • Left(왼쪽)

이메일 레이아웃 안에서 HTML 콘텐츠의 위치를 맞출 때 유용합니다.

7. 앵커 링크 추가

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

사용 방법:

• 옵션을 켜고 입력란에 앵커 이름을 입력하세요.

제한 사항:

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

8. 사용자 지정 HTML 작성

HTML 편집기에서 이메일에 사용할 HTML 구조를 직접 작성하거나 붙여넣을 수 있습니다.

권장 사항:

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

9. 효과적인 활용을 위한 팁

1. 작은 범위부터 시작하기: 이메일 개발이 처음이라면 이메일의 특정 섹션부터 HTML 블록을 적용해보세요.
2. 코드 검증하기: HTML이 이메일 클라이언트의 요구 사항에 맞는지 확인하세요.
3. 충분히 테스트하기: 미리보기와 테스트 도구를 사용해 여러 클라이언트와 기기에서 이메일을 확인하세요.