인프런 콘텐츠에 동적으로 생성되는 Open Graph(OG) 이미지 적용하기

인프런은 SNS 공유 시 콘텐츠 내용을 한눈에 파악할 수 있도록 수강평과 질문&답변 페이지에 동적 OG(Open Graph) 이미지를 도입했다. 기존에는 인프런 슬로건만 표시되어 공유된 콘텐츠의 구체적인 내용을 알기 어려웠으나, 이를 개선하여 클릭률을 높이고자 했다.

이미지 생성에는 HTML/CSS를 SVG로 변환해주는 @vercel/og 라이브러리를 사용했다. 이 라이브러리는 Edge 런타임에서 동작하며, Next.js 프로젝트의 API 라우터를 통해 콘텐츠의 제목과 내용을 포함한 이미지를 빠르게 생성한다.

매번 이미지를 새로 생성하는 비용을 줄이기 위해 **AWS CloudFront(CDN)**를 도입하여 캐싱을 적용했다. 특히 DB의 updatedAt 값을 URL에 포함하는 방식을 사용하여, 콘텐츠가 수정될 때만 새로운 이미지가 생성되도록 효율적인 캐시 무효화 전략을 구현했다.