워드프레스 썸네일 이미지 다루기

썸네일(thumbnail) 이미지라고 하면 통상 원본 이미지의 작은 크기 이미지를 말합니다. 원본 이미지의 사이즈가 클 경우 작은 크기의 이미지를 별도로 만들어 두고 글 목록이나 글 소개 페이지 같은 곳에서 원본 이미지 대신 사용함으로써 원본 이미지를 로드하는데 따르는 처리 속도나 대역폭 문제를 해결하기 위해 흔히 사용됩니다.

대부분의 웹사이트에서는 이런 썸네일 이미지를 사용하는 경우가 많고 워드프레스에서도 마찬가지입니다. 워드프레스는 기본으로 여러 크기의 썸네일 이미지를 제공하며 또한 사용자(또는 개발자)가 직접 썸네일 이미지를 추가하거나 크기를 변경할 수 있게 기능을 제공합니다.

이렇듯 썸네일 이미지는 자주 사용하고 또 꼭 필요한 기능이긴 하지만 의외로 입문자가 다루기엔 조금 복잡하고 까다로운 부분들도 있습니다. 이 글에서는 워드프레스 썸네일 이미지의 기본 개념과 사용법에 대해 간단하게 소개합니다.

미디어 라이브러리와 썸네일 이미지 사용법

워드프레스는 설치와 함께 사진이나 이미지(‘미디어’라고 부름)를 업로드할 수 있는 기능을 제공합니다. 워드프레스 관리자에는 “미디어 라이브러리”라는 메뉴가 있고 이곳을 통해 모든 이미지 파일들을 관리할 수 있다는 건 워드프레스 사용자라면 누구나 아는 사실입니다.

그림. 워드프레스 미디어 라이브러리

우리가 포스트 편집기를 통해 이미지를 업로드하건 아니면 미디어 라이브러리에서 직접 추가하건 워드프레스에서 업로드한 모든 이미지 파일들은 바로 이곳 미디어 라이브러리에서 확인하고 관리할 수 있습니다.

이렇게 워드프레스에 새 미디어 파일을 하나 업로드할 때마다 워드프레스는 내부적으로 해당 미디어 파일의 썸네일 이미지도 자동으로 생성합니다. 디폴트로 워드프레스는 업로드하는 하나의 원본 이미지에 대해 대(large), 중(medium), 소(small) 크기로 3개의 서로 다른 크기의 썸네일 이미지를 추가합니다. 워드프레스가 추가하는 썸네일 이미지의 크기는 관리자 메뉴의 “설정 > 미디어”에서 다음과 같이 확인할 수 있습니다.

그림. 미디어 설정

여기서 보면 워드프레스가 작은 크기(흔히 ‘썸네일’이라 부르는), 중간 크기, 최대 크기의 3가지 이미지를 추가하는 것을 확인할 수 있습니다. 위 값은 워드프레스를 설치하면 워드프레스가 디폴트로 셋팅하는 썸네일의 크기로 대/중/소 각각 1024×1024/300×300/150×150 픽셀의 크기를 갖습니다. 물론, 당연하게도, 여기의 설정값을 조정하면 워드프레스가 생성하는 썸네일의 크기를 조정할 수 있습니다.

이렇게 만들어진 썸네일 이미지는 워드프레스에서 글을 작성하거나 페이지를 만들 때 본문 속에 붙여 넣을 수 있습니다. 포스트 편집기를 예로 들면, 편집기에서 “미디어 추가” 버튼을 눌러 미디어를 추가해보면 미디어 삽입 창에 다음과 같이 미디어의 크기를 선택할 수 있는 옵션을 확인할 수 있습니다. 여기서 크기를 선택하면 해당 크기의 이미지가 글이나 페이지 본문에 삽입됩니다.

그림. 미디어 삽입 시 크기 선택

아마도 여기까지는 워드프레스를 조금이라도 사용해 본 적이 있는 분들이라면 대부분 아는 내용일 것입니다. 그리고 사실 이게 워드프레스에서 이미지를 다루는 방법의 전부입니다.

특성 이미지(Featured Image) 추가하기

워드프레스에는 썸네일 이미지와는 별개로 특성 이미지(Featured Image)라는 기능이 있습니다. 이 기능은 테마에 따라 활성화되기도 하고 활성화되지 않기도 하는 기능입니다만, 요즘 나오는 대부분의 테마는 이 기능을 지원하기 때문에 아마 여러분 포스트 편집기의 우측 사이드 메뉴에서도 이 “특성 이미지” 선택창을 확인할 수 있을 것입니다. 그리고 알다시피 여기서 특성 이미지를 선택하면 바로 그 이미지가 해당 포스트를 대표하는 대표 이미지로 사용됩니다.

