이메일 마케팅 이미지: 크기·용량·다크 모드 함정

제목 줄이 오픈을 따냅니다. 제품 이미지가 클릭을 따내고요. 물론 제대로 렌더링된다는 전제 아래에서요. 이메일은 마케팅에서 가장 험한 디자인 환경입니다. 수십 개의 클라이언트가 저마다의 렌더링 엔진, 저마다의 이미지 차단 기본값, 그리고 갈수록 강경해지는 다크 모드 철학을 갖고 있죠.

디자인 도구에서는 완벽해 보이던 제품 사진이 도착해서는 흔히 망가져 있습니다. 레이아웃을 뚫고 늘어나거나, 불안정한 연결에는 너무 무겁거나, 빈 회색 상자로 대체되거나, 아니면 요즘의 고전인 다크 모드 배경 속으로 조용히 녹아드는 투명 PNG로요.

이메일 마케팅 이미지를 제대로 만드는 법을 정리했습니다. 가로 크기 기준, 파일 용량 관리, 제 몫을 하는 대체 텍스트, 그리고 다크 모드 함정의 진짜 해법까지.

이메일 제품 이미지의 가로 크기는 얼마여야 할까요?

마케팅 이메일의 표준 콘텐츠 가로 크기는 600픽셀이고, 일부 최신 템플릿은 640까지 늘립니다. 이 숫자가 살아남은 이유는 미리보기 창과, 반응형 소식을 끝내 못 들은 구형 데스크톱 클라이언트들 때문입니다. 여기에 맞춰 디자인하세요.

• 전체 폭 제품 컷 — 1200px로 내보내고 600으로 표시하세요. 2배 크기로 내보내면 레이아웃을 바꾸지 않고도 고밀도 화면에서 경계가 선명하게 유지됩니다.
• 다단 그리드 — 600px 콘텐츠 영역을 나눈 뒤, 각 이미지를 표시 폭의 두 배로 내보내세요.
• width 속성을 명시하세요 — 일부 데스크톱 클라이언트는 CSS 크기 지정을 무시하고 원본 크기 그대로 렌더링합니다. 깜빡 잊은 2400px 파일 하나가 레이아웃 전체를 터뜨리는 경로가 바로 이겁니다.

여기서는 넓은 게 좋은 게 아닙니다. 어디서나 렌더링되는 600px 이미지가, 어디서도 렌더링되지 않는 1400px 걸작을 이깁니다.

이미지 파일 용량을 가볍게 유지하세요

1킬로바이트마다 구독자가 셀룰러 연결에서 세금을 냅니다. 느리게 뜨는 대표 이미지는 나타나기도 전에 스크롤로 지나쳐지고요.

• 이미지당 200KB 미만을 목표로 하고, 첫 화면에 들어가는 이미지는 더 인색하게 다루세요. 단색 배경 위의 깔끔한 제품 누끼는 압축이 아주 잘 됩니다.
• 사진은 JPEG, 단색과 누끼는 PNG. WebP는 둘 다보다 압축률이 좋고 remover.bg도 내보내기를 지원하지만, 이메일 클라이언트 지원이 아직 들쭉날쭉해서 캠페인용으로는 JPEG와 PNG 원본을 유지하세요.
• Gmail 잘림을 알아두세요. Gmail은 HTML이 대략 102KB를 넘는 이메일을 잘라냅니다. 호스팅된 이미지는 이 용량에 포함되지 않지만, 잘린 이메일은 그 아래 모든 내용을 숨겨 버리니 코드도 가볍게 유지하세요.

차단된 이미지를 위한 대체 텍스트 쓰기

기업용 Outlook과 프라이버시에 민감한 구독자는 여전히 이미지를 기본 차단합니다. 그럴 때 대체 텍스트가 여러분의 시각 레이어 전부가 됩니다.

• 제품과 요점을 설명하세요 — "세이지 그린 Terra 세라믹 푸어오버 세트"는 "image1.png"보다 대략 구매와 삭제 사이의 거리만큼 낫습니다.
• 스타일을 입히세요 — 많은 클라이언트가 대체 텍스트를 스타일 지정이 가능한 실제 텍스트로 렌더링합니다. 인라인으로 폰트, 크기, 색을 지정해 두면 차단된 이미지가 의도된 무언가로 대체됩니다.
• 중요한 정보를 픽셀 안에 가두지 마세요 — 가격, 마감일, CTA는 진짜 텍스트로 들어가야 합니다. 이미지가 차단돼도 제안은 그대로 작동해야 합니다.

