색상을 고르고, 글꼴을 선택하고, 심지어는 캘리그래피 서명 를 클릭합니다. 그런데 전송을 누르면 모든 것이... 이상해 보입니다. 로고가 찌그러지고, 배너가 잘리고, 이미지 로딩에 시간이 오래 걸립니다.
크기가 중요합니다. 추상적인 디자인 원칙 때문이 아니라 서명이 각각 고유한 특성이 있는 수십 개의 이메일 클라이언트를 거치면서 이동하기 때문입니다. Gmail에서 선명하게 보이는 서명이 Outlook에서는 깨질 수 있습니다. 데스크톱에서 즉시 로드되는 것이 모바일에서는 충돌할 수 있습니다.
이 문제를 해결해 보겠습니다.
이메일 서명 이미지 크기 최적화
이미지 크기를 올바르게 설정하는 것은 규칙을 따르는 것이 아니라 누군가 이메일을 열었을 때 어떤 일이 일어나는지 이해하는 것이 중요합니다.
이메일 서명에서 크기가 중요한 이유
이메일 클라이언트는 서명을 단순히 표시하는 데 그치지 않습니다. 이메일 클라이언트는 서명의 크기를 조정하고 압축하며 때로는 아예 서명을 거부하기도 합니다.
2MB의 헤드샷? Outlook에서 제거됩니다. 50x50px 로고? 망막 디스플레이에서는 읽을 수 없습니다. 800px 너비의 배너? 모바일에서는 절반으로 줄어듭니다.
모든 이메일 클라이언트에는 제한이 있습니다. Gmail은 이미지 용량을 총 10MB로 제한하지만 4G 연결에서 이미지를 불러오기란 쉽지 않습니다. Apple Mail은 대용량 파일을 더 잘 처리하지만 압축률이 높습니다. 최악의 프로그램인 Outlook은 가끔 빨간색 X가 표시됩니다.
크기는 전달 가능성, 로딩 시간, 전문성 등 세 가지에 영향을 미칩니다. 조금이라도 잘못되면 서명이 부담스러운 존재가 됩니다.
이메일 로딩에 미치는 파일 크기 영향
하루에 50개의 이메일을 보냅니다. 각 이메일에는 500KB 서명이 있습니다. 이는 서명에만 25MB의 대역폭을 사용하는 것입니다. 회사 내 모든 사람의 수를 곱해 보세요.
수신자는 느린 로드를 알아차립니다. "파일이 크다"고 생각하는 것이 아니라 "이 사람의 이메일이 느리다"고 생각합니다. 그러면 수신자는 이메일을 무시하기 시작합니다.
최적의 크기는? 전체 서명의 경우 50KB 미만입니다. 20KB 미만이면 더 좋습니다.
무거운 이미지는 느린 로딩보다 더 나쁜 영향을 미치는데, 바로 스팸 필터를 트리거하는 것입니다. 이메일 제공업체는 메시지 크기를 확인합니다. 1MB 서명이 있는 5KB 텍스트 이메일? 의심스럽습니다. 스팸 폴더로 바로 이동합니다.
파일 크기가 빠르게 증가합니다. 300x100px의 PNG 로고는 80KB가 될 수 있습니다. 배너, 소셜 아이콘, 헤드샷을 추가하면 갑자기 200KB가 됩니다. 이는 압축 전의 용량입니다.
크기가 브랜드 인식에 미치는 영향
서명은 자동 파일럿으로 실행됩니다. 모든 이메일, 답장, 전달 등 모든 것이 나를 대표합니다.
픽셀화된 로고는 사람들에게 디테일에 신경 쓰지 않는다고 말합니다. 커다란 배너는 "내가 뭘 하고 있는지 모르겠다"고 외칩니다. 이미지가 로드되지 않나요? 비전문적으로 보입니다.
브랜드 일관성은 차원이 다릅니다. 로고는 알아볼 수 있어야 하지만 압도적이지 않아야 합니다. 배너는 배너를 지배하는 것이 아니라 보완해야 합니다. 모든 것이 여러 디바이스에서 적절하게 확장되어야 합니다.
마지막으로 인상 깊었던 서명을 떠올려 보세요. 아마도 깔끔하고 간결하며 가독성이 좋았을 것입니다. 시선을 끌기 위해 싸우지 않았을 것입니다. 이것이 바로 의도적인 크기 조정입니다.
권장 로고 크기
로고는 까다롭습니다. 너무 작으면 아무도 보지 못합니다. 너무 크면 다른 모든 것을 압도합니다.
이상적인 로고 크기
최대 300x100px로 시작하세요. 이는 너비와 높이입니다. 대부분의 로고가 이 공간에 잘 맞습니다.
가로 로고? 300x80픽셀이면 됩니다. 정사각형 로고? 100x100px를 사용해 보세요. 세로 로고는 최대 80x120px가 어렵고, 그렇지 않으면 모든 것이 아래로 밀릴 수 있습니다.
실제 파일 크기는 표시되는 파일의 두 배인 600x200px로 저장하고 300x100px로 표시해야 합니다. 이렇게 하면 파일을 크게 만들지 않고도 망막 디스플레이를 처리할 수 있습니다.
왜 이 숫자인가요? 이메일 클라이언트는 보통 500~600px 너비의 좁은 열에 서명을 렌더링합니다. 로고는 최대 그 절반 정도만 차지해야 합니다. 텍스트, 연락처 정보, 기타 요소를 위한 공간을 남겨두세요.
로고 방향에 따라 접근 방식이 달라져야 합니다. 와이드 로고가 더 잘 확장됩니다. 키가 큰 로고는 높이 제한이 필요하며, 그렇지 않으면 모바일 화면을 가득 채우게 됩니다.
품질 손실 없이 로고 확장
로고를 늘리지 마세요. 절대로. 소스 파일이 400x200px인 경우 300x150px로 표시하지 마세요. 비율이 변경됩니다.
원래 종횡비를 사용합니다. 2:1 로고는 300x150픽셀이든 200x100픽셀이든 2:1로 유지됩니다. 이메일 클라이언트는 너비 또는 높이 중 하나를 설정하면 둘 다 설정하지 않아도 이 비율을 유지합니다.
가능하면 벡터 파일로 작업하세요. 디스플레이 크기의 2배로 내보내기. 250px 너비의 로고가 표시되나요? PNG를 500px 너비로 내보내세요. 이렇게 하면 파일 크기가 커지지 않고 망막에 적합한 이미지를 얻을 수 있습니다.
커밋하기 전에 다양한 크기로 테스트하세요. 300px에서는 보기 좋던 것이 150px에서는 디테일이 사라질 수 있습니다. 가는 선, 작은 텍스트, 복잡한 모양 등 미세한 디테일이 먼저 사라집니다.
로고 파일 형식 선택
투명도가 있는 PNG가 기본값입니다. 24비트 PNG는 색상과 투명도를 완벽하게 처리하고 합리적으로 압축합니다.
사진이나 복잡한 그라데이션의 경우 JPEG를 사용합니다. 하지만 텍스트가 있는 로고는? PNG가 승리합니다. JPEG는 날카로운 모서리 주변에 아티팩트를 생성합니다. 텍스트가 흐릿해집니다.
SVG는 무한히 확장 가능한 작은 파일이라는 점에서 매력적입니다. 하지만 이메일 클라이언트는 이를 차단합니다. Outlook은 SVG를 전혀 표시하지 않습니다. Gmail도 마찬가지입니다. PNG를 사용하세요.
파일 크기는 압축을 통해 PNG를 실행합니다. TinyPNG 또는 ImageOptim과 같은 도구는 눈에 보이는 품질 손실 없이 60-70%를 잘라냅니다. 80KB 로고는 25KB가 됩니다. 동일한 모양, 더 빠른 로드.
적절한 색 농도로 저장하세요. 대부분의 로고에는 수백만 가지 색상이 필요하지 않습니다. 256색이 포함된 PNG-8은 PNG-24와 동일하게 보이지만 크기는 절반으로 줄어드는 경우가 많습니다.
최적의 배너 및 요소 크기
배너는 서명에 포함된 홍보 공간입니다. 배너를 잘못 사용하면 스팸이 됩니다. 올바르게 사용하면 클릭을 유도할 수 있습니다.
클릭률 향상을 위한 배너 크기
표준 배너: 최대 600x100px. 이는 대부분의 이메일 클라이언트가 콘텐츠를 래핑하거나 잘라내기 전에 할당하는 너비입니다.
600x70px 또는 600x80px의 좁은 배너가 더 효과적입니다. 서명을 압도하지 않습니다. 수신자는 광고판을 스크롤하지 않고도 연락처 정보를 볼 수 있습니다.
모바일은 모든 것을 바꿉니다. 600픽셀? 휴대폰 화면에서는 320~375픽셀이 됩니다. 먼저 그 너비에 맞게 디자인하세요. 텍스트는 320px에서 읽을 수 있어야 합니다. 클릭 유도 문안은 탭할 수 있어야 합니다.
배너 배치는 크기만큼이나 중요합니다. 서명 하단이 가장 효과적이며 연락처 정보가 먼저, 프로모션이 두 번째로 표시됩니다. 상단 배치는 이름 및 직책과 경쟁합니다.
클릭 가능한 영역에는 공간이 필요합니다. 배너의 버튼은 Apple의 최소 터치 타겟인 44x44px 이상이어야 합니다. 이보다 작으면 모바일에서 사람들이 놓칩니다.
이메일 제약 조건 내에서 배너 만들기
이메일 클라이언트는 화려한 코드를 제거합니다. 호버 효과, 애니메이션, 복잡한 레이아웃이 없습니다. 배너는 이미지와 링크만 있으면 됩니다.
텍스트 크기를 크게 유지 - 최소 14px 글꼴 크기, 16px가 더 안전합니다. 작은 텍스트는 축소하면 읽을 수 없게 됩니다.
대비는 웹사이트보다 이메일에서 더 중요합니다. 밝은 배경의 밝은 텍스트는 미리보기 창에서 사라집니다. 높은 대비는 이메일 클라이언트 전반에서 가독성을 보장합니다.
웹에 안전한 색상을 고수하세요. 이메일 클라이언트는 색상을 다르게 렌더링합니다. 완벽한 청록색 브랜드? Outlook에서는 파란색으로, Apple Mail에서는 녹색으로 보일 수 있습니다. 여러 클라이언트에서 테스트하세요.
파일 크기 제한은 배너에 큰 타격을 줍니다. 600x100px 배너는 30KB를 넘지 않아야 합니다. 가능하면 그라데이션 대신 단색을 사용하세요. 적극적으로 압축하세요. 모든 킬로바이트가 중요합니다.
이메일 서명 확인의 기술적 측면
해상도는 서명이 선명하게 보이느냐 흐릿하게 보이느냐를 결정합니다. 해상도가 잘못되면 아무리 완벽한 크기라도 서명을 보호할 수 없습니다.
이미지 해상도 영향
이메일 서명은 표준 화면 해상도인 72DPI(인치당 도트 수)로 표시됩니다. 인쇄는 300DPI를 사용하지만 여기서는 상관없습니다.
중요한 것은 픽셀 크기와 다양한 화면에서 렌더링되는 방식입니다.
망막 디스플레이는 2배의 픽셀을 표시합니다. 일반 화면의 300px 로고는 망막에서는 600논리적 픽셀이 됩니다. 소스 이미지가 300픽셀에 불과하면 흐릿하게 보입니다.
해결 방법: 2배 크기로 이미지를 만들고 1배로 표시합니다. 200x80px로 표시되는 로고는 400x160px로 저장해야 합니다. HTML 또는 CSS는 로고를 축소하여 망막에 선명하게 표시합니다.
대부분의 이메일 클라이언트는 표시 크기를 올바르게 설정하면 이 문제를 자동으로 처리합니다. 그렇지 않은 경우도 있습니다. Mac, iPhone, 고해상도 Windows 컴퓨터 등 실제 기기에서 테스트하세요.
최고의 이미지 파일 형식
투명도나 텍스트가 있는 모든 것에 PNG를 사용하세요. 로고, 아이콘, 버튼 - PNG는 아티팩트 없이 처리합니다.
사진 전용 JPEG. 얼굴 사진, 제품 사진 - JPEG는 PNG보다 압축률이 더 높습니다. 하지만 화질은 80-85%로 유지하세요. 이보다 낮으면 얼굴이 이상하게 보입니다.
GIF는 간단한 그래픽에는 작동하고 애니메이션을 지원하지만 서명에 애니메이션 GIF를 사용할 수 있나요? 산만하고 종종 차단됩니다. 정적인 이미지를 사용하세요.
WebP는 더 나은 압축 기능을 제공하지만 이메일 클라이언트 지원은 불완전합니다. Outlook은 WebP를 완전히 무시합니다. Gmail이 이를 처리합니다. Gmail 사용자만 타겟팅하는 경우가 아니라면 위험을 감수할 가치가 없습니다.
BMP, TIFF 또는 기타 이색적인 형식은 절대 사용하지 마세요. 너무 크거나 지원되지 않는 형식입니다.
품질 손실 없이 파일 크기 줄이기
압축은 협상할 수 없습니다. 원본 내보내기는 항상 필요 이상으로 커집니다.
PNG의 경우: TinyPNG, ImageOptim 또는 Squoosh와 같은 도구를 사용합니다. 이러한 도구는 픽셀을 변경하지 않고 파일 구조를 최적화합니다. 100KB 로고는 눈에 보이는 차이가 전혀 없이 30KB가 됩니다.
JPEG의 경우: 80-85% 화질로 내보내기. 100%와 80%의 차이는 대부분의 사람들에게는 눈에 보이지 않지만 파일 크기가 절반으로 줄어듭니다.
PNG의 색상 팔레트를 줄이세요. 로고에 10가지 색상을 사용하는데 왜 수백만 가지 색상을 저장해야 하나요? 팔레트가 제한된 PNG-8은 훨씬 더 작습니다.
사용하지 않는 공간 자르기. 양쪽에 공백이 있는 800x200px 로고인가요? 600x150px로 자르세요. 픽셀 수가 적을수록 파일 크기가 작아집니다.
메타데이터를 제거합니다. 이미지 파일에는 EXIF 데이터, 색상 프로필 및 기타 필요하지 않은 정보가 포함되어 있습니다. 모두 제거하세요. ImageOptim과 같은 도구는 이 작업을 자동으로 수행합니다.
"Ge-Sign으로 새 이메일 서명을 만들었는데, 즉시 로딩되면서도 전문적으로 보입니다."
Kevin F., 부동산 중개인
이메일 서명 테스트 및 적용
서명은 이메일 클라이언트에서 작동합니다. 잘됐네요. 하지만 수신자가 사용하는 다른 12개의 클라이언트는 어떻게 될까요?
이메일 서명 테스트의 중요성
Outlook 웹, Outlook 데스크톱, Outlook 모바일 - 세 가지 렌더링 엔진, 세 가지 결과.
Chrome의 Gmail, Safari의 Gmail, iOS의 Gmail 앱은 모두 조금씩 다릅니다.
Apple Mail, 선더버드, 야후 메일, 프로톤 메일 - 각각 특이한 점이 있습니다.
테스트는 선택 사항이 아닙니다. 다양한 플랫폼의 계정에 테스트 이메일을 보내세요. 데스크톱과 모바일을 확인합니다. 찾습니다:
- 이미지가 올바르게 로드됨
- 안정적으로 유지되는 치수
- 이상한 간격이나 간격 없음
- 링크 작동
- 텍스트 가독성 유지
일반적인 오류: Outlook에서 이미지가 늘어짐, Apple Mail 모바일에서 배너가 잘림, Gmail 앱에서 간격 문제.
회사 전체에 서명을 보내는 경우 Litmus 또는 Email on Acid와 같은 테스트 도구를 사용하세요. 이러한 도구는 수십 개의 클라이언트에서 동시에 미리보기를 표시합니다.
수동 테스트도 가능하지만 시간이 오래 걸릴 뿐입니다. 주요 제공업체에서 무료 계정을 생성하세요. 자신에게 테스트 이메일을 보냅니다. 휴대폰으로 확인합니다.
모바일 장치에 맞게 서명 조정하기
모바일에서 열리는 이메일의 수는 50%가 넘습니다. 서명이 먼저 작동해야 합니다.
모바일 화면의 너비는 320~428px입니다. 600px 배너? 크기에 맞게 축소됩니다. 텍스트가 작아집니다. 이미지의 디테일이 사라집니다.
모바일 우선 사고방식으로 디자인하세요:
- 총 서명 너비를 500px 미만으로 유지
- 더 큰 글꼴 크기 사용(최소 16px)
- 클릭 가능한 요소는 최소 44x44px로 만듭니다.
- 가능하면 요소를 세로로 쌓습니다.
- 브라우저 크기 조정뿐 아니라 실제 휴대폰에서 테스트하기
이미지는 비례적으로 크기가 조정되어야 합니다. HTML에서 최대 너비를 100%로 설정합니다. 이렇게 하면 이메일 클라이언트가 레이아웃을 손상시키지 않고 화면에 맞게 이미지를 축소할 수 있습니다.
모바일 데이터 속도를 고려하세요. 200KB의 서명? 느린 연결에서는 로드하는 데 몇 초가 걸립니다. 수신자는 서명이 나타나기 전에 스크롤을 지나치게 됩니다.
일부 회사는 더 간단하고 작고 빠른 별도의 모바일 서명을 만듭니다. 작업은 두 배로 늘어나지만 뛰어난 모바일 경험을 보장합니다.
디스플레이 문제 방지
이메일 클라이언트는 예측 가능한 방식으로 서명을 손상시킵니다. 잘못된 이유와 이를 방지하는 방법은 다음과 같습니다:
div가 아닌 테이블. 이메일 HTML이 2005에 고정되어 있습니다. 구조에 테이블 레이아웃을 사용하세요. Div와 최신 CSS는 종종 실패합니다.
인라인 스타일만 해당됩니다. 외부 스타일시트가 제거됩니다. 태그는 무시됩니다. 요소에 직접 스타일을 넣습니다: <td style="padding: 10px;">.
절대 이미지 URL. 첨부 파일이 아닌 서버에서 호스팅되는 이미지에 링크합니다. 첨부된 이미지는 답글이나 전달에 표시되지 않을 수 있습니다.
모든 항목의 대체 텍스트. 이미지가 로드되지 않는 경우(클라이언트에 의해 차단되었거나 연결 속도가 느린 경우) 대체 텍스트가 표시됩니다. 이미지 없이도 서명을 읽을 수 있도록 합니다.
배경 이미지가 없습니다. Outlook에서 무시됩니다. 대신 단색 또는 일반 이미지를 사용하세요.
링크 서식을 테스트합니다. 일부 클라이언트는 URL의 서식을 자동으로 지정하여 스타일이 지정된 텍스트 링크를 깨뜨리기도 합니다. 항상 링크된 텍스트가 올바르게 표시되는지 확인하세요.
이국적인 글꼴은 피하세요. 웹 글꼴이 작동하지 않습니다. 시스템 글꼴을 사용하세요: Arial, Helvetica, Georgia, Times. 이 글꼴들은 어디에나 표시됩니다.
줄 높이와 간격을 확인하세요. 편집기에서는 보기 좋게 보이는 내용이 Outlook에서는 여분의 간격으로 렌더링될 수 있습니다. 간격에 특정 픽셀 값을 사용하세요.
이메일 서명은 고정된 것이 아니라 적대적인 영역을 통과하는 코드입니다. 모든 클라이언트는 이를 다르게 해석합니다. 적절한 크기와 파일 크기는 어디서나 전문적으로 보일 수 있는 최고의 기회를 제공합니다.
이 사양부터 시작하세요:
- 로고: 최대 300x100px, 20KB 미만
- 배너: 최대 600x80px, 30KB 미만
- 총 서명: 50KB 미만
- 모든 이미지: 망막을 위한 2배 픽셀 밀도
모든 곳에서 테스트하세요. 고장난 부분에 따라 조정하세요. 서명은 수백 개의 이메일에서 사용자를 대표합니다. 중요하게 만드세요.
Ge-Sign 편집팀이 작성했습니다.
