티스토리 블로그에서 썸네일이 제대로 출력되지 않는 문제를 해결하는 방법을 알고 계신가요? 이 글에서는 티스토리 북클럽 스킨을 사용하는 경우, 썸네일을 1:1 비율의 정사각형으로 수정하는 방법을 소개합니다. 스킨 설정에서 HTML 코드를 수정해 간단하게 해결할 수 있습니다. 스킨 편집에서 필요한 코드를 찾아 정사각형 비율로 설정한 후, 저장 및 새로고침을 통해 썸네일이 깔끔하게 출력되도록 만들 수 있습니다.
1. 문제인식 : 썸네일이 제대로 출력되지 않음
많은 티스토리 블로거들이 겪는 문제 중 하나는, 블로그 게시글의 썸네일이 의도한 크기로 출력되지 않는다는 점입니다. 특히 북클럽 스킨을 사용하는 경우, 썸네일이 정사각형이 아닌 다른 비율로 출력되어 일부 이미지가 잘리거나, 왜곡된 모습을 보이기도 합니다.
이 문제는 블로그의 첫인상을 좌우할 수 있기 때문에 매우 중요한 요소입니다. 다행히도, HTML 코드 편집을 통해 썸네일을 깔끔하게 정사각형으로 수정하는 방법이 있습니다.
2. 해결방법 : HTML 코드 수정하기
티스토리 블로그에서 썸네일의 비율을 수정하기 위해서는 HTML 코드에서 특정 값을 변경해야 합니다. 다음은 이 작업을 단계별로 설명한 가이드입니다.
1) 티스토리 블로그 관리 홈으로 이동
먼저 티스토리 관리 페이지에 로그인한 후, [꾸미기] - [스킨 편집] 메뉴로 이동합니다.


2) HTML 편집 메뉴에서 코드 찾기
스킨 편집에서 [HTML 편집]을 클릭합니다. 그다음 Ctrl + F 기능을 사용하여 <s_index_article_rep> 태그를 검색합니다. 이 태그는 보통 코드 390~400줄 사이에 위치해 있으니 해당 범위를 집중적으로 찾으면 됩니다.
이 태그 사이에 C230X300와 같은 숫자가 표시됩니다. 이 숫자는 현재 썸네일의 비율을 나타내는 값입니다. 이 값을 1:1 비율로 수정하여 정사각형으로 만들 수 있습니다.

3) 썸네일 크기 비율 수정
이제 C230X300 값을 C200X200 또는 다른 정사각형 비율의 값으로 변경합니다. 이 예시에서는 C200X200으로 수정합니다.
수정을 완료한 후, 오른쪽 상단의 저장 버튼을 클릭하고 페이지를 새로고침하여 변경된 사항을 확인할 수 있습니다.

3. 결과 확인 : 정사각형 썸네일 적용
코드를 수정한 후 블로그를 새로고침하면, 이전에 길쭉하게 출력되던 썸네일이 정사각형으로 변경된 것을 확인할 수 있습니다. 이렇게 수정된 썸네일은 블로그의 비주얼을 깔끔하게 만들어주며, 글을 더 잘 정리된 느낌으로 전달할 수 있습니다.
이제 티스토리 블로그에서 썸네일을 원하는 크기로 맞춰서 출력할 수 있게 되었습니다. 이 과정을 통해 블로그의 비주얼을 깔끔하게 정리하고, 방문자들이 보다 직관적으로 블로그 글을 인식할 수 있도록 개선할 수 있습니다. 이렇게 작은 수정이지만, 블로그 유입과 사용자의 경험을 크게 향상시킬 수 있습니다.
모든 티스토리 블로거들이 멋진 블로그를 운영하기를 바랍니다!




'IT 클라우드 > 유틸리티, 프로그램' 카테고리의 다른 글
PC화면 쉽게 캡쳐 하고 편집도 꼭필요한 디자인 도구 [픽픽(PicPick)] (0) | 2025.03.09 |
---|---|
네이버 서치어드바이저로 티스토리 블로그 노출 방법 (호스트단위) (9) | 2024.10.19 |
iOS 18 업데이트 새로운 기능과 개선 사항 요약 (Apple Intelligence, 맞춤 설정, 게임 모드, 개인정보 보호, AirPods, iOS 18 후기) (2) | 2024.09.21 |