티스토리 - NexT-Ti Skin v1 > v2로 변경

Version 2.0.0

이번에 시간이 조금 남아 새롭게 시작하는 마음으로 리뉴얼했습니다. 처음부터 다시 만든다는 생각에 만들기 시작했지만 몇 번이나 접고 다시 시작하는 등 우여곡절(迂餘曲折)이 있었지만 이렇게 완성했네요. 물론 손볼 것은 많이 있겠지만 그래도 완성해서 보인다는 것이 대단하다고 생각합니다. (예전에 적은 것이지만 이 스킨은 hexo의 NexT 테마를 티스토리 버전으로 컨버전한 것입니다.)

이번에 눈에 띄게 바꾼 것은 없지만 그래도 많은 부분이 바꾸었습니다. 밑에 부분에서 예전 것에 비해 개선돼 부분을 적어 보겠습니다.

 

1. 링크

가장 크게 작용하는 부분인 링크 부분을 '#fa3420'에서 '#4a65f6'으로 변경하였습니다. 기존의 color은 그대로 두었습니다.

 

2. 폰트 변경

이것은 기본에 충실하고자 가독성과 얇은 폰트(스포카한산스)로 변경하였습니다. 또한 티스토리의 기본 웹폰트를 이용 따로 로딩을 하지 않고 사용하였습니다. 

#1 : 30px/400 에서 #2 : 38px/300 으로 변경

얇은 폰트를 사용하여 더 효과적이게 또는 더 잘 보이게 변경하였습니다. 또한 리스트(첫 화면)에 해당 댓글 부분을 위치 변경하였습니다. 간단한 예로 버전 1과 2를 밑에 사진으로 보실 수 있습니다.

#1

#2

 

3. logo 변경

버전 #1에서는 글자인 'AneOK'를 사용했지만 버전 #2에서는 이미지로 변경하였습니다.

 

4. 페이지 타이틀

리스트 출력에서 상단 타이틀의 메시지를 변경하였습니다. 또한 각 페이지의 타이틀 또한 변경(Size)하였습니다. 카테고리나, 리스트, 검색의 맨트가 각각 적용됩니다. 또한 이 부분의 각종 버그들을 대폭 감소하였습니다. 

#1 제목 사이즈(왼쪽)와 #2 제목사이즈(오른쪽) 비교

 

5. 모바일 버전

모바일 버전의 메뉴와 네비 버튼의 변경하였습니다. 기존의 왼쪽 상단의 네비 버튼(Bootstrap) 오른쪽으로 변경(offcanvas 스타일)하였고 기존 카테고리 부분을 offcanvas에 넣었습니다.

#1 모바일 네비

#2 모바일 네비

 

6. 메뉴 부분

버전 #1에서는 메뉴 부분이 작고 일괄성이 없었습니다. 버전 #2에서는 직관적으로 사이즈가 크며 일괄성 있게 만들었습니다. 또한 로딩에 지장을 주는 아이콘을 삭제하여 조금이라도 로딩에 신경 셨습니다.

#1 메뉴 부분

#2 메뉴 부분

 

7. 기타 부분

잡다한 소스는 지우고 다른 부분은 따로 정리하는 등 많은 부분이 변경되었습니다. 또한 ToC부분에서 ERROR이 있어 잠시 두고 볼 것들도 다수 있습니다. 하지만 그렇다고 해서 앞으로 크게 달라지지는 않을 것 같아 이렇게 글 마무리합니다. 

추가된 사항을 볼려면

v2 변경로그 (Changelog)