[트러블슈팅기] CSR에서 동적 OG 메타태그 적용하기

이 글은 Client Side Rendering(CSR) 환경에서 동적으로 OpenGraph(OG) 메타태그를 적용하는 과정에서 겪었던 트러블슈팅 경험을 공유합니다. 특히 AWS CloudFront와 S3를 사용하는 인프라 환경에서 발생한 문제를 다룹니다.

CSR 환경에서는 기본적으로 정적인 HTML 파일이 사용자에게 전달되기 때문에, 공유 시 동적으로 변경되어야 하는 OG 메타태그를 적용하기 어렵다는 문제점을 제시합니다. 글에서는 이러한 제약 속에서도 Vite 기반의 CSR 웹 애플리케이션 환경에서 OG 메타태그를 동적으로 적용할 수 있는 방법을 모색하고 해결해나가는 과정을 상세히 설명합니다.