대표 이미지의 크기는 글 안에서의 보이는 방식뿐 아니라, SNS에 공유되었을 때의 카드 표시에도 영향을 줍니다. 고민된다면 1200×630 픽셀을 선택하면 대부분의 상황에서 무너지지 않습니다. 그 이유와 다른 이미지의 사고방식을 정리합니다.
왜 1200×630인가
이 비율(약 1.91:1)은 Facebook·X·LinkedIn·Slack·Discord 등 링크 미리보기를 생성하는 주요 서비스가 공통으로 권장하거나 허용하는 크기입니다. 한 장 준비하면 서비스별로 다시 만들 필요가 없습니다.
Facebook은 고해상도 미리보기를 위해 1200×630 이상을 권장하며, 허용되는 최소 크기는 200×200입니다. 다만 600×315을 밑돌면 큰 카드가 아니라 작은 썸네일 표시로 전환됩니다. 이것이 실질적인 하한이라고 보면 됩니다. 애써 준비한 이미지가 작게만 나오는 것은 손해입니다.
X에서 큰 카드(summary_large_image)를 표시할 때도 1200×630으로 그대로 작동합니다.
본문 삽화는 다른 기준으로 생각해도 된다
대표 이미지와 본문 삽화는 역할이 다릅니다. 삽화는 본문 폭에 들어가면 되므로 정사각형이나 세로형이어도 문제없습니다. 오히려 가로형을 고집하면 스마트폰에서 볼 때 세로 정보량이 줄어 작게 뭉개져 보일 수 있습니다.
순서 설명도나 체크리스트처럼 세부를 보여주고 싶은 이미지는 정사각형이나 세로형이 읽기 쉽습니다. 용도에 따라 구분해 사용하세요.
문자를 겹칠 거라면 여백이 있는 구도를 고른다
대표 이미지에 제목 문자를 겹치는 구성이라면, 피사체가 화면 중앙을 가득 채운 이미지에는 문자를 놓을 자리가 없습니다. 미리 여백이 있는 구도를 골라두면 가공 수고가 크게 줄어듭니다.
문자는 보통 좌우 어느 한쪽으로 치우쳐 배치합니다. 소재를 고르는 단계에서 「문자가 어디에 들어갈지」를 상상해 두면 나중에 다시 만들지 않아도 됩니다.
파일 크기도 살펴본다
치수가 적절해도 파일이 너무 무거우면 페이지 표시가 느려집니다. 표시 속도는 독자 이탈로 직결되므로 대표 이미지는 1MB 이내가 기준입니다. WebP처럼 압축 효율이 높은 형식을 쓰면 보이는 모습을 유지한 채 용량을 줄일 수 있습니다.
Visual Hub의 소재에 대하여
당 사이트에서는 정사각형(1024×1024)과 가로형(1408×768) 두 종류의 크기로 소재를 배포하고 있습니다. 가로형 소재는 블로그 헤더와 SNS 카드 표시를 상정하여, 문자를 겹칠 수 있는 여백을 의식한 구도로 생성하고 있습니다.
가로형 소재의 비율은 약 1.83:1로 1200×630(약 1.91:1)과 거의 같아, 그대로 내보내도 중요한 부분이 잘리기 어렵습니다. 형식은 WebP이므로 파일 크기도 작게 유지됩니다.