이메일 헤더 이미지 사이즈 완벽 가이드 — 모바일 잘림 방지 체크리스트
# 이메일 헤더 이미지 사이즈 완벽 가이드 — 모바일 잘림 방지 체크리스트
600px 규격부터 레티나 2배 해상도 내보내기, 안전 영역 설정까지 — 발송 전 반드시 확인해야 할 헤더 이미지 규격을 한 곳에서 정리했습니다.
- 표준 컨테이너 너비: 600–640px
- 모바일 안전 텍스트 영역: 중앙 320px
- 레티나 내보내기 해상도: 2배 해상도
뉴스레터를 정성껏 만들고 테스트 발송을 눌렀을 때, 스마트폰 화면에서 로고가 반쪽만 보이거나 프로모션 문구가 화면 아래로 밀려 있는 경험을 한 번쯤 해봤을 것입니다. 이 문제는 디자이너의 실수라기보다 데스크톱 기준으로 제작된 헤더 이미지가 모바일 렌더링 환경을 고려하지 않은 채 발송될 때 발생하는 구조적인 현상입니다.
핵심 원인은 간단합니다. 데스크톱 이메일 컨테이너는 600–640px 너비가 표준이지만, 같은 템플릿이 모바일 세로 화면에서는 320px 내외로 축소됩니다. 헤더 이미지의 가로 양쪽 끝에 배치된 텍스트나 로고는 이 축소 과정에서 화면 밖으로 밀려나거나 클라이언트의 뷰포트 클리핑에 의해 잘릴 수 있습니다. 높이 문제도 마찬가지입니다. 헤더 높이가 200px를 초과하면 모바일 세로 화면에서 본문이 폴드 아래로 내려가고, 일부 클라이언트는 자체적인 뷰포트 클리핑을 추가로 적용합니다.
국내 환경에서는 Gmail 앱, 네이버 메일 앱, 카카오워크 등 다양한 클라이언트가 혼재합니다. 각 클라이언트는 이미지를 렌더링하는 방식이 조금씩 달라, 동일한 헤더 이미지가 클라이언트마다 다르게 표시될 수 있습니다. 삼성 갤럭시 기본 이메일 앱과 iPhone Mail 앱에서 같은 헤더를 열어보면 여백 처리와 이미지 스케일링 방식이 다르다는 것을 바로 확인할 수 있습니다. 이 글은 그 차이를 이해하고, 발송 전 반복적으로 사용할 수 있는 체크리스트를 제공하는 데 목적이 있습니다.
---
디자인 파일을 열기 전에 숫자를 먼저 확정해야 합니다. 아래 표는 헤더 이미지를 제작할 때 참고해야 할 핵심 수치를 정리한 것입니다.
# 이메일 헤더 이미지 사이즈 완벽 가이드 — 모바일 잘림 방지 체크리스트
600px 규격부터 레티나 2배 해상도 내보내기, 안전 영역 설정까지 — 발송 전 반드시 확인해야 할 헤더 이미지 규격을 한 곳에서 정리했습니다.
ko-KR · /ko/guides/이메일-헤더-이미지-사이즈-모바일-잘림-체크리스트
핵심 규격 한눈에 보기
- 표준 컨테이너 너비: 600–640px
- 모바일 안전 텍스트 영역: 중앙 320px
- 레티나 내보내기 해상도: 2배 해상도
이메일 헤더 이미지, 모바일에서 왜 잘리는가
뉴스레터를 정성껏 만들고 테스트 발송을 눌렀을 때, 스마트폰 화면에서 로고가 반쪽만 보이거나 프로모션 문구가 화면 아래로 밀려 있는 경험을 한 번쯤 해봤을 것입니다. 이 문제는 디자이너의 실수라기보다 데스크톱 기준으로 제작된 헤더 이미지가 모바일 렌더링 환경을 고려하지 않은 채 발송될 때 발생하는 구조적인 현상입니다.
핵심 원인은 간단합니다. 데스크톱 이메일 컨테이너는 600–640px 너비가 표준이지만, 같은 템플릿이 모바일 세로 화면에서는 320px 내외로 축소됩니다. 헤더 이미지의 가로 양쪽 끝에 배치된 텍스트나 로고는 이 축소 과정에서 화면 밖으로 밀려나거나 클라이언트의 뷰포트 클리핑에 의해 잘릴 수 있습니다. 높이 문제도 마찬가지입니다. 헤더 높이가 200px를 초과하면 모바일 세로 화면에서 본문이 폴드 아래로 내려가고, 일부 클라이언트는 자체적인 뷰포트 클리핑을 추가로 적용합니다.
국내 환경에서는 Gmail 앱, 네이버 메일 앱, 카카오워크 등 다양한 클라이언트가 혼재합니다. 각 클라이언트는 이미지를 렌더링하는 방식이 조금씩 달라, 동일한 헤더 이미지가 클라이언트마다 다르게 표시될 수 있습니다. 삼성 갤럭시 기본 이메일 앱과 iPhone Mail 앱에서 같은 헤더를 열어보면 여백 처리와 이미지 스케일링 방식이 다르다는 것을 바로 확인할 수 있습니다. 이 글은 그 차이를 이해하고, 발송 전 반복적으로 사용할 수 있는 체크리스트를 제공하는 데 목적이 있습니다.
---
픽셀 규격 기준표: 데스크톱·모바일·레티나를 한눈에
디자인 파일을 열기 전에 숫자를 먼저 확정해야 합니다. 아래 표는 헤더 이미지를 제작할 때 참고해야 할 핵심 수치를 정리한 것입니다.
레티나 내보내기의 원리. 헤더 이미지를 1,200px 너비로 내보내고 HTML에서 `max-width: 600px`로 표시 너비를 제한하면, 레티나 디스플레이는 이미지 픽셀 2개를 CSS 픽셀 1개에 대응시켜 선명하게 렌더링합니다. 여기서 많은 디자이너가 놓치는 부분이 있습니다. 2배 내보내기를 해도 렌더링 크롭 경계는 변하지 않는다는 점입니다. 이메일 클라이언트는 여전히 600px 컨테이너 너비와 `<img>` 태그 또는 CSS height 속성이 허용하는 높이 범위 안에서 이미지를 자릅니다. 1,200×400px로 내보낸 이미지를 `max-width: 600px`로 표시하면 실제 렌더링 크기는 600×200px가 됩니다. 내보내기 파일에서 픽셀 행 380에 있는 텍스트는 렌더링 행 190에 위치하므로 200px 높이 헤더 안에 들어오지만, 픽셀 행 420에 있는 요소는 잘립니다. 이미지 에셋은 1,200px 너비로 제작하되, 텍스트와 로고 배치는 600px 렌더링 캔버스를 기준으로 해야 합니다.
600px vs 640px 선택 기준. Outlook on Windows 사용자가 많은 수신자 목록이라면 600px를 유지하는 것이 안전합니다. Outlook은 Word 렌더링 엔진을 사용하기 때문에 비표준 너비에서 예측하기 어려운 동작을 보일 수 있습니다. Gmail과 Apple Mail 중심의 현대적인 템플릿이라면 640px도 무리 없이 사용할 수 있습니다.
---
클라이언트별 안전 영역: Gmail, 네이버 메일, Outlook Mobile의 차이
'헤더는 600px로 만들면 된다'는 말은 절반만 맞습니다. 어떤 600px가 각 클라이언트에서 온전히 살아남는지를 알아야 실제로 도움이 됩니다.
Gmail Android (기본 앱, 표준 Android 뷰포트) Gmail Android는 중저가 기기에서 컨테이너 너비를 약 360px로 강제 적용하는 경우가 있습니다. 헤더 이미지에 `width: 100%; max-width: 600px;` 인라인 스타일이 없으면, Gmail은 이미지를 600px 원본 크기로 렌더링하고 오른쪽 가장자리를 잘라버릴 수 있습니다. 실질적인 안전 영역은 중앙 280px 수평 밴드입니다. 양쪽 각 160px(총 320px)는 블리드 영역으로만 사용해야 합니다. 국내 쇼핑몰 뉴스레터에서 상품명이나 할인율 텍스트를 헤더 이미지 오른쪽에 배치했다가 Gmail Android에서 잘리는 사례가 실제로 자주 발생합니다.
네이버 메일 앱 및 다음 메일 앱 국내 주요 웹메일 앱은 대체로 모바일 브라우저 기반 렌더링을 따르지만, 앱 내 웹뷰 패딩이 추가로 적용되는 경우가 있습니다. 600px 너비 헤더가 앱 내 뷰포트에서 양쪽 여백을 제외한 실제 표시 너비로 축소될 수 있으므로, 로고와 핵심 텍스트는 중앙 정렬을 기본으로 하고 가장자리 80px 이내에는 중요 요소를 배치하지 않는 것이 좋습니다.
Outlook Mobile (iOS 및 Android) Outlook Mobile은 일반적으로 유동적 스케일링을 지원하지만, 읽기 창 내부에 12–16px 패딩을 적용합니다. 360px 뷰포트에서는 실제 사용 가능한 너비가 약 328px로 줄어듭니다. Android용 Outlook Mobile에서는 `max-height` 또는 명시적 테이블 셀 높이 없이 히어로 이미지 높이가 초기 뷰포트를 초과하면 이미지 하단이 잘리는 현상이 보고되고 있습니다. Outlook Mobile 사용자가 포함된 수신자 목록이라면 히어로 높이를 180px 이하로 유지하는 것이 안전합니다.
카카오워크 카카오워크는 업무용 메신저 기반 이메일 환경으로, 이미지 렌더링이 일반 이메일 클라이언트와 다를 수 있습니다. 헤더 상단에 배치된 로고나 텍스트가 안전 영역 밖에 있을 경우, 카카오워크 앱의 뷰포트 처리 방식에 따라 잘릴 수 있습니다. 카카오워크를 주요 발송 채널로 사용하는 경우 반드시 실기기 테스트를 병행해야 합니다.
체크리스트 적용 포인트. 위 클라이언트별 동작은 각각 독립적인 검증 항목입니다. 발송 전에 헤더 이미지에 `width: 100%; max-width: 600px;` 인라인 스타일이 적용되어 있는지, 로고와 헤드라인 텍스트가 중앙 280px 수평 밴드 안에 있는지, 이미지 높이가 180px 이하인지를 순서대로 확인하십시오.
---
발송 전 모바일 잘림 방지 체크리스트 10단계
아래 항목은 순서대로 실행하도록 설계되었습니다. 각 항목은 특정 실패 유형에 대응합니다. 스펙을 읽은 것만으로 체크하지 말고, 렌더링된 미리보기에서 시각적으로 확인한 후에만 완료로 표시하십시오.
1. 컨테이너 너비가 600px인지 확인한다. 600px는 Gmail, Outlook, Yahoo, Apple Mail, 모바일 환경 모두에서 가로 스크롤 없이 깔끔하게 렌더링되는 업계 표준입니다. 640px 템플릿을 사용하는 경우, 헤더 이미지가 컨테이너를 빈틈없이 채우는지 확인합니다.
2. 헤더 높이가 150–200px 범위 안에 있는지 측정한다. 소스 파일이 아닌 미리보기 도구에서 렌더링된 높이를 측정합니다. 667px 높이의 iPhone 화면에서 300px 헤더는 화면의 절반 가까이를 차지하고, 본문 내용이 폴드 아래로 밀립니다.
3. 헤더 이미지를 1,200px 너비로 내보내고, 표시 너비는 600px로 설정한다. 이미지 에셋은 1,200px 너비로 제작하고 표시 너비를 600px로 설정해야 레티나 화면에서 2배 해상도로 렌더링됩니다. 이미지 태그에 `max-width: 600px; width: 100%;`를 인라인으로 적용합니다. max-width 제약이 없으면 1,200px 원본 파일이 데스크톱 클라이언트에서 컨테이너를 넘쳐흐릅니다.
4. 모든 핵심 텍스트와 로고가 수평 안전 영역 안에 있는지 확인한다. 600px 캔버스에서 양쪽 각 80px를 블리드 영역으로 처리하고, 중앙 440px 밴드 안에 로고·태그라인·CTA 레이블을 배치합니다. 320px 모바일에서 이 영역은 약 234px로 축소됩니다. 이미지 파일 안에 삽입된 텍스트는 14px 미만이면 320px 화면에서 가독성이 크게 떨어집니다.
5. 사진이나 AI 생성 히어로 이미지의 주요 피사체가 캔버스 중앙 50% 안에 있는지 확인한다. 일부 클라이언트는 `object-fit: cover`와 유사한 동작으로 가장자리를 먼저 자른 후 스케일링을 적용합니다. 600px 캔버스에서 왼쪽으로부터 80% 지점에 배치된 얼굴이나 상품 이미지는 320px 렌더링에서 살아남지 못할 수 있습니다.
6. 파일 용량이 JPEG/PNG 기준 200KB 미만인지 확인한다. 헤더 이미지 파일 용량은 200KB 미만, 이상적으로는 100KB 이하를 권장합니다. 사진 헤더는 JPEG, 로고나 텍스트 오버레이가 포함된 헤더는 PNG를 사용합니다. GIF 헤더는 500KB 미만으로 유지합니다.
7. 헤더 셀에 브랜드 배경색 폴백을 설정한다. 이미지가 차단될 때 헤더 영역이 흰 직사각형으로 표시되지 않도록, `<td>`에 `bgcolor` 속성과 인라인 `background-color` CSS를 모두 설정합니다. Outlook은 HTML 속성을 읽고, 현대 클라이언트는 CSS 속성을 읽기 때문에 두 가지를 모두 명시해야 합니다.
8. alt 텍스트를 100자 이내의 실질적인 메시지로 작성한다. 헤더 이미지에 설명적인 alt 텍스트를 추가하면 이미지가 로드되지 않아도 헤더의 메시지가 전달됩니다. "여름 세일 — 전 품목 30% 할인, 일요일 마감"처럼 기능적인 문장으로 작성합니다. "header_final_v2.jpg" 같은 파일 설명은 수신자에게 아무 정보도 주지 않습니다.
9. 다크 모드에서 320px와 600px 뷰포트 모두 가독성을 테스트한다. Apple Mail은 이미지 전체를 반전하거나 배경 영역을 선택적으로 재색상화할 수 있습니다. 헤더 이미지에 어두운 배경 위 흰색 텍스트가 포함되어 있다면, Apple Mail 다크 모드에서 이미지가 반전되어 밝은 배경 위에 어두운 텍스트가 되면서 텍스트가 보이지 않게 될 수 있습니다. 가장 안전한 방법은 중요 텍스트를 이미지 파일 안에 넣지 않고 HTML 텍스트로 처리하는 것입니다.
10. 프리헤더 텍스트가 50–100자로 설정되어 있는지 확인한다. 프리헤더 텍스트는 50–100자가 권장되며, 모바일 미리보기에서는 최대 약 140자까지 표시됩니다. 프리헤더가 비어 있으면 클라이언트가 본문의 첫 번째 HTML 텍스트를 끌어오는데, 이것이 수신 거부 링크나 alt 텍스트 문자열이 되는 경우가 많습니다.
---
이미지 차단 시 폴백 동작 명세
이미지 차단은 예외 상황이 아닙니다. Outlook은 기본적으로 이미지를 차단하며, 기업 수신자 중 상당수는 이미지를 활성화하지 않습니다. 폴백 처리를 선택적인 마무리 작업으로 여기면, 많은 수신자가 헤더 자리에 빈 흰 직사각형만 보게 됩니다.
배경색 폴백. 모든 헤더 이미지 셀에 `bgcolor` 속성과 인라인 `background-color` CSS 값을 브랜드 주색으로 설정합니다. 헤더 이미지가 어두운 네이비 배경에 흰색 텍스트를 사용한다면 `bgcolor="#0D1F3C"`를 설정해 이미지가 없어도 의도된 디자인처럼 보이게 합니다. alt 텍스트가 잘 보이도록 배경색과 대비되는 텍스트 색상을 `<td>` 또는 감싸는 요소에 인라인 스타일로 지정합니다.
alt 텍스트 작성 기준. 헤더 이미지의 alt 텍스트는 60–80자 내외로 작성합니다. 프로모션 헤더라면 `"봄 세일 — 전 사이트 30% 할인, 일요일 종료"`처럼 헤드라인을 압축한 형태로 씁니다. alt 텍스트는 스팸 필터에도 신호를 보내므로, 파일명이나 의미 없는 문자열은 피해야 합니다.
CTA 버튼 처리. 헤더에 CTA가 포함된다면 이미지 안에 넣지 말고, 이미지 셀 아래에 인라인 배경색·테두리·패딩을 갖춘 테이블 기반 앵커 버튼으로 구성합니다. CTA 버튼은 너비 200–300px, 높이 50–75px가 권장되며, 모바일에서는 전체 너비로 표시되어야 합니다. 이렇게 하면 이미지 차단 여부와 관계없이 버튼이 항상 렌더링되고, 최소 44×44px 탭 타겟을 충족합니다.
발송 전 폴백 검증. 미리보기 도구에서 이미지를 비활성화한 상태로 세 가지를 확인합니다. 배경색이 헤더 영역을 올바르게 채우는지, alt 텍스트가 일관된 메시지로 읽히는지, CTA 버튼이 보이고 탭 가능한지입니다. 프로모션 코드나 마감일 같은 핵심 정보는 절대 이미지 파일 안에만 넣어서는 안 됩니다. 이미지가 로드될 때만 읽을 수 있다면 폴백은 이미 실패한 것입니다.
---
역할별 실패 유형과 체크리스트 적용 방법
이 체크리스트가 필요한 사람은 크게 세 유형으로 나뉩니다. 각자 이미 다른 방식으로 실패를 경험하고 있습니다.
브랜드 인하우스 이메일 디자이너 데스크톱 중심으로 구축된 디자인 시스템 안에서 헤더를 제작하는 경우, 마스터 템플릿은 600×200px를 명시하지만 캠페인별 히어로 이미지가 `max-width: 600px` 제약 없이 1,200×400px로 내보내지는 '치수 이탈' 문제가 자주 발생합니다. Gmail Android는 이 이미지를 원본 크기로 렌더링하고 오른쪽 가장자리를 잘라내며, 상품명이 함께 사라집니다. 레티나 내보내기 규칙은 이미지 에셋에만 적용되며, 컨테이너에는 적용되지 않습니다. 이 둘을 혼동하는 것이 이 체크리스트가 방지하려는 구체적인 오류입니다.
프리랜서 그래픽 디자이너 (Mailchimp·스티비 캠페인 제작) 클라이언트로부터 브랜드 키트를 받아 헤더를 제작할 때, Figma에서 보기 좋은 800px 너비 배너를 만들어 납품하는 경우가 있습니다. 700px를 초과하면 구형 Outlook과 소형 모바일 화면에서 가로 스크롤이 발생할 위험이 높아집니다. Mailchimp나 스티비의 템플릿 컨테이너가 이미지 자체가 규격을 초과한 경우까지 보정해주지는 않습니다. 클라이언트의 첫 번째 발송에서 모든 Android 기기에서 로고가 잘리는 결과가 나오기 전에, 이 체크리스트를 납품 전 검증 단계로 활용할 수 있습니다.
드래그앤드롭 빌더를 사용하는 소규모 사업자 Canva 등의 도구로 만든 헤더 이미지를 업로드할 때, 노트북 화면에서 균형 있어 보인다는 이유로 프로모션 텍스트를 이미지 하단에 배치하는 경우가 많습니다. 중요 콘텐츠는 세로 방향으로 상위 300–500px 안에 배치해야 스크롤 없이 볼 수 있습니다. 390px iPhone 뷰포트에서는 이미지 하단의 할인 정보가 완전히 사라집니다. 프로모션 코드나 마감일은 이미지 파일 안에 넣지 말고 이미지 아래 HTML 텍스트로 처리하는 것이 훨씬 안전합니다.
---
헤더 이미지 제작 워크플로우에서 체크리스트를 습관화하는 방법
체크리스트는 한 번 읽고 기억하는 것이 아니라, 매 캠페인마다 실행하는 절차로 만들어야 효과가 있습니다. 다음은 워크플로우에 통합하는 실용적인 방법입니다.
디자인 단계에서 안전 영역 가이드를 캔버스에 표시한다. Figma나 Adobe XD에서 헤더 캔버스를 열 때, 600px 너비 기준으로 양쪽 80px 블리드 영역을 가이드 레이어로 고정해두면 텍스트와 로고 배치 시 안전 영역을 직관적으로 확인할 수 있습니다. 이 가이드는 내보내기 전에 숨기면 됩니다.
내보내기 전에 파일 크기를 확인한다. 1,200px 너비 PNG 파일은 압축 없이 내보내면 수 MB가 될 수 있습니다. JPEG는 품질 75–85% 수준에서 내보내면 대부분 200KB 이하로 유지됩니다. PNG는 TinyPNG 같은 도구로 무손실 압축을 적용하면 용량을 크게 줄일 수 있습니다.
미리보기 도구에서 최소 두 가지 환경을 확인한다. 데스크톱 Gmail 웹과 모바일 320px 뷰포트를 기본으로 확인하고, 수신자 목록에 Outlook 사용자가 많다면 Outlook 미리보기를 추가합니다. Litmus나 Email on Acid 같은 크로스 클라이언트 테스트 도구를 사용하면 여러 환경을 한 번에 확인할 수 있습니다.
이미지 차단 상태에서 한 번 더 확인한다. 미리보기 도구에서 이미지 로드를 비활성화하고, 배경색 폴백과 alt 텍스트가 의도한 대로 표시되는지 확인합니다. 이 단계를 건너뛰면 Outlook 수신자의 상당수가 빈 헤더를 보게 됩니다.
체크리스트를 팀 공유 문서에 저장한다. 개인이 기억에 의존하는 방식은 담당자가 바뀌거나 바쁜 시기에 항목이 누락되는 원인이 됩니다. 10단계 체크리스트를 Notion, Confluence, 또는 팀 내 공유 스프레드시트에 저장하고, 발송 전 필수 완료 항목으로 지정해두면 반복 실수를 구조적으로 방지할 수 있습니다.
Veeso AI처럼 헤더 이미지를 정확한 픽셀 규격으로 생성하고 편집할 수 있는 도구를 사용하면, 안전 영역 가이드를 캔버스에 직접 적용한 상태에서 내보내기까지 진행할 수 있어 디자인 환경과 미리보기 환경을 오가는 시간을 줄일 수 있습니다. 다만 이는 시작점의 편의를 제공하는 것이지, 위에서 설명한 폴백 동작·alt 텍스트·클라이언트별 렌더링 검증을 대체하지는 않습니다. 그 단계들은 여전히 실제 미리보기를 통한 사람의 확인이 필요합니다.
헤더 이미지의 모바일 잘림 문제 대부분은 디자인 단계에서 발견되지 않고, 테스트 발송 후 스마트폰 화면에서 처음 드러납니다. 그 시점에서 수정하려면 에셋 재내보내기, HTML 수정, 크로스 클라이언트 재테스트, 발송 지연이라는 전체 수정 루프를 거쳐야 합니다. 위의 체크리스트를 에셋이 디자인 단계를 벗어나기 전에 실행하면, 그 수정 루프 자체가 발생하지 않습니다.
이메일 헤더 이미지 사이즈 & 모바일 잘림 — 자주 묻는 질문
이메일 헤더 이미지의 표준 권장 사이즈(픽셀)는 얼마인가요?
대부분의 이메일 유형에서 헤더 이미지는 가로 600px × 세로 150–200px가 권장됩니다. 브랜드 중심의 비주얼 캠페인이라면 세로를 최대 250px까지 늘릴 수 있습니다. 템플릿 전체 너비는 600px가 10년 이상 업계 표준으로 자리 잡았으며, Gmail·Outlook·Yahoo·Apple Mail 등 주요 클라이언트와 모바일 기기에서 가로 스크롤 없이 깔끔하게 렌더링됩니다. 700px를 초과하면 구형 Outlook 및 소형 모바일 화면에서 가로 스크롤이 발생할 위험이 높아집니다.
모바일에서 헤더 이미지가 잘리지 않으려면 안전 영역을 어떻게 설정해야 하나요?
모바일 세로 화면 기준 최소 너비는 320px이며, 480px까지 허용되지만 가로 방향 강제 전환으로 참여율이 떨어질 수 있습니다. 안전 영역 확보를 위해 로고·핵심 텍스트 등 중요 요소는 이미지 가장자리에서 최소 20–30px 안쪽에 배치하고, 세로 방향으로는 전체 높이의 상단 70% 이내에 집중시키는 것이 좋습니다. 또한 핵심 정보(프로모션 코드, 마감 일정 등)는 이미지 안에 넣지 말고 HTML 텍스트로 처리해야 이미지 차단 환경에서도 내용이 전달됩니다.
레티나(고해상도) 디스플레이를 위해 헤더 이미지를 어떻게 내보내야 하나요?
레티나 대응의 핵심은 이미지 에셋을 1,200px 너비로 제작한 뒤 이메일 HTML에서 표시 너비를 600px로 지정하는 것입니다. 이렇게 하면 2배 해상도(2×) 화면에서도 선명하게 렌더링됩니다. 이 규칙은 이미지 에셋에만 적용되며, 템플릿 컨테이너 자체의 너비를 바꾸는 것이 아닙니다. 즉, `<img width="600">` 속성을 유지하면서 실제 파일 해상도만 2배로 높이면 됩니다.
이메일 헤더 이미지 파일 용량은 어느 정도가 적당한가요?
헤더 이미지 파일 크기는 이상적으로 100KB 미만, 최대 200KB 이하를 유지하는 것이 좋습니다. 용량이 크면 로딩 속도가 느려져 모바일 환경에서 특히 불리합니다. GIF를 사용하는 경우 500KB 미만을 권장하며 최대 1MB를 넘지 않아야 합니다. 또한 HTML 이메일 전체 파일 크기가 102KB를 초과하면 Gmail이 이메일 본문을 자동으로 잘라내므로, HTML 파일 자체는 75KB 이하로 유지하는 것이 안전합니다.
헤더 이미지 파일 형식은 JPEG와 PNG 중 어느 것을 선택해야 하나요?
용도에 따라 다릅니다. 사진 이미지 기반 헤더에는 압축 효율이 높은 JPEG가 적합하고, 로고·텍스트 오버레이·투명 배경이 포함된 헤더에는 PNG를 사용해야 선명도와 투명도가 유지됩니다. 파일 용량 목표(200KB 이하)를 충족하는 범위 내에서 각 형식의 화질 설정을 조정하세요.
헤더 이미지에 텍스트를 넣을 때 모바일 잘림을 피하려면 어떤 규칙을 따라야 하나요?
이미지 내 텍스트는 모바일에서 이미지가 축소될 때 가독성이 급격히 떨어집니다. 핵심 메시지는 가능하면 HTML 텍스트로 분리하고, 불가피하게 이미지에 텍스트를 넣는다면 ① 이미지 가장자리에서 20–30px 이상 여백 확보, ② 충분한 폰트 크기(모바일 기준 최소 14px 이상 권장), ③ 배경과 대비가 높은 색상 조합을 사용하세요. 또한 Outlook을 포함한 많은 클라이언트가 이미지를 기본 차단하므로, 헤더 이미지에는 반드시 내용을 설명하는 alt 텍스트를 추가해야 이미지가 표시되지 않는 환경에서도 메시지가 전달됩니다.
이메일 클라이언트(Gmail, 네이버 메일 등)마다 헤더 렌더링 방식이 다른가요?
네, 클라이언트별로 차이가 있습니다. 특히 Outlook(Windows)은 Word 렌더링 엔진을 사용하기 때문에 비표준 너비에서 예측 불가능한 동작이 발생할 수 있으며, Outlook 사용자가 많은 경우 반드시 600–640px를 유지해야 합니다. Gmail은 HTML 파일이 102KB를 초과하면 본문을 클리핑합니다. 네이버 메일·다음 메일 앱 등 국내 클라이언트와 삼성 갤럭시 기본 이메일 앱, iPhone Mail 앱은 각각 이미지 스케일링 방식이 다를 수 있으므로, 발송 전 실제 기기 또는 이메일 미리보기 도구로 반드시 렌더링을 검증하는 것이 중요합니다.
발송 전 헤더 이미지를 점검하는 체크리스트 항목에는 무엇이 포함되어야 하나요?
발송 전 아래 항목을 순서대로 확인하세요.
① 너비 규격 — 이미지 가로 600px (최대 640px) 준수 ② 높이 규격 — 헤더 세로 150–200px (브랜드 캠페인 최대 250px) ③ 레티나 대응 — 실제 파일 1,200px 제작 후 HTML 표시 너비 600px 지정 ④ 파일 용량 — 100KB 미만 권장, 최대 200KB 이하 ⑤ 파일 형식 — 사진은 JPEG, 로고·투명 배경은 PNG ⑥ 안전 영역 — 중요 요소가 가장자리에서 20–30px 이상 안쪽에 위치 ⑦ alt 텍스트 — 헤더 내용을 설명하는 alt 속성 추가 ⑧ 핵심 정보 분리 — 프로모션 코드·마감일 등은 HTML 텍스트로 처리 ⑨ HTML 파일 크기 — 전체 이메일 HTML 75KB 이하 (Gmail 클리핑 방지) ⑩ 멀티 클라이언트 미리보기 — 모바일(세로/가로)·데스크톱·Outlook 등 실제 렌더링 확인
헤더 높이를 너무 크게 설정하면 어떤 문제가 생기나요?
헤더 높이가 과도하게 크면 수신자가 스크롤하기 전에 볼 수 있는 '폴드 위(above the fold)' 영역을 헤더가 독점하게 됩니다. 권장 기준은 로고와 내비게이션 바를 포함해 100–150px(최대 200px)입니다. 중요한 콘텐츠는 세로 기준 상위 300–500px 이내에 배치해야 수신자가 스크롤 없이 핵심 메시지를 확인할 수 있습니다. 헤더가 200px를 초과하면 모바일 화면에서 본문 내용이 거의 보이지 않아 이탈률이 높아질 수 있습니다.
