OG 이미지 생성

Social Card Generator

제목·부제·브랜드 문구와 로고(선택)를 템플릿에 얹어 1200×630 공유 이미지를 만들고 함께 넣을 메타 태그를 써 줍니다.

제목·부제·브랜드 문구와 선택적인 로고로 1200 × 630 공유 카드를 만들고, 함께 붙여넣을 메타 태그도 내보냅니다. 글자는 기기의 한글 글꼴로 캔버스에 직접 그리고, 한글은 음절 단위로 영문은 단어 단위로 줄을 바꾸며, 제목이 길면 넘치는 대신 스스로 작아집니다.

🔒 브라우저 안에서만 처리og-imagesocialtemplategenerator

미리보기 (1200 × 630)

내용

브랜드

하단 문구

로고 이미지 놓기 (선택)

정사각형 PNG나 SVG가 가장 잘 맞습니다. 없으면 강조 색 사각형이 들어갑니다.

모양

템플릿

배경 색강조 색

밝은 글자 (어두운 배경용)

제목 크기: 64px네 줄을 넘기면 자동으로 줄입니다.

페이지에 넣을 메타 태그

<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:title" content="브라우저에서 바로 쓰는 유틸리티 모음" />
<meta name="twitter:card" content="summary_large_image" />

왜 1200 × 630인지, 그리고 글꼴

Open Graph·X(summary_large_image)·카카오톡·슬랙이 모두 1.91:1 근처로 자르므로 이 크기가 가장 덜 잘립니다. 글자는 기기의 한글 글꼴(Pretendard가 있으면 그것, 없으면 Apple SD Gothic Neo·맑은 고딕·Noto Sans KR)로 캔버스에 직접 그리고, 한글은 음절 단위로 줄을 바꿉니다. 그래서 같은 설정이라도 기기마다 글꼴이 조금 다를 수 있습니다. 2×로 내보내면 2400 × 1260이 되어 고해상도 화면에서도 선명합니다.

내보낸 카드가 실제로 어떻게 펼쳐지는지는 OG 미리보기에서, 배경 무늬는 배경 패턴 생성에서 만듭니다.

사용 방법

읽힐 문장 그대로 제목을 씁니다
공유 카드는 피드에서 썸네일 크기로 읽힙니다. 그러니 완전한 문장을 작게 넣는 것보다 짧은 제목을 크게 넣는 편이 낫습니다. 미리보기 아래 줄에 몇 줄이 되었는지, 맞추느라 크기를 줄였는지 나옵니다.
브랜드 문구와 하단 문구를 넣습니다
이 둘은 다음에 와도 남아 있습니다. 카드를 여러 장 만들어도 계속 같은 부분이기 때문입니다. 제목과 부제는 남지 않습니다.
템플릿과 두 색을 고릅니다
그라디언트·단색·반 나눔·테두리 중에서 고르면 됩니다. 배경 색과 강조 색이 대부분을 결정합니다. 밝은 글자 토글이 따로 있는 이유는, 중간 밝기 배경에서는 어느 쪽도 가능하고 그 판단은 임곗값이 아니라 눈이 해야 하기 때문입니다.
정사각형 로고가 있으면 넣습니다
정사각형 PNG나 SVG가 가장 잘 맞습니다. 없으면 강조 색 사각형이 대신 들어가는데, 썸네일 크기에서는 그것으로 충분한 경우가 많습니다.
PNG를 내보내고 메타 태그를 복사합니다
태그에는 URL뿐 아니라 가로·세로 크기도 들어갑니다. 크롤러가 이미지를 받기 전에 카드를 배치할 수 있게 해 주는 값입니다. 예시 URL은 파일을 실제로 올린 주소로 바꾸세요.

자주 묻는 질문

왜 1200 × 630인가요?

Open Graph와 X의 summary_large_image, 카카오톡, 슬랙이 모두 1.91:1 근처로 자르는데, 이 크기가 그 모두에서 가장 덜 잘립니다. 더 크게 만들어도 소용없고 — 받는 쪽이 어차피 줄입니다 — 더 작으면 레티나 화면에서 흐려집니다.

동료 컴퓨터에서는 카드가 조금 다르게 보입니다

글자를 그 기기에 있는 한글 글꼴로 그리기 때문입니다. Pretendard가 있으면 그것, 없으면 Apple SD Gothic Neo나 맑은 고딕, Noto Sans KR입니다. 그래서 같은 설정이라도 기기마다 글자 모양과 줄바꿈이 조금 달라집니다. 내려받은 PNG는 그 시점에 고정되고, 달라지는 것은 미리보기뿐입니다.