피그마로 이메일템플릿 디자인할때 알아야할 3가지
이메일 템플릿의 제약사항
피그마로 직접 그린 이미지최근에 필자는 이메일 템플릿을 직접 만들어볼 기회가 생겼다.
이전까지 메일관련 서비스에서 제공하는 템플릿의 이미지를 변경하고 문구정도만 바꾸어 사용하는게 전부였다.
커스텀 이메일 템플릿을 만들어 달라는 클라이언트 요구로 인해 그동안 잘 알지 못한 부분들에 대해 이해할 수 있는 좋은 경험이었다.
이메일 템플릿을 만들때에는 웹개발과의 차이점 보다는 제약사항을 이해하는것이 중요하다는걸 알았다.
필자는 큰틀에서 3가지 제약 사항에 대해 알게되었다.
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Styling_tables
HTML은 테이블 코드만 사용할것
웹메일(구글, 아웃룩, 네이버등) 서비스 회사별로 이메일의 구조가 틀려지는 경우가 생김.
테이블 코드는 대부분의 웹메일에서 깨지지 않음
CSS는 HTML 태그안에 인라인으로 넣을것
웹메일 서비스에서 보안상의 이유로 <head>, <style>을 막는 경우가 있음.
미디어 쿼리 사용이 어려움(반응형)
margin과 float는 사용하지 말것
마진과 플롯값은 웹메일 서비스별로 적용이 안되는 경우가 있으므로 사용하지 않기.
피그마로 직접 그린 이미지필자는 이런점들을 반영하여 피그마로 이메일 템플을 직접 작성하여 보았다.
반응형웹과는 달리 테이블만으로 구성을 해야 하다보니 데스크탑과 모바일만 지원을 하면 된다.
피그마로 직접 그린 이미지각각의 섹션에 들어갈 정보는 다음과 같다.
Section 1 : 회사로고 및 소개
Section 2 : 제품 사진
Section 3 : 제품 종류별 설명
Section 4 : 앱 다운로드 정보
Section 5 : 푸터
피그마로 직접 그린 이미지섹션 3번과 같이 디자인 하는 경우 알아야 할 사항은 다음과 같다.
데스크탑 기준에서는 12그리드 기준으로 각 제품별로 4그리드 배분하고 가로로 정렬한다.
모바일에서는 각 제품별로 12그리드 배치하고 세로로 정렬시킨다.
피그마로 각 엘리먼트를 배치하는 방법은 다음과 같다.
...
- Section 3 : 제품 종류별 설명
-- Col-4 : Cheese Bugger
--- Image : �
--- Text : Cheese Bugger
--- Divider : ——
--- Text : Quos deserunt et dolore deleniti nihil voluptas voluptatem...
-- Col-4 : Big Bugger Set
-- Col-4 : Famous Fries
...
