앱 웹사이트를 위한 Open Graph 이미지

업데이트: 2026년 10월 30일

Open Graph 이미지는 누군가 X, LinkedIn, Facebook, Slack, iMessage 등 대부분의 앱에서 웹사이트 링크를 공유할 때 보이는 그림입니다. 1200 × 630픽셀(1.91:1)로 만들고, og:image 태그로 지정하고, X에서 크게 보이도록 twitter:card를 summary_large_image로 설정하고, 텍스트는 가장자리에서 떨어뜨리고, 링크를 공유하기 전에 테스트하세요.

Open Graph 이미지란

Open Graph는 Facebook이 시작한 메타 태그 모음으로, 다른 앱에 페이지 링크를 어떻게 보여 줄지 알려 줍니다. 제목, 설명, URL, 이미지 등입니다. 게시물이나 채팅에 링크를 붙여넣으면 앱이 페이지를 가져와 이 태그를 읽고 미리보기 카드를 만듭니다.

이미지 태그가 없으면 앱이 추측합니다. 로고를 고를 수도 있고, 페이지의 아무 이미지나 고를 수도 있고, 아무것도 보여 주지 않을 수도 있습니다. 앱 웹사이트라면 이 카드가 사람들이 제품을 처음 보는 곳인 경우가 많으니, 직접 정해 둘 만합니다.

크기: 1200 × 630

Open Graph 프로토콜 자체는 픽셀 크기를 정하지 않습니다. 실제로는 1.91:1 비율의 1200 × 630이 거의 모든 플랫폼에서 전체 너비 카드로 보이고, LinkedIn의 1200 × 627도 충분히 가까워서 같은 이미지를 쓸 수 있습니다. 이 크기를 쓰고, 앱이 가져갈 때 빨리 불러오도록 몇 MB 이하의 JPEG나 PNG로 내보내세요.

안전 영역을 지키세요

앱마다 이미지를 조금씩 다르게 자르고, 일부는 썸네일처럼 작게 보여 줍니다. 어디서든 읽히게 하려면:

텍스트와 기기를 모든 가장자리에서 최소 60~80픽셀 떨어뜨리세요.
중요한 부분은 가운데 3분의 2 안에 두세요.
큰 글자를 쓰세요. 헤드라인은 다섯 단어 이하, 높이는 최소 60픽셀로.
페이지 제목을 이미지에 반복하지 마세요. 어차피 카드가 이미지 아래에 제목을 보여 줍니다.

추가할 태그

각 페이지의 <head>에 다음을 넣으세요. Open Graph 프로토콜은 og:title, og:type, og:image, og:url을 필수로 정하고, 이미지를 지정할 때는 og:image:alt도 요구합니다.

태그	예시 값
`og:title`	YourApp – 습관을 기록하세요
`og:description`	앱이 하는 일을 한 문장으로.
`og:type`	website
`og:url`	https://yourapp.com/
`og:image`	https://yourapp.com/og.jpg (상대 경로가 아닌 전체 URL)
`og:image:width` / `og:image:height`	1200 / 630
`og:image:alt`	파란 배경 위, iPhone에 표시된 앱의 홈 화면.
`twitter:card`	summary_large_image

HTML로는 다음과 같습니다.

<meta property="og:image" content="https://yourapp.com/og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The app's home screen on an iPhone">
<meta name="twitter:card" content="summary_large_image">

X는 자체 twitter: 태그가 없으면 제목, 설명, 이미지를 Open Graph 태그에서 읽으므로, 대개 X 전용으로 필요한 태그는 twitter:card 하나뿐입니다. 이 태그가 없으면 X가 작은 카드를 보여 주거나 카드를 아예 보여 주지 않을 수 있습니다.

페이지마다 이미지 하나

홈페이지에는 대표 이미지를 씁니다. 다른 페이지는 각자의 이미지를 가질 수 있습니다.

