WooCommerce 상품 이미지 크기: 세 가지 크기와 실제로 바꾸는 방법

WooCommerce는 상품 사진을 하나 올릴 때마다 세 가지 이미지 크기를 만드는데, 그중 WordPress 관리자에서 수정할 수 있는 것은 둘뿐입니다. woocommerce_thumbnail은 카탈로그 그리드 이미지, woocommerce_single은 상품 페이지의 큰 이미지, woocommerce_gallery_thumbnail은 그 아래 작은 썸네일 줄입니다. 외모 > 사용자 정의하기 > WooCommerce > 상품 이미지에서 바꾸며, 그 패널에 자르기 드롭다운만 있고 폭 입력란이 없다면 테마가 의도적으로 코드에서 폭을 잠가둔 것입니다.

세 가지 크기

크기 이름	표시되는 곳	자르기	사용자 정의하기에서 수정
woocommerce_thumbnail	상점 페이지, 카테고리 그리드, 관련 상품, 교차 판매	기본값은 정사각형 강제 크롭	폭과 비율
woocommerce_single	단일 상품 페이지의 메인 이미지	자르지 않음 — 원본 비율 유지	폭만
woocommerce_gallery_thumbnail	메인 상품 이미지 아래의 작은 줄	정사각형 강제 크롭	불가

이것들은 기본 WordPress 크기 위에 얹힙니다. 상품 사진 한 장이면 보통 thumbnail, medium, medium_large, large, 여기에 WooCommerce 크기 셋, 그리고 테마가 add_image_size로 등록한 추가 크기까지 생성됩니다. 업로드 한 건당 파일이 상당히 많은 셈이고, 상품 300개를 가져오는 데 그렇게 오래 걸리는 이유이기도 합니다.

사람들이 놀라는 건 갤러리 썸네일입니다. 관리자 화면에 설정이 아예 없습니다. 기본 설치에서는 작은 정사각형이고, 예전부터 100px였으며, 파일 자체가 정말 작기 때문에 레티나 화면에서 흐릿해 보일 가능성이 가장 높은 크기입니다.

설정이 실제로 있는 곳

외모 > 사용자 정의하기 > WooCommerce > 상품 이미지에는 세 가지 항목이 있습니다.

• 메인 이미지 폭 — woocommerce_single의 폭입니다. 높이는 자동이라 원본 비율이 유지됩니다.
• 썸네일 폭 — woocommerce_thumbnail의 폭입니다.
• 썸네일 자르기 — 1:1(정사각형, 기본값), 사용자 정의(4:3처럼 비율을 직접 입력), 또는 자르지 않음.

빠진 것에 주목하세요. 카탈로그 썸네일에는 높이 입력란이 없습니다. 높이가 자르기 비율에서 계산되기 때문입니다. 그리고 갤러리 썸네일에 대한 설정은 아예 없습니다.

무엇을 바꾸기 전에, 특정 파일이 어떤 파생 이미지를 만들어내는지 먼저 보는 편이 좋습니다. 실제 상품 사진을 WordPress 이미지 크기 도구에 넣으면 전체 목록이 나오고, 원본이 각 크기를 확대 없이 채울 만큼 큰지도 함께 확인할 수 있습니다.

카탈로그 이미지가 이상해 보이는 이유

카탈로그 썸네일은 정사각형으로 강제 크롭합니다. 강제 크롭이란 WooCommerce가 사진에서 가운데 정사각형을 떼어내고 나머지는 버린다는 뜻입니다. 레터박스를 넣지도, 찌그러뜨리지도 않습니다. 2000x1200 상품 사진은 가운데에서 잘라낸 1200x1200 조각이 되고, 그다음 축소됩니다.

여백을 두고 정중앙에 놓인 병 사진이라면 괜찮습니다. 하지만 다음 경우에는 재앙입니다.

• 긴 상품(스키, 케이블, 커튼봉) — 가운데 3분의 1만 보이고 나머지는 사라집니다
• 중앙에서 벗어난 구도 — 상품이 프레임 가장자리로 밀려 잘려 나갑니다
• 상품이 프레임을 가장자리까지 꽉 채운 사진 — 위아래가 잘립니다
• 상품이 구석에 있는 라이프스타일 컷

흔한 조언은 “자르기를 자르지 않음으로 바꿔라”입니다. 그러면 되긴 하지만 대가도 솔직히 알아둡시다. 자르지 않음은 모든 썸네일이 각자의 비율을 유지한다는 뜻이라, 가로세로 방향이 섞인 사진들의 그리드는 시각적으로 들쭉날쭉해지고, 테마 CSS가 가변 높이를 처리하지 못하면 줄이 맞지 않습니다. 대부분의 테마는 정사각형을 전제로 합니다.

