우커머스에서 썸네일 가로세로 이미지 조정 플러그인
우커머스에서 가로로 길거나 세로로 긴 이미지들이 섞여 있어 썸네일 바둑판 배열이 들쭉날쭉해지는 현상은 매우 흔한 문제입니다. 이를 해결하기 위해 가장 추천하는 플러그인 2가지와 설정법을 정리해 드립니다.
1. 추천 플러그인 (자동 맞춤형)
① Smart Image Resize (가장 추천)
이미지를 자르지 않고도 모든 썸네일을 동일한 비율(주로 정사각형)로 만들어주는 가장 스마트한 도구입니다.
특징: 가로/세로가 남는 부분에 흰색(또는 원하는 색상) 배경을 자동으로 채워 넣어 모든 이미지를 같은 크기의 캔버스 안에 배치합니다.
장점: 상품의 중요한 부분이 잘리지 않으면서도 상점 페이지의 정렬이 칼같이 맞게 됩니다.
사용법: 설치 후 설정에서 배경색을 정하고, 이미지를 다시 생성(Regenerate)하면 됩니다.
--https://drive.google.com/file/d/1A-5GUUaYtjRkg7gbVsxELW-8c8uVDwwd/view?usp=drive_link--
② Regenerate Thumbnails
이미 플러그인이나 테마 설정을 변경했는데, 기존에 올린 이미지들에 적용이 안 될 때 반드시 써야 하는 필수 플러그인입니다.
특징: 현재 설정된 크기 값에 맞춰 서버에 있는 모든 이미지 파일을 다시 깎아(리사이징) 줍니다.
사용법:
도구 > Regenerate Thumbnails메뉴에서 전체 실행을 누르면 됩니다.
2. 플러그인 없이 설정으로 해결하는 방법
우커머스 자체 기능으로도 어느 정도 정렬이 가능합니다.
**외모(Appearance) > 사용자 정의하기(Customize)**로 들어갑니다.
WooCommerce > 상품 이미지(Product Images) 메뉴를 클릭합니다.
썸네일 자르기(Thumbnail cropping) 옵션을 확인하세요.
1:1 (정사각형): 이미지를 강제로 1:1 비율로 자릅니다. (가장 깔끔하지만 위아래/좌우가 잘릴 수 있음)
사용자 정의: 원하는 비율을 입력합니다.
자르지 않음: 원본 비율을 유지합니다. (이 경우 질문하신 것처럼 줄이 안 맞게 됩니다.)
3. 요약: 어떤 방법을 쓸까요?
| 상황 | 추천 방법 |
| 상품 이미지가 잘리는 건 싫지만, 정렬은 맞추고 싶다 | Smart Image Resize 플러그인 사용 |
| 그냥 다 1:1 정사각형으로 깔끔하게 맞추고 싶다 | 사용자 정의하기 > 1:1 자르기 설정 후 Regenerate Thumbnails 실행 |
| 이미지는 그대로 두고 CSS로만 맞추고 싶다 | 테마의 'Equal Height' 옵션 활성화 또는 CSS 코드 수정 |