정적 사이트의 OG 카드와 방문 통계
정적 사이트의 OG 공유 이미지는 배포 때 미리 그리고 방문 통계는 외부 서비스에 맡겨 별도 서버 없이 운영한다.
목차
링크를 공유했을 때 글의 제목과 이미지가 함께 보이도록 페이지마다 공유 이미지를 만들었다. 이런 미리보기에 쓰이는 정보가 Open Graph(OG)다. 방문 통계는 Umami Cloud를 연결해 수집한다. 두 기능 모두 사이트를 읽는 동안 별도의 애플리케이션 서버를 운영하지 않는 구성에 맞췄다.
배포 전에 만드는 공유 이미지
각 페이지 별 OG 이미지는 Astro가 사이트를 빌드할 때 함께 생성한다. 제목과 이미지를 SVG로 배치한 뒤 @resvg/resvg-js로 PNG로 변환하고, 각 페이지의 og:image에 그 주소를 넣는다.
썸네일을 지정한 글은 해당 이미지를 사용하고, 썸네일이 없는 노트는 제목과 주변 노트와의 연결을 담은 그래프를 간략하게 보여준다. 홈 화면의 OG 이미지는 전체 생각 지도의 그래프를 사용한다. 썸네일이 따로 없는 이 노트의 OG 이미지는 다음과 같다.
다시 그리는 범위
노트 하나를 변경했다고 모든 공유 이미지를 다시 만들 필요는 없다. 이전에 만든 PNG를 캐시에 두고, 결과가 달라지는 경우에만 새로 그린다.
캐시를 구분하는 기준은 제목이나 날짜만이 아니다. 최종 SVG와 폰트 정보, 렌더러 버전을 함께 사용한다. 제목이 같더라도 배치나 글꼴을 바꾸면 이미지가 달라지기 때문이다.
저장된 파일이 있다는 이유만으로 그대로 쓰지는 않는다. PNG가 손상되지 않았는지 확인하고, 문제가 있으면 다시 생성한다. 파일은 임시 위치에 쓴 뒤 저장을 마치면 교체해, 손상된 이미지가 캐시로 남지 않게 했다.
방문 통계는 간단히
방문 통계는 위해 별도 서버 없이 무료로 사용 가능한 Umami Cloud를 적용했다.