워드프레스 썸네일 이미지가 흐리게 보이는 경우 선명하게 만드는 방법

워드프레스 카테고리나 태그 또는 블로그 리스트 페이지에서 글을 나열할 때, 썸네일 이미지가 흐려 보이는 경우가 있습니다. 특히 모바일에서 썸네일 이미지가 흐려 보일 수 있습니다. 워드프레스 썸네일 이미지가 흐리게 보이는 경우 대처 방법에 대해 살펴보겠습니다.

문제 인식: 모바일에서 썸네일 이미지가 흐리게 보임

PC에서 블로그 글을 2열 또는 3열로 나열하는 경우 스마트폰에서는 보통 1열로 표시됩니다. Newsmag 테마의 경우를 예를 들어 설명해보겠습니다. 아래 그림과 같이 PC에서는 3열로 표시되는 블럭(Block)이 있습니다.

위에서도 이미지가 약간 흐려보이지만 이미지 자체가 작아서 크게 눈에 거슬리지는 않습니다. 이 썸네일 이미지의 크기는 300x160px입니다. 이 화면을 모바일 기기에서 보면, 특히 큰 화면의 스마트폰에서 보면 이미지가 확대되어 흐리게 보입니다.

참고로 Newsmag 테마 이후에 나온 동일 테마 개발자가 판매하는 Newspaper 테마에서는 썸네일 이미지 크기를 이보다 크게 설정해놓고 작게 표시하기 때문에 이런 현상이 나타나지 않습니다.

위의 그림은 뉴스페이퍼 데모에서 캡처한 것인데요. 스마트폰 화면에서도 이미지가 위의 Newsmag보다는 확실히 선명해보일 것입니다. 그 이유는 이 화면의 썸네일 이미지 크기가 696x464px이기 때문입니다. 이미지 자체가 크기 때문에 PC와 모바일 모두에서 선명하게 보입니다.

물론 이런 경우 썸네일 이미지가 크기 때문에 웹서버에서 더 많은 용량을 차지하고 페이지를 로딩할 때에도 조금 더 시간이 걸릴 수 있습니다. (이미지 지연 로드 기능을 사용하면 체감 페이지 로딩 속도를 높일 수 있습니다.)

워드프레스 썸네일 이미지가 흐리게 보이는 경우 해결 방법

이 경우 두 가지 방법으로 문제를 해결할 수 있을 것 같습니다.

첫 번째는 테마의 템플릿 파일(예: category.php)에서 썸네일 이미지 부분을 찾아서 더 큰 썸네일 이미지로 대체하는 것입니다. 이러한 커스터마이징 작업은 Divi 테마와 같이 커스터마이징이 용이한 테마에서 고려해볼 수 있습니다. 썸네일 이미지를 새로 등록하고 표시하는 방법은 다음 글을 참고하시기 바랍니다.

워드프레스 썸네일 크기 조정 - 워드프레스 중급

두 번째 방법은 썸네일 이미지 크기를 테마 옵션에서 제공하는 경우 썸네일 이미지 크기를 크게 설정하고 CSS로 크기를 줄이는 것입니다.

예를 들어, Newsmag 테마의 테마 패널에서 카테고리 템플릿의 스타일을 지정할 수 있습니다. 아래 그림에서 2열로 표시되는 M3을 지정하면 썸네일 이미지의 너비가 300px가 됩니다. 

하지만 1열로 표시되는 스타일(예; M13)을 선택하면 썸네일 이미지의 폭이 640px로 두 배 정도 크게 설정됩니다. 그러면 PC와 모바일에서 카테고리 페이지의 블로그 글들이 1열로 나열되고 이미지가 선명하게 표시됩니다. 

PC에서 2열 혹은 3열로 표시되기를 원하기 때문에 CSS를 이용하여 글을 2열 혹은 3열로 표시되도록 하면 실제 썸네일 크기는 동일하지만 브라우저에 표시되는 썸네일 크기는 줄어들기 때문에 PC에서도 썸네일이 2컬럼 스타일(예: M3)보다는 선명하게 표시될 것입니다.

1열로 나열된 글들을 2열 또는 3열로 표시하려면 간단한 CSS로 가능합니다.

예시 - 2열로 표시:

How To Create a Two Column Layout

3열로 표시하려면 각 컬럼의 크기를 33%로 지정하면 되고, 4열로 표시하려면 25%로 지정하시기 바랍니다.

이 작업은 기본적인 CSS를 알면 어렵지 않게 가능할 것입니다. 워드프레스에서 CSS 코드를 추가하는 방법은 다음 글을 참고해보세요.

워드프레스 아바다 테마에서 사용자 CSS 코드 추가하기

마치며

이상으로 워드프레스에서 썸네일 이미지가 흐리게 보이는 경우 대처 방법에 대해 살펴보았습니다. 기본적인 개념은 실제 썸네일 이미지의 크기를 두 배 정도 늘린 다음, CSS 코드를 이용하여 작게 표시하는 것입니다. 그러면 큰 이미지를 줄이면 선명하게 보이기 때문에 썸네일이 흐리게 보이는 현상을 방지할 수 있습니다. (반대로 작은 이미지를 늘리면 흐리게 보이겠죠.ㅎ)

Newsmag 테마는 출시된지 오래되었기 때문에 이런 문제에 대한 고민이 없었는 것 같습니다. 자매 테마인 Newspaper 테마에서는 이런 문제를 해결하기 위해 브라우저에 표시되는 썸네일 이미지(특성 이미지)의 크기보다 2배 이상 크게 썸네일 이미지 크기를 설정하고 있는 것 같습니다.

참고:

Newspaper 테마로 제작된 워드프레스 사이트 11