이번으로 이메일 코딩은 이년 정도의 업무 기간동안 세번 정도 해보게 된 것 같습니다. 이메일은 가장 안전한 코드로 레이아웃을 짜고 스타일을 넣어 주어야 합니다. 첫번째 메일 코딩은 이조차 잘알지 못하여 일반 코드로 진행했었고 두번째 부터는 여러 자료들을 참고해서 메일 코딩을 했습니다. 이번으로 세번째 메일 코딩이었는데 아직까지는 기회가 없어 반응형 메일 코딩은 해보지 못했네요.
코딩 참고 사이트
제가 메일 코딩을 제대로 했을 때부터 참고하는 자료가 있습니다. 아무래도 메일코딩은 자주하지 않다보니 할 때마다 잘 설명이 되어 있는, 보던 자료들을 다시 참고하게 되는것 같습니다.
webdesign.tutsplus.com/ko/articles/build-an-html-email-template-from-scratch--webdesign-12770
Build an HTML Email Template From Scratch
모든 과정을 이해하는 최고의 방법은 처음부터 끝까지 직접 제작해보는 것입니다. 오늘은 HTML 이메일 템플릿을 처음부터 구축하면서 이메일 디자인에 그 방법을 실행해 보도록 하죠. 시작 시작
webdesign.tutsplus.com
heropy.blog/2018/12/30/html-email-template/
HTML Email Template 만들기
서비스 이메일 푸쉬에 사용할 HTML Email Template를 제작하기 위해 필요한 내용들을 살펴봅니다. 표준 코딩이 아니기 때문에 주의해야 하는 중요한 개념들을 정리합니다.
heropy.blog
차근 차근 보며 따라하다 보면 어느새 완성되어 있을거에요.
그리고 후에 반응형 메일링을 작업하게 될 경우 참고할 페이지입니다.
[번역] 미디어 쿼리 없이 반응형 이메일을 만드는 Fab Four 테크닉
원문: The Fab Four technique to create Responsive Emails without Media Queries 미디어 쿼리 없이 반응형 이메일을 만드는 새로운 방법을 찾았습니다. 이 방법은 CSS calc() 함수와 width , min-width , max-w..
d0gf00t.tistory.com
사전 커뮤니케이션에서 미리 언급해두면 좋은 요소
- 정확한 url, 이미지 등의 예시가 있으면 좋다는 점을 전달합니다. ( 코딩 시 참고가 많이 되기 때문 )
- 메일 코드는 background-image 속성을 쓸 수 없기에 디자인 시안을 중간에 확인할 수 있다면 확인하는 것이 좋습니다.
- 600px 은 이메일에 가장 안전한 최대 너비 (600px ~ 800px)
- 메일 코딩 GIF 파일 용량 ( 250kb 미만으로 유지 )
이메일 코딩 유의점 및 알아두면 좋은점
- 되도록 생략 형태의 코드는 사용하지 않도록 합니다. (ex _ #000000)
- 가운데 정렬 된 컨텐츠 영역은 600px ~ 800px 사이여야 안전합니다.
- padding: 10px 20px 10px 13px; 과 같이 사용할수도 있지만. 명확하게 padding-top: 10px, padding-right: 20px, padding-bottom: 10px, padding-left: 13px; 명시하는 것이 좋습니다. 축약 형태를 사용하는 경우 반드시 '모두'(위, 우, 아래, 좌) 입력하는 것이 좋습니다.
이 부분은 테스트 결과 축약형을 써도 제가 테스트 해본 메일들(네이버, 야후, 다음, gmail, 카카오, hotmail, nate)에서는 큰 무리가 없었습니다. - margin을 사용할 수 없습니다.
네이버는 예외입니다. 알 수 없는 이유로 align="center"가 적용되지 않지만 margin: 0 auto; 는 적용되어 가운데 정렬을 위해 해당 코드를 넣어두었습니다. - div 태그를 사용하지 않습니다.
- 메일 코드는 table 태그의 rowSpan, colSpan 기능은 지원하지 않습니다.
- img는 width, height, alt 속성을 꼭 입력해줍니다.
- a 태그가 파란색으로 사용 되지 않는다면 <font> 태그와 함께 사용해야 합니다.
- 공백은 아래와 같이 공백 스타일 td를 한번 더 만듭니다.
- background가 되는 가장 부모의 table 영역에 width: 100%, 가운데 정렬의 컨텐츠가 보여지는 영역에 min-width 와 max-width를 사용해서 모바일 웹을 대비합니다. 보통 min-width: 350px;, max-width: 600px;
- 글씨 크기가 상속이 안되는 이슈(네이버 모바일)는 인라인으로 직접 font-size를 넣어 해결합니다.
- 어떤 경로로 이메일을 전달하는지에 따라 다르지만 <body style="margin:0; padding:0;"> 리셋 css를 걷어 내고 메일이 전달 되는 경우가 있습니다. 이때 아래와 같은 방법으로 해결했습니다.
<style>
@charset "UTF-8";
body {
margin: 0;
padding: 0;
}
</style>
이메일 테스트하기
이번 메일 프로젝트를 진행하면서 테스트 해본 메일은 네이버, 다음, 카카오, gmail, 네이트, 핫메일, 야후 입니다. 메일 테스트는 간편하게 네이버나 다음 메일을 이용하여 우측 하단에 있는 html 모드로 확인할 수 있습니다. gmail은 html 모드를 지원하지 않습니다.
네이버 데스크탑, 네이버 모바일, 다음 모바일에서 이슈가 있어 해결해 나갔습니다. 대체로 데스크탑에서는 문제가 없으나 모바일에서 확인했을 때 레이아웃이 깨지는 경우가 많습니다.
네이버 데스크탑 _ align:center 가 작동하지 않아 예외적으로 margin: 0 auto 를 넣어 해결했습니다.
네이버 모바일 _ 데스크탑에서는 font-size가 상속되어 부모에 한번만 style을 넣어주어도 되지만 모바일의 경우 폰트 사이즈가 깨져서 인라인으로 각각 넣어주었습니다.
다음 모바일 _ 테이블 간의 padding 값이 적용되지 않아 일일이 table간의 간격을 td를 사용해서 구조를 바꿔주어 시간이 좀 걸렸습니다.
다음에도 이메일 작업을 하게 된다면 헛된 시간 낭비를 줄이기 위하여 정리해둡니다 😅
'업무이야기' 카테고리의 다른 글
| Window 에서 git ssh 키 생성하고 적용하기 (0) | 2020.12.04 |
|---|---|
| 반응형 홈페이지 만들 때 고민해 보았던 것들 (0) | 2020.11.18 |
| React BrowserRouter와 HashRouter의 차이점 정리 (0) | 2020.10.21 |
| intelliJ(webstrom, phpstrom) 에서 sass scss 사용하기 (0) | 2020.09.22 |
| React 시작 전 설치해야할 목록 (Mac OS) (0) | 2020.09.09 |
