OG 이미지 생성기 사용법: 블로그와 SNS 썸네일을 1200×630으로 만드는 법

글을 공개할 때 본문만큼 자주 놓치는 것이 공유 이미지다. 링크를 메신저나 SNS에 붙였을 때 제목과 함께 보이는 썸네일이 너무 작거나, 글자가 잘리거나, 배경과 대비가 낮으면 글의 첫인상이 약해진다.

OG Image Generator는 블로그 글, 도구 페이지, 공지, 실험 노트에 쓸 1200×630 이미지를 빠르게 만드는 도구다. 전문 디자인 툴을 완전히 대체하려는 목적이 아니라, 매번 같은 규격과 기본 품질을 유지하도록 돕는 작업 도구에 가깝다.

왜 1200×630을 기준으로 삼는가

Open Graph 이미지는 여러 플랫폼에서 조금씩 다르게 잘린다. 그래도 1200×630은 웹 공유 이미지에서 널리 쓰이는 기준이다. 가로형 카드에 잘 맞고, 고해상도 화면에서도 흐릿하지 않으며, 블로그와 SNS 미리보기를 동시에 대응하기 좋다.

중요한 것은 전체 캔버스 크기만 맞추는 것이 아니다. 플랫폼에 따라 가장자리 일부가 잘릴 수 있으므로 제목, 로고, 핵심 문구는 안전 영역 안에 둬야 한다. 너무 가장자리까지 글자를 밀어 넣으면 카카오톡, X, Facebook, Slack 같은 환경에서 다르게 보일 수 있다.

실무적으로는 다음 기준이 좋다.

• 캔버스는 1200×630으로 만든다.
• 제목은 중앙 또는 좌측의 안전 영역 안에 둔다.
• 로고나 사이트명은 작게, 하지만 식별 가능하게 넣는다.
• 가장자리 장식은 잘려도 의미가 손상되지 않게 둔다.
• 글자 수가 길면 줄바꿈을 먼저 확인한다.

좋은 썸네일은 제목을 그대로 복사하지 않는다

OG 이미지는 본문 제목을 다시 쓰는 공간이 아니다. 제목이 이미 링크 미리보기 텍스트로 보이는 경우가 많기 때문이다. 이미지 안에는 제목 전체보다 핵심 키워드, 상황, 결과를 짧게 넣는 편이 읽기 쉽다.

예를 들어 글 제목이 “웹훅 요청 시뮬레이터 사용법: 배포 전 POST 요청을 안전하게 테스트하기”라면, 이미지 안에는 다음처럼 줄일 수 있다.

• 웹훅 요청 테스트
• POST 전에 확인할 5가지
• CORS·헤더·JSON 점검

이렇게 하면 작은 미리보기에서도 핵심이 보인다. 이미지 안의 문구는 검색용 제목이 아니라 시각적 안내문에 가깝다.

한국어 줄바꿈을 먼저 확인한다

영어는 단어 사이 공백이 많아 자동 줄바꿈이 비교적 예측 가능하다. 한국어는 문장 길이와 조사, 숫자, 영문 약어가 섞이면 줄바꿈이 어색해질 수 있다. “1200×630”, “Open Graph”, “JSON/YAML” 같은 표현이 들어가면 더 그렇다.

썸네일을 만들 때는 글자를 넣고 바로 다운로드하지 말고 미리보기에서 줄바꿈을 확인한다. 한 줄에 너무 많은 글자가 들어가면 모바일 미리보기에서 작게 보인다. 반대로 줄이 너무 많으면 이미지가 카드처럼 복잡해진다.

한국어 썸네일에서는 보통 다음 기준이 편하다.

• 큰 제목은 2~3줄 안에 끝낸다.
• 한 줄에 의미 단위가 끊기게 조정한다.
• 숫자와 영문 약어는 줄 끝에서 분리되지 않게 본다.
• 부제는 꼭 필요할 때만 넣는다.
• 본문 수준의 긴 문장은 이미지에 넣지 않는다.

배경, 대비, 브랜드 톤

썸네일에서 가장 중요한 시각 조건은 대비다. 예쁜 배경보다 먼저 글자가 읽혀야 한다. 밝은 배경에는 진한 글자를, 어두운 배경에는 충분히 밝은 글자를 쓰는 기본이 가장 안전하다.

