티스토리 스킨 변경 (Book Club > hELLO)

지난 2021년 9월 말에 티스토리 스킨을 Poster 에서 Book Club 으로 변경한 이후, 약 2년 간 잘 사용하던 Book Club 스킨을 이번에 hELLO 스킨으로 변경했다. 

 

hELLO 스킨 소개 

hELLO 스킨은 정상우 (pronist) 님이 티도리 프레임워크를 이용하여 개발 및 무료 배포하고 있는 깔끔하고 단순한 디자인의 티스토리 스킨이다. hELLO 스킨에 대한 자세한 설명과 다운로드는 아래 웹페이지 링크를 참조. 

 

hELLO 티스토리 스킨을 소개합니다. — hELLO. (pronist.dev)

hELLO 티스토리 스킨을 소개합니다.

 

 

 

 

 

 

 

사실 v3.x 일 때부터 눈여겨 보고있었는데, 이번에 우연히 방문했다가 v4.2 로 업그레이드 되었길래 냉큼 다운로드하고 블로그 스킨으로 설정했다. 기본 설정을 유지하면서 며칠 사용해보니, 마음에 드는 부분과 앞으로 수정할 부분이 몇 가지 드러났다. 

 

 

마음에 드는 부분 

메인 폰트: SUIT 

v4.1.4 에서 v4.2.0 으로 수정되는 과정에서 메인 폰트를 Noto Sans KR 에서 SUIT 으로 수정하셨다는데 아주 마음에 든다. SUIT 폰트에 대한 설명 및 다운로드는 아래 웹페이지 링크를 참조. 

 

S U N N – SUIT

S U N N

 

목차 (Table of Contents, Scrollspy) 

글 상단에 자동으로 생성되는 목차도 마음에 들지만, 글 아래 부분으로 내렸을 때 오른쪽 사이드바 위치에 플로팅 목차가 뜨는 것은 정말 마음에 든다. 모바일 환경에서는 화면 상단 오른쪽에 플로팅 목차가 접힌 상태로 아이콘이 표시되는 부분도 훌륭하다.  

 

글 목록 스타일 

리스트, 그리드, 지그재그를 지원하는데 그 중에서도 그리드가 마음에 든다. 아마도 블로그 첫 화면은 리스트를 쓰고, 카테고리 글 목록에서는 그리드를 쓰게 될 듯 하다 (아래 포스팅 참조). 

 

 

블로그 첫 화면은 리스트, 카테고리 글 목록은 그리드 | hELLO 스킨 커스터마이징 001

 

 

 

 

 

 

 

앞으로 수정할 부분 

가능하다면 앞으로 수정하고 싶은 부분이 몇 가지 있는데, 대부분은 style.css 를 수정하면 해결될 문제로 보인다. 하나씩 수정하는 과정도 "hELLO 스킨 커스터마이징" 이라는 제목으로 시리즈 글을 작성해보려 한다. 

 

폰트 크기 조정 (특히 Heading) 

본문 폰트 크기를 포함해서 전체적으로 폰트 크기가 작게 느껴진다. 특히 h2, h3 와 같은 Heading 은 폰트 크기와 함께 굵기도 수정해야 할 듯 하다 (아래 포스팅 참조). 조금 더 욕심을 내자면 컬러도 변경?  

 

글 본문의 Headings 글꼴 크기 수정 (feat. 밑줄 넣기) | hELLO 스킨 커스터마이징 005

 

글 목록에서 요약문 길이 늘리기, (모바일 환경) 윗 글과 아래 글 사이 간격 늘리기  

글 목록에서 요약문이 현재는 2-3 줄 정도만 노출되는데, 이 부분을 4-5 줄 정도로 늘리려고 한다. 또한, 모바일 환경의 글 목록에서 윗 글의 요약문과 아래 글의 썸네일 사이의 간격도 늘리려고 한다 (아래 포스팅 참조). 

 

글 목록 (리스트) 의 글꼴 크기와 줄간격 수정, 글 제목과 요약문의 줄 수 제한 | hELLO 스킨 커스터

 

페이지네이션 수정 (모바일 환경) 

PC 환경에서는 페이지네이션 (Pagination) 이 "< 1 2 3 >" 형식으로 잘 작동하는데, 모바일 환경에서는 "< 1 >" 또는 "< 2 >" 형식으로 현재 페이지 번호와 앞/뒤 이동 버튼만 보인다. 개발자 분이 의도한 것인지는 모르겠으나, 가능하다면 이 부분도 PC 환경의 화면과 같도록 수정하고 싶다. 

 

Update) 모바일 환경에서의 페이지네이션은 아래 블로그를 참조해서 수정했다. 

 

티스토리 hELLO 스킨 모바일 페이징 커스텀하기 / position