Three.js와 Cloudflare Edge 기반 Landing Page 최적화로 전환율 3배 개선

Context

기능 개발 중심의 접근으로 인한 Landing Page 최적화 부재와 0.5%의 낮은 Conversion Rate 발생. 정적인 대시보드 스크린샷 위주의 구성으로 제품의 가치를 시각적으로 전달하는 데 한계 노출.

Technical Solution

• 글로벌 사용자 대상 sub 100ms TTFB 달성을 위한 Cloudflare Pages 및 Workers 기반 Edge-first 아키텍처 채택
• React Three Fiber의 오버헤드 제거 및 60fps 성능 확보를 위해 Raw Three.js를 사용한 3D Globe 렌더링 구현
• Tailwind 4 엔진 도입을 통한 CSS 번들 크기 약 40% 절감 및 런타임 최적화
• Cloudflare Workers를 통한 Server Sent Events(SSE) 구현 및 2초 단위 배치 처리를 통한 실시간 데이터 스트리밍 최적화
• 초기 렌더링 병목 해결을 위해 Three.js 씬의 Lazy Loading 적용으로 Initial Paint 성능 개선

Impact

• Conversion Rate: 0.5%에서 약 3배 증가
• LCP: 1.2s (목표 1.5s 미만)
• CLS: 0.02 (목표 0.05 미만)
• JS Bundle: 167kb gzipped (목표 180kb 미만)
• Frame Rate: iPhone 12 기준 58~60fps 유지

Key Takeaway

Landing Page를 단순한 문서가 아닌 단일 목적을 가진 Software로 정의하여 프로파일링과 디버깅 관점에서 접근하는 엔지니어링 마인드셋의 중요성 확인.