다크 모드 함정: 다크 모드 이메일 클라이언트 속 투명 PNG

함정은 이렇습니다. 깔끔한 제품 누끼를 투명 PNG로 내보냅니다. 다른 거의 모든 채널에서는 옳은 선택이죠. 투명 PNG 가이드에서 설명한 그대로입니다. 그리고 흰 배경을 전제로 디자인한 이메일에 넣습니다. 그런데 클라이언트가 다크 모드 사용자를 위해 그 배경을 거의 검정으로 뒤집습니다. 차콜색 헤드폰은 희미한 윤곽만 남고, 검은 로고 텍스트는 사라지고, 흰 배경을 가정해 안티에일리어싱된 가장자리는 옅은 후광을 두르고 빛납니다.

더 골치 아픈 건 클라이언트마다 다크 모드의 정의가 다르다는 점입니다. 색을 그대로 두는 곳도 있고, 배경만 뒤집는 곳도 있고, 거의 전부를 다시 칠하는 곳도 있습니다. 구독자가 어떤 클라이언트를 쓸지는 통제할 수 없으니, 전부 견뎌내는 누끼를 만들어야 합니다.

• 어울리는 단색 배경을 구워 넣으세요 — 투명한 채로 보내지 말고 의도한 브랜드 색 위에 누끼를 평면화하세요. remover.bg 에디터에서 단색 배경을 깔면 클라이언트가 뒤집을 것이 없어집니다. 제품 사진 배경 색상 가이드가 두 모드 모두에서 버티는 톤을 고르는 데 도움이 됩니다.
• 외곽선과 여백을 더하세요 — 어두운 가장자리를 가진 제품에 은은한 선이나 부드러운 그림자를 두르면 캔버스가 다시 칠해져도 형태가 읽힙니다. 여백을 넉넉히 두면 딱 붙는 크롭이 클라이언트의 임의 처리와 충돌하는 일도 막을 수 있습니다.
• 실제 클라이언트에서 테스트하세요 — 캠페인마다 발송 전에 다크 모드를 켠 Apple Mail, Gmail, Outlook으로 실제 테스트 메일을 보내 보세요. 한 클라이언트가 존중하는 것을 다른 클라이언트는 기꺼이 덧칠합니다.

캠페인 전체에서 제품 누끼를 일관되게 유지하기

캠페인은 이메일 한 통으로 끝나는 일이 거의 없습니다. 출시, 스포트라이트, 마지막 기회 리마인더까지 같은 제품이 네다섯 번 등장하는데, 발송마다 처리가 달라지면(여기선 흰 배경, 저기선 회색, 그림자는 있다 없다) 시퀀스 전체가 남의 부품을 짜깁기한 것처럼 보입니다.

하나의 처리 방식을 정해 두고 어디에나 적용하세요. 배경색 하나, 제품이 프레임을 얼마나 채울지에 대한 배율 규칙 하나, 그림자 스타일 하나. remover.bg 에디터는 사실적인 그림자를 더해 누끼가 프레임 위에 떠 있지 않고 놓이게 합니다. 대형 카탈로그라면 HTTP API가 모든 컷에 동일한 처리를 자동으로 적용하죠. 이커머스 속 AI를 조용히 다시 쓰고 있는 바로 그 자동화 논리입니다.

정리

이메일 이미지의 성패는 발송 버튼을 누르기 전에 내리는 네 가지 결정에 달려 있습니다.

1. 가로 크기 — 600px에 맞춰 디자인하고 2배로 내보내기.
2. 용량 — 이미지당 200KB 미만, 최대 호환을 위해 JPEG 또는 PNG.
3. 대체 텍스트 — 설명적이고, 스타일이 입혀져 있고, 제안을 숨기지 않을 것.
4. 다크 모드 — 배경을 구워 넣고, 어두운 가장자리에 외곽선을 두르고, 실제 클라이언트에서 테스트.

이 네 가지를 지키면 라이트 모드든 다크 모드든, 이미지가 차단되든 아니든 모든 받은편지함에서 제품이 의도대로 보입니다. 대부분의 캠페인은 그렇게 말하지 못하죠.