블로그에 생명을 불어 넣을 수 있는 반응형 스킨을 제작하였습니다. 기본 티스토리 블로그 스킨과 차별화된 기능, 디자인으로 오랜 기간에 걸쳐 제작하고 수정하였습니다. 이 스킨이 여러분의 블로그에 조금이라도 도움이 되었으면 합니다.
특징
이 스킨은 bootstrap 4.3을 기본 프레임워크로 제작 하였기 때문에 크롬, 파이어폭스, 사파리 등 다양한 브라우저와 IE11 이상의 최신 버전에서 정상 동작 합니다. 또한 반응형 으로 디자인하여 다양한 디바이스에서 최적화된 화면을 보여 줍니다.
기능
이 스킨은 여러가지 특징이 있지만 대표적으로 아래와 같이 10개의 특징을 가지고 있습니다.
1. 컨텐츠에 집중할 수 있는 깔끔한 디자인
컨텐츠에 집중할 수 있는 디자인으로 최소의 색상과 면 분할로 주변의 요소 보다 컨텐츠에 더 집중 될 수 있게 디자인 하였습니다. 또한 폰트의 크기가 화면에 따라 최적으로 보여질 수 있도록 반응형 폰트 사이즈를 적용하였습니다.
2. 댓글을 메신저로 탈바꿈
요즘 모니터는 가로가 더 넓은 와이드 모니터가 대세입니다. 하지만 블로그를 볼 때 컨텐츠 영역의 넓이가 대부분 1024px를 넘는 경우가 거의 없습니다.
이럴경우 좌우의 영역이 많이 남게 되는데 이 남는 빈공간을 활용하여 댓글을 메신저 형태로 디자인 하였습니다. 방문자가 부담없이 댓글을 달 수 있게 디자인 하였습니다.
이 댓글창은 설정에 의해 화면 로딩 시 처음부터 보이게 할 수도 있고 보이지 않게 할 수도 있습니다.
3. [사이드바] 카테고리 메뉴에 아이콘 달기
사이드바 영역의 카테고리 메뉴명 앞에 아이콘을 추가할 수 있습니다.
설정 창에서 원하는 카테고리의 아이콘 명을 입력하면 자동으로 아이콘이 반영됩니다.
4. [사이드바] 숨어있던 진주~ 메뉴 기능을 부활
예전 티스토리의 기본 공식 스킨에는 메뉴 기능이 있었습니다. 하지만 새롭게 출시된 티스토리 공식 스킨에서는 이 기능이 제공되고 있지 않아 잊혀져가는 기능이 되버렸습니다. 이것이 안타까워 이 기능을 사이드바 영역에 되살려 냈습니다. 이제 메뉴만 설정하면 원하는 컨텐츠에 쉽게 링크를 걸 수 있습니다.
5. [사이드바] 로그인 기능
로그인을 하기 위해 굳이 관리자 화면을 찾아 들어가야만 했던 불편함을 없애기 위해 사이드바에서 바로 로그인/로그아웃 할 수 있는 기능과 관리화면 이동, 글쓰기를 할 수 있는 기능을 추가하였습니다. 이제 더이상 로그인을 하기 위해 관리자 화면으로 이동할 필요가 없습니다.
6. COVER 기능
티스토리의 새로운 기능인 Cover기능을 이 스킨에도 동일하게 적용하였습니다. 또한 추가로 이미지가 화면 전체로 보여지는 Full이미지 기능을 추가하였습니다.
7. 감성적인 공감하기 기능
잘 보이지 않게 숨어 있던 공감 버튼을 과감히 화면 아래 중앙에 배치하고 살아있는 듯 숨을 쉬고 있는 애니메이션을 적용하여 방문자가 공감 버튼을 누르도록 유도 하였습니다.
8. 컨텐츠에 대한 목차(Table of contents) 기능
작성한 글의 제목(h1~h4)을 분석하여 TOC(목차)를 자동으로 생성하는 기능을 추가하였으며 목차를 클릭하면 해당 내용으로 바로 이동할 수도 있습니다.
※ 댓글 창을 닫은 경우에만 목차가 보여집니다.
9. 공유하기 (네이버 이웃맺기)
14개의 SNS 공유버튼을 추가하여 방문자가 나의 글을 다양한 SNS나 블로그, 이메일 등으로 쉽게 퍼갈 수 있게 했습니다.
또한 네이버의 이웃맺기 기능도 추가하였습니다.
10. 주인장 SNS 및 연락처 표시 기능
티스토리 블로그 외에 주인장이 운영하는 SNS나 블로그, 홈페이지, 이메일 등 14가지를 선택하여 공개 할 수 있습니다. 설정 메뉴에서 해당 URL을 작성하면 자동으로 아이콘과 함께 보여집니다.
