이메일 스타일링
이 문서에서는 제목란, 프리헤더 텍스트, 이메일 크기, 이미지 권장 사항 등 이메일 스타일링 모범 사례를 설명합니다.
주소 스타일링
제목란은 수신자가 메시지를 받았을 때 가장 먼저 보게 되는 요소 중 하나입니다. 6~10단어로 유지하면 가장 높은 열람율을 얻을 수 있습니다.
좋은 제목란을 만드는 방법에는 다양한 접근 방식이 있습니다. 독자의 관심을 끌기 위해 질문을 던지거나, 보다 직접적으로 표현하거나, 고객의 참여를 유도하기 위해 개인화하는 방법 등이 있습니다. 하나의 제목란에만 고집하지 말고, A/B 테스트를 활용하여 새로운 제목란을 시도하고 효과를 측정해 보세요. 모바일에서 적절하게 표시되려면 제목란은 35자 이내여야 합니다.
“보낸 사람” 필드에는 발신자가 누구인지 명확하게 표시해야 합니다. 개인 이름이나 흔하지 않은 약어는 사용하지 않는 것이 좋습니다. 대신 브랜드 이름과 같이 인식하기 쉬운 이름을 사용하세요. 개인 이름을 사용하는 것이 브랜드의 이메일 개인화 방식에 적합하다면, 일관성을 유지하여 수신자와의 관계를 구축하세요. 모바일에서 적절하게 표시되려면 “보낸 사람” 이름은 25자 이내여야 합니다.
수신 불가(No-reply) 주소
수신 불가 이메일 주소는 여러 가지 이유로 일반적으로 권장되지 않습니다. 독자의 참여를 저해하기 때문입니다. 많은 수신자가 탈퇴하기 위해 이메일에 답장을 보내는데, 답장이 허용되지 않으면 다음 조치로 이메일을 스팸으로 표시하는 경우가 많습니다.
부재중 자동 응답을 받는 것은 실제로 유용한 정보를 제공할 수 있으며, 열람율을 높이고 스팸 신고를 줄이는 데 도움이 됩니다(이메일 수신을 원하지 않는 사람을 제거함으로써). 개인적인 측면에서, 수신 불가 주소는 수신자에게 비인격적으로 느껴질 수 있으며, 회사로부터 추가 이메일을 받는 것을 꺼리게 만들 수 있습니다.
프리헤더 텍스트
이메일의 프리헤더 텍스트는 메시지의 핵심 내용을 효율적으로 전달하여 독자의 관심을 끌고 열람을 유도합니다. 프리헤더 텍스트는 이메일 마케터가 이메일 내용에 대한 추가 정보를 제공하는 데에도 자주 사용됩니다. 프리헤더는 이메일 제목 바로 뒤에 표시되는 미리보기 텍스트입니다. 다음 예시에서 프리헤더는 - Brand. New. Lounge Shorts입니다.
표시되는 프리헤더 텍스트의 양은 사용자의 이메일 클라이언트와 이메일 제목란의 길이에 따라 달라집니다. 일반적으로 이메일 프리헤더는 50자에서 100자 사이로 작성하는 것을 권장합니다.
프리헤더는 이메일 본문의 Liquid을 참조할 수 있으며, 이메일 본문도 프리헤더의 Liquid을 참조할 수 있습니다. 이는 수신자에게 메시지를 보낼 때 프리헤더 텍스트가 이메일 본문의 일부이기 때문입니다.
프리헤더를 작성할 때 참고할 모범 사례는 다음과 같습니다:
- 행동 유도 문구는 독자가 이메일을 연 후에 효과를 발휘합니다.
- 구독, 제품 구매, 웹사이트 방문 등 원하는 방향으로 독자를 안내하세요.
- 독자가 요청 사항을 정확히 알 수 있도록 강력한 표현을 사용하되, 회사의 브랜드 톤을 반영하고 모든 행동 유도 문구가 소비자에게 어떤 가치를 제공하는지 보여주세요.
- 프리헤더는 85자를 넘지 않아야 하며, 제목란을 뒷받침하는 설명적인 행동 유도 문구를 포함해야 합니다.
- 사용자를 안내하는 이메일 및 랜딩 페이지는 모바일에 최적화되어야 합니다:
- 중간 삽입 팝업 없음
- 큰 입력 필드
- 쉬운 내비게이션
- 큰 텍스트
- 충분한 여백
- 짧고 간결한 본문 카피
- 명확한 행동 유도 문구
프리헤더 글자 수 제한
| 모바일 이메일 클라이언트 | 제한 |
|---|---|
| iOS Outlook | 74 |
| Android Native | 43 |
| Android Gmail | 24 |
| iOS Native | 82 |
| iOS Gmail | 30 |
| 데스크톱 이메일 클라이언트 | 제한 |
|---|---|
| Apple Mail | 33 |
| Outlook ‘13 | 38 |
| Outlook for Mac ‘15 | 53 |
| Outlook ‘16 | 50 |
| 웹메일 이메일 클라이언트 | 제한 |
|---|---|
| AOL Mail | 81 |
| Gmail | 119 |
| Outlook.com | 49 |
| Office 365 | 40 |
| Mail.ru | 64 |
이메일 크기
이메일 크기는 Braze에서 메시지 HTML의 크기를 의미합니다(작성한 본문과 메시지 발송 시 Braze가 추가하는 내용 포함).
- 이메일 크기를 제한하세요. 이메일 본문이 102 KB를 초과하면 Braze 서버에 큰 부담을 줄 뿐만 아니라, Gmail 및 기타 이메일 클라이언트에서 잘릴 수 있습니다.
- URL로 참조하는 호스팅 이미지는 대용량 인라인 에셋을 붙여넣는 것과 같은 방식으로 HTML에 포함되지 않습니다. 미디어 라이브러리를 사용하고
href로 링크하면 메시지 크기를 줄이는 데 도움이 됩니다.
| 텍스트만 | 텍스트 + 이미지 | 이메일 너비 |
|---|---|---|
| 최대 25 KB | 최대 60 KB | 최대 600 픽셀 |
클리핑 위험을 줄이려면:
- 문구와 링크를 줄이세요.
- 필요한 경우 중요한 CSS를 인라인으로 적용하세요. HTML에서 불필요한 공백을 제거하세요.
- 이미지와 HTML 에셋을 압축하세요.
이메일 Campaign 또는 템플릿을 저장하려면 이메일 본문이 400 KB를 초과하지 않아야 합니다.
최종 이메일 크기에 영향을 주는 요소
다음 기능은 렌더링된 메시지 크기를 소폭 증가시킵니다.
- 열람 추적 픽셀: 메시지 본문에 1 x 1 px 이미지 태그를 추가합니다
- 프리헤더: 본문 상단에 숨겨진
<div>를 추가합니다 - 링크 별칭 지정: 추적되는 각 URL에 16자 쿼리 파라미터(
lid=)를 추가합니다 - 링크 템플릿: 대시보드에서 설정한 쿼리 파라미터를 일치하는 URL에 추가합니다
- CSS 인라이닝(선택 사항): 임베디드 스타일시트 규칙을 HTML 요소에 인라인으로 적용하며, 스타일시트 복잡도에 따라 중복 CSS가 추가될 수 있습니다
프리헤더와 추적 픽셀은 약 600자(1 KB 미만)를 추가합니다. Braze는 일반적으로 링크 수, 링크 템플릿 복잡도, CSS 인라이닝 활성화 여부에 따라 0 KB에서 5 KB 사이를 추가합니다. 이메일 크기가 제한에 가까운 경우, 최종 렌더링 크기가 이러한 입력에 따라 달라지므로 발송 전에 이메일을 테스트하는 것을 권장합니다.
텍스트 길이
권장 텍스트 길이는 다음 표를 참조하세요.
| 텍스트 사양 | 권장 속성 |
|---|---|
| 제목란 길이 | 최대 35자(최적의 모바일 표시 기준) (6~10단어) |
| 발신자 이름 길이 | 최대 25자(최적의 모바일 표시 기준) |
| 프리헤더 길이 | 최대 85자 |
이미지 크기
권장 이미지 크기는 다음 표를 참조하세요. 작고 고품질인 이미지가 더 빠르게 로드되므로, 원하는 결과를 얻을 수 있는 가장 작은 에셋을 사용하세요.
| 크기 | 헤더 이미지 너비 | 본문 이미지 너비 | 파일 유형 |
|---|---|---|---|
| 최대 5 MB | 최대 600픽셀 | 최대 480픽셀 | PNG, JPEG, GIF |
Gmail 웹 및 Gmail 모바일 앱은 SVG를 렌더링하지 못하는 경우가 많으며, WEBP 지원도 일관적이지 않습니다. Gmail에서 안정적으로 표시되어야 하는 이미지에는 PNG 또는 JPEG를 사용하세요.
딥링킹
푸시 알림과 인앱 메시지에서 딥링크는 사용자를 앱 내 지정된 목적지로 바로 이동시킵니다. 그러나 딥링크는 앱이 설치되어 있어야 하며, 이메일은 수신자가 앱을 설치했는지 확인할 방법을 제공하지 않습니다. 따라서 이메일의 딥링크는 앱이 설치되지 않은 수신자에게 오류를 발생시킬 수 있습니다.
대신 표준 URL처럼 작동하는 유니버설 링크 및 App Links를 사용하세요. 이를 통해 앱을 열거나 사용자를 특정 페이지로 이동시키도록 구성할 수 있습니다. 또한 앱이 설치되지 않은 경우 앱 스토어로 리디렉션하거나 웹페이지로 폴백할 수도 있습니다.
투명 이미지가 포함된 Content Blocks
Content Blocks에 투명 배경이 있는 이미지(예: 로고)가 포함되어 있고 Liquid 태그로 삽입된 경우, 이미지 뒤에 배경색이 나타날 수 있습니다. 이 색상은 드래그 앤 드롭 편집기의 이메일 글로벌 스타일 설정, 특히 이메일 배경색에서 가져옵니다. 글로벌 스타일 설정에서 흰색이 아닌 다른 색상을 사용하면 해당 색상이 대신 표시됩니다.
Content Blocks를 의도한 대로 표시하려면:
- Content Blocks의 열 배경색을 이메일 또는 템플릿 배경과 일치하도록 설정합니다.
- 또는 드래그 앤 드롭 Content Blocks를 HTML Content Blocks로 변환하고 배경을 투명으로 설정합니다.
서로 다른 배경이 있는 영역(예: 본문과 푸터)에서 동일한 Content Blocks를 사용해야 하는 경우, 각각 적절한 열 배경색을 가진 두 가지 버전의 블록을 만드세요.
Content Blocks를 행으로 이메일에 드래그하려는 경우, 행 열 배경을 투명으로 설정하여 글로벌 배경을 재정의할 수 있습니다.
Content Blocks를 행으로 드래그하면 미리 렌더링된 스냅샷이 삽입되며, 원본 Content Blocks가 변경되어도 자동으로 업데이트되지 않습니다.
다크 모드
다크 모드는 수신자 측 환경설정입니다. 받은편지함 공급자와 앱(예: Gmail, Outlook)은 HTML의 색상을 반전하거나 변경할 수 있으므로, Braze만으로 하나의 고정된 외관을 기대하기보다는 클라이언트마다 다르게 렌더링될 수 있다는 점을 염두에 두어야 합니다.
HTML 편집기
HTML 편집기를 사용하는 경우, 테이블 셀에 단색 background-color 대신 단색 CSS linear-gradient를 적용하면 Gmail 모바일 앱에서 원치 않는 배경 반전을 줄일 수 있습니다. 예시, 제한 사항(<table> 단독이 아닌 <td> 또는 <th> 사용 포함), 구문에 대해서는 Gmail 모바일 앱과 다크 모드를 참조하세요.
클라이언트가 지원하는 경우 별도의 라이트 및 다크 스타일을 작성하려면 prefers-color-scheme 미디어 쿼리를 사용하세요. 지원 여부는 받은편지함마다 다르므로, 발송 대상 클라이언트에서 항상 미리보기 및 테스트를 수행하세요.
드래그 앤 드롭 편집기
드래그 앤 드롭 편집기에서 다크 모드는 여전히 각 받은편지함 공급자가 제어합니다. 미리보기 및 테스트에서 다크 모드 미리보기를 켜서 레이아웃을 확인하세요. 토글 위치와 테스트 방법에 대해서는 다크 모드에서 이메일이 어떻게 보이는지 미리볼 수 있나요?를 참조하세요. 테마별 배경색과 가독성에 대해서는 다크 모드와 라이트 모드에 맞게 이메일을 어떻게 디자인해야 하나요?를 참조하세요.
일반 모범 사례
- 순수 흰색(
#FFFFFF)과 순수 검정(#000000)은 피하세요. 오프화이트와 부드러운 검정을 사용하면 전체 반전 시 덜 거슬립니다. - 매우 밝은 강조 색상(예: 선명한 버튼)은 톤을 낮추어 클라이언트가 색상을 반전하더라도 가독성을 유지하세요.
- 레이아웃에 적합한 경우 투명 PNG를 사용하세요.
- 텍스트가 포함된 이미지에서는 어두운 텍스트 주위에 밝은 윤곽선을, 어두운 아트워크 위의 밝은 텍스트 주위에 어두운 윤곽선을 추가하여 색상이 변경되더라도 텍스트의 가독성을 유지하세요.