Client-side Rendering 기반 제로 인프라 설계로 트래픽 폭증 대응 및 30초 내 사용자 경험 완결

Context

문화적 밈 확산 시 발생하는 예측 불가능한 트래픽 스파이크와 사용자 이탈 방지를 위한 극단적 최적화 필요성 대두. 기존 서버 기반 렌더링 방식의 비용 증가 및 레이턴시 발생 가능성을 제거해야 하는 제약 상황 분석.

Technical Solution

• Backend, Database, Auth Layer를 완전히 제거한 Single HTML 파일 구조의 Static Architecture 설계
• HTML Canvas API 및 canvas.toDataURL()을 활용한 Client-side Image Generation 로직 구현으로 서버 부하 제로화
• CSS Blur Filter와 특정 폰트 설정을 통한 디자인 제약 사항의 코드화로 50라인 내외의 JavaScript 기반 복제 가능 구조 구축
• CDN 기반의 정적 파일 배포를 통해 Reddit 등의 커뮤니티 유입으로 인한 'Hug of Death' 상황을 원천 차단하는 인프라 전략 채택
• 회원가입 및 인증 절차를 삭제하여 사용자 진입부터 결과물 생성까지의 Time-to-Value를 30초 미만으로 단축