블로그 대표 이미지 섬네일을 만드는 것은 쉬우면서 복잡한 관계를 가지고 있습니다. 단순히 이미지만 만들어 업로드하면 어디에서든 알아서 최적화가 되면 좋겠지만 이미지의 크기, 모양, 비율 등 고려해야 할 사항들이 많이 존재합니다.
이 중에서도 이미지의 모양과 비율이 가장 문제가 되는 요소입니다. 이미지의 크기는 반응형으로 크기를 쉽게 조절할 수 있지만 이미지의 모양은 일부분을 잘라내거나 숨기지 않고서는 해당 스킨의 목록 비율에 딱 맞게 적용시키지는 못합니다. 예를 들자면 직사각형을 정사각형으로 또는 가로로 긴 이미지를 세로로 긴 이미지로 자연스럽게 모양을 변경할 수 없습니다.
섬네일을 만들 때 가장 어렵고 복잡하게 하는 요인은 스킨마다 썸네일을 보여주는 이미지의 크기와 비율이 제각각이고 같은 스킨에서도 메인 페이지 섬네일과 사이드바의 섬네일이 다르기도 하고 커버의 경우 각 커버 별로 다르게 표현되기도 합니다.
이뿐만 아니라 티스토리 앱과 모바일 버전 그리고 다음과 네이버 섬네일 등 각기 다른 섬네일 크기와 비율을 사용하고 있어 하나의 섬네일을 만들어 다양한 곳에 사용하기란 여간 곤란한 것이 아닙니다.
모든 곳에 완벽하게 딱 맞는 섬네일 이미지를 만들거나 적용 시 키수 있는 방법은 없습니다. 단지 각각의 사항에 적당히 맞을 수 있도록 이미지를 만드는 것입니다. 여기서 한 가지 팁을 드리자면 티스토리에서 사용할 섬네일과 검색 포털 같은 외부적으로 사용할 섬네일을 각각 만들어서 사용할 수도 있다는 것입니다.
대표 이미지 섬네일에서 가장 중요한 것은 바로 이미지의 비율입니다. 해당 이미지의 비율만 같다면 앞서 말씀드린 것처럼 이미지의 크기는 얼마든지 줄일 수 있습니다. 제 블로그의 경우 섬네일 이미지의 비율을 정사각형으로만 표현하고 있습니다. 이것은 네이버나 다음 포털 등의 섬네일 비율과도 같고 티스토리 모바일 버전의 섬네일 비율과도 같기 때문에 섬네일을 만드는 일이 조금 수월해지기도 합니다.
그럼 티스토리에서 가장 인기가 많은 북클럽 스킨은 어떤 섬네일 비율을 사용하는지 알아보겠습니다.
북클럽 스킨의 경우 세로로 긴 이미지와 가로로 긴 이미지 그리고 정사적 형 이 이미지까지 다양하게 사용되고 있어 섬네일을 만드는 것이 더욱 어렵습니다.
첫 번째 이미지는 세로로 긴 이미지로 가로 230픽셀 세로 300픽셀입니다.
두 번째 이미지도 세로가 가로보다 긴 이미지로 가로 128픽 세로 168픽셀입니다.
세 번째 이미지는 위 와 반대로 가로가 긴 이미지입니다.
네 번째 이미지는 전형적인 정사각형 이미지입니다.
보신 봐와 같이 같은 스킨 안에서도 다양한 비율의 이미지가 사용됩니다. 북클럽의 경우 하나의 섬네일로 각각의 스타일에 맞게 섬네일을 제작하는 것 자체가 매우 어렵습니다.
특별한 경우가 아니라면 섬네일 이미지를 표현할 때 가능하면 보편적인 비율을 사용하는 것이 좋다고 생각합니다. 예를 들면 1:1 비율의 정사각형 또는 사진에서 가장 많이 사용되는 4:3 비율 16:9 비율 등을 사용하게 되면 예외적인 경우의 수를 하나라도 더 줄일 수 있고 어느 정도 예측도 가능하기 때문에 하나의 섬네일을 좀 더 많은 곳에 적용시킬 수 있도록 만드는 것이 수월해집니다.
북클럽 사용자가 북클럽 스킨에 맞게 섬네일 이미지를 만들는 것도 어렵지만 그렇게 만들어도 스킨을 변경해 버리면 다른 스킨에서는 섬네일 제대로 나오지 않을 가능성이 커집니다.
어떻게 섬네일을 만들면 좋을까
검색 포털에도 적합하면서 지금 현재 사용 중인 스킨과도 어울리고 스킨을 변경해도 큰 변화가 없는 섬네일을 만들어야 합니다.
여러 다양한 방법들이 존재하겠지만 제가 사용하는 방법 중 한 가지를 소개해 보도록 하겠습니다.
우선 저는 포토샵을 사용하고 있고 포토샵으로 400픽셀의 정사적 형 이미지를 만들어 이미지 비율에 따라 잘려나갈 수 있는 부분들을 감안해 상하좌우에 여백을 주고 글자 또는 이미지를 정중앙 두어 섬네일 이미지를 만들고 있습니다.
- 가능하면 글 쓰가 없는 이미지를 사용
- 글자를 넣어야 한다면 중요 키워드만 짧게
- 피사체 또는 글자를 사각형 정중앙에 위치
