받아 본 이메일이 편집한 내용과 다르게 표시될 때
언제 필요한가요?
제작한 이메일과 다르게 수신한 이메일에서 템플릿이 깨져 보이는 경우
이메일이 편집한 내용과 다르게 표시되는 경우
이메일을 작성하다 보면 내가 편집한 이메일 본문과 [미리보기] 또는 [테스트 발송하기]를 통해 확인한 이메일 본문이 다를 때가 있습니다. 아래 내용을 참고해 원인을 찾아 해결합니다.
외부에서 작업한 내용(예: 워드, 한글, PPT)을 복사해서 붙여 넣었나요?
외부에서 텍스트를 복사해서 붙여넣으면 눈에 보이지는 않지만 불필요한 코드나 공백이 따라오는 경우가 존재합니다. 이렇게 추가된 불필요한 코드나 공백이 이메일 환경에서 문제를 일으킬 수 있습니다.
텍스트를 잘 표시하기 위해 외부 환경들은 저마다의 텍스트 처리 방식을 가지고 있습니다. 이 방식 중 '스티비 에디터와 호환되지 않거나' 또는 '이메일 환경에서 호환되지 않는 코드'가 있는 경우 실제 이메일을 발송했을 때 문제가 발생하는 경우가 있습니다. 외부에서 작업한 텍스트를 붙여넣었다면 아래 절차에 따라 확인해 보세요.
에디터 툴바에 있는 [포맷 초기화(T자에 \ 빗금이 있는 아이콘)] 버튼을 클릭해 텍스트 서식을 초기화합니다.
내용을 삭제하고 복사한 내용을 '서식 없이 붙여넣기(ctrl+shift+v)'를 사용하여 붙여 넣습니다.
그래도 문제가 계속된다면 상자를 완전히 삭제하고 새로운 상자를 넣은 뒤, 내용을 서식 없이 붙여넣기(ctrl+shift+v)하여 다시 편집합니다.
위 절차로 처리했지만 계속해서 문제가 발생하거나 외부에서 복사한 텍스트를 붙여넣지 않았다면 아래 내용을 참고해 문제를 해결해 보세요. 문제 해결에 어려움이 있다면 화면 오른쪽 아래에 있는 [물음표(?)]를 클릭하여 도움을 받아보세요.
줄 바꿈이 작업한 내용과 다를 때
스티비에서는 다양한 환경에서 균일한 디자인 결과물을 표시하기 위해 반응형을 제공하고 있습니다. 다만, 구독자가 모두 같은 환경에서 같은 기기를 사용하는 것이 아니라면 스크린 사이즈, 기본 폰트 설정 등에 영향을 받아 편집한 환경과 줄 바꿈이 다르게 표시될 수 있습니다.
작업하는 환경에서는 보기 좋게 편집했더라도 수신자가 어디서 확인했는지에 따라 표시는 달라질 수 있기 때문에 되도록 문장 중간에 줄 바꿈은 하지 않고 편집하는 것이 좋습니다.
링크 텍스트 아래 밑줄이 표시될 때
혹시 작성하신 이메일에 [스타일]이 적용되어 있지는 않나요? 이메일 '에디터' 단계에서 어떤 편집 상자도 누르지 않은 상태로 화면 오른쪽 [스타일 → 구성 요소 → 링크 텍스트] 부분을 확인해 보세요.
이모지가 표시되지 않을 때
이모티콘 표시는 사용하는 브라우저(예: 크롬, 엣지 등)의 설정에 따라 달라질 수 있습니다. 에디터에서 제공하는 이모티콘은 최대한 다양한 환경에서도 범용으로 사용할 수 있는 이모티콘으로 제공하고 있습니다.
만약 다른 사이트의 이모지를 사용하는 경우, 실제 발송 전 이모지가 어떻게 보이는지 [테스트 발송하기]로 확인한 뒤에 발송해 주세요. https://emojipedia.org/ 사이트에서 미리 기기별로 어떻게 표시되는지 확인할 수 있습니다.
폰트 종류가 작업한 환경과 다를 때
대부분의 이메일 수신 환경(예: G메일, 네이버 등)에서 웹폰트 기능을 제공하고 있지 않기 때문에 웹폰트를 사용할 수 없습니다. 내 환경에서 보기 좋은 폰트를 설정했다고 하더라도 이메일을 확인하는 구독자의 환경에 그 폰트가 설치되어 있지 않다면 폰트가 깨져서 표시가 되는 등 디자인적으로 좋지 않은 문제가 발생합니다.
스티비에서는 '고딕, 명조' 계열 폰트만 사용할 수 있도록 설정을 제공하고 있습니다. 사용 환경에 따라 설치된 고딕 계열의 폰트로 표시됩니다. 사용 환경마다 설치된 폰트에 따라 실제 표시되는 폰트가 다를 수 있습니다. (예. 윈도우: 맑은 고딕, 맥OS: 애플고딕)
만약 특수한 폰트를 사용하고 싶다면 이미지로 만들어 추가하는 방법을 추천합니다. 자세한 내용은 뉴스레터 디자인을 도와주는 새로운 폰트 사용법 블로그 콘텐츠를 참고해 주세요.
아웃룩에서 이메일이 이상하게 표시될 때
아웃룩은 다른 일반적인 이메일 수신 환경과 달라 일부 템플릿이 깨져 보이는 현상이 발생할 수 있습니다. 아웃룩 환경의 특성을 설명하고 해결할 수 있는 조치 방법을 안내합니다.
버튼 모서리는 사각형 모양으로 디자인하기
아웃룩에서는 '둥근 모서리'를 표현하기 위한 기능을 제공하고 있지 않습니다. 스티비 에디터에서 둥근 모서리를 선택해 버튼을 제작하더라도 아웃룩 환경에서 자동으로 사각형 모양으로 변경해 보여줍니다. 아웃룩 환경에서 확인하는 구독자가 많다면 이 부분을 고려해서 디자인해 주세요.
이미지를 권장 사이즈에 맞게 편집하기
원본 이미지의 크기에 따라 템플릿 깨짐 문제가 발생할 수 있습니다. 원본 이미지의 크기를 권장 사이즈에 맞게 조정한 뒤 넣어보세요. 이미지 권장 사이즈는 1단은 가로 590px (좌우 여백 없음 설정 시 가로 630px), 2단은 가로 285px입니다. (2단은 좌우 여백 설정 보통 시)
이메일 전체를 1장짜리 통으로 된 이미지로 제작하는 것은 권장하지 않고 있습니다. 통으로 된 이미지를 사용하는 경우 스팸으로 판단되거나 아웃룩 환경에서는 이미지가 표시되지 않는 문제가 발생할 수 있습니다. 이메일 뉴스레터에 통 이미지를 사용하지 말아야 하는 5가지 이유 글을 참고해 보세요.
구분선은 이미지로 편집해서 넣기기
스티비의 구분선은 border라는 HTML 속성을 사용합니다. 대부분의 이메일 서비스 환경에서 구분선은 border 속성을 사용해서 구현됩니다. 하지만 아웃룩에서는 border 속성을 제공하지 않아 [구분선 상자]를 넣어도 구분선이 정상적으로 표시되지 않습니다. 따라서 구분선을 사용하고 싶은 경우에는 구분선을 이미지로 제작해 사용하면 됩니다. 구분선 이미지는 가로를 640px을 기준으로 만들어 사용해 주세요.
Last updated