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