📍 이 글은 디자이너도 아니고 퍼블리셔, 개발자도 아닌 그냥 기획자로써 주관적인 경험에 의한 글입니다.
갑자기 분위기 이메일 코딩. 그래 바로 그것이다. 진짜 갑자기 이메일 코딩을 하게 되었다. 프로젝트를 하다보면 시스템에서 발송할 이메일을 작업하는 경우가 많은데, 항상 메일 코딩은 이슈가 많다. 그러면서 생겼던 것들, 생각해야 하는 것들을 정리하려고 이 글을 쓰고 있다. 제목은 어그로를 끄려는 나의 노5오Ooㅇ력이다.
메일은 고려해야 할 게 참 많다.
광고성 이메일도 있고, 정보성(이라고 쓰고 공지용) 이메일도 있고, 정보 확인을 위한 이메일도 있고..
이와 같이 세상에 많은 이메일 유형이 있고 지메일, 네이버 메일, 아웃룩, 네이트 메일, 카카오 메일, 한메일 등 다양한 메일 서버가 있다.
그리고 사람들은 메일을 확인하기 위해서 윈도우OS, MacOS, Linux, iOS, AOS 등 다양한 OS의 다양한 브라우저를 사용할 수도 있고, 데스크톱 app을 사용할 수도 있고, 모바일 app을 사용할 수도 있다.
그렇다 보니 이메일을 html로 만들어서 보내려면, 굉장히 옛날스러운 html 코딩을 해야 한다. 내 경험상 테이블 코딩이 만능이다. 테이블 코딩이 아니더라도 지원되는 경우가 있긴 하지만, 재작년 프로젝트에서 고객사 메일 서버에서 해당 소스로 발송하면 특정 tag가 동작하지 않는 이슈가 있어서 결국 테이블 코딩으로 바꿨었다.
안전하게 가려면 테이블 코딩을 해야 한다....
기본 구조
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">|
|
이것도 블로그 보면서 찾은걸로 내가 조합한...? 기본 구조다.
메일 발송 시, <body> tag와 <html> 정보나 <header> 정보들이 날라가는 경우가 있어서, <body> 이하 테이블에 속성을 지정해줘야 한다.
특히 콘텐츠 내용이 화면 한가운데 오게 하려면 margin:0 auto; 이 속성이 중요하다. align="center"로도 어느 정도 적용되미나, 내 기억에 네이버 PC 메일에서 적용이 안되었다.
테이블 코딩
이메일은 <div>를 제대로 지원하지 않는다.
콘텐츠 영역을 모두 표 형태로 만든다고 생각해서 작업했다. 나같은 경우엔 배경 여백까지 모두 column으로 만들었다. table 속성에 border="1"을 넣어두고 시작하면 전체 레이아웃을 보면서 할 수 있다. 다만, 작업 끝나고 border="0"으로 변경해줘야 한다.
그리고 배경 외 콘텐츠 영역의 너비를 600px로 작업했다. 이메일에서는 반응형으로 작업할수가 없는데, 데스크탑 / 태블릿 / 모바일 등을 고려했을 때 600px로 어느정도 괜찮게 나온다고 한다.
CSS는 인라인으로
HTML에 CSS를 적용할 때는 크게 인라인으로 하거나 스타일 시트를 적용하는 방법 두가지가 있는데, 메일은 반드시 이나인 스타일로 지정해줘야 한다.
글꼴, 폰트 font-family의 경우, 웹폰트 지정이 거의 불가능하다. 찾아보면 웹폰트를 사용할 수 있다고 하는데 메일 서버에 다라서 불가능한 경우도 있기 때문에 가급적 기본적인? 폰트를 사용하자.
Apple SD Gothic
Arial / Arial Black
Cosmic Sans MS
Courier New
Gerogia
Helvetica
Lucida Console
Lucida Sans Unicode / Lucidda Grand
Palatino Linotype
Tahoma
Trebuchet MS
Verdana
Impact
글씨 크기 font-size의 경우, 모든 텍스트가 들어가는 부분에 작성해줘야 한다.
여백 지정할 때는 가급적 padding-bottom, padding-top 등 개별 속성을 사용해서 작성해야 한다. margin은 지원하지 않는 경우가 있다고 하니, 가급적 padding으로 작성한다.
같은 맥락으로 글씨 색상 font-color, bg-color는 #000 대신 #000000 전체 값으로 작성한다.
그리고 자문을 구했던 언니의 말로는 여백을 위해서 td를 만들어주는 경우에 공백 코드 를 넣어주라고 했다.
이미지의 경우 용량은 최소화해야 하며, 절대 경로로 작성해야 포함한다. 그리고 width, height, alt 값을 반드시 작성한다.
colspan, rowspan이 적용되지 않기 때문에 테이블 안에 테이블이 여러개 중첩된 형태를 사용해야 한다.
특히 둥근 사각형 버튼인 경우 <td> 안에 table을 넣고, 테이블 속성으로 border-radius를 줬다. 이게 IE 낮은 버전에서 적용 안된다고 하는데 IE 없어진 기념으로 마이크로소프트 방향으로 절이나 해야겠다.
둥근 사각형 버튼을 처리하는 건 또 다른 방법이 있는데 라운드 들어가는 부분을 이미지로 업로드 하는 방식이다.저 버튼의 경우, 각 모서리의 꼭지를 이미지로 넣는 방식이다.
HTML에서 <a> tag를 사용하게 되는 경우, 우리가 흔히 아는 파란색 밑줄의 형태로 들어가게 되는데 이부분을 디자인으로 의도하지 안흔다면 위에 예제처럼 style="color:inherit; text-decoration:none;"를 넣어준다.
버튼의 텍스트가 바뀌는 일이 없다면 버튼 자체를 이미지로 넣을 수도 있다. 하지만 이 경우에는 이미지 다운로드를 막아둔 메일 서버에서는 링크를 동작하기 어려울 수 있다.
메일 퍼블리싱은 OS별로, 브라우저 별로, app별로, 데스크탑 / 모바일 기기 별로 발송 후 테스트를 정말 많이 해봐야 한다. 그러다보면 몰랐던 사실도 알게되고, 아무리 검색해도 안나오게 되는 막막한 상황도 온다.
나의 경우엔 글씨 크기, 폰트 사이즈였다. px로 설정하고 테스트 했는데 모바일에서 열었을 때 폰트가 너무 작아보였다.
-webkit-text-size-adjust:100% 라는 속성을 주면 된다고 어디서 보고 테스트해보았지만 안먹었다.
임시로 작업한건 rem이었다. pt / em / vw 모두 사용해봤지만, rem이 가장 나아보여서 rem으로 폰트 사이즈를 모두 바꿨다. 그게 확! 맘에 든건 아니었지만, 그래 이정도에서 타협하고 문제 생기면 다시 수정하는 것으로 넘어갔다.
혹시 이 글을 보고 모바일 폰트 문제 해결하신 분이 있다면 제발 댓글로 알려주세요 ㅠㅠㅠ
참고자료
- zlevn.log ::: HTML 이메일 템플릿 구축하기 https://velog.io/@zlevn/HTML-%EC%9D%B4%EB%A9%94%EC%9D%BC-%ED%85%9C%ED%94%8C%EB%A6%BF-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0
- ttaeng_99's 개발의 흔적들 ::: [HTML] 이메일 폼 퍼블리싱https://abangpa1ace.tistory.com/entry/HTML-%EC%9D%B4%EB%A9%94%EC%9D%BC-%ED%8F%BC-%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1-%EC%9E%91%EC%84%B1%EC%A4%91
- HEUKMYO ::: etc 이메일별 border-radius 처리 방법 http://cat.hubweb.net/index.php?mid=board_s1h4c2&listStyle=gallery&page=1&document_srl=5631&m=0
'얕은 개발 이야기' 카테고리의 다른 글
| 하나의 소스로 PC/Mobile에 최적화된 메일 코딩 (0) | 2024.12.03 |
|---|---|
| [Powershell] 파워쉘로 파일명 여러 개 한꺼번에 수정/삭제 (0) | 2023.05.19 |
| 단위에 관하여: px, em, rem, vh, vw (0) | 2022.01.28 |
| 파이썬으로 파일 복사 - 똑같은 파일을 파일명만 다르게 복제하기 (0) | 2021.07.15 |