저번에 진행했던 티스토리 스킨 개발 현황이다.

이 티스토리 스킨은 kigui 프로젝트를 이용해서 날로 개발을 하였다(...)
결국 kigui를 개선시킬 때 마다 같이 수정해야 하는것이 하나씩 더 늘어나는 것이다. 슬프다.

아직 스킨의 이름을 정하지는 못했지만.(어짜피 나만 쓸 것이라서 별 상관이 없기도 하다.)
스킨의 형태는 어느정도 나오게 되었다.


일단 이 스킨의 특징은 심플함과 가벼움이고, 반응형 디자인을 하려고 노력했다. 그래서 사이드바의 경우에는 숨겨져있다.
또한, 머티리얼 디자인을 최대한 구현해보려고 하였다. 하지만, 머티리얼 이라기에는 그닥 완벽하지는 않다.


블로그 글을 열었을 시에 전체적인 형태이다.

정말 심플하게 되어 있다.


덧글의 경우에도 간단한 구분선을 통해서 구분만 해놓았으며, 글은 박스를 통해서 잡아놨다.

일단은 페이지당 글은 한개를 기준으로 만들었기때문에 한페이지에 여러 글이 나왔을 때 어떤식으로 보여지는지는 고려를 안했다.



또한, 사진에 상단 헤더 부분에는 그림자 효과가 없는데.
스크린샷을 찍어둘 당시에는 스크롤이 제일 최상단일 경우에는 그림자가 나타나지 않도록 하였기 때문이다.
하지만, 현재는 굳이 필요가 있나라는 생각에 그냥 무조건 그림자가 생기도록 변경하였다.
훌륭한 스크립트 절약(...)



좌측 상단 메뉴 버튼을 누르면 사이드 메뉴가 나타난다.

사이드 메뉴에는 카테고리와 방문자수가 간단하게 노출되고 있으며, 카테고리의 경우에는 솔직하게 말해서 막 접고 등등 이런걸 해두려고 했으나, 귀찮아서 일단 여기까지 하고 나중에 필요하면~... 이라는 생각이 더 크기도 했다.


방문자수 노출의 경우에는 참 좋은게 한글로 2글자씩으로 통합되기 때문에 아름답다.



그리고 글 검색 결과 겸 카테고리를 눌렀을 시 글 목록이다.


여기도 꽤나 심플한 편, 각 항목들은 위에 마우스를 올리면 다음과 같이 그림자 효과가 생기며 강조하게 된다.


다음과 같이 강조 효과가 일어나게 되서 나름 이건 눌러야되는구나 하는 느낌적인 느낌을 주기도 한다.

그리고 작성일과 제목을 2줄로 배치하므로서 모바일 환경에서 클릭할 공간이 넓어지는 것도 덤이다.



모바일 환경에서 글이다.

나름 모바일 환경에서도 볼만한 편이다.


그리고 이거는 비 로그인 방문자의 덧글 달기 부분.



그 외에 방명록. 트랙백, 태그 등 여러 오소들을 그냥 지워버렸다.
아마 방명록의 경우에는 다시 추가할 수도 있을 것 같긴한데. 일단 트랙백은 사용한 적이 없기도 하고 태그의 경우에도 그닥 사용할 가치를 못느껴서 태그 검색이라던지 하는 부분에 대해서는 지워버렸다.


그리고 개발을 할 때. jQuery같은 것을 일체 이용하지 않고 순수한 자바스크립트를 통해서만 개발을 하였다.
그렇기 때문에 일단 파일의 용량 같은 경우에도 작은 편이고, 배경 등에 이미지를 사용하지 않기 때문에 로딩속도도 1초 미만으로 준수한편이다.



티스토리 스킨 가이드를 보면서 하나하나 꾸며보았는데. 나름 괜찮게 된 것 같아서 나중에 기존의 스킨을 실제 사용해볼까 생각하기도 한다.

'개발 > 개발 잡소리' 카테고리의 다른 글

메이플 무토 레시피 페이지 변경  (15) 2018.02.01
20170625 티스토리 스킨 개발 현황  (0) 2017.06.25
티스토리 스킨 개발 현황  (0) 2017.06.23
kigui 메시지 객체  (0) 2017.06.19
웹 프로젝트 오프라인 모드  (0) 2017.06.14
웹 프로젝트 정리  (0) 2017.06.12

댓글 작성