💻 스요일의 꿀팁: 이메일 코딩, 이것만은 잊지 마세요!

구독자님은 어떤 아침 리추얼이나 습관을 가지고 계신가요? 저는 자의 반 타의 반, 회사에 도착하면 메일함을 훑어보는 습관을 가지고 있어요. 하루 사이에 가득 쌓인 뉴스레터를 읽으며 메일함 옆의 빨간 숫자가 점점 줄어드는 걸 보면 하루를 즐겁게 시작할 수 있답니다.

이렇게 이메일을 살펴보면 이런저런 뉴스레터를 만나곤 합니다. 디자인이 화려한 뉴스레터가 있는가 하면, 어딘가 정렬이 어색한 뉴스레터도 있죠. 또 지난주까지는 잘 보였던 이메일이 이번 주에는 틀어져서 도착하는 일도 있고요. 왜 그런 거냐구요? 그건... 스티비의 프론트엔드 개발자인 영롱님께서 자세히 설명해 주실 거예요. 그럼 오늘 스요일의 꿀팁도 재밌게 읽어주세요! - 스티비 세솔

스요일의 꿀팁

💻 스티비 에디터 HTML 상자 활용법

이메일 코딩, 이것만은 잊지 마세요!

여러분은 이메일을 어떻게 사용하고 있으신가요? 지메일, 네이버 등 메일링 서비스를 활용해 텍스트를 작성하고, 파일을 첨부하는 방식으로 사용하는 경우가 일반적일 것입니다. 그런데 메일함을 살펴보니 어떤 뉴스레터는 틀도 잡혀있고, 알록달록... 뭔가 다릅니다! 이런 건 대체 어떻게 만든 걸까요?

정답은... 웹페이지를 만들 때도 쓰이는 HTML, CSS 코드입니다. 하지만 웹사이트 코딩과 이메일 코딩은 생각보다 많은 차이가 있죠. 이에 대해서는 표준에 대해 말하지 않고 넘어갈 수 없습니다.

웹 표준, 어느 브라우저에서나 잘 표시되도록.

구독자님이 작성한 웹페이지가 인터넷 익스플로러에서는 잘 표시되는데 크롬에서는 그렇지 않다면 어떨까요? 이런 문제를 방지하고자 웹 표준이 탄생했습니다. 규칙을 정하고 이것을 따라 웹사이트와 브라우저를 만들자고 약속한 것이죠.

반면 이메일은 여전히 표준이 부재한 상황입니다. 이메일 클라이언트¹ 마다, 심지어는 같은 지메일이라도 웹과 모바일 앱에서 지원하는 스펙이 다릅니다. 이 차이가 생각보다 커서 같은 코드라도 클라이언트에 따라 이메일이 의도와 다르게 표시되기 쉽고요. 웹에서는 잘 나오던 것이 모바일 앱에서 보니 정렬이 틀어지거나 아예 보이지 않기도 하죠.

¹ 이메일 클라이언트: 웹브라우저가 코드를 읽어 웹페이지를 표시하는 것처럼 이메일 코드를 읽고 해석하여 사용자에게 표시하는 이메일 뷰어

스티비 에디터에 새롭게 추가되는 HTML 코드 상자

그러나 걱정하지 않아도 괜찮아요. 스티비는 코드를 전혀 모르는 사용자도 드래그 앤드 드롭 방식으로 콘텐츠 상자를 추가해 쉽게 뉴스레터를 제작할 수 있는 위지윅² 에디터를 제공하고 있거든요. 이에 더해, 일부분만 코드로 커스텀 하고 싶은 사용자를 위해 스탠다드 요금제에서 HTML 상자 기능의 오픈을 앞두고 있기도 합니다.

다만, HTML 상자에서도 모든 것을 할 수 있는 것은 아니예요. 저희가 따로 기능적인 제한을 두고 있지 않은데도 말이죠. 앞서 설명한 이메일 표준의 부재를 극복해야 하기 때문입니다. 그래서 준비했습니다. HTML 상자를 사용할 때 여러 클라이언트에 대응할 수 있는 다섯 가지 꿀팁!