그림. 특성 이미지 선택 창

이렇게 특성 이미지 기능이 추가되면 워드프레스는 앞서 살펴 본 대/중/소 3개의 썸네일 이미지와는 별도로 특성 이미지를 위한 이미지 크기를 또 하나 추가합니다. (따라서 이제 하나의 이미지를 업로드하면 원본 이미지를 포함한 총 5개 크기의 이미지가 만들어지게 되는 것입니다)

특성 이미지는 앞서 소개한 통상적인 썸네일 이미지와는 달리, 테마에서 주로 사용됩니다. 가장 일반적인 용법은 포스트의 대표 이미지로 포스트 목록이나 포스트의 본문 상단에 표시되는 경우입니다. 이 WordPress 가이드에서도 보면 모든 글의 상단에 포스트를 대표하는 이미지가 보일 것입니다. 바로 특성 이미지입니다.

그럼 특성 이미지의 크기를 변경하려면 어떻게 하면 될까요? 앞서 말한 대로 특성 이미지는 테마에서 사용되는 이미지이며 따라서 테마 개발자가 그 테마와 가장 잘 어울린다고 판단되는 크기를 선택하여 정하게 됩니다. 통상적으로 테마 속 functions.php 파일을 열어 보면 그 테마에서 사용하는 특성 이미지의 크기를 테마 개발자가 지정해 놓은 것은 확인할 수 있습니다.

아래 코드는 이 사이트에서 사용하는 Twenty Fifteen 테마의 특성 이미지 설정입니다.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 825, 510, true );

이 값을 조정함으로써 특성 이미지의 크기를 변경할 수는 있습니다만, 굳이 그럴 필요가 있는 경우는 거의 없습니다(하지 마세요!!).

부연하자면, 이 특성 이미지 기능은 워드프레스 2.9 버전에서 처음 도입되었는데, 처음엔 “포스트 썸네일(Post Thumbnail)”이란 이름으로 불렸다가 나중에 지금의 “특성 이미지(Featured Image)”라는 이름으로 교체되었지만, 여전히 요즘도 두 이름이 혼용되어 사용됩니다.

썸네일 이미지 크기 조정하기

이제 워드프레스에서 사용하는 썸네일 이미지를 모두 다루었습니다. 마지막으로 썸네일 이미지의 크기를 한번 조정해 보도록 하겠습니다. 앞서 이미 소개한 대로 관리자 메뉴의 “설정 > 미디어” 에서 크기를 변경하면 됩니다.

다만 이 경우 변경된 크기는 변경 이후에 업로드되는 이미지에만 적용되며, 기존에 이미 업로드된 이미지의 크기는 변경되지 않습니다. 이 때 필요한 기능이 썸네일 이미지 재생성(regenerate)하기 기능이며 플러그인을 사용하면 어렵지 않게 해결됩니다. 다음은 대표적인 썸네일 이미지 재성성하기 플러그인 중 하나인 Regenerate Thumbnails플러그인을 사용하여 썸네일을 다시 생성하고 있는 화면입니다.

그림. Regenerate Thumbnails 실행하기

그 밖에도, 필요에 따라서는 워드프레스에서 제공하는 기본 썸네일 크기(대/중/소) 외에 별도로 다른 크기의 썸네일 이미지를 만들고 싶은 경우도 있습니다. 특히 사이트의 규모가 커지게 되면 하나의 이미지에 대해 다양한 크기의 서로 다른 이미지를 만들어 적재적소에 배치하여 사용하고 싶어질 것입니다.

이럴 경우는 물론 워드프레스 API가 제공하는 add_image_size 함수를 워드프레스 테마 파일 속에서 호출하면 되지만, 굳이 코딩을 할 필요 없이 플러그인으로도 간단하게 처리할 수 있습니다. 이 경우도 마찬가지로 여러 가지 플러그인이 있겠지만, 여기서는 그 중 하나인 Simple Image Sizes 플러그인을 소개해 봅니다.

그림. Simple Image Sizes 플러그인

이 플러그인을 설치하고 활성화한 다음 다시 “설정 > 미디어” 메뉴로 가면 다음과 같이 미디어 설정 화면이 업데이트되어 있음을 확인할 수 있습니다.

그림. Simple Image Sizes 플러그인 설치 후 미디어 설정

여기서 새로운 이미지 크기를 추가하거나 기존에 추가된 이미지 크기를 조정(또는 삭제)하고 이미지를 재생성할 수도 있습니다. 이 플러그인의 더 자세한 사용법은 Simple Image Sizes 플러그인 문서를 참고하면 됩니다. 🙂