Mac에서 Open Graph 및 소셜 미리보기 이미지 만들기
X, LinkedIn, Slack, WhatsApp, iMessage에서 링크를 공유할 때 보이는 1200 × 630 카드를 만들어요.
Mac의 OG 이미지 만들기
샘플 파일을 사용한 앱 스크린샷.
OG 이미지 만들기 사용 방법
- 1
제목 입력하기
필요한 건 이것 하나뿐이에요. 원한다면 제목 위에 부제목과 짧은 태그를 추가하세요. 파일은 필요 없어요.
- 2
스타일 고르기
색상 템플릿이나 원하는 두 가지 색, 그라데이션 방향, 글꼴을 고르고, 질감을 원하면 은은한 격자나 필름 그레인을 더하세요.
- 3
원한다면 이미지 추가
로고, 제품 사진 또는 배경 사진을 놓고 첫 번째 이미지를 어떻게 사용할지 고르세요.
- 4
카드 만들기 클릭
1200 × 630 카드가 다운로드 › OneMacTools 안의 날짜별 폴더에 저장되고, 붙여 넣을 메타 태그가 앱에 표시돼요.
- 5
페이지에 추가하기
이미지를 사이트에 업로드하고, 이미지의 실제 주소와 함께 태그를 페이지의 <head>에 붙여 넣으세요.
OG 이미지 만들기의 기능
제목과 선택 사항인 태그와 부제목을 입력하고, 스타일이나 직접 고른 색상, 그라디언트 방향, 서체를 고른 다음, 원하면 격자나 필름 그레인을 더하세요. 로고, 오른쪽에 카드처럼 떠 있는 제품 사진, 또는 배경 사진을 추가할 수 있어요. 긴 제목은 들어가도록 줄어들어요. 페이지에 붙여 넣을 메타 태그도 함께 받을 수 있어요.
이럴 때 좋아요
- 블로그 게시물에 제대로 된 공유 이미지 붙이기
- 제품 출시 알리기
- 링크 미리보기를 전문적으로 보이게 만들기
옵션 설명
- 제목
- 필수예요. 메인 헤드라인이에요. 긴 제목은 맞게 줄어들고 여러 줄로 나뉘어요.
- 부제(선택 사항)
- 제목 아래의 작은 줄. 예: 한 문장으로 된 설명.
- 제목 위 태그(선택 사항)
- 제목 위에 템플릿의 강조 색상으로 표시되는 대문자 짧은 라벨. 예: NEW, GUIDE.
- 스타일
- 미드나잇, 오션, 선셋, 포레스트, 그레이프, 종이, 기업용 또는 사용자 설정 색상. 템플릿마다 배경, 텍스트, 강조 색상이 정해져 있어요.
- 색상(16진수 값 2개)
- 스타일이 사용자 설정 색상일 때만 표시돼요. 그라데이션의 시작과 끝을 위한 #0F172A, #2563EB 같은 hex 값 두 개예요. 텍스트는 첫 번째 색상에 맞춰 자동으로 어둡거나 밝게 바뀌어요.
- 그라디언트
- 대각선, 왼쪽에서 오른쪽, 위에서 아래 또는 단색. 단색은 첫 번째 색만 사용해요.
- 서체
- 산세리프, 세리프, 둥글게 또는 모노이며, 모두 Mac 시스템 서체의 변형이에요.
- 이미지를 추가하면 다음으로 사용
- 로고(왼쪽 위), 제품 사진(오른쪽에 카드) 또는 배경 사진. 처음 놓은 이미지에 적용돼요. 배경 사진은 흰색 텍스트가 잘 읽히도록 어둡게 처리돼요. 두 번째 이미지는 언제나 제품 사진으로 쓰여요.
- 은은한 격자
- 기본값은 꺼짐이에요. 배경 위에 옅은 격자를 추가해요.
- 필름 그레인
- 기본값은 꺼짐이에요. 고운 그레인을 더해 부드럽고 인쇄된 듯한 느낌을 줘요.
- 저장 형식
- PNG 또는 JPEG. PNG는 텍스트와 단색을 선명하게 유지하고, 배경 사진을 쓸 때는 JPEG가 더 작아요.
권장 사항
- 제목은 6~10단어 정도로 짧게 하세요. 미리보기는 작게 표시될 때가 많아서, 단어가 적을수록 크고 읽기 쉽게 남아요.
- 핵심 단어는 가장자리에 너무 붙이지 마세요. 일부 앱은 미리보기를 살짝 잘라요.
- 그라디언트 위에 깔끔하게 올라가도록 투명 배경의 로고를 쓰세요.
- 페이지나 게시물마다 같은 스타일의 카드를 하나씩 만들면, 공유한 링크들이 한 세트처럼 보여요.
- 앱이 미리보기를 캐시하므로, 게시한 뒤에는 디버거에서 확인하거나 채팅에 붙여 넣어 링크를 테스트하세요.
함께 쓸 수 있는 곳
- 입력
- 파일이 필요 없어요. 원하면 로고, 제품 사진 또는 배경 사진을 추가할 수 있어요(이미지 최대 2개).
- 출력
- “og-” 뒤에 제목이 붙은 1200 × 630 PNG 또는 JPEG, 그리고 앱에 표시되는 og:image 및 Twitter 카드 메타 태그.
- 메타 태그는 임시 주소를 사용하니, 이미지를 업로드할 위치로 바꾸세요.
OG 이미지 만들기에 관한 질문
Open Graph 이미지는 어떤 크기여야 하나요?
1200 × 630 픽셀은 링크 미리보기에 널리 쓰이는 크기이며, OG 이미지 만들기가 만드는 크기도 이것이에요.
디자인 소프트웨어 없이 링크 미리보기 이미지를 만들려면 어떻게 하나요?
OG 이미지 만들기를 열고 제목을 입력한 다음 스타일을 고르고 카드 만들기를 클릭하세요. 파일을 추가할 필요가 없어요.
웹사이트에 OG 이미지를 추가하려면 어떻게 하나요?
이미지를 사이트에 업로드한 다음, 앱에 표시된 메타 태그를 페이지의 <head>에 붙여 넣고 예시 주소를 이미지의 실제 주소로 바꾸세요.
우리 브랜드 색상을 쓸 수 있나요?
네. 사용자 설정 색상을 고르고 16진수 값 두 개를 입력하세요. 텍스트 색상은 그에 맞춰 어두운색과 밝은색 중에서 바뀌어요.
카드에 로고나 스크린샷을 넣을 수 있나요?
네. 놓은 다음 로고(왼쪽 위)나 제품 사진(오른쪽에 카드)을 고르세요. 이미지를 하나 더 추가하면 로고와 제품 사진을 함께 넣을 수 있어요.
링크를 공유할 때 새 이미지가 표시되지 않는 이유는 무엇인가요?
앱은 링크 미리보기를 캐시해요. 태그가 페이지의 <head> 안에 있는지, 이미지 주소가 작동하는지 확인한 다음 해당 플랫폼의 미리보기나 디버깅 도구로 새로 고치세요.
OG 이미지 만들기이(가) 내 파일을 업로드하나요?
아니요. OG 이미지 만들기은(는) 전적으로 Mac에서 실행되므로 파일이 Mac 밖으로 나가지 않고 오프라인에서도 작동해요.
OG 이미지 만들기이(가) 원본 파일을 바꾸나요?
아니요. 결과는 다운로드 › OneMacTools의 날짜별 폴더에 새 파일로 저장되고, 따로 적힌 옵션을 켜지 않는 한 원본은 그대로 남아요.
OG 이미지 만들기에는 무엇이 필요한가요?
macOS 26 이상이 설치된 Mac만 있으면 돼요. 따로 설치할 것은 없어요.
다음으로 할 일
웹사이트에 필요한 모든 파비콘, 그리고 웹 매니페스트와 페이지에 붙여 넣을 HTML까지.
PNG 압축색상 수를 줄여 투명도는 유지하면서 PNG를 60–80% 줄여요. 스크린샷, 로고, 아이콘에 딱 맞아요.
관련 이미지 도구
PNG, JPEG, HEIC, AVIF, TIFF 간에 변환해요. WebP, RAW 등도 읽을 수 있어요.
이미지 압축실시간 전후 미리보기와 함께 이메일과 웹용으로 사진을 줄여요.
WebP로 변환투명도를 유지한 채 손실 또는 무손실 방식으로 작은 웹용 WebP 이미지를 만들어요.
이미지 크기 조절긴 변, 정확한 픽셀, 비율 또는 원하는 DPI에서의 cm, mm, 인치 인쇄 크기로 크기를 조절해요.
이미지 자르기화면비나 정확한 영역으로 자르거나 단색 테두리를 자동으로 잘라내세요 — 사진 한 장이든 폴더 전체든.
이미지 회전 및 뒤집기사진을 한 번에 회전하거나 반전해요.
