본문 바로가기
반응형

티스토리 스킨 T스킨 BASIC의 2번째 버전을 배포합니다

Version 1에서 불편했던 점과 개선점들을 반영하여 좀더 완성도 높은 Version 2을 제작했습니다.
와이드 모니터가 넘쳐나는 시대에 티스토리 블로그를 좀 더 효율적으로 사용할 수 있게 댓글 창을 화면의 우측으로 배치하고 기능의 확장성을 고려하여 기능 버튼을 본문의 좌측으로 배치 했습니다.BASIC 버전이 어느정도 안정화되면 여행가를 위한 블로그, 포토크래퍼를 위한 블로그 등 전문적인 용도로 사용 가능한 티스토리로 변신시켜 줄 스킨을 만들 계획입니다.

좀 더 많은 정보 보기

아래의 링크를 통해 티스토리 샘플 블로그롤 보시거나 구입을 하실 수 있습니다.

Version1과 달라진 점 포스팅 보기

샘플 블로그 보기 (https://stories.tistory.com)

티스토리 스킨샵에서 구매하기

T스킨 BASIC Version 2의 기능

T스킨 BASIC에는 아래와 같은 11가지 이상의 다양하고 막강한 기능이 포함되어 있습니다.

1. 컨텐츠에 집중할 수 있는 깔끔한 디자인

bootstrap 4.5을 기본 프레임워크로 제작하여 최소의 색상과 면 분할로 주변의 요소 보다 컨텐츠에 더 집중 될 수 있게 디자인 하였습니다. Bootstrap을 사용하므로 본문 작성 시 Bootstrap에서 사용하는 Class를 적용하면 일부 Content나 Components를 적용할 수 있습니다. 또한 폰트의 크기가 화면에 따라 최적으로 보여질 수 있도록 반응형 폰트 사이즈를 적용하였습니다.

2. 댓글을 메신저형태로 탈바꿈

요즘 모니터는 가로가 더 넓은 와이드 모니터가 대세입니다. 하지만 블로그를 볼 때 컨텐츠 영역의 넓이가 1024px를 넘는 경우는 거의 없습니다. 이럴경우 좌우 영역의 빈 공간이 많이 남게 되는데 이 남는 빈공간을 활용하여 댓글을 메신저 형태로 디자인 하여 구성하였습니다. 방문자가 부담없이 댓글을 달 수 있게 디자인 하여 댓글반응을 유도하였습니다.

이 댓글 창은 설정화면에서 처음부터 보이게 할 수도 있고 보이지 않게 할 수도 있습니다.

3. COVER 기능

티스토리의 기능인 Cover기능을 이 스킨에도 동일하게 적용하였습니다. 또한 추가로 이미지가 화면 전체에 보여지는 이미지 Full화면 기능을 추가하였습니다.

커버기능 구현
Full이미지 커버 구현

4. 감성적인 공감하기 기능

잘 보이지 않게 숨어 있던 공감 버튼을 과감히 본문 왼쪽에 배치하고 살아있는 듯 숨을 쉬고 있는 애니메이션을 적용하여 방문자가 공감 버튼을 누르도록 유도 하였습니다.

5. 컨텐츠에 대한 목차(Table of contents) 기능

작성한 글의 제목(h1~h4)을 분석하여 TOC(목차)를 자동으로 생성하는 기능을 추가하였으며 목차를 클릭하면 해당 내용으로 바로 이동할 수도 있습니다. 공간활용을 위해 우측의 댓글 창이 닫힌 경우에만 목차가 보여집니다.

설정을 통해 목차를 표시하거나 표시하지 않을 수 있습니다.

6. 공유하기 (네이버 이웃맺기)

14개의 SNS 공유버튼을 추가하여 방문자가 나의 글을 다양한 SNS나 블로그, 이메일 등으로 쉽게 퍼갈 수 있게 했습니다. 또한 네이버의 이웃맺기 기능도 추가하였습니다.

  1. 좌측의 공유하기 버튼을 클릭하면 하단에 14개의 SNS 링크버튼이 보여집니다.
  2. 티스토리에서 네이버와 이웃맺기를 통해 더 많은 방문자를 유도할 수 있습니다.

7. [사이드바] 로그인 기능

로그인을 하기 위해 굳이 관리자 화면을 찾아 들어가야만 했던 불편함을 없애기 위해 사이드바에서 바로 로그인/로그아웃 할 수 있는 기능과 관리화면 이동, 글쓰기를 할 수 있는 기능을 추가하였습니다. 이제 더이상 로그인을 하기 위해 관리자 화면으로 이동할 필요가 없습니다.

  • 로그인 전에는 로그인 버튼이 보여집니다.
  • 로그인을 하면 사용자명과 관리자, 글쓰기, 로그아웃 버튼이 보여 집니다.

8. [사이드바] 카테고리 메뉴에 아이콘 달기

왼쪽 사이드바 영역의 카테고리 메뉴명 앞에 아이콘을 달 수 있습니다.

아이콘은 설정화면에서 쉽게 지정할 수 있습니다.

9. [사이드바] 숨어있던 진주~ 메뉴 기능과 나의 링크 기능

예전 티스토리의 기본 공식 스킨에 있던 메뉴 기능을 살려 봤습니다. 이제 설정화면에서 메뉴만 설정하면 원하는 컨텐츠에 쉽게 링크를 유도 할 수 있습니다. 또한 나의 링크에 등록된 링크정보를 보여줍니다.

10. 주인장 SNS 및 연락처 표시 기능

티스토리 블로그 외에 주인장이 운영하는 SNS나 블로그, 홈페이지, 이메일 등 14가지를 선택하여 공개 할 수 있습니다.

설정 메뉴에서 쉽게 추가할 수 있습니다.

11. 손쉬운 애드센스(Adsense) 적용

관리화면을 통해 쉽게 리스트화면, 본문하단, 댓글창 내에 광고를 삽입할 수 있습니다.

리스트화면의 광고

리스트화면의 경우 인피드 광고가 적용되며 4개의 개시물 마다 광고가 삽입됩니다. (설정으로 조정가능)

댓글창 광고

자주사용하는 댓글창에 광고를 띄워 클릭율을 높일 수 있습니다.

본문하단 광고

본문의 하단에 애드센스의 연관된 게시글과 광고가 자동 삽입니다.

11. 모바일 화면

리스트 화면

리스트화면은 2개의 개시글씩 카드를 넘기는 방식으로 페이지를 이동하면 보여줍니다.

본문화면

본문화면은 댓글버튼만 유지하고 클릭시 댓글창이 열리게 됩니다. 또한 본문 좌측에 있던 기능버튼은 모바일 화면의 하단에서 보여지도록 했습니다.

좀 더 많은 정보 보기

이제 아래의 링크를 통해 티스토리 샘플 블로그롤 보시거나 구입을 하실 수 있습니다.

Version1과 달라진 점 포스팅 보기

샘플 블로그 보기 (https://stories.tistory.com)

티스토리 스킨샵에서 구매하기

티스토리 T스킨샵 소개 및 이용방법 안내

UX 공작소

UX와 UI에 관해 내가 알게된 다양한 이야기를 공유해요~