liminfoOG Image Maker
SNS 공유용 OG 이미지 생성기
미리보기 (1200 x 630)
OG Image Maker 소개
OG 이미지 메이커는 Facebook, Twitter, LinkedIn에서 요구하는 표준 1200 x 630 픽셀 크기의 Open Graph 이미지를 생성하는 브라우저 기반 도구입니다. 제목과 선택적 부제목을 입력하고, 8가지 프리셋 색상 또는 커스텀 헥스 색상 중에서 배경색을 선택하고, 흰색이나 검정 텍스트(또는 커스텀 색상)를 고르면 캔버스가 실시간으로 업데이트됩니다. 디자인이 만족스러우면 PNG 다운로드를 클릭해 서버 업로드 없이 브라우저 캔버스에서 직접 이미지를 저장합니다.
콘텐츠 창작자, 블로거, 개발자들은 이 도구를 사용해 기사, 블로그 포스트, 문서 페이지, 소셜 공지용 og:image 에셋을 빠르게 만듭니다. 적절한 og:image는 공유 링크의 시각적 임팩트를 크게 높입니다. 이미지가 없으면 썸네일 없는 평범한 텍스트 링크로만 표시되는 반면, 고품질 이미지 카드는 클릭률을 크게 향상시킬 수 있습니다. 표준 1200 x 630 크기는 Facebook, Twitter summary_large_image 카드, LinkedIn 포스트에서 이미지가 올바르게 렌더링되도록 보장합니다.
기술적으로 이 도구는 HTML5 Canvas API를 사용하여 이미지를 브라우저에서 완전히 렌더링합니다. 제목 텍스트는 굵은 56px 산세리프 폰트로 그려지며, 텍스트가 1000픽셀 너비를 초과하면 자동 줄 바꿈이 적용되어 긴 제목도 여러 줄로 깔끔하게 처리됩니다. 부제목은 시각적 계층 구조를 위해 80% 불투명도의 28px 폰트로 아래에 렌더링됩니다. 캔버스 요소는 고정된 1200:630 비율로 반응형 너비에 표시되며, 최종 PNG는 서버 상호작용 없이 canvas.toBlob()으로 생성됩니다.
주요 기능
- 모든 주요 소셜 플랫폼을 위한 표준 1200 x 630 픽셀 Open Graph 크기 이미지 생성
- 제목, 부제목 입력 또는 색상 변경 시 즉시 업데이트되는 실시간 캔버스 미리보기
- 8가지 배경색 프리셋(검정, 흰색, 파랑, 초록, 빨강, 보라, 주황, 남색)과 커스텀 컬러 피커
- 흰색 및 검정 텍스트 색상 옵션과 완전한 창의적 제어를 위한 커스텀 컬러 피커
- 캔버스 너비 초과 시 자동 제목 텍스트 줄 바꿈 — 수동 줄 바꿈 불필요
- 깔끔한 시각적 계층 구조를 위한 80% 불투명도의 제목 아래 부제목 렌더링
- canvas.toBlob() 통한 원클릭 PNG 다운로드 — 서버 업로드 없음, 계정 불필요
- 다크 모드 지원 및 모든 화면 너비에 맞게 조정되는 완전 반응형 캔버스 미리보기
자주 묻는 질문
og:image의 표준 크기가 왜 1200 x 630 픽셀인가요?
1200 x 630 픽셀(약 1.91:1 비율)은 Facebook의 Open Graph 명세에서 권장하는 크기이며 Twitter의 summary_large_image 카드에 최적화된 크기입니다. 레티나 디스플레이에서 선명하게 보일 만큼 크면서도 Facebook, Twitter, LinkedIn, Slack, iMessage, WhatsApp 링크 미리보기 전반에서 가장 널리 지원되는 크기입니다.
이 OG 이미지를 내 웹사이트에 어떻게 사용하나요?
PNG를 다운로드하고 웹 서버 또는 CDN(Cloudflare R2, AWS S3, Vercel의 public 폴더 등)에 업로드한 다음, 페이지의 <meta property="og:image" content="https://yourdomain.com/og-image.png" /> 태그에 공개 URL을 참조하세요. URL이 완전히 정규화되어 있고(https://로 시작) 인증 없이 공개적으로 접근 가능해야 합니다.
이 도구가 커스텀 폰트를 지원하나요?
현재 도구는 최대 호환성과 렌더링 속도를 위해 브라우저의 기본 시스템 산세리프 폰트를 사용합니다. 운영체제에 따라 Inter, Helvetica, 또는 Arial로 렌더링됩니다. 커스텀 브랜드 폰트가 필요한 경우 Puppeteer나 Vercel의 @vercel/og 라이브러리를 사용하는 서버 사이드 접근 방식이 필요합니다.
여러 페이지용 OG 이미지를 생성할 수 있나요?
네. 다운로드 사이에 제목과 부제목 텍스트를 변경하기만 하면 됩니다. PNG 다운로드를 클릭할 때마다 현재 캔버스 상태가 저장됩니다. 한 세션에서 생성할 수 있는 이미지 수에 제한이 없습니다.
og:image와 Twitter Card 이미지의 차이는 무엇인가요?
og:image 태그는 Facebook, LinkedIn 및 다른 많은 Open Graph 지원 플랫폼에서 사용됩니다. Twitter는 카드 미리보기에 twitter:image를 사용하지만, twitter:image가 설정되지 않은 경우 og:image로 대체합니다. 실제로 og:image를 설정하면 대부분의 소셜 플랫폼을 커버하며, Twitter에만 다른 이미지를 사용하려는 경우에만 twitter:image가 필요합니다.
제목 텍스트가 잘리는데 어떻게 해야 하나요?
도구는 1000픽셀 너비를 초과하는 텍스트를 자동으로 줄 바꿈하므로 긴 제목도 잘리는 대신 여러 줄로 표시됩니다. 전체 텍스트 블록이 캔버스보다 높아지면 제목을 최대 2-3줄로 줄이는 것을 고려하세요. 모든 플랫폼에서 최상의 가독성을 위한 og:title은 보통 40-70자입니다.
로고나 커스텀 이미지를 OG 이미지에 추가할 수 있나요?
이 도구는 간단함과 속도를 위해 단색 배경의 텍스트 기반 OG 이미지에 집중합니다. 로고, 사진, 복잡한 레이아웃이 포함된 OG 이미지는 Canva, Figma를 사용하거나 — 개발자의 경우 — JSX와 커스텀 폰트로 서버 사이드에서 OG 이미지를 생성할 수 있는 @vercel/og 라이브러리를 사용하세요.
도구가 어떤 파일 형식으로 다운로드하나요?
도구는 "og-image.png"라는 이름의 PNG 파일로 다운로드합니다. PNG는 무손실이고 완전한 투명도를 지원하여 OG 이미지에 적합합니다. JPEG는 파일 크기가 더 작지만, PNG는 품질 저하가 없어 텍스트가 많은 이미지에서 압축 아티팩트로 텍스트가 읽기 어려워지는 문제를 방지합니다.