brunch

You can make anything
by writing

C.S.Lewis

by 뀰사마 May 25. 2022

웹 개발과는 전혀 다른 이메일(EDM)개발

다른 차원으로 쌍욕이 나오고 마소와 구글을 폭파하고 싶어지는 것

프론트엔드 개발자로서 광고, 특히 마케팅 에이전시에서 일하다보면 별별 일을 다 겪게 된다. 웹 개발도 웹 개발이지만 정말 별별 희안한 방식의 이메일 디자인을 요구하는 클라이언트들을 설득하노라면 기력이 다 빨린다. 프론트엔드 웹UI개발도 힘들지만 웹메일은 또 다른 차원의 것이다. 이러지 마세요-List 를 대자면 밑도 끝도 없으니 다른 페이지에 적겠다.   


특히 다른 개발자의 코드를 건들자면 더욱 토나올 정도이다. 그의 코드가 거지같아서 토나오는 게 아니라 한 테이블의 1행을 만들자고 계속해서 table/tr/td로 연달아서 테이블안에 테이블이 있고 그안에 또 테이블이 있는 상태의 1000줄이 넘는 코드가 html 파일 하나에 다 담겨있다 생각해보자. 


프론트엔드 개발자들은 웹메일을 건들기전엔 


'왜 edm개발자들은 저렇게 돈을 많이 벌어? 끽해봤자 이메일이잖아? 그거 그냥 테이블만 띡띡 얹고 이미지만 얹으면 되는거 아니냐?' 


라고 자주 말한다. 


실제로 이메일 개발을 하기 전 까진...ㅋ..ㅋ..ㅋ...


왜 이메일 개발은 직접 관여하기 전까진 정말 쉬워보이다가 조금만 틀어져도 지옥행 열차를 탈까? 

거기엔 여러 이유가 있지만 우선 개발자나 캠페인을 진행하는 마케터 각자의 이해도의 차이가 가장 크다고 할 수 있다. 


간단히 이유를 되짚어 보자면: 


Q1. html  파일이잖아요. 뭐가 그리 어려움? 

A1: 이메일 렌더링을 주관하는 소프트웨어나 서비스에서 보여지는 이메일 컨텐츠는 사실 html이 아니기 때문임. 아무리 브라우저 테스팅을 한다고 한들 그 결과가 이메일에서 잘 보여질리는 없다 보는게 편함. 


Q2. 그까이거 그냥 html로 컴파일링 해주는 js로 코딩하면 간편하게 할 수 있지 않음? 

A2: 이메일 서비스는 사실 웹서비스이지 그렇게 렌더링 된 결과물이 온전한 html파일 그대로 보여주진 않음. 이메일 캠페인 개발에 쓰이는 template는 email 서비스 프로바이더에서 렌더링하기 좋게 html 마크업을 짜서 입력어를 주는 것에 가까움. (고로 css와 html이 프로그래밍이냐고 울부짖는 junior들아. 그래, 프로그래밍 맞다, 임마)


Q3. 이메일 걍 드림위버로 테이블 헬 소환해서 완성하면 되는 거 아님? 

A3: 그것이 정답일 수도 있고 아닐 수 있다. 대답은 렌더링의 신...그리고 아웃룩 데스크탑의 정령만이 아신다. 


Q4. 아니 근데 시대가 어느 때인데 누가 이메일 읽어요? 이메일 그냥 스팸필터에 다 버리기 바쁜데. 

A4: 믿기 어렵겠지만 아직까지 SNS, SMS 문자, SEO, 배너 광고 등등...다양한 채널중에 이메일 캠페인의 revenue return 율도 가장 높고 CRO(Conversion Rate Optimisation)를 맞추기에도 가장 분명하고 용이하다. 이것에 대해선 더 깊이 이야기를 다른 포스팅에 하는 게 나을 것 같다. 여튼 괜히 기업들이 SalesForce, Marketo, Adobe Campaign을 쓰는 것이 아니다. 


Q5. eDM도 어차피 HTML로 코딩할 거면 그냥 BrowserStack으로 테스팅 하는 게 낫지 않음? 

A5. eDM은 앞서 말했다싶이 개발자가 HTML로 템플릿을 만들면 그걸 입력어로 받아들여 이메일 엔진에 렌더링을 해서 컨텐츠를 뿌리는 것이다. 그래서 Gmail eDM 개발법이 다르고 Outlook.com, outlook desktop이 다르며 outlook desktop도 버젼별로 다 다르다. 렌더링 모듈을 설정해서 리트머스나 email on acid를 통해 모바일 버젼과 데스크탑 버젼을 테스팅해도 안드로이드 기종별로 다르고 아이폰 기종별로 다르다.  


Q6.  아니 html5만큼 쉬운 markup language가 또 없을텐데 왜 edm 개발자들은 이메일 개발에 이렇게 오래 걸리는거야? 

A6. 아아 모르는가- 그것이 바로 이메일 개발의 x같은 점이라는 것이다-


이메일은 HTML5를 쓰지 않는다. HTML4 규격을 따라야한다. 그 와중에 대부분의 클라이언트들은 모바일 이메일앱도 연동이 되는 템플릿을 원한다. 설상가상 컴포넌트가 마케팅 클라우드 내에서 취합한 Segment(분류된 고객정보)에 따라 다이나믹하게 변경되길 원한다. 


HTML4가 언제적 언어인지 한번 잘 생각해보길 바란다. 


이런 제한점이 있음에도 불구하고 클라이언트들의 다이나믹 컨텐츠 캠페인에 대한 열망은 더 부풀어져가고 거기에 Pixel Perfect한 디자인을 주장하는 디자이너까지 붙어 있으면 대환장쇼로 참 가기 쉬운 것이 이메일 캠페인이다. 


왠만하면 개발자의 말을 믿어줍시다 디자이너/마케터/기획자님들..


PS. 이메일을 디자인 할 때 참조해볼법한 기사들을 공유합니다..만 사실 최상은 걍 개발자가 그걸 버그없이 구현할 수 있는 디자인이냐 마느냐 조언주는게 가장 편하긴 합니다. 




https://marketingland.com/heres-why-you-need-to-make-sure-your-email-design-is-mobile-first-260088

https://www.degdigital.com/insights/mobile-first-email-development/

https://www.cendyn.com/blog/7-best-practices-for-mobile-first-email-design/

https://www.pardot.com/email-marketing/think-mobile-first-email-design/

https://www.abtasty.com/blog/the-non-coders-responsive-email-design/

https://www.dyspatch.io/blog/icymi-how-to-design-email-for-mobile-first/

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari