핵심 요약
인프랩은 인프런 콘텐츠의 OG 이미지를 동적으로 생성하는 엔드포인트를 도입하고, @vercel/og와 satori, sharp, CloudFront를 활용해 미리보기 품질과 응답 속도를 개선했습니다.
구현 방법
- Next.js API(Edge)에서 이미지 엔드포인트를 구현하고 SVG는 satori, PNG는 sharp로 변환
- og:image에 updateKey를 포함한 CDN 캐시 전략과 CloudFront TTL 설정을 적용
- 폰트 캐시 문제를 해결하기 위해 옵션 폰트를 상수로 선언해 addFonts 호출을 줄임
주요 결과
- 미적중 1.27초, 적중 0.10초로 약 12~13배 빠름
- 1RPS에서 35RPS로 부하 테스트에서 증가 달성
