티스토리 블로그 초보를 위한 대표 이미지 안 잘리게 만들기

블로그를 운영한 지 한 달 넘은 초보입니다.

블로그에 글을 게시하다 보면 대표 이미지가 정렬이 되지 않거나, 좌우가 잘리거나 그림의 일부만 표시되어 현상이 있어 이에 대한 개선 방안을 찾고 있었습니다. HTML이나 CSS를 잘 아시는 분은 티스토리에서 제공하는 스킨을 분석해서 html과 css를 수정을 가능하겠지만, 저와 같이 HTML 익숙하지 않은 분들께는 쉽지 않은 방법입니다. 블로그 스킨을 변경할 때마다 HTML과 CSS를 수정하는 것은 결코 쉬운 문제는 아닙니니다. 그래서 HTML 전문가 아닌 일반인 분들도 쉽게 대표 이미지가 잘리지 않도록 설정할 수 있는 방법을 소개드립니다.

티스토리 블로그에 게시글의 작성하고 포스팅하면 대표 이미지가 설정됩니다. 대표 이미지는 해당 게시글에 올린 첫번째 이미지로 자동으로 지정되고, 또는 글 작성자가 특정 이미지를 지정할 수도 있습니다. 티스토리 블로그에서는 리스트 메뉴에서 소개글 옆에 아이콘처럼 대표 이미지가 표시되고, 트위터에 올리는 경우에도 대표 이미지를 표시하게 됩니다.

블로그의 내용도 중요하지만 이미지로 좌우로 잘려 깔끔하지 못 한 인상이나 그 의미를 이해하기 어렵게 됩니다. 예를 들어 제 게시글 보면 블로그 리스트 화면에서 대표이미지의 일부만 표시되어 좌우가 잘리고, 대표 이미지가 의미 전달을 잘하지 못하고 있습니다. 트위터에 블로그 글을 올린 경우에도 티스토리 블로그와 동일하게 대표 이미지의 좌우가 잘려서 보기 좋지 않습니다.

개선 방안

블로그 게시글의 대표 이미지를 알 잘리게 하는 방법은 간단합니다. 대표 이미지를 게시글 본문에 이미지를 사용하지 않고 적당한 크기로 대표 이미지를 미리 만들어 놓고 게시글을 '공개'로 포스팅할 때 설정하는 것입니다. 이 과정에서는 대표 이미지를 잘리지 않도록 크기 조절하는 것이 중요합니다. 적당한 크기의 대표 이미지의 Template을 미리 만들어 놓고, 파워포인트나 이미지 에디터를 활용해서 필요한 부분만 다시 편집해서 올리면 아주 쉽게 대표이미지를 만들 수 있습니다. 대표이미지 동영상 과정을 동영상으로 올렸습니다.

게시글에 대한 대표 이미지를 준비한다. : 블로그 대표이미지 Template 사용
게시글을 '공개' 포스팅할 때 미리 준비한 대표 이미지를 선택한다.

대표 이미지 설정 방법

대표 이미지 template은 아래와 같이 259x239 크기의 png 파일을 미리 준비합니다. 아래 이미지 크기는 경험적으로 설정한 것으로 가로x세로 비율을 유지한 상태에서 이미지 크기를 조절해도 상관없습니다. PC, 모바일, SNS에서 각기 사용하는 이미지 크기가 다르기 때문에 '블로그 대표 이미지'의 녹색 영역만 사용하고 나머지 영역은 여백으로 사용해야 합니다. PC에서는 블로그 대표 이미지를 바탕으로로 제목을 흰색으로 표시하기 때문에 가독성을 높이기 위해서 대표 이미지에서는 가급적이면 흰색은 피하는 것이 좋습니다.