메일 내용 단계의 추가 탭에서 각 블록을 캔버스에 배치합니다. 모든 이메일 서비스가 같은 HTML과 동영상 재생을 지원하지 않으므로 PC·모바일 미리보기와 실제 테스트 메일 확인이 필요합니다.
구분선으로 내용의 경계를 만듭니다
구분선 블록을 추가한 뒤 디자인 선택 또는 내 구분선에서 형태를 고르고 세부 디자인을 조정합니다. 제목 바로 아래에 반복해서 넣기보다 서로 다른 주제나 상품 구간이 바뀌는 위치에 사용하세요.
간격조절로 위아래 여백을 맞춥니다
간격조절 블록에서는 위·아래 간격을 0~200 범위에서 조절하고 배경색과 투명도를 설정할 수 있습니다. 빈 줄 문자를 여러 번 입력하는 대신 간격 블록을 사용하면 PC와 모바일의 여백을 더 일정하게 관리할 수 있습니다.
- 같은 단계의 제목 위 여백은 같은 값으로 맞춥니다.
- 모바일에서 지나치게 긴 빈 공간이 생기지 않는지 확인합니다.
- 배경이 다른 구간 사이에서는 간격 블록의 배경색도 확인합니다.
동영상은 YouTube 주소와 썸네일로 연결합니다
동영상 블록에 YouTube 또는 youtu.be 주소를 입력하면 썸네일 미리보기가 표시됩니다. 이메일 안에서 동영상이 직접 재생된다고 가정하지 말고, 수신자가 썸네일을 눌러 YouTube 페이지로 이동하는 흐름으로 설계하세요. 영상 크기와 썸네일이 모바일에서 잘리지 않는지도 확인합니다.
HTML 블록에는 신뢰할 수 있는 코드만 넣습니다
HTML 블록의 코드 편집 화면에서 HTML을 입력하고 미리보기로 확인한 뒤 적용합니다. 이메일 클라이언트 호환성을 위해 외부 스타일시트나 복잡한 스크립트에 의존하지 말고 인라인 스타일 중심으로 작성하세요.
| 블록 | 적합한 용도 | 주의할 점 |
|---|---|---|
| 구분선 | 주제와 섹션 구분 | 너무 잦은 사용은 흐름을 끊습니다. |
| 간격조절 | 일정한 위아래 여백 | 모바일의 빈 공간을 확인합니다. |
| 동영상 | YouTube 썸네일과 이동 | 메일 안 직접 재생을 전제로 하지 않습니다. |
| HTML | 기본 블록으로 만들기 어려운 단순 구조 | 스크립트·폼·복잡한 CSS는 수신 환경에서 제거될 수 있습니다. |
테스트 메일에서 확인합니다
- 구분선과 간격이 PC·모바일에서 의도한 위치에 있는지 봅니다.
- 동영상 썸네일을 눌러 올바른 영상으로 이동하는지 확인합니다.
- HTML 블록의 글자, 표, 링크와 배경이 주요 메일 서비스에서 깨지지 않는지 확인합니다.
- 내용이 보이지 않더라도 핵심 안내를 이해할 수 있는 대체 문구를 둡니다.
이메일 안에서 YouTube 영상이 바로 재생되나요?
현재 동영상 블록은 YouTube 주소와 썸네일을 사용합니다. 메일 서비스마다 동영상 지원이 다르므로 썸네일을 눌러 영상 페이지로 이동하는 방식으로 확인하세요.
HTML 블록에 자바스크립트를 넣을 수 있나요?
이메일 수신 서비스는 보안을 위해 스크립트와 일부 코드를 제거합니다. HTML 블록은 신뢰할 수 있는 단순 마크업과 인라인 스타일에 한정하고 테스트 메일로 검증하세요.
푸터와 소셜 정보 설정하기
이메일 헤더·푸터·소셜 링크와 수신거부 정보를 설정하는 방법으로 이동하세요.