워드프레스 썸네일 이미지 크기 통일하는 방법
이 블로그는 현재 GeneratePress 테마를 사용하고 있습니다. 대부분의 글에 대표 이미지를 설정하고 있지만, 일부는 외부 이미지 링크를 사용하다 보니 블로그 첫 페이지 썸네일 이미지 크기가 들쭉날쭉하게 보이는 문제가 생겼습니다.
처음에는 테마 설정이나 플러그인 문제인 줄 알고 고민했지만, 문제는 썸네일 이미지의 크기와 비율이 제각각이었던 데 있었습니다.
이런 문제는 테마 자체의 썸네일 스타일(CSS)을 조금만 조정해도 간단히 해결할 수 있습니다.
CSS 한 줄로 썸네일 정렬 깔끔하게 (GeneratePress 테마)
GeneratePress 테마는 썸네일에 img 태그가 들어가며, 이 요소에 직접 스타일을 지정하면 됩니다.
워드프레스 관리자 메뉴에서 ‘외모 > 사용자 정의하기 > 추가 CSS’ 항목에 다음 코드를 추가하세요:
css
.entry-summary img,
.featured-image img {
object-fit: cover;
height: 250px;
width: 100%;
}
object-fit: cover는 이미지의 중심을 기준으로 자르되, 지정한 높이에 맞춰 보여주기 때문에 비율이 다른 이미지도 균일하게 보입니다.height: 250px는 필요에 따라 적절히 조절하세요.width: 100%를 추가하면 이미지가 박스를 꽉 채우게 됩니다.
이렇게 설정하면 썸네일 이미지가 아래와 같이 일정한 높이로 잘려서 정렬됩니다:
추가 팁: 이미지 업로드 시 주의사항
- 대표 이미지는 가로 중심으로 잘릴 수 있으므로, 중요한 내용이 중앙에 오도록 편집하는 것이 좋습니다.
- 외부 이미지 URL을 사용할 경우에도 위 CSS가 적용되지만, 최적화 측면에서는 직접 업로드된 이미지를 사용하는 것이 좋습니다.
- GeneratePress는 빠른 속도와 깔끔한 디자인이 장점이므로, 이미지 사이즈를 너무 크게 올릴 필요는 없습니다. 800px 정도면 충분합니다.
맺는말
이상으로 워드프레스 썸네일 이미지 크기 통일하는 방법에 대해 알아보았습니다.
특히 GeneratePress 테마를 사용할 경우, 워드프레스 관리자 화면에서 ‘추가 CSS’에 간단한 코드 한 줄만 입력하면 깔끔하게 정리된 첫 화면을 만들 수 있어 매우 실용적입니다.
썸네일은 블로그의 첫인상을 좌우하는 중요한 요소입니다.
이미지의 크기와 비율이 제각각이면 아무리 좋은 콘텐츠라도 정돈되지 않아 보일 수 있죠.
이번 설정을 통해 블로그 전체의 디자인 완성도와 신뢰감을 함께 높여보세요.
테마나 구조가 조금씩 다르더라도, 핵심은 object-fit: cover와 고정된 높이 설정이라는 점 기억해 두시면 다른 테마에서도 응용하실 수 있습니다.
앞으로도 워드프레스 블로그 운영에 도움이 되는 팁들을 계속 정리해 보겠습니다 🙂
함께 읽으면 좋은 글
파트너스 활동으로 소정의 수수료를 제공받을 수 있습니다.
