간단한 5단계를 통해 이메일 디자인을 모바일 친화적인 반응형으로 만드세요

이메일 뉴스레터와 마케팅 캠페인이 어느 기기에서나 멋지게 보이길 원하시나요? 물론 그렇습니다. 누구도 자신의 노력이 다른 사람의 받은 편지함에서 읽을 수 없게 되는 것을 원하지 않습니다. 다행히도 단 5단계만 거치면 이메일이 응답성이 뛰어나고 구독자에게 깊은 인상을 남길 수 있습니다. 그러니 다과, 좋아하는 재생 목록 또는 음료를 들고 어떤 화면에서든 가장 멋지게 보이도록 시작해 보세요.

열 너비를 픽셀이 아닌 백분율로 설정

반응형 이메일 디자인을 만들려면 고정 픽셀 값 대신 백분율을 사용하여 열 너비를 설정하세요. 이를 통해 열을 다양한 화면 너비에 맞게 유연하게 조정할 수 있습니다.

유동 그리드 사용

유동 격자 접근 방식은 열 너비에 대한 백분율을 사용하므로 화면 크기에 따라 필요에 따라 확장 및 축소할 수 있습니다. 간단한 2열 레이아웃의 경우 왼쪽 열 너비를 60~70%, 오른쪽 열 너비를 30~40%로 만듭니다. 예를 들어:

<테이블>

<tr>

<td width=”65%”>여기에 열 1 내용</td>

<td width=”35%”>여기에 열 2 내용</td>

</tr>

</table>

이렇게 하면 열 1이 사용 가능한 공간의 65%를 차지하고 열 2가 나머지 35%를 차지하게 됩니다. 대형 데스크톱 화면에서는 열 1의 너비가 650px일 수 있지만 작은 모바일 화면에서는 너비가 200px에 불과할 수 있습니다. 그러나 상대적인 비율은 동일하게 유지됩니다.

반응형 중단점을 위한 미디어 쿼리 추가

미디어 쿼리를 사용하면 화면 너비에 따라 다양한 스타일 규칙을 적용할 수 있습니다. 이를 사용하여 다양한 중단점에서 유동 그리드를 추가로 조정할 수 있습니다. 예를 들어:

/* 휴대폰의 경우: */

@media 전용 화면 및 (최대 너비: 600px) {

테이블, TD {

너비: 100% !중요;

}

}

/* 태블릿의 경우: */

@media 전용 화면 및 (최소 너비: 601px) 및 (최대 너비: 900px) {

테이블, TD {

너비: 80% !중요;

}

}

이렇게 하면 작은 휴대폰에서는 화면 너비의 100%, 태블릿에서는 80%를 채우도록 테이블과 열이 확장되어 디자인이 완벽하게 반응하게 됩니다.

크기가 조정되는 유동적인 이미지와 미디어를 사용하세요.

이메일 디자인을 모바일 친화적으로 만들려면 이미지와 기타 미디어의 크기를 모든 화면 크기에 맞게 유동적으로 조정해야 합니다. 다음 팁을 따르세요.

반응형 이미지 크기 사용

이메일에 이미지를 추가할 때 반응형 이미지 크기 조정을 사용하세요. 이는 이메일 클라이언트가 보고 있는 화면에 적합한 크기를 선택할 수 있도록 다양한 이미지 크기를 제공한다는 의미입니다.

예를 들어 너비가 1000px인 큰 이미지만 포함하는 대신 다음도 포함하세요.

• 중간 크기(약 600px)
• 좁은 열을 위한 작은 크기(약 400px)
• 작은 모바일 화면을 위한 작은 크기(약 200px)

이메일 클라이언트는 화면과 대역폭에 가장 적합한 크기를 자동으로 선택합니다. 이메일에 여러 이미지 크기를 지정하려면 <img srcset> 속성을 ​​사용하세요.

미디어를 모바일 친화적으로 만들기

비디오나 GIF와 같은 다른 미디어의 경우에도 다양한 크기 옵션을 제공하세요. 비디오에는 다양한 해상도의 MP4 소스가 있어야 합니다. GIF 및 iframe(예: YouTube 포함)에는 모든 화면에 맞게 크기가 조정되는 너비 제한이 있어야 합니다.

