게이트 콘텐츠는 자료의 일부나 전체를 연락처 입력 뒤에 제공합니다. 관심도가 높은 독자와 후속 대화를 열 수 있지만 접근 장벽도 생깁니다.
기본 정보까지 모두 가리면 발견과 신뢰가 줄어듭니다. 먼저 충분한 내용을 공개하고, 추가 자료의 가치와 데이터 사용 목적을 명확히 설명하세요.
언제 쓰나
깊은 자료를 제공하고 동의한 독자와 후속 상담을 이어갈 때 씁니다.
게이트 콘텐츠
Gated content
콘텐츠 공개 범위와 연락처 요청의 교환을 설계합니다.
···
<div class="gate"><div class="page"><b>FIELD GUIDE</b><span>OPEN PREVIEW</span><div class="masked">DEEP-DIVE PAGES</div></div><div class="lock">UNLOCK</div><div class="meter"><i></i></div></div>.gate{width:min(78%,440px);font:900 clamp(10px,max(2vmin,1vw),17px) sans-serif}.page{height:clamp(90px,37vmin,200px);border:2px solid var(--fg);background:var(--surface);padding:clamp(8px,3vmin,20px);display:flex;flex-direction:column;gap:10px}.page b{font-size:1.3em}.page span{color:var(--accent)}.masked{flex:1;border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted);filter:blur(2px);animation:reveal 5s infinite}.lock{background:var(--accent);color:white;text-align:center;padding:clamp(5px,1.5vmin,11px);width:50%;margin:-12px auto 0;position:relative;animation:unlock 5s infinite}.meter{height:5px;background:var(--line);margin-top:10px}.meter i{display:block;background:var(--fg);height:100%;animation:meter 5s infinite}@keyframes reveal{0%,30%{filter:blur(2px)}50%,80%{filter:none;color:var(--fg)}100%{filter:blur(2px)}}@keyframes unlock{0%,30%{transform:none}50%,80%{transform:translateY(13px)}100%{transform:none}}@keyframes meter{0%{width:80%}50%,80%{width:45%}100%{width:80%}}