여유가 된다면 더 나은 해결책은 원본 단계에 있습니다. 상품을 가운데 두고 여백을 고르게 준 정사각형 사진으로 통일하는 것입니다. 그러면 정사각형 강제 크롭은 아무것도 하지 않는 것과 같아지고, 그 아래 모든 것이 예측 가능해집니다. 자르기 설정을 바꾸는 건 임시방편이고, 일관된 원본 이미지가 진짜 해결책입니다.

테마가 폭을 잠근 경우

상품 이미지 패널에 자르기 설정만 있다면, 테마가 WooCommerce 지원을 등록할 때 고정 폭을 선언한 것입니다.

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

테마가 이 값을 넘기면 WooCommerce는 사용자 정의하기에서 폭 설정을 없애고 비율만 남깁니다. 버그도 아니고 테마가 심술을 부리는 것도 아닙니다. 테마의 상품 레이아웃 CSS가 바로 그 픽셀 폭을 기준으로 만들어져 있어서, 폭을 바꾸게 두면 그리드가 깨지기 때문입니다.

자식 테마의 functions.php에서 크기별 필터로 덮어쓸 수 있습니다.

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

woocommerce_get_image_size_thumbnail에도 같은 방식이 통합니다. 갤러리 썸네일은 UI가 없으므로 이것이 유일한 변경 수단이기도 합니다.

대가를 분명히 말하면 이렇습니다. 잠긴 폭을 덮어쓰면 WooCommerce가 생성하는 파일이 테마 CSS가 기대하는 크기와 더 이상 맞지 않습니다. 보통은 이미지가 영역보다 커진 상태라 브라우저에서 적당히 축소되어 멀쩡해 보입니다. 하지만 테마가 높이를 고정한 컨테이너를 쓰고 있으면 레터박스가 생기거나 넘칩니다. 상품 2,000개를 재생성하기 전에 하나로 먼저 시험해 보세요.

크기를 바꿨으면 다시 생성해야 합니다

모든 크기 설정은 새로 올리는 파일에만 적용됩니다. 기존 상품은 업로드 당시 생성된 파일을 계속 내보내므로, 다시 만들기 전까지는 눈에 보이는 변화가 없습니다.

WooCommerce는 사용자 정의하기를 저장하면 백그라운드 재생성을 시작합니다. 작은 카탈로그라면 그것으로 충분합니다. 큰 카탈로그에서는 WP-Cron이 제때 도는지에 달려 있는데, 방문자가 적은 상점에서는 종종 그렇지 못해서 절반만 재생성된 라이브러리가 남습니다. 직접 돌리는 편이 낫습니다.

wp media regenerate --yes

상품 이미지만 다시 만들려면 이렇게 합니다.

wp media regenerate --yes --post_type=product

수동으로 처리하는 동안 백그라운드 작업을 꺼두고 싶다면 이렇게 합니다.

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

재생성이 해주지 않는 일이 두 가지 있습니다. 예전 파일을 지워주지 않습니다. 업로드 디렉터리에는 이전 설정으로 만들어진 고아 파일이 전부 남아 계속 쌓입니다. 그리고 원본보다 큰 크기는 만들지 못합니다. WordPress는 확대하지 않기 때문입니다. 메인 이미지 폭을 1200으로 설정했는데 상품 사진이 800px라면 1200px 파일은 생성되지 않고, 브라우저는 800px 파일을 받아 늘려서 보여주며, srcset도 내놓을 더 나은 후보가 없습니다.

실제로 올려야 할 크기

가장 크게 설정한 폭의 약 두 배로 정사각형 원본을 준비하세요. 메인 이미지가 600px면 1200x1200, 테마가 800px를 쓴다면 1600x1600입니다. 2배 레티나 화면을 감당하고, WordPress가 모든 파생 이미지를 확대 없이 만들 만큼의 픽셀을 확보하는 크기입니다. 그리드가 고르게 보이도록 모든 상품을 같은 크기로 맞추세요.

그래도 해결이 안 된다면

크기 설정이 맞고 재생성도 했는데 특정 상품이 여전히 이상하다면, 이미지를 새 탭에서 열고 파일명을 읽어보세요. 설정한 어떤 크기와도 맞지 않는 크기 접미사가 붙어 있다면 다른 무언가가 그 크기를 등록한 것입니다. 접미사가 아예 없다면 WooCommerce가 원본 크기 파일로 되돌아간 것이고, 거의 항상 요청한 크기에 비해 원본이 너무 작았다는 뜻입니다. 그 원본 파일을 이미지 크기 도구에 넣어 WordPress가 생성해야 할 것과 브라우저가 실제로 불러온 것을 비교해 보세요. 둘이 다르다면 대개 최적화 플러그인이나 CDN 이미지 리사이저가 그 사이에 끼어 있습니다.