#아이템 선정 #MVP검증 #프로덕트
Build in public #6 읽음직한 메일 바디 만들기

이 다음의 고민은 메일바디이다. 

그냥 막 보내면 뉴스레터가 아니라 그냥 메일이다.

시각 요소를 넣고, 그럴싸하게 링크도 넣고, 가독성도 높이기 위해선 

메일 바디 코딩은 필수이다. 

 

아무리 엄청난 ai 뉴스레터라고 하더라도, 그냥 흰 배경에 글씨가 써있는 구조라면 잘 안 읽힐 것이다.

 

이메일 보내기를 코딩해본 사람들은 알겠지만 이메일은 정말 괴랄한 템플릿 문법을 가지고 있다. 테이블 태그를 테이블 태그로 감싼 다음, 다시 테이블 태그로 감싸서 만든다.

HTML 상자를 사용할 때 기억할 다섯 가지!

(HTML에 div 지옥이 있다면, 이메일에는 table 지옥이 있따!)

왜인지는 모르겠다. 뭔가 매우 올드한 레거시 같은 거겠지.. ?

 

이메일은 인터넷의 조상격인 서비스니까, 왠지 그때는 div 도 없었을 것 같다.

그래서 뭔가 h1, p, a 만으로는 도저히 레이아웃이라는 개념을 못그리니까 

누군가가 aha! table로 해서 그림 그리면 되네 ㅎㅎ

했던게 지금까지 굳어진게 아닐지… 

다시 만난 짤방

<table>, <span> 태그로 수없이 감싸져있는 극악의 문법을 쓸 자신이 없는 나

 

이럴 땐 어떻게 하는게 좋을까? 역시나 갖다쓰는거다. Free email newsletter template, free email template 등을 열심히 찾아봤으나 소득이 없었다.

열심히 free email template을 찾아보던 중… 1시간 동안 찾았으나 도저히 맘에 드는걸 찾을 수 없었다.

대부분 디자인 템플릿 수준이거나, 내 취향에 맞지 않게 너무 fancy하거나, 유료였다.

 

결국 나는 그냥 내가 보던 뉴스레터 템플릿을 변형시켜서 쓰기로 마음을 먹었다.

왠지 스티비에 가면 따올 수 있을 것 같았다. 근데 스티비 가입해서 메일 보내고 따오기도 귀찮아서(…) 뉴스레터 계의 탑플레이어인 뉴닉의 태그로 부터 따오기로 한다.

뉴닉의 뉴스레터 디자인이 매우 독창적인 것은 아니니 따와도 무방할 것 같다.

 

중앙 정렬을 통해, 모바일, PC 등 어떤 기기에서나 잘 보이게 하는 목적으로 뉴닉의 템플릿을 메일 바디에서 HTML 에디터 모드로 확인한 후, GPT에게 이걸 템플릿으로 만들어달라고 했다.

1.레퍼런스 코드를 주고

2.템플릿으로 만들라고 시켰다

얼추 완성

 

이제 밥 먹고와서 이메일 리시버 만들거다

링크 복사

댓글 0
댓글이 없습니다.
추천 아티클
0