아웃룩에서 뉴스레터가 깨지는 5가지 이유와 해결 방법

"미리보기랑 실제로 발송된 메일이 달라요."

배너는 화면을 꽉 채울 만큼 커져 있고, 둥글게 만든 버튼은 네모가 되었고, 깔끔하게 넣은 구분선은 사라져 있습니다.

이런 문제가 생겼다면 받는 분이 기존 PC용 아웃룩(구버전)을 사용하고 있을 가능성이 있습니다. 특히 회사·기관·협회로 뉴스레터를 보내는 분들이라면 한 번쯤 겪어 보셨을 문제입니다.

국내외 이메일 마케팅 서비스들도 아웃룩에서는 일부 디자인 기능이 제대로 지원되지 않을 수 있다고 안내하고 있습니다.이번 글에서는 아웃룩에서 뉴스레터 디자인이 깨지는 이유와 자주 발생하는 5가지 문제, 그리고 제작할 때 주의해야 할 점을 정리해 드릴게요

아웃룩에서 뉴스레터 디자인이 깨지는 이유

뉴스레터는 작은 웹페이지와 같습니다. 지메일이나 네이버 메일, 스마트폰 메일 앱은 일반적으로 웹브라우저와 비슷한 방식으로 HTML 이메일을 화면에 보여 줍니다.

하지만 아웃룩(PC용 구버전)은 이 웹페이지를 Word 프로그램의 방식으로 보여 줍니다. 2007~2021 버전과 Microsoft 365의 기존 데스크톱 앱이 여기에 해당합니다.Word가 알아듣지 못하는 디자인 설정은 그냥 무시되거나 다르게 표시되는 겁니다.

내 구독자는 어떤 아웃룩을 쓸까요?

회사나 기관에서는 업무용 프로그램을 쉽게 바꾸기 어렵기 때문에 여전히 구버전 아웃룩을 사용하는 곳이 많습니다.

구버전 아웃룩은 Word나 Excel처럼 상단에 여러 메뉴가 나열된 형태로, 익숙한 화면이 특징입니다.Microsoft는 기존 아웃룩을 최소 2029년까지 지원할 계획이라고 밝힌 만큼, 뉴스레터를 만들 때도 기존 아웃룩 사용자를 고려하는 것이 좋습니다.

아웃룩 메일에서 자주 발생하는 5가지 디자인 문제

아래 5가지는 예전 아웃룩에서 가장 자주 보고되는 증상입니다.

1. 이미지가 너무 크게 나와요

뉴스레터에 넣은 배너나 사진이 원래보다 크게 표시되어 화면 밖으로 늘어나는 현상입니다. 특히 큰 이미지를 넣었거나 이미지의 표시 너비가 제대로 지정되지 않았다면, 기존 아웃룩에서 메일 전체의 폭이 늘어날 수 있습니다.

어떻게 피할까요?
이미지를 뉴스레터 본문 폭에 맞게 준비하고, 에디터에서도 표시 너비를 확인하세요. 본문이 600px이라면 이미지도 그 폭을 넘지 않게 설정하는 것이 좋습니다.

• 일반 이미지: 600px 이하 권장
• 2단 배치 이미지: 각 280~290 px 이하 권장

또한 메일 전체를 큰 이미지 한 장으로 만드는 것은 피하는 것이 좋습니다. 이미지 표시가 차단되면 내용을 전혀 읽을 수 없고, 이미지에만 의존하는 메일은 접근성과 전달력 측면에서도 불리하기 때문입니다.

2. 글꼴이 다르게 보여요

아웃룩을 포함한 대부분의 이메일 수신 환경( gmail, 네이버 메일 등)은 웹폰트 등 특수한 폰트를 지원하지 않습니다.

어떻게 피할까요?
맑은 고딕처럼 일반적으로 많이 사용하는 글꼴을 선택하세요. 특별한 글꼴이 꼭 필요한 제목은 오즈메일러 템플릿에서 [글꼴 꾸밈효과]가 있는 템플릿을 사용해주세요.

3. 배경 사진이 사라져요

사진 위에 글자를 올렸는데 사진이 사라지고 글자만 남습니다. 흰색 글자를 사용했다면 내용까지 보이지 않을 수 있습니다.

어떻게 피할까요?
글자는 단색 배경 위에 넣고 사진은 별도로 배치하세요. 배경 사진을 꼭 사용해야 한다면 사진이 사라져도 글자를 읽을 수 있도록 배경색을 지정해 두는 것이 좋습니.

4. 버튼이 네모나고 작아져요

둥글게 만든 버튼의 모서리가 각지게 바뀌거나, 버튼 안의 여백이 줄어드는 문제가 발생할 수 있습니다.이런 문제는 기존 아웃룩이 둥근 모서리나 여백과 관련된 일부 디자인 설정을 제대로 지원하지 않아서 발생합니다.

어떻게 피할까요?
복잡한 모양보다 단순한 사각형 버튼을 사용하세요. 중요한 링크라면 본문에도 같은 링크를 한 번 더 넣어 두면 좋습니다.

5. 구분선이 사라져요

아웃룩은 구분선을 만드는 HTML·CSS 방식을 지원하지 않습니다. 따라서 내용 사이에 넣은 가로 구분선이 보이지 않거나 두께와 색상이 달라질 수 있습니다.

어떻게 피할까요?
구분선이 중요하다면 선 모양의 이미지를 사용하는 것도 방법입니다. 오즈메일러 이메일 템플릿도 이미지 형태의 구분선을 활용합니다.

아웃룩에서 뉴스레터 디자인이 깨지는 것은 생각보다 흔한 일입니다.모든 메일함에서 디자인을 똑같이 보여 주기는 어렵지만, 어디서 열어도 중요한 내용을 읽고 링크를 이용할 수 있도록 만드는 것은 가능합니다.

뉴스레터를 발송하기 전에는 Gmail·네이버 메일뿐 아니라 기존 PC용 아웃룩에서도 테스트해 보세요.이미지 크기, 버튼, 여백, 링크만 확인해도 큰 문제를 줄일 수 있습니다.

발송 전 확인해야 할 다른 항목이 궁금하다면 대량메일 발송 전 확인할 5가지도 함께 참고해 보세요.

오즈메일러에 이메일 보내러 가기