티스토리 썸네일 설정방법 그리고 2가지 팁 꼭 확인하시고 블로그 운영하시길 바랍니다.
티스토리 블로그를 운영하다 보면 썸네일 설정이 의외로 중요한 부분이구나 알게 되십니다. 썸네일은 글의 첫인상을 좌우하는 이미지로, 클릭수와 방문자 유입에 큰 영향을 줍니다.
하지만 자동 크롭, 비율 문제, 이미지 해상도 저하 등 다양한 이슈로 썸네일이 제대로 보이지 않는 경우가 많습니다. 이 글에서는 티스토리 썸네일의 2가지 팁 바로 자동 크롭 문제를 방지하는 방법과 함께 최적화된 썸네일 이미지를 설정하는 팁을 자세히 안내드립니다.
티스토리 썸네일 설정 꼭 해야할까?
티스토리를 운영하는 많은 분들이 블로그 디자인이나 글의 내용에는 신경을 많이 쓰지만, 의외로 썸네일에 대해서는 신경을 안 쓰시는 경우가 많습니다.
썸네일은 블로그 리스트, 메인 페이지, 그리고 SNS 공유 시에도 그대로 보여지기 때문에 첫 클릭을 유도 할 수 있는 중요한 이미지입니다.
특히 이미지 중심의 글이 많은 IT, 리뷰, 육아, 요리 블로그에서는 썸네일의 품질이 조회수를 올리는데 많은 도움을 받습니다.
하지만 기본 설정 그대로 글을 발행하면 자동으로 본문 내 첫 번째 이미지를 썸네일로 지정하는 방식으로 운영되다 보니, 원하지 않는 이미지가 잘리거나 흐릿하게 보여 방문자의 클릭을 유도하기 어려워질 수 있습니다.
이를 방지하기 위해서는 썸네일 설정하는 방법을 알고, 직접 만들어서 업로드하는 연습을 자주 해보면 좋습니다.
티스토리 썸네일 설정방법은?
티스토리 썸네일을 설정하려면 글 작성 시 이미지 업로드 후, 해당 이미지를 본문에 삽입하고 대표 이미지로 지정해야 합니다.
대표 이미지를 설정하지 않으면 첫 번째 이미지나 자동 생성된 이미지가 썸네일로 표시될 수 있습니다.
글 작성 화면에서 우측 하단 또는 우측 상단의 대표 이미지 설정 또는 썸네일 설정 버튼을 눌러 원하는 이미지를 선택하세요. 썸네일은 블로그 디자인에 따라 크기와 비율이 다르게 보일 수 있으므로, 정사각형 혹은 3:2 비율의 이미지를 사용하는 것이 깔끔하게 보입니다. 대표 이미지 설정을 완료한 뒤에는 저장 후 발행하면 썸네일이 자동 적용됩니다.
썸네일 자동 크롭 방지하는 팁
티스토리는 썸네일을 자동으로 크롭 해서 출력하는 경우가 많습니다. 특히 스킨에서 지정한 썸네일 비율과 맞지 않는 이미지를 업로드할 경우 이미지의 중요한 부분이 잘릴 수 있습니다.
이 문제를 방지하려면 다음과 같은 방법을 사용하시면 좋습니다.
- 1. 이미지 비율 맞추기: 대부분의 티스토리 반응형 스킨은 가로형 3:2 또는 16:9 비율을 선호합니다. 썸네일용 이미지를 만들 때는 가급적 해당 비율에 맞게 제작하는 것이 중요합니다.
- 2. 썸네일 전용 이미지 삽입: 본문 첫머리에 썸네일용으로 사용할 이미지를 따로 삽입하세요. 이 이미지는 본문 흐름과 무관해도 상관없습니다.
- 3. 대표 이미지 직접 설정: 글을 발행할 때 대표 이미지 설정 기능을 사용하면, 티스토리 메인 및 리스트에 표시되는 썸네일을 원하는 이미지로 지정할 수 있습니다.
대표 이미지 설정은 글쓰기 창 하단에서 직접 업로드하거나 본문 이미지 중 선택하는 방식으로 가능합니다. 만약 이 기능이 보이지 않는다면, 에디터 설정을 확인해 보시고 적용하시면 됩니다.
이미지 최적화로 로딩 속도 개선하는 팁
썸네일 이미지는 단순히 예쁜 것뿐 아니라 블로그 글을 클릭시 빠르게 페이지가 보여지는 부분이 무엇보다 중요합니다.
고화질 이미지를 그대로 사용하면 로딩 속도가 느려지고, 이는 방문자가 바로 뒤로가기를 눌러 블로그에 좋지 않은 영향을 줄 수 있습니다. 따라서 다음의 팁을 활용해 이미지 사이즈도 줄이고 확장명도 확인후 썸네일을 만드는 것이 좋습니다.
- 1. 이미지 용량 줄이기: JPG나 PNG 파일은 Tinypng, Squoosh 등의 웹사이트에서 용량을 줄일 수 있습니다. 최대한 200KB 이하로 줄이시는 것이 좋습니다.
- 2. 웹 전용 형식 활용: 가능하다면 WebP 포맷을 사용하는 것도 추천드립니다. WebP는 용량이 작고 품질 유지가 뛰어나 티스토리에서도 무리 없이 사용할 수 있습니다.
- 3. 이미지 크기 조절: 1200px 이내의 너비를 가진 이미지가 대부분의 스킨에 잘 맞습니다. 지나치게 큰 해상도의 이미지는 크롭되거나 모바일에서 비율이 깨질 수 있으므로 주의가 필요합니다.
또한 티스토리 스킨에 따라 썸네일을 불러오는 방식이 다르기 때문에, 이미지 최적화와 함께 스킨 설정을 수정하시는 것이 좋습니다. 일부 스킨은 리스트에서 썸네일을 비율에 맞춰 조정하는 CSS 설정을 통해 자동 크롭을 방지할 수도 있습니다.
티스토리 스킨에 따라 썸네일 스타일이 달라요?
티스토리에서는 다양한 반응형 스킨을 지원하고 있으며, 각각의 스킨마다 썸네일을 불러오는 방식과 스타일이 다릅니다.
어떤 스킨은 세로형 이미지를 잘리게 표시하고, 어떤 스킨은 전체 비율을 유지한 채 여백으로 처리하기도 합니다.
대표적인 인기 스킨 예시로는 북클럽, 서니, 플레인 등이 있으며, 설정에 따라 다음과 같은 차이가 나타납니다.
- 스킨 설정 메뉴에서 썸네일 비율 조절 여부 확인
- 리스트 모듈 또는 카드형 레이아웃 여부에 따라 썸네일 크기 달라짐
- 모바일과 PC에서 썸네일 출력 방식이 다를 수 있음
따라서 스킨을 처음 선택할 때 썸네일 표시 방식도 함께 고려해야 하며, 이미 사용 중인 스킨이라면 CSS를 조정하거나 썸네일 전용 플러그인을 활용해 보는 것도 좋은 방법입니다.
필요시, HTML/CSS를 약간 수정해 썸네일 영역 수정, 오버플로우 방지 등을 설정하면 더욱 깔끔하게 정리할 수 있습니다.
마무리 티스토리 썸네일 만들고 블로그 운영하기
지금까지 티스토리 썸네일 설정방법 그리고 2가지 팁 (자동 크롭 문제를 해결하는 방법과 이미지 최적화 팁)에 대해 자세히 알아보았습니다.
썸네일은 단순한 이미지 이상의 역할을 하며, 사용자의 클릭과 검색 유입에도 큰 영향을 미치는 부분입니다. 자동 크롭을 방지하기 위한 이미지 비율 설정, 대표 이미지 직접 지정, 스킨 설정 확인을 필수로 하셔서 블로그 잘 운영하시길 바랍니다.