모바일에서 이메일이 잘 보이는 것만으로는 충분하지 않습니다. 스크롤과 터치, 보조기술 사용까지 고려해 B2B 이메일을 설계하는 기준과 검수 절차를 소개합니다.
모바일 이메일의 첫 화면부터 다시 설계하기
모바일에서는 제목과 프리헤더를 확인한 뒤 짧은 시간 안에 계속 읽을지 판단합니다. 첫 화면에는 장식적인 소개보다 수신자가 얻는 업무상 이점, 대상 독자, 다음 행동을 우선 배치하세요.
한 열 구조를 기본으로 삼고 본문 폭은 모바일 화면에서 좌우로 밀리지 않도록 고정합니다. 데스크톱용 다단 레이아웃을 그대로 축소하면 글자와 버튼이 작아지거나 가로 스크롤이 생길 수 있습니다.
- 첫 화면에 문제 상황 또는 제안의 핵심을 한 문장으로 표시하기
- 제목, 프리헤더, 본문 첫 문장이 같은 내용을 반복하지 않도록 역할을 나누기
- 이미지가 표시되지 않아도 핵심 메시지와 CTA가 이해되도록 텍스트 중심으로 구성하기
- 가로 스크롤이 생기는 표, 긴 URL, 고정 폭 이미지를 모바일에서 별도 점검하기
읽기 순서와 글자 크기를 수신자 기준으로 정하기
접근성은 모든 내용을 크게 만드는 작업이 아니라 정보를 예측 가능한 순서로 전달하는 작업입니다. 로고, 제목, 문제 제기, 제안, 근거, CTA 순서처럼 읽기 흐름을 단순하게 만들면 화면 확대나 스크린 리더를 사용하는 독자도 내용을 따라가기 쉽습니다.
본문은 모바일에서 확대하지 않아도 읽을 수 있는 크기로 설정하고, 줄 간격과 문단 길이를 함께 조정하세요. 한 문단에 여러 주장을 넣기보다 한 문단 한 메시지 원칙을 적용하면 스캔 읽기에도 유리합니다.
- 본문과 보조 문구의 크기 차이를 지나치게 벌리지 않기
- 짧은 문단과 소제목으로 긴 설명을 나누기
- 강조를 색상 하나에만 의존하지 않고 굵기나 문장으로 의미를 보완하기
- 버튼이나 링크 문구를 ‘클릭’ 대신 ‘자료 요청하기’, ‘상담 일정 확인하기’처럼 목적 중심으로 작성하기
터치 영역과 CTA를 실수 없이 설계하기
모바일 사용자는 손가락으로 화면을 누르므로 링크가 작거나 서로 붙어 있으면 오탭이 발생합니다. 주요 CTA는 주변에 충분한 여백을 두고 버튼 전체가 누를 수 있는 영역이 되게 구성하세요.
CTA를 여러 개 배치해야 한다면 우선순위를 구분합니다. 이메일의 목적이 상담 신청이라면 상담 CTA를 가장 눈에 띄게 두고, 사례 보기나 상세 설명은 보조 링크로 낮추는 방식이 적절합니다.
- 주요 버튼의 터치 영역을 실무 기준 44 CSS 픽셀 안팎으로 확보하기
- 버튼과 인접 링크 사이에 손가락이 구분할 수 있는 여백 두기
- 버튼 색상만 바꾸지 말고 명확한 텍스트와 충분한 대비 사용하기
- CTA를 누른 뒤 연결되는 랜딩페이지도 동일한 모바일 흐름과 메시지를 유지하기
- 이미지 전체를 링크로 사용할 경우 대체 텍스트와 링크 목적을 함께 점검하기
색상·이미지·대체 텍스트를 접근성 기준으로 검수하기
색상은 브랜드 표현보다 정보 전달을 우선해야 합니다. 일반 본문은 배경과 충분한 대비를 확보하고, 연한 회색 글자나 이미지 위에 얹은 흰색 문구는 실제 기기에서 읽히는지 확인하세요. 색각 특성이 다른 사람도 구분할 수 있도록 상태나 우선순위를 색상만으로 표현하지 않는 것이 좋습니다.
이미지는 메시지를 보강하는 수단이지 메시지 전체를 담는 그릇이 되어서는 안 됩니다. 제품 화면이나 행사 배너 안에 중요한 문구를 넣었다면 동일한 정보를 본문 텍스트로도 제공합니다.
- 일반 텍스트는 배경과의 명도 대비를 WCAG 권장 수준인 4.5 대 1 이상으로 확인하기
- 큰 텍스트와 주요 그래픽은 적용 기준에 맞는 대비를 별도로 점검하기
- 장식 이미지는 보조기술이 불필요하게 읽지 않도록 처리하기
- 정보를 담은 이미지에는 내용을 요약한 대체 텍스트 작성하기
- 이미지 차단 상태에서 제목, 제안, CTA가 모두 전달되는지 확인하기
- 애니메이션 GIF는 핵심 정보를 프레임 변화에만 의존하지 않기
발송 전 모바일 접근성 검수표 만들기
검수는 한 기기에서 예쁘게 보이는지 확인하는 데서 끝나지 않습니다. 실제 발송 환경의 이메일 클라이언트, 운영체제, 화면 크기, 이미지 표시 여부를 나누어 확인해야 합니다. 템플릿 변경이 없더라도 링크와 이미지가 정상적으로 로드되는지 매 발송 전에 확인하세요.
검수 결과는 ‘수정 완료’라는 한 줄보다 항목, 발견 위치, 담당자, 재검수 여부를 남기는 방식이 재사용하기 쉽습니다. 반복되는 오류는 템플릿과 제작 가이드에 반영해 다음 캠페인의 검수 비용을 줄이세요.
- 휴대전화에서 제목·프리헤더·첫 화면·가로 스크롤 여부 확인하기
- 화면 확대 없이 본문을 읽고 링크와 버튼을 구분할 수 있는지 확인하기
- 이미지 차단, 다크 모드, 낮은 밝기 환경에서 핵심 정보 확인하기
- 키보드 또는 보조기술 사용을 고려해 링크 순서와 의미가 자연스러운지 점검하기
- 모든 CTA와 추적 링크의 목적지, 모바일 로딩, 수신거부 경로 확인하기
- 테스트 결과를 템플릿별 체크리스트와 발송 로그에 기록하기
자주 묻는 질문
모바일 이메일은 몇 열 구조로 만드는 것이 좋나요?
대부분의 B2B 안내 이메일은 한 열 구조가 관리하기 쉽고 모바일 읽기 흐름도 안정적입니다. 비교표나 기능 나열처럼 다단이 필요한 경우에는 모바일에서 세로로 재배치되는지 먼저 확인하세요.
이미지에 들어간 문구도 대체 텍스트로 모두 작성해야 하나요?
이미지가 정보를 전달한다면 대체 텍스트에 핵심 내용을 요약해야 합니다. 다만 긴 본문을 이미지에 넣기보다 같은 정보를 이메일의 실제 텍스트로 제공하는 편이 접근성과 검색성 모두에 유리합니다.
CTA 버튼의 색상은 어떻게 정해야 하나요?
브랜드 색상을 사용할 수 있지만 배경과 충분한 대비가 있어야 하며, 색상만으로 버튼의 의미를 전달해서는 안 됩니다. 행동을 명확히 설명하는 문구와 주변 여백을 함께 설계하세요.
발송 전 어떤 환경에서 테스트해야 하나요?
주요 수신자가 사용하는 모바일 운영체제와 이메일 클라이언트를 우선 선정하고, 화면 크기·이미지 차단·다크 모드·낮은 밝기 조건을 나누어 확인하세요. 모든 환경을 동일하게 테스트하기보다 실제 수신 비중과 오류 가능성을 기준으로 우선순위를 정하는 것이 효율적입니다.