이 글에서는
'아웃룩' 환경은 일반적인 이메일 수신 환경(예: G메일, 네이버 등)과 조금 다른 방식으로 이메일을 표시합니다. 그래서 종종 작업한 환경에서는 이상이 없지만 아웃룩에서 확인하는 경우 이메일 템플릿이 깨지는 경우가 있습니다. 템플릿 깨짐 문제를 최소화 할 수 있는 방법에 대해서 알아봅니다.
들어가기 전에
대부분의 아웃룩 환경에서 발생하는 문제는 이 가이드를 참고하면 직접 해결이 가능합니다. 이 가이드를 따라 조치했음에도 문제가 계속되는 경우에는 1:1 상담 채팅을 통해 스티비 팀의 도움을 받아보세요. (운영시간: 평일 10:30 ~ 17:00)
목차
'윈도우용 아웃룩 최적화 템플릿으로 발송하기' 옵션을 사용하세요
워드, 한글, PPT 등 외부 환경에서 작업한 텍스트는 '서식 없이 붙여넣기' 기능을 사용해 붙여 넣어주세요
'윈도우용 아웃룩 최적화 템플릿으로 발송하기' 옵션을 사용하세요.
*주의! 에디터의 이메일 처리 방식이 개선되어 '2021년 1월 1일 이후'에 가입한 계정에는 이 옵션이 표시되지 않습니다. 추후 2021년 1월 1일 이전에 가입한 계정에서도 이 옵션이 표시되지 않을 예정입니다.
스티비에서는 아웃룩 환경에서도 이메일이 잘 표시되도록 별도의 옵션을 제공하고 있습니다. 이메일을 발송할 때 '윈도우용 아웃룩 최적화 템플릿으로 발송하기'를 체크하고 보내보세요. 단 이 옵션을 사용하는 경우에 일부 모바일 환경에서도 PC와 동일한 템플릿으로 표시되기도 합니다. 따라서 아웃룩 수신자가 많은 경우에만 이 옵션 사용을 고려해보세요.
이미지는 권장 사이즈에 맞게 편집하여 넣어주세요.
원본 이미지의 크기에 따라 템플릿 깨짐 문제가 발생할 수 있습니다. 원본 이미지의 크기를 권장 사이즈에 맞게 조정한 뒤 넣어보세요. 이미지 권장 사이즈는 1단은 가로 590px (좌우 여백 없음 설정 시 가로 630px), 2단은 가로 285px입니다. (2단은 좌우 여백 설정 보통 시)
*이메일 전체를 1장짜리 통으로 된 이미지로 제작하는 것은 권장하지 않고 있습니다. 통으로 된 이미지를 사용하는 경우 스팸으로 판단되거나 아웃룩 환경에서는 이미지가 표시되지 않는 문제가 발생할 수 있습니다. 아래 글도 참고해보세요.
구분선은 이미지로 편집해서 넣어주세요
스티비의 구분선은 border라는 HTML 속성을 사용합니다. 대부분의 환경에서도 보통 구분선은 border 속성을 사용해 구현됩니다. 하지만 아웃룩에서는 border 속성을 제공하지 않아 [구분선 상자]를 넣어도 구분선이 정상적으로 표시되지 않습니다. 따라서 구분선을 사용하고 싶은 경우에는 구분선을 이미지로 제작해 사용하면 됩니다.
*구분선 이미지는 가로를 640px을 기준으로 만들어 사용하세요.
버튼 모서리는 '사각형 모양'을 사용해 디자인해주세요.
아웃룩에서는 '둥근 모서리'를 표현하기 위한 기능을 제공하고 있지 않습니다. 따라서 에디터에서 '둥근 모서리'를 선택하여 버튼을 제작했다고 하더라도 '사각형 모양'으로 강제로 표시됩니다. 아웃룩 환경에서 확인하는 구독자가 많다면 이 부분도 고려하여 디자인해주세요.
워드, 한글, PPT 등 외부 환경에서 작업한 텍스트는 '서식 없이 붙여넣기' 기능을 사용해 붙여 넣어주세요.
에디터가 아닌 외부 환경(예: 워드, 한글, PPT 등)에서 작업한 텍스트를 그대로 복사해서 붙여 넣는 경우에는 이메일이나 에디터에서 호환되지 않는 코드가 섞여 여러 문제가 발생할 수 있습니다. (예: 크기 변경이 되지 않음 등)
외부에서 작업한 내용은 '서식 없이 붙여 넣기(ctrl+shift+v)'를 사용해 에디터에 붙여넣은 뒤 스티비 에디터에서 스타일을 편집하면 문제를 방지할 수 있습니다. 이미 텍스트를 붙여 넣었다면 툴바에 있는 [포맷 초기화(T자 모양에 빗금)]을 사용해 상자의 스타일을 초기화 한 뒤 다시 작업해보세요. 그래도 문제가 계속되는 경우에는 상자를 완전히 삭제 한 뒤 새로운 상자를 추가하고 다시 편집을 시도해보세요.