블로그 썸네일 사진이 잘리는 이유와 확인법

블로그에 가로로 넓은 사진을 대표 이미지로 올렸는데, 피드에서는 인물이나 글자가 양옆으로 잘려 나온 경험이 있을 것입니다. 이건 업로드 실수가 아니라 네이버 블로그·티스토리가 대표 이미지 카드를 1:1 정사각형으로 잘라서 보여주기 때문입니다. 원리를 알면 사진마다 매번 확인하지 않고도 잘리지 않는 썸네일을 만들 수 있습니다.

요약 ① 네이버 블로그 이웃새글 피드, 모바일 통합검색, 티스토리 모바일 홈 화면의 썸네일 카드는 모두 1:1 정사각형으로 노출됩니다 ② 정사각형이 아닌 사진을 올리면 짧은 변에 맞춰 긴 변의 초과분이 잘려나갑니다 ③ 잘려나가는 정도는 원본 가로세로 픽셀 값만 알면 직접 계산할 수 있습니다

썸네일 올렸는데 왜 양옆이나 위아래가 잘릴까

가로로 긴 배경사진(예: 16:9 비율)을 대표 이미지로 쓰면 피드에서는 인물이나 글자의 양옆이 잘려 보입니다. 반대로 세로로 긴 사진을 쓰면 위아래가 잘립니다.

원인은 사진 자체가 아니라 노출 방식에 있습니다. 네이버 블로그의 이웃새글 피드 리스트, 모바일 통합검색 결과, 티스토리 모바일 홈 화면 모두 대표 이미지 카드를 1:1 정사각형 포맷으로만 렌더링하기 때문에, 원본이 정사각형이 아니면 자동으로 다시 잘라서 맞춥니다.

확인하는 방법 — 얼마나 잘리는지 직접 계산하기

웹에서 정사각형이 아닌 이미지를 정사각형 틀에 맞출 때 가장 흔한 방식은 '가운데 크롭'입니다. CSS의 object-fit: cover 속성과 같은 원리로, 짧은 변에 맞춰 긴 변의 초과분을 좌우(또는 상하)에서 똑같이 잘라냅니다.

계산은 간단합니다. 정사각형 한 변의 길이는 원본의 짧은 변과 같아지고, 긴 변에서는 '긴 변 − 짧은 변'만큼이 사라집니다. 가운데 크롭이라면 이 초과분을 절반씩 양쪽에서 잘라냅니다.

예를 들어 1600×900px(16:9) 사진이라면 정사각형 한 변은 짧은 변인 900px이 되고, 초과분 700px 중 양쪽에서 350px씩, 즉 원본 가로 폭의 43.75%가 화면 밖으로 나갑니다. 이 계산을 사진마다 반복하면 어디가 잘릴지는 알 수 있지만, 텍스트나 인물이 실제로 어떻게 보일지는 눈으로 확인하기 전까지 알기 어렵습니다.

저희 도구로 확인하기. 이 번거로움을 피하려면 처음부터 1:1 정사각형 캔버스에서 배경과 글자를 배치하면 됩니다. 나중에 플랫폼이 재크롭할 걱정 자체가 없어집니다.

직접 해보기 →

자주 막히는 지점

표에 정리된 것처럼, 잘림 문제는 대부분 '긴 변 쪽 가장자리에 중요한 요소를 뒀는가'로 귀결됩니다. 처음부터 정사각형 비율로 작업하면 이 판단 자체가 필요 없어집니다.

정리

네이버 블로그·티스토리 같은 플랫폼은 대표 이미지를 1:1 정사각형 카드로만 보여줍니다. 정사각형이 아닌 사진을 올리면 짧은 변에 맞춰 긴 변의 초과분이 잘려나가고, 그 양은 '긴 변 − 짧은 변' 계산만으로 미리 알 수 있습니다.

매번 계산하고 눈대중으로 맞추는 대신, 처음부터 정사각형 캔버스에서 텍스트와 배경 위치를 확인하며 만들면 업로드 후 잘릴 걱정이 사라집니다.

자주 묻는 질문

네이버 블로그 대표 이미지도 무조건 정사각형으로 잘리나요?

이웃새글 피드나 모바일 통합검색처럼 목록 형태로 노출되는 영역에서는 원본 비율과 무관하게 1:1 정사각형 카드로 표시됩니다. 원본이 정사각형이 아니면 자동으로 다시 잘려서 보입니다.

정사각형으로 만들 때 적당한 해상도는 얼마인가요?

1000×1000px 정도면 대부분의 목록형 썸네일 카드에서 선명하게 보입니다. 이 해상도는 확대해도 잘 깨지지 않으면서 파일 용량도 과도하게 크지 않은 수준입니다.

사진은 그대로 두고 글자만 안 잘리게 하려면 어떻게 하나요?

글자를 사진 가장자리가 아니라 중앙 쪽에 모아서 배치하면 됩니다. 크롭은 항상 가장자리부터 사라지므로, 중앙에 가까울수록 잘릴 위험이 줄어듭니다.