OG 이미지 생성기 — 소셜 공유 이미지 메이커

Open Graph 이미지는 링크를 채팅, 트윗, 슬랙 채널에 붙여넣을 때 나타나는 그림이며, 이를 렌더링하는 모든 플랫폼은 약 1200×630 픽셀의 캔버스를 요구합니다. 이 크기는 Facebook의 og:image와 Twitter의 summary_large_image 카드 둘 다에 기반해 설계되었습니다. 크기가 잘못되면 이미지가 잘리거나, 흐려지거나, 찌그러집니다. 레이아웃이 잘못되면 복잡한 사진 위에 제목이 읽기 힘들 정도로 얇게 나타납니다. 이 도구는 Canvas 2D API를 사용해 실제 대상 해상도로 이미지를 구성하므로, 미리보기에서 보는 것이 PNG로 배송되는 정확한 픽셀 그리드입니다.

배경을 선택하세요. 단일 색상, 선택한 두 가지 색상으로 만든 2중 선형 그라데이션, 또는 업로드한 사진을 CSS background-size: cover와 같은 방식으로 전체 1200×630 프레임을 채우도록 자르되 비율이 깨지지 않게 채우는 방식입니다. 제목과 선택적 부제목을 입력하세요. 둘 다 캔버스의 자체 폰트 메트릭에 대해 문자 단위로 측정되므로, 한 줄에 들어가기에 너무 긴 헤드라인은 가장자리를 넘치거나 보이지 않게 잘리는 대신 실제 단어 경계에서 두 번째 또는 세 번째 줄로 넘어갑니다. 중앙 또는 왼쪽 정렬을 선택하고, 배경에서 잘 읽히는 텍스트 색상을 고르고, 고정된 읽기 쉬운 크기로 코너에 선택적 로고를 배치하세요.

캔버스 아래의 작은 네 장의 카드는 완성된 이미지가 실제 플랫폼 크롬에 감싸일 때 어떻게 보일지 대략적으로 보여줍니다. Twitter/X 카드는 도메인과 이미지 아래 굵은 제목만 표시하며 설명 줄은 없습니다. Facebook은 대문자 도메인 스트립을 제목 및 설명 블록 위에 추가합니다. LinkedIn은 도메인을 제목 아래에 배치하며 설명은 전혀 없습니다. Discord 임베드는 자체 다크 테마에서 도메인, 제목, 설명을 이미지 위에 배치합니다. 이것들은 기획 목적의 스타일 근사치일 뿐이며, 직접 입력한 도메인 줄과 함께 명확하게 예시로 라벨링되어 있습니다. 실제 플랫폼의 라이브 페치나 스크린샷이 아니며, 링크를 공유하여 각 플랫폼의 크롤러가 페이지의 실제 og:image 및 og:title 메타 태그를 읽게 하는 것이 실제 카드를 생성하는 방식입니다.

모든 것은 브라우저의 HTML canvas 요소에서 로컬로 렌더링됩니다. 제목, 부제목, 업로드된 배경과 로고는 기기를 떠나지 않으며, 익스포트된 파일은 canvas.toBlob()으로 생성된 깨끗한 PNG로, 구성한 요소만을 포함합니다. 목업 경계선, 가짜 브라우저 바, 플랫폼 로고는 다운로드 이미지에 절대 포함되지 않습니다. 익스포트 후 PNG의 크기를 조정하거나 변환해야 한다면, 이 사이트의 이미지 크기 조정 및 이미지 변환 도구가 바로 이어서 사용될 수 있습니다.