워드프레스 썸네일 이미지 사이즈 1200×630 + 확인법

결론: 테마의 사이즈를 아직 모른다면 1200 x 630 픽셀(약 1.91:1)을 쓰세요. 페이스북이 권장하는 링크 미리보기 사이즈이고, SEO 플러그인은 보통 특성 이미지를 공유 이미지로 씁니다.

글 페이지 자체에서 중요한 것은 테마가 표시하는 사이즈입니다. 워드프레스는 업로드한 이미지를 여러 사이즈로 저장하고, 그중 어느 것을 보여줄지는 테마가 고릅니다. 클래식 테마는 set_post_thumbnail_size()나 add_image_size()로, 블록 테마는 특성 이미지 블록에서 이를 설정합니다. 테마가 16:9나 정사각형으로 자른다면 1200 x 630 이미지는 왼쪽과 오른쪽 가장자리 일부가 잘릴 수 있습니다. 테마의 사이즈를 찾은 다음(아래에 네 가지 방법이 있습니다), 최소한 그만큼 큰 이미지를 올리세요. 고밀도 화면에서 선명하게 보이려면 폭을 약 두 배로 하는 것이 좋습니다.

특정 이미지로 워드프레스가 어떤 사이즈들을 만드는지 보려면 워드프레스 이미지 사이즈 도구에 넣어 보세요.

이미지가 보이는 곳에 따라 쓸 사이즈

이미지가 보이는 곳	올릴 사이즈	비고
내 글, 테마 사이즈를 아직 모를 때	1200 x 630, 더 선명하게 하려면 2400 x 1260	테마 사이즈를 찾는 동안 링크 미리보기에도 그대로 쓸 수 있음
내 글, 테마 사이즈를 알 때	테마 특성 이미지 폭의 약 두 배, 같은 가로세로 비율	워드프레스는 업로드한 이미지로 더 작은 사본만 만들고 더 큰 사본은 만들지 않음
페이스북 링크 미리보기	최소 1200 x 630(약 1.91:1). 1200 x 628도 거의 같은 비율	페이스북 공유 가이드 기준
Google Discover	폭 1200px 이상, 16:9(예: 1200 x 675)	Google Discover 가이드라인 기준

워드프레스 이미지 사이즈 한눈에 보기

업로드하는 모든 이미지는 등록된 사이즈마다 크기를 바꾼 사본이 만들어집니다. 아래는 워드프레스 코어가 등록하는 사이즈이며, 기본값은 Theme Handbook과 코어 함수 레퍼런스를 따릅니다.

사이즈 이름	기본 크기	설정 > 미디어에서 바꿀 수 있나요?	비고
thumbnail	150 x 150, 자르기	예	”정확한 크기로 자르기” 체크박스가 있음
medium	최대 300 x 300	예	비율을 유지하며 축소
medium_large	폭 768, 높이 제한 없음	아니요	주로 srcset에서 사용
large	최대 1024 x 1024	예	비율을 유지하며 축소
1536x1536	최대 1536 x 1536	아니요	고밀도 화면용으로 워드프레스 5.3에서 추가
2048x2048	최대 2048 x 2048	아니요	고밀도 화면용으로 워드프레스 5.3에서 추가
post-thumbnail	테마가 설정	아니요	테마가 set_post_thumbnail_size()를 호출할 때만 존재
full	업로드한 원본	아니요	아주 큰 이미지는 먼저 축소됨(아래 참고)

“최대”는 워드프레스가 비율을 유지하면서 이미지를 그 상자 안에 맞춘다는 뜻입니다. 2000 x 1000 사진은 large에서 1024 x 1024가 아니라 1024 x 512가 됩니다.

테마와 플러그인은 add_image_size()로 사이즈를 더 추가하는 경우가 많습니다. 예를 들어 WooCommerce는 자체 상품 이미지 사이즈를 추가하는데, 이는 WooCommerce 상품 이미지 사이즈 가이드에서 다룹니다.

