OG 이미지 자동 생성 — 템플릿 1장으로 브랜드 일관성 지키기

블로그 글을 공유했는데 미리보기 화면이 밋밋한 회색 기본 이미지로 뜬 적 있나요? 저도 한동안 그랬어요. 글은 열심히 썼는데 링크를 붙여 넣는 순간 아무 인상도 안 남는 카드가 나오더라고요.

그렇다고 글마다 디자인 툴을 열어서 OG 이미지를 만드는 건 오래 못 가요. 직접 해 보니 한 장에 3~5분씩 걸리는데, 시간보다 더 큰 문제는 만들 때마다 색과 글자 크기가 조금씩 달라진다는 점이었어요. 공유 화면이야말로 독자가 브랜드를 처음 만나는 자리인데, 매번 다른 얼굴을 보여 주는 셈이죠.

템플릿은 1장이면 충분해요

제 결론은 단순해요. 배경·로고 위치·글자 스타일을 고정한 템플릿 1장을 코드로 정의하고, 글 제목만 바꿔 끼우는 방식이에요.

OG 이미지의 표준 크기는 1200×630픽셀이에요. 이 캔버스에 브랜드 색 2가지, 폰트 1종, 로고 자리 하나만 정해 두면 규칙은 끝나요. 저는 Node.js의 canvas 라이브러리로 배경을 칠하고 제목 텍스트를 그린 뒤 PNG로 저장하는 스크립트를 만들었는데, 전부 합쳐도 100줄이 안 돼요.

글 발행→제목·카테고리 추출→템플릿에 그리기→1200×630 PNG 저장

빌드할 때 글 목록을 읽어서 이미지가 없는 글만 새로 생성하게 돌려 보니, 글이 늘어나도 제가 손댈 일이 없어요. 발행 파이프라인에 한 번 넣어 두면 잊고 지내도 되고요.

자동화가 지켜 주는 건 시간이 아니라 인상이에요

적용해 봤더니 시간 절약보다 더 크게 느껴진 건 일관성이었어요. 어떤 글을 공유해도 같은 톤의 카드가 나오니까, 타임라인에서 "아, 그 블로그다" 하고 알아볼 여지가 생겨요. 1인 브랜드는 로고를 노출할 지면이 많지 않아서, 공유 카드가 사실상 가장 자주 보이는 간판이 돼요.

라이프케어로그 블로그도 이 방식으로 운영하고 있어요. 플랜씨(plan-c) 금융계산기 소개 글이든 개발 기록이든, 링크 카드만 보면 같은 브랜드라는 게 드러나도록요.

주의할 점도 있어요. 제목이 길면 글자가 잘리니까, 테스트해 보면 두 줄 기준으로 접어 주는 처리와 최대 글자 수 제한이 꼭 필요해요. 한글 폰트 파일을 스크립트에서 명시적으로 등록하는 것도 잊기 쉬운 부분이고요.

• ✓크기 1200×630 고정
• ✓색 2가지와 폰트 1종
• ✓긴 제목 줄바꿈 처리
• ✓빌드 때 자동 생성

작게 시작해도 돼요

처음부터 파이프라인 전체를 만들 필요는 없어요. 템플릿 스크립트 하나 만들어서 수동으로 돌리는 것만으로도 일관성은 확보돼요. 저도 처음 만드는 데 1시간 정도 걸렸고, 그 뒤로는 거의 손대지 않았어요.

반복되는 디자인 작업이 있다면 한 번쯤 물어보세요. 이걸 규칙으로 정리하면 코드가 대신해 줄 수 있지 않을까 하고요. 작은 도구 하나가 브랜드의 얼굴을 꾸준히 지켜 줍니다.