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

동적 OG 이미지란?

• 인프런에서는 수강평과 질문&답변 게시글에 동적으로 생성되는 OG 이미지를 적용하기로 결정하였다.
• 다른 웹사이트들의 OG 이미지를 참고하다가 GeekNews 링크의 OG 이미지가 해결책으로 떠올랐다.

동적 OG 이미지 생성 방법

• 콘텐츠마다 동적으로 OG 이미지를 생성하는 방법은 매우 간단하다.
• 이미지를 더 빠르게 노출하기 위해, AWS CloudFront CDN 서비스를 이용하여 이미지 캐싱을 개선했다.

CDN을 이용한 이미지 캐싱

• AWS CloudFront를 이용하여 동적으로 생성되는 OG 이미지도 캐싱할 수 있다.
• CDN 캐시 키로 변동사항이 있는 경우에만 해당 컬럼을 업데이트하여 최신 콘텐츠를 제공한다.

성능 개선을 위한 작업

• Edge 런타임에서만 동작하는 라이브러리의 성능 장점을 위해 satori 라이브러리를 사용하였다.
• SVG를 PNG로 변환하는 작업을 수행할 때는 Resvg 대신 sharp 라이브러리를 사용하여 성능을 향상시켰다.