기능 페이지: 그 기능의 화면을 프레임에 담은 이미지.
블로그 글과 가이드: 브랜드 배경 위의 글 제목, 또는 글에서 다루는 스크린샷.
변경 사항이나 릴리스 노트: 해당 릴리스의 새 화면.

페이지별 이미지를 쓰면 공유된 링크가 그 대화를 위해 만든 것처럼 보이고, 모든 페이지에 똑같은 로고 카드를 쓰는 것보다 더 많은 클릭을 받습니다.

미리보기를 테스트하세요

앱은 미리보기를 캐시하고, 때로는 며칠 동안 유지하므로, 링크를 널리 공유하기 전에 테스트하세요.

브라우저에서 이미지 URL을 열어 보세요. 공개적으로 불러와지지 않으면 어떤 앱도 보여 주지 못합니다.
Facebook의 공유 디버거는 Facebook이 페이지에서 읽는 내용을 보여 주며, 다시 스크랩 버튼으로 캐시된 미리보기를 새로 고칩니다.
LinkedIn의 Post Inspector는 LinkedIn에서 같은 일을 합니다.
X: 새 게시물에 링크를 붙여넣되 보내지는 마세요. 작성 화면에 X가 사용할 카드가 보입니다.
메시지와 Slack: 나 자신에게 링크를 보내 보세요.

예전 이미지가 계속 보인다면 이미지 파일 이름을 바꾸고(예: og-2.jpg) 태그를 업데이트하세요. 새 URL은 대부분의 캐시를 건너뜁니다.

흔한 실수

상대 경로 이미지. /og.jpg는 브라우저에서는 되지만 미리보기 카드에서는 되지 않습니다. https://를 포함한 전체 URL을 쓰세요.
크롤러가 막힌 이미지. robots.txt나 로그인 페이지가 이미지를 막으면 앱이 가져가지 못합니다.
작은 글자. 채팅 스레드에서는 카드가 3분의 1 크기로 보일 수 있습니다. 원본에서 높이 약 40픽셀 미만인 것은 읽을 수 없게 됩니다.
길쭉한 휴대폰 스크린샷만 덩그러니. 1.91:1로 잘리면 휴대폰 스크린샷은 상태 막대 한 조각 정도밖에 보이지 않습니다. 대신 넓은 캔버스 위에 올리세요.

프레임에 담은 기기로 만들기

앱이라면 가장 효과적인 Open Graph 이미지는 대개 앱 그 자체입니다. 가장 좋은 화면을 기기 프레임에 담아 브랜드 색상 위에 놓고 짧은 헤드라인을 붙이세요. 1.91:1은 넓어서 가운데에 휴대폰 하나만 두면 공간이 많이 남습니다. 그 자리에 휴대폰 옆으로 헤드라인을 넣거나, 화면 두세 개를 나란히 보여 주세요.

FeatureFrame에는 1.91:1 캔버스 프리셋이 있습니다. Mac에서:

스크린샷을 드롭합니다. FeatureFrame이 크기로 iPhone이나 iPad를 감지하고 해당 기기의 3D 모델에 담습니다.
1.91:1 캔버스를 고르고, 배경으로 단색, 그라디언트 또는 직접 고른 이미지를 정합니다.
기기를 살짝 기울이거나, 스크린샷을 최대 세 개까지 가로 배열 레이아웃으로 추가합니다.
720p JPEG로 내보냅니다. 1.91:1 캔버스는 1376 × 720으로 나오는데, 1200 × 630과 같은 비율에 조금 더 선명합니다. 그대로 쓰거나 정확한 크기로 조절하세요.

헤드라인이 필요하다면 디자인 도구나 웹사이트 템플릿에 맡기세요. 손으로 만들기 어려운 것은 프레임에 담은 기기 쪽입니다.

같은 이미지를 출시 게시물의 대표 이미지로 쓰세요. 출시 이미지 체크리스트를 참고하세요. 그 밖에 필요한 크기는 앱 스크린샷 공유용 이미지 크기를, 기기 프레임 하나만 필요하다면 기기 프레임 라이브러리를 참고하세요.