브랜드 리뉴얼 후 OG 이미지 교체와 캐시 무효화

OG 이미지를 교체했다. 파일 하나짜리 작업이지만, 사실 이게 "그냥 이미지 바꾸기"로 끝나는 작업은 아니다.

왜 OG 이미지가 중요한가

og:image는 링크가 공유될 때 SNS나 메신저에서 미리보기로 뜨는 이미지다. 카카오톡에서 링크 공유하면 나오는 썸네일, 트위터/X에서 카드 형태로 펼쳐지는 그것. 서비스 입장에서는 사실상 첫인상이자 광고판이다. 사용자가 링크를 클릭하기 전에 보는 유일한 시각적 단서이기 때문에, 브랜드 아이덴티티가 무너진 이미지가 달려 있으면 클릭률에 직접 영향을 준다.

그동안 public/og.png에 박혀 있던 기존 이미지는 브랜드 리뉴얼 이전 디자인이었다. 새 로고, 새 색상 팔레트, 새 폰트 시스템으로 프로덕트 전반이 갱신됐는데 OG 이미지만 구버전으로 남아 있는 상황이었음. 공유할 때마다 리뉴얼 전 얼굴이 나오는 셈이라 이건 빨리 처리해야 하는 작업이었다.

1200×630 사이즈 선택 이유

1200×630은 현재 사실상의 표준 사이즈다. 2:1에 가까운 비율(1.91:1)로, 대부분의 플랫폼 미리보기에서 크롭 없이 노출된다. 예전에는 1200×627 같은 애매한 사이즈를 쓰는 곳도 있었는데, 지금은 630이 거의 고정값으로 자리 잡았음. 디자이너에게 사이즈 스펙을 전달할 때 이 수치를 명확히 잡아줘야 나중에 "왜 잘리냐"는 문의가 안 생긴다.

교체 후 확인해야 할 것들

이미지 파일 하나 올리고 끝이 아니다. OG 메타태그 관련 작업은 캐시 무효화가 항상 따라붙는다.

<!-- head에 이런 태그가 있는지 확인 -->
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

위 태그에서 content URL이 같은 경로(/og.png)를 유지한다면, 파일을 교체해도 SNS 플랫폼들이 캐시한 기존 이미지를 계속 보여줄 수 있다. 특히 페이스북/인스타그램 계열은 Sharing Debugger로 강제 크롤링을 트리거해야 새 이미지가 반영된다. 카카오톡은 자체 캐시 주기가 있어서 바로 바뀌지 않는 경우도 있음.

URL에 쿼리스트링이나 버전 파라미터를 붙이는 방식으로 캐시 버스팅을 처리하는 팀도 있다.

<meta property="og:image" content="https://example.com/og.png?v=2" />

다만 이건 배포 파이프라인이나 빌드 시스템에서 자동화하지 않으면 매번 수동으로 올려야 하니 팀 상황에 맞게 판단해야 한다.

작은 파일, 큰 맥락

public/og.png 하나 바뀐 커밋이지만, 이런 작업이 제때 처리되지 않으면 브랜드 일관성 측면에서 조용히 부채가 쌓인다. 리뉴얼 직후에 체크리스트로 남겨뒀다가 잊히는 경우가 많은데, 이번엔 브랜드 리뉴얼 마무리 스프린트에서 챙겨서 다행이었음. 앞으로 디자인 시스템이나 브랜드 에셋이 바뀔 때는 OG/소셜 관련 에셋 업데이트를 체크리스트 항목으로 명시적으로 들어가도록 팀 내 프로세스에 박아두는 게 맞겠다 싶었다.

끝.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.