워드프레스 썸네일 이미지, 사이즈는 얼마가 적당할까?

대부분이 원하는 답은 1200 x 630 픽셀입니다. 페이스북, 링크드인, X가 링크 미리보기에 쓰는 비율(1.91:1)이고, Open Graph 이미지가 가져야 할 사이즈이기도 합니다. 공유했을 때 링크가 제대로 보이게 하려는 목적으로 썸네일을 설정하는 거라면, 1200 x 630으로 맞추고 거기서 끝내면 됩니다.

하지만 그 숫자는 테마가 글에서 실제로 보여주는 사이즈가 아닙니다. 워드프레스는 썸네일을 원본 사이즈 그대로 보여주는 경우가 거의 없습니다. 테마는 등록된 특정 이미지 사이즈를 요청하고, 워드프레스는 거기에 맞게 미리 생성해 둔 잘림본 중 하나를 내보냅니다. 그래서 페이스북에서는 완벽해 보이는 이미지가 정작 단일 글 템플릿 안에서는 흐릿하게 나오거나, 늘어나 보이거나, 엉뚱하게 잘려 보일 수 있는 겁니다. “정답” 사이즈는 보편적인 규칙이 아니라 테마에 따라 달라집니다.

테마가 그 숫자를 덮어쓰는 이유

이미지를 업로드하면 워드프레스는 파일 하나만 저장하지 않습니다. wp_generate_attachment_metadata()를 실행해서 등록된 모든 이미지 사이즈마다 파생본을 만듭니다. 기본 세 가지(thumbnail, medium, large), 블록 편집기용 medium_large(가로 768px), 그리고 테마나 플러그인이 add_image_size()로 등록한 사이즈까지 전부 만들어 냅니다.

가로로 넓은 16:9 히어로 이미지를 쓰려는 테마라면 functions.php에 대략 이런 식으로 작성합니다.

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

네 번째 인자 true는 **하드 크롭(hard crop)**을 의미합니다. 워드프레스는 이미지를 정확히 1200 x 675로 잘라내고, 16:9 박스에 들어가지 않는 부분은 버립니다. 피사체가 화면 위쪽이나 아래쪽에 있으면 그 부분이 잘려 나갑니다. false로 두거나 생략하면 비율을 유지한 채 축소되며, 최종 사이즈가 요청한 값과 달라질 수 있습니다.

그다음 템플릿이 어떤 사이즈를 불러올지 결정합니다.

the_post_thumbnail( 'hero-featured' );

the_post_thumbnail()에 넘긴 이름이 곧 화면에 렌더링되는 잘림본입니다. 그러니 사이트에서 실제 썸네일 사이즈를 정하는 곳은, 여러분이 직접 작성하지 않은 두 지점입니다. 테마 안의 add_image_size() 호출과 the_post_thumbnail() 호출이죠. 더 큰 파일을 업로드해도 이 둘은 바뀌지 않습니다.

여기에 한 겹이 더 있습니다. 워드프레스는 srcset을 내보내기 때문에, 화면이 작은 기기에서는 브라우저가 전체 잘림본 대신 medium이나 large 파생본을 불러올 수 있습니다. DevTools에서 보이는 사이즈가 업로드한 사이즈와 다른 경우가 많은 이유입니다.

순서대로 해결하는 법

1. 테마가 실제로 무엇을 요청하는지 확인하세요. 추측하기 전에, 워드프레스가 이미지에서 생성하는 모든 사이즈와 그중 어느 것이 잘린 히어로인지부터 파악하세요. 워드프레스 이미지 사이즈 도구에 이미지를 넣어 보면, WP가 만들 모든 파생본을 정확한 픽셀 사이즈로 보여줍니다. 그러면 신화 같은 1200x630이 아니라 실제 목표 사이즈에 원본을 맞출 수 있습니다.

2. 가장 큰 잘림본을 덮을 만큼 충분히 크게 업로드하세요. 테마의 히어로가 1200 x 675라면 최소한 그만큼, 이상적으로는 레티나 대응을 위해 2배(2400 x 1350)로 업로드하세요. 워드프레스는 깔끔하게 축소는 하지만, 절대 확대는 하지 않습니다. 원본이 작은 것이 썸네일 화질 깨짐의 가장 흔한 원인입니다.

3. 비율을 테마의 잘림본에 맞추세요. 테마가 16:9로 하드 크롭한다면 16:9로 넣으세요. 하드 크롭이 인물의 목을 잘라 버리지 않도록 피사체를 가운데에 두고 구성하세요.

4. 등록된 사이즈가 잘못됐다면, 바꾸고 재생성하세요. 자식 테마에서 add_image_size() 값을 수정한 다음 기존 썸네일을 다시 만드세요. 이 작업을 하기 전까지는 새 사이즈가 앞으로 업로드되는 이미지에만 적용됩니다.

wp media regenerate --yes

WP-CLI가 없나요? Regenerate Thumbnails 플러그인이 대시보드에서 같은 일을 해 줍니다.

하지 말아야 할 것

그냥 1200x630 이미지를 올려놓고 알아서 처리되겠거니 하지 마세요. 테마의 등록된 사이즈가 16:9라면, 워드프레스는 1.91:1 이미지를 하드 크롭해서 위아래를 잘라냅니다. Open Graph 숫자와 표시 숫자는 서로 다른 역할을 합니다.

“원본을 유지하려고” 워드프레스 이미지 사이즈를 비활성화하지 마세요. 중간 사이즈를 0으로 설정하거나 the_post_thumbnail을 떼어 내라는 조언을 보게 됩니다. 그러면 테마는 전체 사이즈 파일을 브라우저에서 축소해 내보내는 방식으로 대체됩니다. 4000px짜리 JPEG를 휴대폰에 그대로 던지는 셈이죠. 로딩 속도와 Core Web Vitals가 무너집니다. 파생본은 다 이유가 있어서 존재합니다.

플러그인의 “권장 사이즈”를 테마의 실제 등록 사이즈보다 신뢰하지 마세요. SEO 플러그인은 OG 태그용으로 1200x630을 권장하는데, 그 태그에 대해서는 맞는 값입니다. 하지만 단일 글 템플릿이 무엇으로 잘라내는지에 대해서는 아무것도 알려 주지 않습니다.

사이즈를 바꾼 뒤 wp media regenerate를 건너뛰지 마세요. add_image_size()를 수정해도 이미 업로드된 이미지에는 아무 영향이 없습니다. 사람들이 잊어버리는 단계가 바로 이것이고, 그래서 코드가 안 먹혔다고 결론 내립니다.

그래도 안 되나요?

사이즈를 맞추고 재생성했는데도 이미지가 여전히 이상하다면, 보통 원인은 크롭 모드(true 대 false)이거나, 예상보다 작은 파생본을 내보내는 srcset입니다. 파일을 이미지 사이즈 도구에 넣어 현재 설정이 어떤 잘림본을 만들어 내는지 정확히 확인한 다음, DevTools에서 브라우저가 실제로 불러오는 것과 비교해 보세요. 이 둘을 맞추면 더 이상 추측할 필요가 없습니다.