티스토리에서 제공하는 '북클럽(Book Club)' 스킨

 

티스토리에서 제공하는 '북클럽(Book Club)' 스킨은 깔끔하고 현대적인 디자인으로 많은 블로거들에게 사랑받고 있습니다. 그러나 기본 설정에서는 썸네일 이미지가 세로로 길쭉한 직사각형 형태로 표시되어, 일부 사용자들은 이를 정사각형으로 변경하고자 합니다. 이러한 변경은 블로그의 시각적 일관성을 높이고, 방문자들에게 더 나은 사용자 경험을 제공할 수 있습니다.

 

1. 북클럽 스킨의 기본 썸네일 크기와 문제점

기본적으로 북클럽 스킨의 썸네일은 세로로 긴 직사각형 형태로 설정되어 있습니다. 이러한 형태는 일부 이미지가 잘리거나 왜곡되어 보일 수 있으며, 특히 다음과 같은 문제점을 야기할 수 있습니다:

• 시각적 불균형: 세로로 긴 썸네일은 전체적인 레이아웃에서 불균형을 초래할 수 있습니다.
• 이미지 왜곡: 썸네일로 사용되는 이미지가 원본 비율과 다르게 표시되어 왜곡될 수 있습니다.
• 사용자 경험 저하: 방문자들이 콘텐츠를 미리보기 어려워질 수 있습니다.

2. 썸네일 크기 수정 방법

썸네일 크기를 정사각형으로 변경하려면 다음과 같은 절차를 따라야 합니다:

1. 스킨 편집 모드 진입:
   • 티스토리 블로그 관리자 페이지에서 '꾸미기' > '스킨 편집'을 클릭합니다.
2. HTML 편집:
   • '스킨 편집' 페이지에서 'HTML 편집' 버튼을 클릭하여 편집 모드로 들어갑니다.
3. s_index_article_rep 태그 찾기:
   • HTML 편집 창에서 Ctrl + F를 눌러 <s_index_article_rep> 태그를 검색합니다.
4. 썸네일 크기 수정:
   • 해당 태그 내에서 C230X300과 같은 형식의 코드를 찾습니다. 이 코드는 썸네일의 크기를 나타내며, 앞의 숫자는 가로 크기, 뒤의 숫자는 세로 크기를 의미합니다. 이를 정사각형 비율로 변경하려면 두 숫자를 동일하게 설정합니다. 예를 들어, C230X230으로 수정합니다.
5. CSS 수정:
   • HTML 편집 창 상단에서 'CSS' 탭을 클릭합니다.
   • Ctrl + F를 눌러 .list-type-thumbnail .thumbnail 클래스를 검색합니다.
   • 해당 클래스 내의 padding-top 값을 100%로 변경하여 썸네일을 정사각형으로 표시되도록 합니다.
6. 적용 및 확인:
   • 모든 수정을 완료한 후 '적용' 버튼을 눌러 변경 사항을 저장합니다.
   • 블로그 메인 페이지를 새로고침하여 썸네일이 정사각형으로 표시되는지 확인합니다.

3. 썸네일 크기 변경 시 유의사항

• 원본 이미지 비율 유지: 썸네일로 사용할 이미지는 가능한 한 정사각형 비율로 제작하거나 편집하여 업로드하는 것이 좋습니다. 이는 이미지의 왜곡을 방지하고, 썸네일이 깔끔하게 표시되도록 합니다.
• 이미지 해상도: 썸네일 이미지는 고해상도로 제작하되, 파일 크기가 너무 크지 않도록 최적화해야 로딩 속도를 저하시키지 않습니다.
• 브라우저 캐시 삭제: 변경 사항이 즉시 반영되지 않을 경우, 브라우저의 캐시를 삭제하거나 강력 새로고침(Shift + F5)을 시도해보세요.

4. 썸네일 크기 변경의 효과

• 시각적 일관성 향상: 모든 썸네일이 정사각형으로 통일되면 블로그의 전체적인 디자인이 더욱 깔끔하고 전문적으로 보입니다.
• 사용자 경험 개선: 방문자들이 콘텐츠를 미리보기 쉽게 되어, 원하는 글을 빠르게 찾을 수 있습니다.
• SEO 향상: 일관된 이미지 비율과 최적화된 썸네일은 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칠 수 있습니다.

5. 결론

티스토리 북클럽 스킨의 기본 썸네일 크기는 세로로 긴 직사각형 형태로 설정되어 있지만, 위의 방법을 통해 정사각형으로 변경할 수 있습니다. 이러한 변경은 블로그의 시각적 일관성을 높이고, 방문자들에게 더 나은 사용자 경험을 제공하며, SEO 측면에서도 긍정적인 영향을 줄 수 있습니다. 따라서 블로그의 디자인과 사용자 경험을 향상시키고자 한다면, 썸네일 크기 조정을 고려해보시기 바랍니다.