Skip to content

이메일 스타일링

이 문서에서는 제목란, 프리헤더 텍스트, 이메일 크기, 이미지 권장 사항 등 이메일 스타일링 모범 사례를 설명합니다.

주소 스타일링

제목란은 수신자가 메시지를 받았을 때 가장 먼저 보게 되는 항목 중 하나입니다. 6~10개 단어로 유지하면 열람률이 가장 높습니다.

좋은 제목란을 만드는 방법에는 다양한 접근 방식이 있습니다. 독자의 흥미를 유발하는 질문을 던지거나, 보다 직접적으로 표현하거나, 고객의 참여를 유도하기 위해 개인화하는 방법 등이 있습니다. 한 가지 제목란만 고집하지 말고, A/B 테스트를 활용하여 새로운 제목을 시도하고 그 효과를 측정하세요. 제목은 모바일에서 적절하게 표시되도록 35자 이내로 작성해야 합니다.

“보낸 사람” 필드에는 발신자가 누구인지 명확하게 표시되어야 합니다. 사람의 이름이나 흔하지 않은 약어는 사용하지 마세요. 대신 브랜드 이름과 같이 알아볼 수 있는 이름을 사용하세요. 사람의 이름을 사용하는 것이 브랜드의 이메일 개인화 방식에 적합하다면 일관성을 유지하여 수신자와의 관계를 발전시키세요. “보낸 사람” 이름은 모바일에서 적절하게 표시되도록 25자 이내로 입력해야 합니다.

답장 불가 주소

답장 불가(No-reply) 이메일 주소는 일반적으로 여러 가지 이유로 권장되지 않으며, 독자의 참여를 저해합니다. 많은 수신자가 이메일에 답장을 보내 탈퇴하려 하기 때문에, 답장이 불가능한 경우 다음 조치로 이메일을 스팸으로 표시하는 경우가 많습니다.

부재중 자동 답장을 받으면 실제로 유용한 정보를 제공하여 열람률을 높이고 스팸 신고를 줄일 수 있습니다(이메일 수신을 원하지 않는 사람을 제거함으로써). 개인적인 차원에서 답장 불가 주소는 수신자에게 비인격적으로 보일 수 있으며, 회사에서 보내는 이메일을 더 이상 받지 않으려 할 수도 있습니다.

프리헤더 텍스트

이메일의 프리헤더 텍스트는 메시지의 요점을 효율적으로 전달하여 독자의 관심을 끌고 열람을 유도합니다. 프리헤더 텍스트는 이메일 마케터가 이메일 콘텐츠에 대한 추가 정보를 제공하기 위해 자주 사용합니다. 프리헤더는 이메일 제목 바로 뒤에 표시되는 미리보기 텍스트입니다. 다음 예제에서 프리헤더는 - Brand. New. Lounge Shorts입니다.

Gmail 받은편지함의 프리헤더 텍스트에 "Brand. New. Lounge Shorts"라는 텍스트가 표시됩니다.

표시되는 프리헤더 텍스트의 양은 사용자의 이메일 클라이언트와 이메일 제목란의 길이에 따라 달라집니다. 일반적으로 이메일 프리헤더는 50자에서 100자 사이로 작성하는 것을 권장합니다.

프리헤더를 작성할 때 염두에 두어야 할 모범 사례는 다음과 같습니다:

  1. 행동 유도 문구는 독자가 이메일을 연 후에 작용합니다.
    • 가입, 제품 구매, 웹사이트 방문 등 독자를 올바른 방향으로 안내하세요.
    • 독자가 요청 사항을 정확히 알 수 있도록 강력한 표현을 사용하되, 회사의 브랜드 목소리를 반영하고 모든 행동 유도 문구가 소비자에게 어떤 가치를 제공하는지 보여주세요.
    • 프리헤더는 85자 이내여야 하며, 제목란을 뒷받침하는 설명적인 행동 유도 문구를 포함해야 합니다.
  2. 사용자를 안내하는 이메일 및 랜딩 사이트는 모바일에 최적화되어야 합니다:
    • 중간 삽입 박스 없음
    • 큰 입력 필드
    • 쉬운 내비게이션
    • 큰 텍스트
    • 충분한 여백
    • 짧고 간결한 본문 텍스트
    • 명확한 행동 유도 문구

프리헤더 글자 수 제한

이메일 크기

