플러스프로젝트 배경
마케팅 에이전시가 온라인으로 신규 클라이언트를 확보하기 위한 CRO 최적화 랜딩 페이지입니다. ■ 클라이언트 현황 - 디지털 마케팅 에이전시, 직원 15명, 연 매출 12억 - 신규 클라이언트 유입의 70%가 웹사이트 경유, 그러나 전환율 2.1%로 업계 평균(3.5%) 미달 - 기존 사이트: 실적 데이터를 텍스트만으로 나열, 포트폴리오 PDF 다운로드만 가능 - CTA가 페이지 최하단에만 있어
프로젝트 성과
월 문의 47건→63건(+34%) 전환율 3.8%
스티키 CTA + 플로팅 버튼으로 전환율 2.1→3.8%(+81%). 스크롤 위치 무관 문의 가능. 모바일 문의 28→52%
실적 섹션 체류 2.4배 + 클릭률 156%↑
IO 카운트업(120억+/340%/450%) 애니메이션으로 실적 임팩트 극대화. 포트폴리오 필터 갤러리로 사례 탐색 활성화
Lighthouse 94 / 접근성 96 / SEO 100
Lazy Loading, 폰트 서브셋, Critical CSS, preconnect. FCP 0.8초, LCP 1.4초. 모바일 터치타겟 48px 준수
핵심 기능
IO 카운트업 + easeOutQuart 실적 애니메이션
requestAnimationFrame 기반 0→목표값 감속 카운트. threshold 0.5 트리거. 120억+/340%/450% 실적 시각화
진행 단계
CRO 전략 기획 + 에이전시 벤치마크
2025.01.
덴츠/제일기획/TBWA/HubSpot/Unbounce 5개 분석. CRO 5대 전략(스티키CTA/플로팅/카운트업/갤러리/후기) 확정
프로젝트 상세
디지털 마케팅 에이전시의 CRO(전환율 최적화) 중심 랜딩 페이지입니다. IO 기반 실적 카운트업 애니메이션, GSAP 스크롤 오케스트레이션, 포트폴리오 필터링 갤러리, 스티키 CTA + 플로팅 문의 버튼을 구현했습니다. ■ 기술 스택 상세 - 카운트업: IntersectionObserver + requestAnimationFrame + easeOutQuart 이징 - 애니메이션: GSAP 3.x (
