모바일 이메일은 화면을 줄이는 작업만으로 충분하지 않습니다. 다양한 사용자가 읽고 탐색하고 클릭할 수 있도록 디자인과 콘텐츠, 발송 전 검수를 함께 설계해야 합니다.
모바일 접근성은 ‘작은 화면 대응’보다 넓게 봐야 합니다
모바일 이메일 접근성은 화면 폭에 맞춰 레이아웃을 줄이는 데서 끝나지 않습니다. 시력이 낮거나 색상을 구분하기 어려운 사람, 터치 조작이 불편한 사람, 스크린리더를 사용하는 사람도 핵심 정보를 이해하고 다음 행동을 수행할 수 있어야 합니다.
B2B 이메일에서는 제품 소개, 행사 안내, 자료 다운로드, 상담 신청처럼 업무 판단에 필요한 정보가 자주 포함됩니다. 따라서 디자인 검수와 함께 ‘정보를 이미지 없이도 이해할 수 있는가’, ‘버튼을 정확히 누를 수 있는가’, ‘링크의 목적을 알 수 있는가’를 확인해야 합니다.
- 핵심 메시지를 이미지가 아닌 실제 텍스트로 제공하기
- 본문을 한 방향으로 읽을 수 있도록 콘텐츠 순서 정리하기
- 장식 요소와 행동 유도 요소를 구분하기
- 모바일에서 확대하지 않아도 주요 내용을 파악할 수 있게 구성하기
반응형 레이아웃은 읽기 순서와 터치 흐름부터 설계합니다
모바일에서는 다단 구성보다 한 열 구조가 안정적입니다. 데스크톱에서 나란히 배치한 콘텐츠가 모바일에서 어떤 순서로 쌓이는지 확인하고, 제목·설명·CTA가 자연스럽게 이어지도록 HTML 구조를 설계하세요. 시각적으로는 위에 보이지만 스크린리더에서는 뒤늦게 읽히는 구조를 피해야 합니다.
버튼은 손가락으로 누르기 쉬운 크기와 간격을 확보해야 합니다. 버튼 안에 긴 문장을 넣기보다 ‘자료 다운로드’, ‘상담 일정 확인’처럼 목적이 분명한 문구를 사용하고, 버튼 주변에 다른 링크가 밀집하지 않도록 여백을 둡니다.
- 모바일 본문은 한 열을 기본값으로 설정하기
- 콘텐츠가 화면 밖으로 밀리거나 가로 스크롤이 생기지 않는지 확인하기
- 버튼의 클릭 영역을 충분히 확보하고 인접 링크와 간격 두기
- 링크 문구만 읽어도 이동 목적을 알 수 있게 작성하기
- 상단에 핵심 메시지와 주요 CTA를 배치하되 과도한 버튼은 줄이기
텍스트와 색상은 가독성 기준으로 결정합니다
본문 글자 크기를 지나치게 줄이면 모바일에서 확대가 필요해집니다. 실제 수신 환경에서 기본 글자 크기와 줄 간격을 확인하고, 긴 문단은 짧은 단락과 소제목으로 나누세요. 굵기와 색상만으로 중요한 정보를 구분하면 일부 독자는 차이를 인식하기 어려울 수 있으므로 문구와 구조를 함께 사용해야 합니다.
색상 대비는 브랜드 색상을 그대로 적용하기보다 텍스트가 배경 위에서 충분히 구분되는지 측정해야 합니다. WCAG 기준을 참고할 때 일반 본문 텍스트는 대비 4.5 대 1 이상을 검토하고, 큰 텍스트는 별도 기준을 적용합니다. 단, 이메일 클라이언트와 화면 설정에 따라 보이는 정도가 달라질 수 있으므로 실제 기기 확인이 필요합니다.
- 본문과 보조 문구의 크기·줄 간격을 모바일 화면에서 직접 확인하기
- 빨간색 표시만으로 오류나 긴급성을 전달하지 않기
- 색상 대비 측정 도구로 텍스트와 배경 조합 점검하기
- 밝은 배경과 어두운 배경에서 링크와 버튼의 식별성 확인하기
- 제목, 본문, 캡션의 시각적 계층을 일관되게 유지하기
이미지와 아이콘에는 정보 손실을 막는 대체 텍스트를 넣습니다
이미지가 차단되거나 스크린리더로 읽힐 때도 이메일의 목적이 전달되어야 합니다. 제품 이미지처럼 장식성이 높다면 불필요한 설명을 반복하지 말고, 이미지 자체가 정보를 전달한다면 핵심 내용을 짧게 대체 텍스트로 작성하세요. 이미지 안에 가격, 일정, 혜택 같은 정보를 넣었다면 동일한 내용을 실제 텍스트로도 제공해야 합니다.
아이콘만 있는 링크는 의미가 모호해지기 쉽습니다. 다운로드, 외부 페이지 이동, 전화 연결 등 기능을 텍스트로 함께 표시하고, 장식용 아이콘은 스크린리더가 읽지 않도록 처리합니다.
- 정보성 이미지에는 이미지의 목적과 핵심 내용을 대체 텍스트로 작성하기
- 장식용 이미지는 빈 대체 텍스트 등으로 중복 읽기 방지하기
- 이미지 속 핵심 문구를 본문이나 버튼 텍스트로도 제공하기
- 아이콘 링크에 기능을 설명하는 접근 가능한 이름 부여하기
- 이미지 차단 상태에서 제목·설명·CTA가 정상적으로 보이는지 확인하기
발송 전에는 클라이언트와 보조기술을 나눠 검수합니다
접근성 검수는 한 번의 브라우저 미리보기로 끝나지 않습니다. Gmail, Outlook, Apple Mail 등 주요 수신 환경과 모바일 운영체제에서 레이아웃, 이미지, 링크, 다크 모드를 나눠 확인해야 합니다. 이메일 HTML은 클라이언트별 지원 차이가 있으므로 웹 페이지와 동일한 방식으로 작동한다고 가정하지 않는 편이 안전합니다.
검수 결과는 ‘문제 있음’으로만 남기지 말고 위치, 재현 조건, 영향, 수정 담당자, 재검수 결과를 기록하세요. 반복 발송하는 템플릿이라면 동일한 점검표를 사용해 개선 여부를 비교할 수 있습니다.
- 실제 모바일 기기에서 가로 스크롤과 콘텐츠 잘림 확인하기
- 이미지 차단·다크 모드·텍스트 확대 상태에서 주요 정보 확인하기
- 스크린리더로 제목, 본문, 링크, 버튼이 자연스러운 순서로 읽히는지 확인하기
- 키보드 또는 보조 입력 방식으로 링크와 CTA에 접근 가능한지 점검하기
- 링크 목적지, 추적 파라미터, 수신거부 링크가 모두 작동하는지 확인하기
- 발송 전 발견한 문제를 템플릿·콘텐츠·코드 항목으로 분류해 기록하기
자주 묻는 질문
모바일 B2B 이메일의 버튼은 어떻게 작성해야 하나요?
버튼 문구만 읽어도 행동 목적을 알 수 있게 작성하세요. ‘자세히 보기’보다 ‘제품 사양서 다운로드’처럼 구체적인 표현이 적합합니다. 버튼 주변에 충분한 여백을 두고, 같은 목적의 링크를 여러 개 배치해 사용자가 혼동하지 않도록 합니다.
이메일 이미지에 모든 내용을 넣어도 되나요?
권장하지 않습니다. 이미지가 차단되거나 보조기술로 읽히지 않을 수 있으므로 제목, 혜택, 일정, CTA 같은 핵심 정보는 실제 텍스트로 제공해야 합니다. 정보성 이미지는 대체 텍스트로 의미를 보완하세요.
접근성 검수는 발송 전에 무엇부터 해야 하나요?
먼저 모바일에서 콘텐츠 순서와 가독성을 확인한 뒤 색상 대비, 터치 영역, 대체 텍스트, 링크 목적을 점검하세요. 이후 이미지 차단, 다크 모드, 화면 확대, 스크린리더 환경을 추가로 확인하면 누락을 줄일 수 있습니다.