이메일 크기는 Braze에서 메시지 HTML의 크기를 의미합니다(구축한 본문과 메시지 발송 시 Braze가 추가하는 내용 포함).

  • 이메일 크기를 제한하세요. 102 KB보다 큰 이메일 본문은 Braze 서버에 큰 부담을 줄 뿐만 아니라, Gmail 및 기타 이메일 클라이언트에서 잘립니다.
  • URL로 참조하는 호스팅된 이미지는 대용량 인라인 자산을 붙여넣는 것과 같은 방식으로 HTML에 포함되지 않습니다. 미디어 라이브러리를 사용하고 href로 링크하면 메시지 크기를 줄이는 데 도움이 됩니다.

잘림 위험을 줄이려면:

  • 텍스트와 링크를 줄이세요.
  • 필요한 경우 중요한 CSS를 인라인으로 적용하세요. HTML에서 불필요한 공백을 제거하세요.
  • 이미지와 HTML 자산을 압축하세요.

최종 이메일 크기에 영향을 주는 요소

다음 기능은 렌더링된 메시지 크기를 소량 증가시킵니다:

  • 열기 추적 픽셀: 메시지 본문에 1 x 1 px 이미지 태그를 추가합니다
  • 프리헤더: 본문 상단에 숨겨진 <div>를 추가합니다
  • 링크 별칭 지정: 추적되는 각 URL에 16자 쿼리 파라미터(lid=)를 추가합니다
  • 링크 템플릿: 대시보드에서 설정한 쿼리 파라미터를 일치하는 URL에 추가합니다
  • CSS 인라인(선택 사항): 포함된 스타일시트 규칙을 HTML 요소에 인라인으로 적용하며, 스타일시트 복잡도에 따라 중복 CSS가 추가될 수 있습니다

프리헤더와 추적 픽셀은 약 600자(1 KB 미만)를 추가합니다. Braze는 일반적으로 링크 수, 링크 템플릿 복잡도, CSS 인라인 활성화 여부에 따라 0 KB에서 5 KB 사이를 추가합니다. 이메일 크기가 제한에 가까운 경우, 최종 렌더링 크기가 이러한 입력에 따라 달라지므로 발송 전에 이메일을 테스트하는 것을 권장합니다.

텍스트 길이

권장 텍스트 길이는 다음 표를 참조하세요.

이미지 크기

권장 이미지 크기는 다음 표를 참조하세요. 작고 고품질의 이미지가 더 빠르게 로드되므로, 원하는 결과를 달성할 수 있는 가장 작은 자산을 사용하세요.

딥링킹

푸시 알림과 인앱 메시지에서 딥링크는 사용자를 앱 내 지정된 대상으로 직접 이동시킵니다. 그러나 딥링크는 앱이 설치되어 있어야 하며, 이메일은 수신자가 앱을 설치했는지 확인할 방법을 제공하지 않습니다. 따라서 이메일의 딥링크는 앱이 설치되지 않은 수신자에게 오류를 발생시킬 수 있습니다.

대신 표준 URL로 작동하는 유니버설 링크 및 App Links를 사용하세요. 앱을 열거나 사용자를 특정 페이지로 안내하도록 설정할 수 있습니다. 또한 앱이 설치되지 않은 경우 앱 스토어로 리디렉션하거나 웹페이지로 폴백할 수도 있습니다.

투명 이미지가 포함된 Content Blocks

Content Blocks에 투명 배경의 이미지(예: 로고)가 포함되어 있고 Liquid 태그로 삽입된 경우, 이미지 뒤에 배경색이 나타날 수 있습니다. 이 색상은 드래그 앤 드롭 에디터의 이메일 글로벌 스타일 설정, 특히 이메일 배경색에서 가져옵니다. 글로벌 스타일 설정에서 흰색이 아닌 다른 색상을 사용하면 해당 색상이 대신 나타납니다.

Content Blocks를 의도한 대로 표시하려면:

  • Content Blocks의 열 배경색을 이메일 또는 템플릿 배경과 일치하도록 설정하세요.
  • 또는 드래그 앤 드롭 Content Blocks를 HTML Content Blocks로 변환하고 배경을 투명으로 설정하세요.

서로 다른 배경을 가진 영역(예: 본문과 푸터)에서 동일한 Content Blocks를 사용해야 하는 경우, 각각 적절한 열 배경색을 가진 두 가지 버전의 블록을 만드세요.

Content Blocks를 행으로 이메일에 드래그하려는 경우, 행 열 배경을 투명으로 설정하여 글로벌 배경을 재정의할 수 있습니다.
New Stuff!