큰 이미지에는 규칙이 하나 더 있습니다. 워드프레스 5.3부터는 이미지의 폭이나 높이가 2560픽셀을 넘으면 워드프레스가 이를 축소하고, 그 축소본을 사용할 수 있는 가장 큰 사이즈로 씁니다. 이 기준값은 big_image_size_threshold 필터에서 오며 기본값은 2560입니다. 파일 이름에 -scaled가 붙어 있고 이 기능을 꺼야 할지 궁금하다면 워드프레스에서 scaled 이미지를 끄는 방법을 읽어 보세요.

특성 이미지 사이즈는 실제로 어디서 정해질까

특성 이미지는 글 편집기의 특성 이미지 패널에서 지정한 이미지를 말합니다. 방문자에게 무엇이 보일지는 테마가 그 이미지를 어떻게 출력하느냐에 달려 있습니다.

클래식 테마

클래식 테마는 functions.php에서 특성 이미지를 켜고 사이즈를 등록합니다.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

set_post_thumbnail_size()는 post-thumbnail이라는 이름의 사이즈를 등록합니다. 세 번째 인수가 자르기를 제어합니다. false(기본값)이면 워드프레스는 이미지를 1200 x 675 안에 들어가도록 축소합니다. true이면 가운데를 기준으로 정확히 1200 x 675로 잘라내므로, 16:9 상자 밖의 부분은 사라집니다. array( 'center', 'top' ) 같은 배열을 넘겨서 남길 부분을 고를 수도 있습니다.

많은 테마가 템플릿별로 이름 붙은 사이즈를 추가로 등록합니다.

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

그리고 템플릿이 이름으로 하나를 고릅니다.

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

이름 없이 호출하면 the_post_thumbnail()은 post-thumbnail을 씁니다. 그래서 클래식 테마의 실제 특성 이미지 사이즈는 템플릿에 적힌 이름의 사이즈이고, 블로그 아카이브는 단일 글 화면과 다른 사이즈를 쓸 수도 있습니다.

블록 테마

이 사이트의 무료 테마를 포함한 블록 테마는 특성 이미지 블록으로 특성 이미지를 출력합니다. 코어 블록 레퍼런스에는 sizeSlug(어떤 등록된 사이즈를 불러올지), aspectRatio, width, height, scale 같은 설정이 나와 있습니다.

그래서 확인할 곳이 달라집니다. 외모 > 편집기를 열고 단일 글 템플릿을 편집한 다음 특성 이미지 블록을 선택하세요. 사이드바에 어떤 이미지 사이즈를 불러오는지, 가로세로 비율이 설정되어 있는지가 표시됩니다. 가로세로 비율은 브라우저에서 CSS로 적용되므로 파일은 그대로이고 보이는 틀만 바뀝니다. 블록이 16:9 틀을 요구하는데 이미지가 정사각형이면 일부가 가려집니다. 아카이브와 홈 템플릿은 단일 글 템플릿과 다른 설정을 쓸 수 있으니 하나씩 확인하세요.

내 테마의 특성 이미지 사이즈 찾는 법

아래 방법을 순서대로 시도하세요. 처음으로 답을 주는 방법이면 충분합니다.

1. 테마 문서를 확인합니다. 잘 만든 테마는 권장 특성 이미지 사이즈를 적어 둡니다. 나와 있다면 그 사이즈를 쓰세요.

2. WP-CLI로 등록된 사이즈 목록을 봅니다. 명령줄을 쓸 수 있다면 wp media image-size가 등록된 모든 사이즈를 폭, 높이, 자르기 설정, 비율과 함께 보여줍니다.

   wp media image-size

3. 테마 파일을 검색합니다. 클래식 테마라면 functions.php(와 거기서 불러오는 파일)에서 set_post_thumbnail_size와 add_image_size를 찾고, single.php나 템플릿 파트에서 the_post_thumbnail()에 넘기는 이름을 확인합니다. 블록 테마라면 위에서 설명한 대로 사이트 편집기에서 특성 이미지 블록을 확인합니다.

