블로그 첫 화면에서 가장 먼저 시선을 끄는 건 ‘썸네일’입니다. 제목보다 먼저 눈에 들어오는 시각 요소로, 사용자가 글을 클릭할지 말지를 결정하는 데 큰 영향을 주죠.
하지만 티스토리의 기본 스킨 중 하나인 북클럽 스킨은 썸네일 비율이 일정하지 않아 콘텐츠 레이아웃이 정돈되지 않아 보이는 경우가 있습니다. 특히 포스터, 썸네일, 도안 등 이미지 중심 콘텐츠를 다루는 블로그라면 이런 비율 차이가 블로그 전체 분위기에 영향을 미칠 수 있어요.
이번 글에서는 썸네일을 정사각형으로 깔끔하게 바꾸는 방법을 소개하고, 그에 따른 시각적 효과와 추가 팁까지 함께 정리해 드립니다.
왜 썸네일 정사각형이 중요한가요?
정사각형 썸네일은 콘텐츠 카드의 전체 형태를 균형 있게 유지시켜 줍니다.
가로/세로 비율이 제각각인 경우 카드 배치가 흐트러져 보이고, 디자인적으로 어수선한 인상을 줄 수 있습니다.
정사각형으로 통일하면
- 썸네일 라인이 일정해져 디자인이 훨씬 깔끔하게 정돈됨
- 블로그의 전문성과 통일감이 향상됨
- 썸네일만으로도 콘텐츠의 주제나 스타일을 명확히 전달 가능
특히 북클럽 스킨처럼 카드형 리스트를 사용하는 경우에는 썸네일 비율이 글 목록의 전체 가독성에 직접적인 영향을 줍니다.
티스토리 북클럽 스킨 썸네일 사이즈 변경하는 방법
티스토리를 운영하면서 블로그 디자인을 더 깔끔하게 다듬고 싶을 때, 가장 먼저 손을 대게 되는 부분 중 하나가 바로 썸네일 이미지 사이즈입니다. 특히 북클럽(BlogClub) 스킨을 사용하는 경우, 기본 썸네일 사이즈가 포스트의 전체 분위기를 좌우할 만큼 큰 비중을 차지합니다.
이번 포스팅에서는 북클럽 스킨을 사용하는 티스토리 블로그에서 썸네일 사이즈를 변경하는 방법을 함께 알아봅시다.
저는 썸네일을 정사각형으로 만들어서 글과 함께 작성하고 있는데, 북클럽 스킨의 기본 직사각형의 썸네일을 사용하면 위아래가 잘려서 표시가 되니 너무 불편하고 보기 싫어서 바꾸는 걸 선택했습니다.
썸네일이 가로 또는 세로로 길쭉하게 나오는 경우, 전체 카드뷰가 불균형해 보일 수 있습니다.
정사각형으로 고정하면 카드 블록이 일관된 비율로 배열되어 전체 디자인이 한층 정돈돼 보이고 특히 이미지 중심 콘텐츠를 발행하는 블로그라면 시각적 통일성의 효과가 더욱 크게 나타납니다
북클럽 스킨은 포스트 목록(메인 페이지 및 카테고리 페이지 등)에서 기본적으로 가로 300px, 세로 200px 사이즈로 설정되어 있으며, 스킨편집 → html 편집창에서 수정 가능합니다.
HTML 편집으로 썸네일 사이즈 조절하기
- 티스토리 관리자 페이지로 이동
- 왼쪽 메뉴에서 스킨 편집 > HTML 편집 클릭
- 편집기 창 위에서 ctrl+F(맥 은 command+F)로 검색창 열고, " s_article_rep_thumbnail "검색
- C230*230으로 바꿔주기 (저는 정사각형으로 바꿔주었습니다.)
수정이 완료되면 편집창 우측 상단의 적용 버튼을 꼭 클릭해주셔야 합니다.
블로그 메인 화면으로 이동해서 잘 적용된 걸 확인하시면 됩니다. 이제 보기에 편안하네요.
더 깔끔한 블로그를 위한 추가 팁
- 썸네일 외곽 여백 조정
썸네일과 카드 간 여백을 조정하면 시각적 피로도가 줄어듭니다. - 카드 간 간격 조절
- PC/모바일 레이아웃 확인
PC 기준에서 잘 보여도 모바일에서는 썸네일 비율이 다르게 적용될 수 있으니 반드시 모바일에서도 확인해 보세요.
썸네일은 블로그의 ‘첫인상’입니다.
소소한 커스터마이징 같지만, 이 작은 변화 하나로 블로그의 전문성이나 감각이 한눈에 달라 보일 수 있어요.
특히 북클럽 스킨처럼 카드 기반 스킨을 사용하는 분들이라면, 정사각형 썸네일을 적용하는 것만으로도 훨씬 정돈된 분위기를 만들 수 있습니다. 꾸준히 콘텐츠를 쌓아가고 있다면, 이제는 겉모습도 함께 다듬어줄 타이밍입니다.
직접 적용해 보고, 내 블로그의 ‘인상’을 한 단계 업그레이드해 보세요.
⬇️ 블로그 스킨을 더 감각적으로 다듬고 싶다면
2025.02.21 - [💻 디자인+크리에이티브] - 방문자가 오래 머무는 티스토리 블로그 꾸미기
방문자가 오래 머무는 티스토리 블로그 꾸미기
티스토리 블로그, 초보자도 감각 있게 꾸미는 방법티스토리 블로그는 많은 블로거들에게 꾸준히 사랑받는 플랫폼입니다. 그 이유는 단순히 무료라서만은 아닙니다. 사용자의 자유도가 높고, 광
jan01010.co.kr
'💻 디자인+크리에이티브' 카테고리의 다른 글
| 나만의 브랜드 아이덴티티 찾기 – 퍼스널 브랜딩 핵심 전략 5단계 (3) | 2025.04.07 |
|---|---|
| 퍼스널 브랜딩이란? 나를 브랜드로 만드는 법 (0) | 2025.04.05 |
| 무료 벡터 일러스트 사이트 DrawKit – 3D 리소스까지 한눈에 정리 (0) | 2025.03.30 |
| 스톡 작가 입문 – 통로이미지 등록 방법과 수익 구조 정리+승인 후기 (1) | 2025.03.29 |
| AI 벡터 일러스트 생성툴 Recraft 사용법 – 디자이너를 위한 SVG 이미지 만들기 (4) | 2025.03.27 |
