CSR 환경에서 Dynamic OpenGraph 구현하기

이 글은 Vite + React 기반의 CSR 웹 애플리케이션에서 동적 OpenGraph 메타 태그를 구현하는 방법을 다룹니다. 기존에는 SSR 전환 없이 카카오톡 등 소셜 미디어에서 공유 카드를 보여주기 위해 React Helmet과 같은 라이브러리를 사용했지만, 이는 JavaScript를 실행하지 않는 소셜 크롤러에게는 메타 태그가 존재하지 않는 것과 같아 효과가 없었습니다.

글에서는 CloudFront Function을 활용하여 CSR 환경에서도 각 멤버십 플랜별로 다른 시각적 정보(이미지, 제목, 설명)를 담은 공유 카드를 동적으로 제공하는 해결책을 제시합니다. 이를 통해 SSR 전환 없이도 앱 외부에서 멤버십의 특징을 효과적으로 전달할 수 있게 됩니다.