브랜드 톤을 맞추고 싶다면 매번 새로운 스타일을 만들기보다 몇 가지 템플릿을 정해두는 편이 좋다. 예를 들어 도구 가이드는 차분한 배경과 큰 키워드, 실험 노트는 조금 더 자유로운 그래픽, 공지는 명확한 라벨을 쓰는 식이다.

확인할 항목은 다음과 같다.

• 제목과 배경의 대비가 충분한가
• 모바일 크기로 줄여도 핵심 단어가 보이는가
• 사이트명이나 로고가 너무 크게 경쟁하지 않는가
• 같은 사이트의 다른 썸네일과 톤이 크게 다르지 않은가
• 장식 요소가 글자를 방해하지 않는가

필요하면 Color Contrast Checker로 색상 조합을 먼저 확인한다. 감으로는 충분해 보여도 실제 작은 화면에서는 흐려질 수 있다.

다운로드 후 바로 끝내지 않는다

OG 이미지를 만들었다면 파일을 다운로드하고 끝내지 말고, 글의 메타데이터와 실제 공유 미리보기까지 연결해야 한다. 정적 사이트라면 이미지 파일을 적절한 public 경로에 두고, 페이지 metadata의 Open Graph image 필드가 그 파일을 가리키는지 확인해야 한다.

작업 순서는 보통 이렇다.

1. 글 제목과 핵심 문구를 정한다.
2. OG Image Generator에서 템플릿과 색상을 고른다.
3. 1200×630 미리보기에서 줄바꿈과 대비를 확인한다.
4. PNG로 다운로드한다.
5. 파일명을 slug와 맞춰 저장한다.
6. 글 또는 페이지 metadata에 이미지 경로를 연결한다.
7. 로컬 빌드나 미리보기에서 <meta property="og:image">가 맞는지 확인한다.

이미지만 만들어두고 메타 태그에 연결하지 않으면 공유 화면에는 반영되지 않는다. 콘텐츠 작업과 개발 작업이 만나는 지점이다.

파일 형식과 압축

OG 이미지는 보통 PNG가 안전하다. 텍스트와 그래픽이 선명하고, 브라우저와 플랫폼 호환성이 좋다. 사진 배경이 크고 파일 용량이 부담된다면 JPG나 WebP를 고려할 수 있지만, 플랫폼별 미리보기 지원을 확인해야 한다.

실무에서는 원본 PNG를 보관하고, 필요하면 Image Format Converter로 웹용 사본을 만든다. 너무 강한 압축을 적용하면 글자 가장자리가 흐려진다. 썸네일은 작은 화면에서 보이는 이미지라서 글자 선명도가 중요하다.

파일명도 관리 포인트다. thumbnail-final-final.png보다 webhook-request-simulator-guide-og.png처럼 글 slug와 연결되는 이름이 나중에 찾기 쉽다.

글마다 이미지를 만들 필요는 없다

모든 글에 전용 썸네일이 꼭 필요한 것은 아니다. 짧은 공지나 내부 노트에는 사이트 기본 이미지를 써도 된다. 하지만 대표 글, 도구 사용법, 공유 가능성이 높은 글은 전용 이미지를 만드는 편이 좋다.

우선순위는 이렇게 잡을 수 있다.

• 첫 화면이나 Posts 목록에서 강조할 글
• 도구 페이지와 연결되는 핵심 가이드
• SNS나 메신저에 공유할 가능성이 높은 글
• 검색에서 클릭 전 신뢰를 줘야 하는 설명 글
• 시각적 예시가 있으면 이해가 빨라지는 글

도구를 쓰는 목적은 매번 디자인에 오래 머무르는 것이 아니라, 일정 수준 이상의 공유 이미지를 반복 가능하게 만드는 것이다.

마무리 체크리스트

OG 이미지를 공개하기 전에 아래를 확인한다.

• 크기가 1200×630인지
• 핵심 문구가 모바일에서도 읽히는지
• 한국어 줄바꿈이 어색하지 않은지
• 가장자리 잘림에 안전한지
• 파일명이 글 slug와 연결되는지
• 실제 페이지의 Open Graph metadata에 연결됐는지
• 공유 디버거 또는 메신저 미리보기에서 제대로 보이는지

좋은 썸네일은 글을 과장하지 않는다. 다만 독자가 링크를 열기 전에 “무슨 글인지”를 더 빨리 이해하게 한다. OG Image Generator는 그 반복 작업을 가볍게 만드는 도구로 쓰면 충분하다.