AstroPaper 블로그 포스트의 동적 OG 이미지 생성

AstroPaper v1.4.0의 새로운 기능으로, 블로그 포스트를 위한 동적 OG 이미지 생성을 소개합니다.

소개

OG 이미지(소셜 이미지라고도 함)는 소셜 미디어 참여에 중요한 역할을 합니다. OG 이미지가 무엇인지 모르시는 분들을 위해 설명하자면, Facebook, Discord 등의 소셜 미디어에 웹사이트 URL을 공유할 때 표시되는 이미지입니다.

Twitter에 사용되는 소셜 이미지는 엄밀히 말하면 OG 이미지라고 부르지 않습니다. 하지만 이 글에서는 모든 유형의 소셜 이미지를 OG 이미지라는 용어로 통칭하겠습니다.

기본/정적 OG 이미지 (기존 방식)

AstroPaper는 이미 블로그 포스트에 OG 이미지를 추가하는 방법을 제공하고 있었습니다. 작성자는 frontmatter의 ogImage에 OG 이미지를 지정할 수 있습니다. 작성자가 frontmatter에 OG 이미지를 정의하지 않더라도 기본 OG 이미지가 대체 이미지로 사용됩니다(이 경우 public/astropaper-og.jpg). 하지만 문제는 기본 OG 이미지가 정적이기 때문에, frontmatter에 OG 이미지를 포함하지 않은 모든 블로그 포스트가 각 포스트의 제목/내용이 다름에도 불구하고 항상 동일한 기본 OG 이미지를 사용한다는 것입니다.

동적 OG 이미지

각 포스트에 대해 동적 OG 이미지를 생성하면 작성자가 모든 블로그 포스트마다 OG 이미지를 일일이 지정할 필요가 없습니다. 게다가, 대체 OG 이미지가 모든 블로그 포스트에서 동일하게 표시되는 것을 방지할 수 있습니다.

AstroPaper v1.4.0에서는 동적 OG 이미지 생성을 위해 Vercel의 Satori 패키지를 사용합니다.

동적 OG 이미지는 다음 조건을 만족하는 블로그 포스트에 대해 빌드 시점에 생성됩니다:

frontmatter에 OG 이미지가 포함되지 않은 경우
초안(draft)으로 표시되지 않은 경우

AstroPaper 동적 OG 이미지의 구성 요소

AstroPaper의 동적 OG 이미지에는 블로그 포스트 제목, 작성자 이름, 사이트 제목이 포함됩니다. 작성자 이름과 사이트 제목은 “src/config.ts” 파일의 SITE.author와 SITE.title에서 가져옵니다. 제목은 블로그 포스트 frontmatter의 title에서 생성됩니다. 동적 OG 이미지 예시 링크

비라틴 문자 관련 이슈

비라틴 문자가 포함된 제목은 기본 설정으로는 제대로 표시되지 않습니다. 이 문제를 해결하려면 loadGoogleFont.ts 내부의 fontsConfig를 원하는 폰트로 교체해야 합니다.

async function loadGoogleFonts(
  text: string
): Promise<
  Array<{ name: string; data: ArrayBuffer; weight: number; style: string }>
> {
  const fontsConfig = [
    {
      name: "Noto Sans JP",
      font: "Noto+Sans+JP",
      weight: 400,
      style: "normal",
    },
    {
      name: "Noto Sans JP",
      font: "Noto+Sans+JP:wght@700",
      weight: 700,
      style: "normal",
    },
    { name: "Noto Sans", font: "Noto+Sans", weight: 400, style: "normal" },
    {
      name: "Noto Sans",
      font: "Noto+Sans:wght@700",
      weight: 700,
      style: "normal",
    },
  ];
  // ...
}src/utils/loadGoogleFont.ts

자세한 내용은 이 PR을 참고하세요.

트레이드오프

이 기능은 유용하지만, 트레이드오프가 있습니다. 각 OG 이미지를 생성하는 데 약 1초가 소요됩니다. 처음에는 눈에 띄지 않을 수 있지만, 블로그 포스트 수가 늘어나면 이 기능을 비활성화하고 싶을 수 있습니다. 모든 OG 이미지 생성에 시간이 걸리므로, 이미지가 많아지면 빌드 시간이 선형적으로 증가합니다.

예를 들어: 하나의 OG 이미지 생성에 1초가 걸린다면, 60개의 이미지는 약 1분, 600개의 이미지는 약 10분이 소요됩니다. 콘텐츠가 늘어남에 따라 빌드 시간에 상당한 영향을 미칠 수 있습니다.

제한 사항

이 글을 작성하는 시점에서, Satori는 비교적 새로운 도구이며 아직 메이저 릴리스에 도달하지 않았습니다. 따라서 이 동적 OG 이미지 기능에는 여전히 몇 가지 제한 사항이 있습니다.

RTL(오른쪽에서 왼쪽) 언어는 아직 지원되지 않습니다.
제목에 이모지를 사용하는 것은 다소 까다로울 수 있습니다.