뉴스레터는 구독자가 반복해서 받는 편집물입니다. 제목과 첫 문장이 열람 이유를 만들고, 본문 섹션은 한 가지 중심 약속을 이어갑니다.
링크만 많이 모으면 읽는 흐름이 흩어집니다. 한 호의 핵심 질문을 정하고 독자가 바로 쓸 수 있는 답과 다음 행동을 배치하세요.
언제 쓰나
독자와 정기적으로 관계를 이어가고 자체 배포 채널을 키울 때 씁니다.
한 호의 정보 순서를 설계해 독자가 끝까지 읽게 합니다.
<div class="mail"><div class="subject">ISSUE 08 <span>OPEN</span></div><div class="section">01 THE IDEA</div><div class="section">02 THE EVIDENCE</div><div class="section">03 TRY THIS</div><div class="read"></div></div>.mail{position:relative;width:min(73%,410px);height:clamp(135px,59vmin,300px);background:var(--surface);border:2px solid var(--fg);box-shadow:8px 8px 0 var(--accent-2);padding:clamp(8px,3vmin,24px);font:900 clamp(10px,max(2.2vmin,1vw),17px) sans-serif}.subject{border-bottom:3px solid var(--fg);padding-bottom:clamp(7px,2vmin,15px);display:flex;justify-content:space-between}.subject span{color:var(--accent)}.section{height:23%;border-bottom:1px solid var(--line);display:flex;align-items:center;opacity:.4;animation:reading 4s infinite}.section:nth-child(3){animation-delay:1s}.section:nth-child(4){animation-delay:2s}.read{height:5px;background:var(--accent);width:0;animation:progress 4s infinite}@keyframes reading{0%,10%{opacity:.4}30%,75%{opacity:1}100%{opacity:.4}}@keyframes progress{0%{width:0}80%{width:100%}100%{width:0}}뉴스레터는 구독자가 반복해서 받는 편집물입니다. 제목과 첫 문장이 열람 이유를 만들고, 본문 섹션은 한 가지 중심 약속을 이어갑니다.
링크만 많이 모으면 읽는 흐름이 흩어집니다. 한 호의 핵심 질문을 정하고 독자가 바로 쓸 수 있는 답과 다음 행동을 배치하세요.
독자와 정기적으로 관계를 이어가고 자체 배포 채널을 키울 때 씁니다.