깨진 블로그 미리보기를 해결한 방법
X에 우리 블로그 링크를 게시했습니다. 그런데 미리보기 이미지가 이상했습니다. 기술 아티클 이미지 대신 영업용 배너가 나타났습니다.
최근 게시물 7개를 확인해 보았습니다. 모두 똑같은 영업용 배너였습니다. 우리의 엔지니어링 딥다이브 글들이 광고처럼 보였습니다. 이는 우리의 신뢰도를 떨어뜨렸습니다.
문제는 간단했습니다. 코드에 폴백(fallback) 규칙이 있었습니다. 게시물에 대표 이미지가 없으면 기본 영업용 배너를 사용하도록 되어 있었습니다. 42개의 게시물에 대표 이미지를 설정하지 않았기 때문에, 모든 게시물에 동일한 이미지가 사용되었습니다.
우리에게는 두 가지 선택지가 있었습니다:
- 옵션 A: 42개의 이미지를 수동으로 제작합니다. 이는 시간이 많이 걸리고, 새로운 게시물을 올릴 때마다 추가 작업이 발생합니다.
- 옵션 B: 동적 이미지 생성기를 구축합니다. 이를 통해 모든 게시물에 맞는 맞춤형 이미지를 자동으로 생성합니다.
우리는 옵션 B를 선택했습니다. PHP GD를 사용하여 작은 엔진을 구축했습니다.
작동 방식은 다음과 같습니다:
- 엔진이 요청 시 1200x630 PNG 이미지를 생성합니다.
- 어두운 배경과 게시물 제목을 사용합니다.
- 데이터베이스에서 제목을 가져옵니다.
- 첫 렌더링 후 이미지를 디스크에 저장합니다.
- 이후의 모든 요청은 캐시된 파일을 제공합니다. 덕분에 매우 빠릅니다.
이 구축 과정에서 두 가지 구체적인 문제를 해결했습니다:
언어 지원: Inter와 같은 라틴 폰트만 사용했더니 일본어 텍스트가 빈 박스로 표시되었습니다. 일본어 제목의 경우 Noto Sans JP로 교체하도록 체크 로직을 추가했습니다.
시각적 톤: Vercel이나 PlanetScale 같은 전문 기술 블로그는 깔끔하고 어두운 카드 스타일을 사용합니다. 우리는 독자들의 신뢰를 얻기 위해 이 스타일을 맞췄습니다.
여러분에게 주는 핵심 교훈:
- 소셜 미디어 미리보기를 점검하세요. 도구를 사용하여 og:image 태그가 제대로 작동하는지 확인하십시오.
- 모든 게시물에 수동으로 이미지를 작업하는 것을 피하세요. 확장성이 떨어집니다.
- 단순한 스택을 사용하세요. PHP GD와 디스크 캐시 조합은 가볍고 효과적입니다.
- 다국어를 고려하세요. 항상 전체 문자 세트를 지원하는 폰트를 포함해야 합니다.
블로그 이미지는 브랜드를 나타냅니다. 기본 폴백 설정이 여러분의 첫인상을 망치게 두지 마세요.