이러한 팁을 명심하면 이메일 이미지, 비디오 및 기타 미디어가 모든 장치에서 아름답게 표시됩니다. 가입자는 보기에도 좋고 어디에서 열어도 쉽게 읽을 수 있는 이메일을 좋아하게 될 것입니다.

픽셀이 아닌 ems로 글꼴 크기 조정

이메일 디자인을 모바일 친화적으로 만들려면 픽셀 대신 em으로 글꼴 크기를 조정하는 것이 좋습니다. 픽셀은 고정된 단위이므로 누군가 브라우저를 확대하면 텍스트가 왜곡될 수 있습니다. 반면에 Em은 사용자 설정에 따라 크기가 조정되는 상대적 단위입니다.

반응형 이메일 프레임워크 사용

반응형 이메일 프레임워크에는 모든 화면 너비에 맞게 자동으로 크기가 조정되는 사전 구축된 구성 요소가 있습니다. 널리 사용되는 옵션으로는 MJML, Foundation for Emails 및 Ink가 있습니다. 이러한 프레임워크는 크기 조정을 위해 em을 사용하므로 변환을 직접 수행하는 것에 대해 걱정할 필요가 없습니다.

프레임워크를 사용하지 않는 경우 픽셀을 em으로 변환하세요.

CSS를 완전히 제어하고 프레임워크를 사용하지 않으려는 경우 모든 픽셀 크기를 em으로 변환해야 합니다. 방법은 다음과 같습니다.

1. 기본 글꼴 크기를 픽셀 단위로 결정합니다. 16px이라고 가정 해 봅시다.
2. ems로 바꿔보세요. 1em = 16px(기본 크기)이므로 16px = 1em입니다.
3. 사용하려는 크기는 16px로 나누고 1em을 곱하세요. 예를 들어 24px 제목의 경우 24px/16px = 1.5em입니다.
4. CSS의 모든 픽셀 크기를 em에 해당하는 크기로 바꾸세요.

반응적으로 콘텐츠 정렬

반응형 이메일 디자인을 만들려면 콘텐츠가 어떤 화면 크기에서도 제대로 표시되도록 정렬해야 합니다. 다음과 같이하세요:

유체 측정 사용

열, 이미지, 컨테이너에 고정 픽셀 너비를 사용하는 대신 백분율을 사용하세요. 이렇게 하면 콘텐츠가 화면 너비에 비례하여 확장될 수 있습니다. 예를 들어 너비=”600px”인 이미지 대신 너비=”50%”를 사용하세요.

무거운 스타일링은 피하세요

일부 이메일 클라이언트에서는 제대로 표시되지 않는 사용자 정의 스타일의 사용을 제한하여 이메일을 단순하게 유지하세요. 기본 HTML 테이블, 인라인 스타일 및 레이아웃용 정렬 속성을 사용합니다. 필요한 경우 요소를 중앙에 배치하세요.

이러한 실용적인 단계를 따르면 독자가 받은 편지함을 여는 데 어떤 장치를 사용하든 이메일 콘텐츠가 아름답게 표시됩니다. 구독자를 위한 훌륭한 반응형 이메일 디자인 경험을 만드는 것은 그만한 노력을 기울일 가치가 있습니다.

좀 더 테스트하고, 테스트하고, 테스트하세요

모바일 장치에 어떻게 표시되는지 확인하세요.

우리 모두는 대다수의 사람들이 모바일 장치를 사용하여 이메일에 액세스한다는 것을 알고 있습니다. 따라서 이메일이 모바일 친화적인지 확인하려면 이메일을 다른 모바일로 보내 테스트해 보세요. Android, iPhone, 태블릿에서 확인하세요. 세로 모드와 가로 모드 모두에서 이미지, 버튼, 텍스트가 어떻게 표시되는지 확인하세요.

주요 이메일 클라이언트에서 테스트