4. 공개된 글을 검사합니다. 특성 이미지를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택한 뒤 src의 파일 이름을 읽습니다. 워드프레스는 크기를 바꾼 사본의 파일 이름에 크기를 붙이므로, my-photo-1200x675.jpg라면 테마가 1200 x 675 사본을 불러왔다는 뜻입니다. 좁은 화면에서는 브라우저가 더 작은 사본을 고를 수 있으니 srcset도 보세요. 이름에 크기가 없다면 원본 크기 파일이 쓰인 것입니다.

목표 사이즈를 알았다면, 여러 장을 한꺼번에 올리기 전에 샘플 이미지 하나를 이미지 사이즈 도구에 넣어 각 사본이 어떻게 나올지 확인하세요.

업로드할 사이즈 고르기

테마의 사이즈를 알고 나면, 결과물이 제대로 보일지는 네 가지 선택에 달려 있습니다.

• 폭. 최소한 테마가 표시하는 폭으로 올리세요. 휴대폰과 노트북의 고밀도 화면에서 선명하게 보이려면 그 폭의 약 두 배를 목표로 하세요. 폭 1200px 자리라면 2400px입니다. 워드프레스는 업로드한 이미지로 더 작은 사본만 만들고 더 큰 사본은 만들지 않으므로, 너무 작은 원본은 업로드 후 이미지가 흐려지는 가장 흔한 원인입니다.
• 가로세로 비율. 테마의 자르기 비율에 맞추세요. 16:9로 자른다면 16:9 이미지를 주고, 하드 크롭에 머리나 글자가 잘리지 않도록 피사체를 가운데 가까이에 두세요.
• 파일 용량. 폭 2400px 사진을 적당한 품질의 JPEG로 저장하면 보통 몇백 킬로바이트입니다. 6000px 카메라 원본을 올리면 일만 늘어납니다. 워드프레스는 2560px를 넘는 이미지를 어차피 축소하고, 남는 픽셀은 방문자에게 전달되지 않습니다.
• 파일 형식. 서버의 이미지 라이브러리가 지원한다면 워드프레스는 5.8 버전부터 WebP, 6.5 버전부터 AVIF 업로드를 허용합니다. 둘 다 비슷한 품질에서 보통 JPEG보다 파일이 작습니다.

소셜 공유 이미지는 별개의 문제

누군가 글을 페이스북, 링크드인 등에 공유하면 미리보기는 og:image 태그에서 가져오며, SEO 플러그인은 보통 이 태그를 특성 이미지로 채웁니다. 페이스북 공유 문서는 최소 1200 x 630 픽셀, 가능한 한 1.91:1에 가까운 비율의 이미지를 권장합니다.

1200 x 628을 권장하는 곳도 볼 수 있습니다. 이 크기는 거의 정확히 1.91:1이고, 1200 x 630은 약 1.90:1입니다. 높이 차이는 2픽셀뿐이니 어느 쪽을 써도 됩니다.

테마의 표시 사이즈도 1.91:1에 가깝다면 1200 x 630(또는 2400 x 1260) 이미지 하나로 둘 다 해결됩니다. 테마가 16:9나 정사각형으로 자른다면 중요한 내용을 왼쪽과 오른쪽 가장자리에서 떨어뜨려 두거나, SEO 플러그인에서 별도의 소셜 이미지를 지정하세요.

Google Discover에는 별도의 이미지 권장 사항이 있습니다. Google Discover 가이드라인은 폭 1200px 이상, 전체 픽셀 수 300,000 초과, 1200 x 675 같은 16:9 비율의 이미지를 권장합니다. 큰 이미지가 표시되려면 max-image-preview:large robots 설정도 필요한데, 워드프레스는 5.7 버전부터 이를 기본으로 추가합니다. 단, 사이트에서 검색 엔진이 색인하지 않도록 설정한 경우는 예외입니다.

특성 이미지 사이즈 바꾸는 법

어디서 바꿀지는 사이즈 종류와 테마에 따라 달라집니다.

코어 사이즈(thumbnail, medium, large). 설정 > 미디어로 가서 폭과 높이를 바꿉니다. 미디어 설정 화면 문서에 썸네일 자르기 체크박스를 포함한 각 항목이 설명되어 있습니다.

