AI로 만든 HTML을 뉴스레터에 활용하는 법
상품 레이아웃, 긴 글, 데이터, 채팅방 형식까지 콘텐츠에 맞게 HTML을 쓰는 방법
지난 글에서는 AI에게 이메일 전용 HTML 코드를 요청하는 법을 알아봤습니다. 덕분에 코드 작성의 부담은 줄었지만, 막상 내 뉴스레터에 어떻게 활용할지는 또 다른 문제입니다. 같은 내용도 어떤 형태로 담아내느냐에 따라 구독자가 받는 인상은 달라집니다.
이번 글에서는 콘텐츠의 성격에 맞게 HTML을 활용하는 네 가지 방법을, 스티비로 발행된 실제 뉴스레터 사례와 함께 살펴보겠습니다. 스티비에서도 HTML 블록을 활용하면 기본 편집기로 만들기 어려운 레이아웃이나 시각적 구성을 메일 안에 더해볼 수 있습니다.
상품 레이아웃에 브랜드 톤 입히기
쇼핑몰 메일에서 상품을 여러 개 나란히 보여주는 그리드나, 큰 이미지를 배너로 두는 구성은 익숙합니다. 하지만 중요한 건 구조 자체보다, 그 안에 브랜드의 인상을 어떻게 담아내느냐입니다.
HTML을 활용하면 이미지와 텍스트 사이의 간격, 버튼의 모양, 폰트 크기, 배경색 같은 요소를 세밀하게 조정할 수 있습니다. 같은 상품 그리드라도 이런 작은 차이에 따라 전혀 다른 분위기를 만들 수 있습니다.
아웃도어 브랜드 <CAYL>의 메일에서 그 점이 잘 보입니다. 신상품과 추천 제품을 그리드로 보여준 뒤, 하단에는 브랜드 저널을 엮어 제품에서 브랜드의 이야기로 시선이 자연스럽게 이어지도록 했습니다. 흰 배경과 무채색 위주의 절제된 구성, 넉넉한 여백은 CAYL 특유의 차분한 인상을 더합니다.
긴 글을 매거진처럼 구조화하기
다양한 정보를 한 통의 메일에 담다 보면 분량이 길어지기 마련입니다. 전달하고 싶은 내용을 줄이지 않으면서도 구독자가 길을 잃지 않게 하려면, 글을 적절한 단위로 나누어 보여줘야 합니다.
잡지나 책을 떠올려보면 쉽습니다. 처음부터 끝까지 꼼꼼히 읽지 않아도 어디에 어떤 내용이 있는지 짐작할 수 있는 건 제목, 목차, 인용문, 챕터 같은 단서들 덕분입니다. 이메일도 마찬가지입니다. HTML을 활용하면 이런 단서들을 원하는 스타일과 색상으로 디자인해, 긴 글도 한 권의 매거진처럼 구성할 수 있습니다.
비즈니스 인사이트를 전하는 <클럽BCP>의 뉴스레터를 보면, 긴 글에서도 구독자가 길을 잃지 않게 하는 방법을 엿볼 수 있습니다. 정독하면 20분쯤 걸리는 긴 칼럼이지만, 맨 위에 목차와 챕터를 두어 오늘 어떤 이야기가 어떤 순서로 이어질지 먼저 보여줍니다. 본문에 반복해서 등장하는 사례도 같은 형식의 박스로 정리해, 읽는 사람이 흐름을 예측하며 따라갈 수 있게 합니다.
복잡한 수치를 데이터로 시각화하기
숫자는 강력한 정보지만, 텍스트로만 나열되면 크기나 변화가 쉽게 와닿지 않습니다. 특히 큰 단위의 수치나 시간에 따른 변화를 보여줄 때는 표나 그래프처럼 한눈에 비교할 수 있는 형식이 훨씬 효과적입니다.
차트를 이미지로 만들어 넣을 수도 있지만, HTML을 활용하면 메일 본문 안에서 표나 막대그래프 형태의 요소를 구성할 수 있습니다. 데이터 크기에 따라 막대 길이를 다르게 주거나, 핵심 지표를 카드 형태로 묶어 보여주는 식입니다. 덕분에 브랜드의 톤은 유지하면서도 화면 크기에 맞춰 정렬과 간격을 더 깔끔하게 조정할 수 있습니다.
금융과 경제 소식을 전하는 <순살브리핑>은 시장 지표를 한데 모아 표로 보여주고, 금리 변화처럼 흐름이 중요한 정보는 차트형 요소로 정리합니다. 덕분에 구독자는 복잡한 숫자를 더 빠르게 파악할 수 있습니다.
채팅방 형식으로 몰입감 높이기
HTML의 역할은 글을 정돈하는 데서 그치지 않습니다. 구독자에게 익숙한 디지털 화면의 형식을 빌려와 콘텐츠의 몰입감을 높일 수도 있습니다. 형식과 내용이 자연스럽게 맞아떨어질 때, 구독자는 콘텐츠에 더 쉽게 빠져듭니다.
육아 이야기를 나누는 <청룡어머니회>의 뉴스레터가 좋은 예입니다. 후반부 ‘청룡사우나 톡’ 섹션에서는 멤버들의 짧은 답변을 카카오톡 같은 메신저 대화창 형식으로 보여줍니다. 여러 사람의 의견을 줄글로 나열하는 대신 말풍선 형태로 배치해, 실제 수다를 엿보는 듯한 생동감을 줍니다.
영수증, 메모지, 채팅창처럼 구독자가 이미 알고 있는 인터페이스를 빌려오는 것만으로도 콘텐츠에 개성과 몰입감을 더할 수 있습니다.
메인 이미지 | 스티비 권지현
글 | 스티비 안남영