1) 전환 기본 원칙
- 라벨: “다운로드”보다 “가이드 3p 무료 다운로드”처럼 구체적으로.
- 대비: 배경과 4.5:1 이상 색 대비, 주변 여백 12~16px.
- 가시성: 데스크톱 44×44px, 모바일 48×48px 터치 타깃.
2) 실험 변수: 색/크기/아이콘/보조문구
아래 샘플 세트에서 색·라벨·보조문구를 교체해 A/B 테스트를 진행하세요.
3) 배치 위치: 퍼스트뷰·본문·말미
- 퍼스트뷰: 메인 CTA 1개만 노출, 보조 링크는 숨기기.
- 본문 중간: 섹션 요약 옆에 보조 CTA 배치(스크롤 리커버리).
- 글 말미: 최종 CTA + 관련 글 2~3개로 회전율 확보.
4) HTML 베이스 템플릿 (이미지 슬롯 포함)
아래 블록을 티스토리 HTML 모드에 붙여 넣고 이미지 URL/라벨/링크만 교체하세요.
<!-- 대표 썸네일 -->
<meta property="og:image" content="https://your.cdn/cover-cta-test-1200x630.webp">
<!-- CTA 버튼 샘플 -->
<div class="cta-row">
<a class="btn pri" href="https://your.link" role="button" aria-label="가이드 다운로드, 즉시 받기">
가이드 다운로드 <span class="sub">즉시 받기</span>
</a>
<a class="btn ghost" href="#section-demo" role="button">데모 보기 <span class="sub">30초</span></a>
</div>
<!-- 본문 이미지 1/2/3 -->
<figure>
<img src="https://your.cdn/cta-body-1.webp" width="1200" height="675" loading="lazy"
alt="퍼스트뷰 CTA 와이어프레임">
<figcaption>핵심 혜택 + CTA 1개.</figcaption>
</figure>
<figure>
<img src="https://your.cdn/cta-body-2.webp" width="1200" height="675" loading="lazy"
alt="목차에서 보조 CTA로 연결">
<figcaption>탐색 흐름으로 이탈 줄이기.</figcaption>
</figure>
<figure>
<img src="https://your.cdn/cta-body-3.webp" width="1200" height="675" loading="lazy"
alt="카드·체크리스트·표 옆 CTA">
<figcaption>스캔 뒤 행동 유도.</figcaption>
</figure>
5) 체크리스트
- 라벨이 구체적 혜택 + 행동을 말하는가?
- 색 대비 4.5:1 이상, 터치 영역 44/48px 이상인가?
- 페이지에 메인 CTA는 1개, 보조 CTA는 섹션별 1개인가?
- 광고와 CTA가 겹치지 않도록 충분한 여백을 줬는가?
6) 최종 정리
전환율은 명확한 라벨·강한 대비·적절한 위치에서 결정됩니다. 위 템플릿을 기본값으로 저장해 색/카피만 바꾸며 실험하면 티스토리에서도 손쉽게 데이터 기반 UI 개선을 이어갈 수 있습니다.