² 위지윅(WYSIWYG, What You See Is What You Get): 사용자가 편집 화면에서 보는 그대로 결과를 얻을 수 있게 해주는 것

1. 임베딩과 폼, 멀티미디어 태그는 안돼요.

혹시 '뉴스레터도 해리포터에 나오는 신문처럼 다이내믹하게 만들 수 있지 않을까?' 하는 생각 해보신 적 있으신가요? 사실 유튜브 영상, 구글 폼, 노션 문서처럼 임베딩 코드를 제공하는 서비스를 활용해 추출한 코드를 웹사이트에 넣으면, 다른 페이지로 이동하지 않고도 내가 만든 웹페이지에서 해당 서비스를 이용할 수 있죠.

폼, 멀티미디어, 스크립트 태그는 이메일에서 사용할 수 없습니다.

하지만 많은 이메일 클라이언트에서는 임베딩을 위해 사용되는 <iframe>, <embed> 같은 태그를 보안상의 이유로 허용하지 않습니다. 코드 그대로 발송해도 클라이언트가 코드를 읽는 과정에서 싹둑 잘라냅니다. 임베딩을 할 수 없다니, 그럼 동영상 플레이어나 폼을 직접 만들어 넣으면 어떨까요? 이 역시 불가능합니다. <form>, <input>, <select> 같은 폼 관련 태그는 이메일에서는 사용할 수 없거든요.

2. 테이블 기반 레이아웃을 사용하세요.

현재 대부분의 웹 환경에서는 HTML5 스펙을 지원하고 있습니다. HTML5에서 등장한 <section>, <article>, <aside>, <header>, <footer> 같은 시멘틱(semantic) 태그는 코드 가독성을 높여 유지 보수를 쉽게 하는 데 도움을 주기도 하죠. 하지만 시멘틱 태그와 CSS로 잡은 레이아웃은 이메일 환경에서 안정적이지 않습니다. <div>를 사용하면 될까요? 슬프게도 더 이전에 사용하던 방식으로 돌아가야 합니다.

div 지옥에서 벗어나게 해주었던 시멘틱 태그

CSS Flex와 Grid가 등장하기 이전에는 <table>을 사용해 레이아웃을 잡았습니다. <table>에 기본적으로 적용된 스타일이 있었기에 오와 열을 맞추기에 용이했답니다. 불렛 포인트가 <li>의 기본 스타일인 것처럼 기본적으로 <table>은 내부에 있는 <tr>, <td>의 위치를 반듯하게 잡아주기 때문입니다.

<table>을 사용할 때, HTML border, cellpadding, cellspacing 속성을 0으로 설정해 주면 의도치 않은 여백이 포함되는 것을 방지할 수 있습니다. HTML colspan, rowspan 속성은 지원되지 않기 때문에 구조는 조금 복잡해질지라도 테이블을 중첩해 구현해야 합니다.

3. 메일 머지를 활용해 보세요.

스티비에서는 메일 머지 기능을 제공하고 있습니다. 스티비에서 사용하는 메일 머지 태그는 $%field%$ 형식인데요. 여기에 사용하고자 하는 필드 키만 입력해 주면 HTML 상자와 HTML 작성하기에서도 쉽게 사용할 수 있습니다. 그럼 메일 머지와 HTML 상자를 통해 간단한 콘텐츠를 작성해 보겠습니다. 사용자 정의 필드 4가지 이메일 주소(email), 이름(name), 수식어(modifier), 좋아하는 벌(bee) 값이 입력된 아래 주소록을 예시로 사용해 봅시다.

사용자 정의 필드에서 정의된 값이 입력된 구독자 목록

HTML 상자를 사용해 간단한 코드를 작성한 후 발송하고 나면 메일 머지 부분이 각각의 정보로 치환된 것을 확인할 수 있습니다. 이메일 제목, 주소록 이름, 공유용 URL 같은 기본 필드, 그리고 구독자마다 개인화된 정보인 사용자 정의 필드를 메일 머지로 활용하면 더욱 똑똑한 이메일을 보낼 수 있겠죠?