모든 이메일 클라이언트가 동일한 방식으로 이메일을 표시하는 것은 아닙니다. Gmail, Outlook, Yahoo Mail 및 가입자가 일반적으로 사용하는 기타 주요 이메일 서비스에 대해 테스트를 수행하세요. 이미지, 포함된 링크, 버튼 또는 기타 대화형 요소가 표시되는 방식에 문제가 있는지 찾아보세요. 코드를 편집하여 표시 문제를 해결하고 클라이언트 간 일관성을 보장하세요.

대체 콘텐츠가 어떻게 표시되는지 확인하세요.

이메일 클라이언트에서 이미지가 비활성화된 구독자의 경우 대체 콘텐츠가 이미지 대신 표시됩니다. 모든 대체 텍스트, 이미지 캡션, 이미지 설명이 그 자체로 의미가 있고 이메일 콘텐츠에 대한 맥락을 제공하는지 다시 확인하세요. 대체 콘텐츠는 이미지가 없더라도 여전히 좋은 독자 경험을 제공해야 합니다.

이메일 렌더링 서비스 검토

Litmus, Email on Acid 또는 mosaico와 같은 무료 이메일 렌더링 테스트 서비스를 사용하여 이메일 디자인이 다양한 이메일 클라이언트 및 장치에서 한 번에 어떻게 렌더링되는지 확인하세요. 이메일 응답성을 향상하기 위해 해결해야 할 문제를 강조하는 보고서를 제공합니다. 보고서가 깨끗하게 돌아올 때까지 코드를 변경하고 테스트 이메일을 다시 업로드하세요.

링크와 대화형 요소를 다시 확인하세요.

이메일에 포함된 링크, 버튼 및 기타 대화형 구성 요소는 모든 플랫폼에서 제대로 작동해야 합니다. 링크가 의도한 대상으로 이동하는지, 버튼이나 양식이 예상대로 작동하는지 다시 확인하세요. 캠페인을 시작하기 전에 여러 번 테스트하여 끊어진 링크나 작동하지 않는 요소가 없는지 확인하세요.

이메일의 반응형 디자인을 완성하려면 지속적인 테스트와 조정이 필요합니다. 그러나 사전에 노력을 기울이면 모든 구독자의 장치와 이메일 클라이언트에서 광범위한 도달 범위와 높은 참여도를 갖춘 이메일을 얻을 수 있습니다.

일반적인 응답 이메일 문제 해결

모바일에 넘쳐나는 콘텐츠

• 단일 열 레이아웃을 사용합니다. 여러 열이 이메일에서 제대로 반응하는 경우는 거의 없습니다.
• 단락과 섹션을 짧고 간결하게 유지하세요. 긴 텍스트 블록은 작은 화면에서 읽기 어렵습니다.
• 가능하면 글머리 기호와 번호가 매겨진 목록을 사용하십시오. 단락보다 공간을 덜 차지합니다.
• 작은 화면에서는 보조 콘텐츠를 숨깁니다. 미디어 쿼리를 사용하여 화면 너비에 따라 콘텐츠를 표시하거나 숨길 수 있습니다.

이메일 너비 문제

일부 이전 이메일 클라이언트에는 반응형 이메일 너비에 문제가 있습니다. 이 문제를 해결하려면:

1. 이메일 컨테이너의 최대 너비를 설정하세요. 대부분의 이메일에는 600px을 권장합니다.
2. 일부 이메일 클라이언트 CSS를 재정의하려면 너비 선언 뒤에 !important를 추가하세요. 예를 들어:
3. Outlook 2007-2013에 대한 대체 코드를 추가합니다. 이러한 이전 버전에는 별도의 스타일이 필요합니다.

이러한 문제 해결 팁을 따르면 가장 일반적인 응답 이메일 문제를 해결할 수 있습니다. 다른 질문이 있으면 알려주세요!

결론

다음은 이메일이 응답하는지 확인하는 몇 가지 간단한 방법입니다. 오늘날 이메일의 50% 이상이 모바일 장치를 통해 열리므로 더 작은 화면 크기에 맞게 최적화하는 것이 필수적입니다. 이메일용 템플릿을 모두 검토하고 필요한 경우 글꼴 크기, 이미지 크기 및 간격을 변경하세요. 수신자는 어떤 장치를 사용하든 읽고 참여할 수 있는 이메일을 받으면 기뻐할 것입니다.