메시지, 트윗, 링크드인 게시물, 슬랙 채널에 링크를 붙여넣으면 플랫폼은 미리보기 카드를 불러온다. 큰 이미지, 제목, 짧은 발췌문. 그 이미지가 바로 Open Graph(OG) 이미지이고, 헤드라인보다 더 많은 일을 하고 있다. 빠르게 스크롤되는 피드에서 엄지를 멈추게 하는 것은 바로 그림이다. 비어 있거나 깨진 미리보기는 성의 없어 보이고 그냥 넘어가게 된다.
여기서는 클릭을 이끌어내는 OG 이미지를, 올바른 크기로, 실제로 읽히는 텍스트와 함께 만드는 법을 소개한다.
크기: 1200×630
표준 OG 이미지는 1200×630 픽셀, 1.91:1 비율이다. Facebook, LinkedIn, Slack, Discord를 비롯한 대부분의 링크 미리보기 시스템이 이 크기를 기준으로 만들어졌다. 이 하나만 제대로 맞추면 거의 어디서나 통한다.
링크가 어디에 도달하느냐에 따라 몇 가지 관련 크기가 등장한다:
| 플랫폼 / 용도 | 크기 | 비율 |
|---|---|---|
| Open Graph (기본) | 1200×630 | 1.91:1 |
| Twitter/X 대형 카드 | 1200×628 | 약 1.91:1 |
| YouTube 썸네일 | 1280×720 | 16:9 |
| 정사각형 (피드/IG) | 1080×1080 | 1:1 |
| 스토리 / 세로형 | 1080×1920 | 9:16 |
블로그 글 하나에 이 모든 크기가 필요한 건 아니다. 1200×630이 주력이다. 다만 동영상 썸네일이나 정사각형 소셜 게시물도 만든다면, 이미지 하나를 억지로 잘라 맞추기보다 올바른 비율로 새로 생성하는 편이 낫다.
텍스트 규칙: 썸네일 크기에서도 읽혀야 한다
OG 이미지를 망치는 실수는 전체 화면으로 볼 포스터처럼 다루는 것이다. 그렇게 보지 않는다. 대부분의 사람은 실제 크기의 3분의 1 정도로, 스크롤 중인 휴대폰에서 카드를 본다. 그 상황에 맞춰 디자인하라.
- 큰 글씨, 적은 단어. 카드가 축소돼도 읽히는 짧은 제목(다섯에서 여덟 단어)을 쓴다. 전체 크기에서 눈을 찡그려야 한다면 피드에서는 읽을 수 없다.
- 강한 대비. 어둡거나 채도 높은 배경 위의 밝은 텍스트, 혹은 그 반대. 받침 없이 복잡한 사진 위에 얹은 텍스트는 사라진다.
- 중요한 것은 가운데에. 플랫폼마다 가장자리를 조금씩 다르게 자른다. 텍스트와 로고를 바깥 여백에서 떨어뜨려 잘리지 않게 한다.
- 이미지 하나에 하나의 메시지. OG 이미지는 요약이 아니라 미끼다. 제목, 필요하면 부제, 그걸로 끝.
텍스트를 돋보이게 하는 배경
단색 그라데이션이 믿을 만한 선택이다. 텍스트가 얹힐 깔끔한 바탕을 주고, 현대적으로 보이며, 복잡한 사진처럼 글자와 다투지 않는다. 어두운 색에서 조금 더 어두운 색으로 이어지는 그라데이션에 밝은 텍스트를 얹으면 거의 실패가 없다.
OG 이미지 도구는 바로 이 방식을 중심으로 만들어졌다. 크기 프리셋(OG 1200×630, Twitter, YouTube, 정사각형, 스토리)을 고르고, 그라데이션 배경을 선택한 뒤 제목과 부제를 넣으면 된다. 전문 디자인 앱을 열지 않고도 어떤 크기에서든 또렷하게 읽히는 공유 카드가 나온다.
미리보기가 뜨게 하는 HTML
이미지를 만드는 건 절반의 일이다. 플랫폼이 그 이미지를 어디서 찾을지 알아야 한다. 페이지의 <head>에 다음 태그를 추가한다:
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Your title">
<meta property="og:description" content="One clear sentence.">
<meta name="twitter:card" content="summary_large_image">
twitter:card을 summary_large_image로 설정한 줄이 X에서 작은 썸네일 대신 큰 카드를 띄워준다. 절대 URL(https:// 포함)이 중요하다. 상대 경로는 스크레이퍼가 페이지를 가져올 때 종종 해석에 실패한다.
배포한 뒤에는 테스트하라. URL을 플랫폼의 링크 미리보기 디버거(Facebook의 Sharing Debugger, LinkedIn의 Post Inspector)에 붙여넣어 이미지가 로드되는지 확인하고, 캐시된 옛 버전을 지운다. 플랫폼은 미리보기를 공격적으로 캐시하므로, 이미지를 업데이트했는데 여전히 예전 것이 보인다면 디버거의 다시 스크랩 버튼이 해결책이다.
업로드하지 말고, 직접 만들자
전 과정이 브라우저에서 돌아간다. 이미지는 Canvas로 로컬에서 합성되며 서버로 업로드되지 않는다. 무료에, 가입 없이, 공유 카드를 가로지르는 워터마크도 없이, 첫 방문 이후에는 오프라인에서도 작동한다. 1200×630을 생성하고, 메타 태그를 연결하고, 디버거로 한 번 돌려보라. 그러면 링크가 제 몫을 하기 시작한다.