편집한 내용과 다르게 표시될 때

언제 필요한가요?

• 제작한 이메일과 다르게 수신한 이메일에서 템플릿이 깨져 보일 때

• 이메일이 편집한 내용과 다르게 표시될 때

---

이메일을 작성하다 보면, 에디터에서 편집한 내용과 [미리보기] 또는 [테스트 발송하기]로 확인한 이메일의 본문이 다르게 표시될 수 있습니다.

아래 내용을 순서대로 확인해 원인을 찾아 해결해 보세요.

외부에서 복사한 내용을 붙여 넣었는지 확인하기

외부에서 복사한 텍스트에는 눈에 보이지 않는 코드나 공백이 포함되어 있을 수 있습니다. 이러한 코드가 이메일 환경에서 표시 문제를 일으킬 수 있습니다.

아래 방법으로 스타일 제거를 진행해 주세요.

1. 텍스트를 모두 선택한 뒤 [툴바 → 포맷 초기화(T자에 \ 빗금이 있는 아이콘)] 버튼을 누릅니다.

2. 서식이 모두 초기화되면 다시 발송(예약)을 시도합니다.

3. 문제가 반복된다면, 텍스트 상자를 삭제한 뒤 '서식 없이 붙여넣기(Ctrl + Shift + V / ⌘ + Shift + V)'로 내용을 다시 입력해 주세요.

줄 바꿈이 편집 화면과 다르게 보일 때

스티비는 다양한 기기와 환경에서 동일한 디자인을 보여주기 위해 반응형 디자인을 제공합니다. 구독자(수신자)가 사용하는 기기의 스크린 사이즈, 기본 폰트, 이메일 클라이언트 등 여러 환경에 따라 줄 바꿈은 다르게 표시될 수 있습니다. 작업하는 환경에서는 보기 좋게 편집했더라도 수신자가 어디서 확인했는지에 따라 표시는 달라질 수 있습니다.

권장 방법

• 문장 중간에 줄 바꿈을 넣지 말고, 문단 단위로 구분해 편집하세요.

• 수신 환경별로 다르게 보이는 것은 자연스러운 현상입니다.

링크 텍스트 아래 밑줄이 표시될 때

이메일에 [스타일]이 적용되어 있는지 확인해 주세요. 에디터 단계에서 어떤 편집 상자도 선택하지 않은 상태로 화면 오른쪽 [스타일 → 구성 요소 → 링크 텍스트] 부분을 확인해 보세요.

이모지가 표시되지 않을 때

스티비는 대부분의 환경에서 호환되는 이모티콘을 제공하지만, 사용하는 브라우저 환경(예. 크롬, 엣지 등)에 따라 다르게 표시되거나 표시되지 않을 수 있습니다.

만약 다른 사이트의 이모지를 복사해서 사용하는 경우, 실제 발송 전 이모지가 어떻게 보이는지 확인한 뒤에 발송해 주세요.

https://emojipedia.org 사이트에서 기기별로 어떻게 표시되는지 확인할 수 있습니다.

폰트 종류가 작업한 환경과 다를 때

대부분의 이메일 수신 환경(예. G메일, 네이버 메일 등)은 웹폰트 등 특수한 폰트를 지원하지 않습니다. 따라서, 스티비에서는 '고딕, 명조' 계열 폰트만 사용할 수 있도록 제공하고 있습니다.

예를 들어, 스티비 에디터에서 폰트들 '고딕'으로 설정한 경우 수신 환경에 설치된 고딕 계열의 폰트로 표시됩니다.

• 애플고딕 → 노토산스 → 나눔고딕 → 맑은고딕 순으로 표시합니다.

• 애플고딕이 없다면 노토산스를, 노토산스가 없다면 나눔고딕으로 표시하는 방식입니다.

만약, 특수한 폰트를 사용하고 싶다면 이미지로 만들어 추가하는 방법을 추천합니다. 자세한 내용은 뉴스레터 디자인을 도와주는 새로운 폰트 사용법 블로그 콘텐츠를 참고해 주세요.

아웃룩에서 이메일이 다르게 표시될 때

아웃룩은 일반적인 이메일 환경과 다르게 지원 범위가 제한적입니다. 이로 인해 일부 템플릿이 깨져 보이거나 버튼, 이미지, 구분선이 다르게 표시될 수 있습니다.

아웃룩 환경의 특성을 설명하고 해결할 수 있는 조치 방법을 안내합니다.

버튼 모서리 사각형으로 디자인하기

아웃룩은 '둥근 모서리'를 지원하지 않습니다. 스티비에서 둥근 모서리를 선택해 버튼을 제작하더라도 아웃룩에서 자동으로 사각형 모양으로 변경해 보여줍니다.

따라서, 버튼을 디자인할 때 사각형 모양으로 설정해 주세요.

이미지를 권장 사이즈에 맞게 조정하기

원본 이미지의 크기가 너무 크거나 작으면 템플릿이 깨질 수 있습니다.

이미지 권장 사이즈는 다음과 같습니다.

• 1단: 가로 590px (좌우 여백 없음 시 630px)

• 2단: 가로 285px (보통 여백 기준)

*주의: 이메일 전체를 하나의 통 이미지로 제작하는 것은 권장하지 않습니다. 통으로 된 이미지를 사용하는 경우 스팸으로 판단되거나 아웃룩 환경에서는 이미지가 표시되지 않는 문제가 발생할 수 있습니다. 이메일 뉴스레터에 통 이미지를 사용하지 말아야 하는 5가지 이유 글을 참고해 보세요.

구분선 이미지로 사용하기

스티비 구분선은 'border'라는 HTML 속성을 사용합니다. 대부분의 이메일 서비스에서 구분선은 border 속성을 사용해서 구현되지만, 아웃룩에서는 border 속성을 제공하지 않습니다.

따라서, 구분선을 사용하려면 이미지로 제작한 구분선(가로 630px 기준)을 삽입해 주세요.