티스토리 블로그를 운영하면서
포스팅 내용을 한눈에 알아볼 수
있는 썸네일을 활용하기 시작하였다.
마침 저작권 필요 없이 쉽고 간편하게
사용할 수 있는 미리캔버스라는
무료 디자인 툴을 알면서부터
좀 더 적극적으로 활용하고 있다.
그런데 필자가 PC나 모바일에
익숙하지 않은 세대이다 보니까
아무래도 썸네일을 이용하는데
좀 어려움이 있다.
썸네일을 대표 이미지로 지정을
해 놓아도 노출되는 것을 보면
위 또는 아래가 잘리는 경우가
종종 발생하는데 도대체 왜 이렇까?
이를 해결하기 위해 어떤 사람은
html을 수정하기도 하지만
필자에게는 좀 어려운 일이라
간단히 해결할 수 있는 방법을
생각해 보았다.
필자가 티스토리 블로그에서 실제로
활용한 아래의 3가지 썸네일을
이용해 티스토리 썸네일
왜곡 노출문제를 설명해 보겠다.
PC 티스토리 썸네일 노출
PC를 통해 다음 블로그 섹션에
들어가 미리캔버스를 검색을 해 보면
아래와 같이 노출(두번째)이 된다.
썸네일이 전혀 왜곡 없이 잘 노출되고
있다.
(※ 사실 썸네일 왜곡 노출문제가
있어 수정한 후의 노출 현황이다.)
또한 PC에서 필자 티스토리의
해당 포스팅 페이지에 들어가면
당연히 썸네일은 아무 문제없이
보이고 우측 하단의 썸네일들도
큰 왜곡 없이 잘 노출되고 있다.
그런데 PC에서 필자 티스토리
(6차산업과 식물키우기)에 들어가면
최신글들의 썸네일이 뭔가 깨진 듯이
노출이 된다.
상기의 3개 썸네일이 위아래로
잘려나간 것을 알 수 있다.
(※ ①번 썸네일은 상기의 ①번
썸네일과 다른 이미지이지만 형태와
사이즈가 비슷해 대체해서 제시하고
있다.)
또한 PC에서 필자의 티스토리
블로그 관리 홈 하단에 있는 최근 글을
보면 ①번과 ②번 썸네일의 경우
위아래가 잘려있다.
(※ ③번 썸네일은 수정작업을 거쳤기
때문에 제대로 노출되고 있다.)
모바일 티스토리 썸네일 노출
모바일로 필자의 티스토리 블로그에
들어가 최근 글을 보면 ②번 썸네일의
위아래가 역시 잘려 보인다.
(※ ③번 썸네일은 수정작업을 거쳤기
때문에 제대로 노출되고 있다.)
인기글들의 썸네일 역시 위아래가
잘려 있다.
모바일로 필자 티스토리 블로그의
전체보기를 보면 역시 ③번을 제외한
모든 썸네일이 잘려 있다.
맨 위 ①번 ②번 썸네일과 비교해 보면
금방 알 수 있다.
(※ ③번 썸네일은 수정작업을
거친 후의 이미지이다.)
사실 어떤 위치에서는 대표이미지로
썸네일이 제대로 노출이 되고 있지만
또 어떤 위치에서는 위아래가
잘려있는 것을 알 수 있다.
티스토리 썸네일 왜곡 노출문제 간단 해결방법
필자의 관점에서 필자가 연구한
결과를 바탕으로 이에 대한
해결방안을 제시하면 다음과 같다.
① 정사각형 썸네일을 사용한다.
② 썸네일 사이즈는
400 pxX400 px로 한다.
(※ 사이즈를 더 크게 하는 게 노출에
좋다고도 하는데 잘 모르겠다.)
③ 썸네일 대표이미지가 잘리는 것을
보니 위, 아래, 좌, 우로 잘려나간다.
따라서 이렇게 잘려 나가지 않도록
공통부분만 살려 노출되는 부분을
조정하면 어느 위치에서도
잘려나가지 않을 수 있다.
티스토리 썸네일 노출 공통부분
필자가 사용하는 400px X 400px
썸네일 사이즈를 16개 정사각형으로
나누면 가운데 4개의 정사각형이
공통부분이 된다.
필자가 위에서 제시하고 있는
③번 썸네일의 경우 위 가운데
빨간 부분(공통부분) 안에 텍스트를
넣어 중요한 텍스트는 잘려나가지
않게 수정한 썸네일이다.
일부 잘려나가는 경우도 있었지만
대부분 썸네일 노출에서 왜곡없이
제대로 텍스트 내용을 전달할 수
있었다.
맨 위 썸네일도 이를 근거로
작성된 썸네일이다.
티스토리 썸네일 만드는 방법에
대해서는 아래 미리캔버스 사용법
참조
티스토리 썸네일 만들기 - 미리캔버스 사용법
오늘은 미리캔버스 사용법 ①로 티스토리 썸네일 만들기에 대해 설명하겠다. 먼저 썸네일 뜻이 뭐야? 썸네일 뜻 thumbnail 썸네일 thumbnail은 엄지손톱을 말하는데 인터넷 홈페이지나 소셜 미디어,
6-cha.tistory.com
댓글