클래식 테마의 테마 사이즈. 부모 테마는 수정하지 마세요. 테마를 업데이트하면 변경 내용이 덮어써집니다. 새 값은 자식 테마의 functions.php에 추가하세요. 같은 이름으로 사이즈를 다시 등록하면 교체되며, 자식 테마의 설정은 부모 테마보다 나중에 실행되어야 합니다.

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

우선순위 11은 기본 우선순위 10으로 연결된 부모 테마보다 이 코드가 나중에 실행되게 합니다. 부모 테마의 코드를 확인하고, 더 늦은 우선순위를 쓴다면 맞춰서 조정하세요.

블록 테마. 사이트 편집기 템플릿에서 특성 이미지 블록의 이미지 사이즈와 가로세로 비율을 바꿉니다. 코드는 필요 없고, 그 템플릿을 쓰는 모든 글에 적용됩니다.

이미지 한 장만, 코드 없이. 이미지 한 장에서 자를 때 남길 부분을 고르려면 미디어 > 라이브러리에서 이미지를 열고 이미지 편집을 클릭하세요. 테마의 비율에 맞게 자르거나(자르기 도구에 16:9 같은 가로세로 비율을 입력할 수 있습니다) 크기를 조정한 뒤 저장합니다. 워드프레스는 이 변경을 그 이미지의 모든 사이즈에 적용하고 원본 파일은 남겨 두므로, 나중에 원본 이미지 복원으로 되돌릴 수 있습니다.

기존 썸네일 재생성하기

바꾼 사이즈는 새 업로드에만 적용됩니다. 미디어 라이브러리에 이미 있는 이미지는 다시 만들기 전까지 예전 사본을 유지합니다. wp media regenerate 명령이 이 작업을 합니다.

wp media regenerate --yes

WP-CLI 문서에 나오는 유용한 옵션:

• --image_size=hero-wide는 그 사이즈만 다시 만듭니다. 여러 사이즈라면 이 플래그를 반복하세요.
• --only-missing은 아직 없는 사이즈만 만들고 기존 파일은 건드리지 않아서, 새 사이즈를 추가한 뒤에 더 빠릅니다.
• --skip-delete는 예전 썸네일 파일을 남겨 둡니다. 다른 사이트, 뉴스레터, 피드가 그 파일에 직접 링크하고 있다면 사용하세요.

명령줄을 쓸 수 없다면 WordPress.org 플러그인 디렉터리의 Regenerate Thumbnails 플러그인으로 관리자 화면에서 같은 작업을 할 수 있습니다. 재생성은 많은 파일을 다시 쓰므로, 라이브러리가 크다면 먼저 백업하세요.

흔한 실수

• 1200 x 630에서 멈추는 것. 좋은 출발점이고 링크 미리보기에도 맞지만, 테마가 16:9나 정사각형으로 자르면 이미지 일부가 잘립니다. 여러 장을 한꺼번에 올리기 전에 테마의 사이즈를 확인하세요.
• “원본을 지키려고” 자동 생성 사이즈를 끄는 것. 테마에 작은 사본이 없으면 모든 화면에서 원본 파일을 불러오게 되어 휴대폰에서 페이지가 느려질 수 있습니다. 크기를 바꾼 사본은 바로 이것을 막기 위해 있습니다.
• 이미지 사이즈 코드를 고치고 재생성을 건너뛰는 것. 코드는 작동하지만 새 업로드에만 적용됩니다. 많은 사람이 사이즈 변경이 “아무 효과가 없었다”고 생각하는 이유입니다.
• 부모 테마에서 사이즈를 바꾸는 것. 다음 테마 업데이트 때 사라집니다. 자식 테마나 사이트 편집기를 쓰세요.

사이즈와 비율을 맞추고 재생성까지 했는데도 이미지가 이상하게 보인다면, 브라우저가 불러온 파일 이름을 이미지 사이즈 도구가 알려주는 워드프레스 생성 사이즈와 비교해 보세요. 서로 다르다면, 워드프레스와 방문자 사이에 있는 최적화 플러그인이나 CDN 이미지 리사이저가 자체 버전을 보내고 있는 경우가 많습니다.