-
Notifications
You must be signed in to change notification settings - Fork 0
/
component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2018-08-11-html-email-templete-md-80353be94cd11488fb2a.js
2 lines (2 loc) · 10.6 KB
/
component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2018-08-11-html-email-templete-md-80353be94cd11488fb2a.js
1
2
"use strict";(self.webpackChunkkyoungah_dev_blog=self.webpackChunkkyoungah_dev_blog||[]).push([[285],{5350:function(e,t,n){n.r(t),n.d(t,{default:function(){return g}});var l=n(6540),a=n(8453);function r(e){const t=Object.assign({p:"p",h2:"h2",img:"img",ul:"ul",li:"li",a:"a"},(0,a.R)(),e.components);return l.createElement(l.Fragment,null,l.createElement(t.p,null,"오랜만에 퍼블리싱 외주를 받았는데 이메일 템플릿을 퍼블리싱 하는 일이었다.\n이메일 템플릿은 처음 퍼블리싱 해보는거라 작업 전 먼저 사전작업으로 리서치나 관련 정보들을 알아봤다."),"\n",l.createElement(t.h2,null,"리서치"),"\n",l.createElement(t.p,null,"먼저 내가 받은 이메일 중 몇몇 이메일을 검사해 보았다."),"\n",l.createElement(t.p,null,l.createElement(t.img,{src:"/images/posts/html-email-template-03.png",alt:"aws 메일"}),"\n",l.createElement(t.img,{src:"/images/posts/html-email-template-04.png",alt:"구글 애널리틱스 메일"}),"\n대부분은 table로 레이아웃을 잡고 퍼블리싱을 했다."),"\n",l.createElement(t.p,null,l.createElement(t.img,{src:"/images/posts/html-email-template-01.png",alt:"구글 드라이브 알림 메일"}),"\n",l.createElement(t.img,{src:"/images/posts/html-email-template-02.png",alt:"티스토리 메일"}),"\n평범하게 div를 사용해서 레이아웃을 잡은 이메일들도 있었다."),"\n",l.createElement(t.p,null,"스타일은 전부다 인라인 스타일을 적용하고 있었다."),"\n",l.createElement(t.h2,null,"이메일 템플릿을 작성할 때 주의해야 할 점"),"\n",l.createElement(t.p,null,"위에서 리서치한 결과대로 검색을 해봤더니 이메일 클라이언트 템플릿을 만들 때에는 주의해야 할 것들이 많았다."),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,"레이아웃은 table로 잡자.\n이메일에서 사용하는 HTML과 CSS는 웹 표준과는 거리가 멀다. 게다가 이메일 클라이언트 마다 html과 css를 다르게 해석하기 때문에 주의해야 한다. 다행이 table 코드는 대부분 적용되므로 이를 사용하는 방법이 가장 많이 쓰인다.\n맨처음 이메일 템플릿 작업을 들어가면서 에이 뭐 어때 하며 평소대로 div나 다른 태그들로 레이아웃 작업을 진행했다가 나중에 아웃룩 구버전에서 레이아웃이 다 깨지는걸 확인하고 허겁지겁 table로 레이아웃을 다 바꿨다 ㅠ."),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,"인라인으로 CSS를 적어주는 것이 가장 안전하다.\n대부분의 메일 서비스 업체에서는 보안상 css 파일을 모두 제거하기 때문에 인라인 스타일로 css를 작성해주는 것이 좋다. 대신 안되는 css 요소들도 많으니 조심해야 한다. (position, background-image 등...) media query도 지원하는 곳에서만 쓸 수 있다."),"\n"),"\n"),"\n",l.createElement(t.h2,null,"이메일 템플릿을 작성하면서 도움을 받았던 사이트"),"\n",l.createElement(t.ul,null,"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,l.createElement(t.a,{href:"https://webdesign.tutsplus.com/ko/articles/build-an-html-email-template-from-scratch--webdesign-12770"},"HTML 이메일 템플릿 처음부터 제작하기"),"\n이메일 템플릿을 작성하는 방법을 가르쳐준다. 튜토리얼 하는 식으로 한번 읽어보고 진행했었다."),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,l.createElement(t.a,{href:"https://zurb.com/playground/responsive-email-templates"},"Responsive Email Templates"),"\n무료 이메일 템플릿을 다운받을 수 있는 사이트이다. 이메일 템플릿 하나를 골라 다운 받은 뒤 작업하면서 많이 참고 했었는데 도움이 많이 되었다."),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,l.createElement(t.a,{href:"https://litmus.com/"},"litmus"),"\n작성한 템플릿을 아웃룩, 아이폰, 안드로이드 등 여러 클라이언트에서 테스트 해 볼 수 있는 웹서비스이다. 일주일 동안 무료로 사용할 수 있고 그 다음 부터는 결제를 해야한다. gmail이랑 네이버 메일에서는 작성했던 템플릿이 무너지지 않고 잘 나오길래 안심하고 있다가 litmus로 아웃룩에서 다 무너져있는 템플릿을 보고 식겁하며 새로 작업했었다."),"\n"),"\n",l.createElement(t.li,null,"\n",l.createElement(t.p,null,l.createElement(t.a,{href:"https://templates.mailchimp.com/resources/inline-css/"},"CSS Inliner Tool"),"\nhtml이랑 style을 합쳐서 인라인 스타일 html을 만들어주는 웹사이트이다. 이 사이트 덕분에 css파일과 html 파일을 편하게 합칠 수 있었다. 대신 여러번 작업하면 제대로 결과물이 출력이 안되는 오류가 있어서 파일을 한번 합치고 새로고침 하고 또 다른 파일들을 합치는 작업을 반복했었다."),"\n"),"\n"),"\n",l.createElement(t.h2,null,"마무리"),"\n",l.createElement(t.p,null,"이메일 템플릿 퍼블리싱을 하면서 테이블로 레이아웃 짜는것이 얼마나 구리고 html5가 얼마나 좋은지 느낄 수 있었다. css도 마음대로 못쓰고 미디어쿼리가 안되는것도 정말 힘들었다 ㅠ. 다시는... 이메일...템플릿...퍼블리싱...하고 싶지....않아..."))}var s=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,a.R)(),e.components);return t?l.createElement(t,e,l.createElement(r,e)):r(e)},o=n(2877),c=n(7736),i=n(407),u=n(7735),m=n(685),d=n(2248),h=n(8066),p=n(4848);function f(e){var t,n;let{data:l,children:r}=e;const{date:s,tags:f,title:g}=null!==(t=null==l||null===(n=l.mdx)||void 0===n?void 0:n.frontmatter)&&void 0!==t?t:{};return(0,p.jsx)(c.i,{children:(0,p.jsxs)(o.m,{className:h.q,children:[(0,p.jsx)(d.l,{className:h.V,title:g}),(0,p.jsx)(u.l,{date:s}),(0,p.jsx)(m.I,{tags:f}),(0,p.jsx)(i.E,{children:(0,p.jsx)(a.x,{children:r})})]})})}function g(e){return l.createElement(f,e,l.createElement(s,e))}},407:function(e,t,n){n.d(t,{E:function(){return s}});var l=n(4164),a="post-layout-content-module--post-layout-content-root--01754",r=n(4848);function s(e){let{children:t,className:n,...s}=e;return(0,r.jsx)("div",{className:(0,l.$)(a,n),...s,children:t})}},7735:function(e,t,n){n.d(t,{l:function(){return s}});var l=n(4164),a="post-layout-date-module--post-layout-date-root--f34d1",r=n(4848);function s(e){let{className:t,date:n,...s}=e;return(0,r.jsx)("span",{className:(0,l.$)(a,t),...s,children:n})}},685:function(e,t,n){n.d(t,{I:function(){return o}});var l=n(9143),a=n(4194),r="post-layout-module--post-layout-tags--837df",s=n(4848);function o(e){let{tags:t}=e;return(0,s.jsx)(l.Y,{className:r,children:t.map((e=>(0,s.jsx)(a.Link,{to:"/tags/"+e,children:(0,s.jsx)(l.Y.Tag,{tag:e})},e)))})}},2248:function(e,t,n){n.d(t,{l:function(){return s}});var l=n(4164),a="post-layout-title-module--post-layout-title-root--88374",r=n(4848);function s(e){let{className:t,title:n,...s}=e;return(0,r.jsx)("h1",{className:(0,l.$)(a,t),...s,children:n})}},9143:function(e,t,n){n.d(t,{Y:function(){return r}});var l=n(4164),a=n(4848);const r=Object.assign((function(e){let{children:t,className:n,...r}=e;return(0,a.jsx)("div",{className:(0,l.$)("tags-module--tags-root--e3461",n),...r,children:t})}),{Tag:function(e){let{className:t,tag:n,...r}=e;return(0,a.jsx)("span",{className:(0,l.$)("tag-module--tag-root--aae01",t),...r,children:n})}})},2877:function(e,t,n){n.d(t,{m:function(){return s}});var l=n(4164),a="container-module--container-root--3b208",r=n(4848);function s(e){let{children:t,className:n,...s}=e;return(0,r.jsx)("div",{className:(0,l.$)(a,n),...s,children:t})}},2629:function(e,t,n){n.d(t,{$:function(){return s}});var l=n(4164),a="basic-layout-module--basic-layout-root--a11e0",r=n(4848);function s(e){let{children:t,className:n,...s}=e;return(0,r.jsx)("div",{className:(0,l.$)(a,n),...s,children:t})}},7736:function(e,t,n){n.d(t,{i:function(){return b}});var l=n(4194),a=n(4164),r="header-module--about--32ac9",s="header-module--header-logo--5bbdc",o="header-module--header-navigation--24bcb",c="header-module--header-navigation-item--ba248",i="header-module--header-navigation-item-link--d6da9",u="header-module--header-navigation-list--3815c",m="header-module--header-root--01ceb",d="header-module--tags--eb332",h=n(4848);function p(){return(0,h.jsxs)("header",{className:m,children:[(0,h.jsx)(l.Link,{to:"/",children:(0,h.jsx)("img",{src:"/images/logo.png",srcSet:"/images/logo-small.png 200w, /images/logo.png 300w",sizes:"(max-width: 360px) 200px, 300px",alt:"dev.kyoungah.me",className:s})}),(0,h.jsx)("nav",{className:o,children:(0,h.jsxs)("ul",{className:u,children:[(0,h.jsx)("li",{className:c,children:(0,h.jsx)(l.Link,{to:"/tags",children:(0,h.jsx)("span",{"aria-label":"tags",className:(0,a.$)(i,d)})})}),(0,h.jsx)("li",{className:c,children:(0,h.jsx)("a",{href:"/about",rel:"noopener",target:"_blank",children:(0,h.jsx)("span",{"aria-label":"about",className:(0,a.$)(i,r)})})})]})})]})}var f="footer-module--footer-root--795ff";function g(){return(0,h.jsxs)("footer",{className:f,children:[(0,h.jsx)("span",{children:"Powered by Gatsby, Hosted by GitHub Pages."}),(0,h.jsxs)("span",{children:["©",(0,h.jsx)("a",{href:"https://github.com/partykyoung",rel:"noreferrer",target:"_blank",children:"KyoungAh"}),", All rights reserved."]})]})}var x=n(2629);function b(e){let{children:t}=e;return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(p,{}),(0,h.jsx)(x.$,{children:t}),(0,h.jsx)(g,{})]})}},8066:function(e,t,n){n.d(t,{V:function(){return a},q:function(){return l}});var l="post-layout-module--post-layout-container--f40b5",a="post-layout-module--post-layout-title--1c575"},8453:function(e,t,n){n.d(t,{R:function(){return s},x:function(){return o}});var l=n(6540);const a={},r=l.createContext(a);function s(e){const t=l.useContext(r);return l.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:s(e.components),l.createElement(r.Provider,{value:t},e.children)}},4164:function(e,t,n){function l(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e)){var r=e.length;for(t=0;t<r;t++)e[t]&&(n=l(e[t]))&&(a&&(a+=" "),a+=n)}else for(n in e)e[n]&&(a&&(a+=" "),a+=n);return a}function a(){for(var e,t,n=0,a="",r=arguments.length;n<r;n++)(e=arguments[n])&&(t=l(e))&&(a&&(a+=" "),a+=t);return a}n.d(t,{$:function(){return a}})}}]);
//# sourceMappingURL=component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2018-08-11-html-email-templete-md-80353be94cd11488fb2a.js.map