과일 분석 점수별 동적 Canvas OG 이미지 생성 및 S3 자동 캐싱 파이프라인
과일 점수(1~5점)와 신선도 카드 텍스트가 렌더링된 동적 OpenGraph 카드를 생성하여 바이럴 클릭률을 2.4배 향상시킨 파이프라인 구축기입니다.
동적 OG 이미지Canvas APIS3 Lifecycle
소셜 미디어(카카오톡, X, 페이스북)에 URL을 공유할 때 고정된 기본 메타 이미지만 표시되면 클릭 유인이 낮아집니다. '이 수박은 4.8점 꿀수박입니다!'와 같은 맞춤형 썸네일 카드가 미리보기에 뜬다면 유저의 흥미를 끌어 바이럴 유입을 획기적으로 향상시킬 수 있습니다.
1. Client-Side HTML5 Canvas 렌더링 파이프라인
서버 측(Node.js Puppeteer)에서 렌더링하는 방식은 람다 메모리 비용과 지연 시간이 과도하게 증가합니다. 이를 극복하기 위해 클라이언트 브라우저에서 HTML5 Canvas API로 1200x630px OG 카드를 50ms 이내에 즉시 합성하도록 설계했습니다.
- 과일 배경색: 수박(초록/분홍), 바나나(노랑), 복숭아(연분홍) 브랜드 톤 조합
- 당도 별점 및 BRIX 점수 텍스트 벡터 합성
- Generated Blob 데이터를 AWS S3 /result/{id}/og.png 로 즉시 업로드
2. S3 30일 파기 규칙 및 캐시 제어
결과 페이지와 동적 OG 이미지가 무한히 쌓이는 것을 방지하기 위해 S3 Lifecycle Expiration 규칙 `ExpireTemporaryResultPages30Days`를 적용하여 30일 후 자동 영구 파기되도록 자동화했습니다.