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

문제 상황

• SNS 공유 시 인프런 사용자 콘텐츠의 성격을 알기 어려운 정적 링크 미리보기 이미지
• 수강평 상세 페이지 유입에서 높은 비중을 차지하는 SNS referrer

해결 방법

• @vercel/og로 콘텐츠별 제목·내용을 담은 동적 OG 이미지 생성 API 구성
• og:image에 생성 API URL을 연결하고 twitter:card를 summary_large_image로 설정
• 수정 시각 updatedAt을 쿼리 문자열 캐시 키로 활용한 CloudFront 이미지 캐싱

성능/운영 포인트

• CDN 캐시 적중 시 응답 시간을 약 1.27초에서 약 0.10초로 단축
• 자체 호스팅 환경의 Edge 런타임 제약과 모니터링 어려움으로 satori 직접 사용 전환
• SVG-PNG 변환기를 resvg-js에서 sharp로 교체해 0.4RPS에서 13RPS로 개선

주의할 점

• Slack 미리보기 정상 출력을 위한 og:image URL 인코딩
• satori 폰트 옵션 객체의 참조값 고정으로 내부 폰트 캐시 재사용
• 부하 테스트와 Node.js CPU 프로파일링 기반 병목 구간 확인