최근 블로그 스킨의 일부를 수정했다.
메뉴 버튼, 아이콘 폰트 등 많이 손보았는데 이번에 가장 크게 바뀐 부분은 메뉴버튼 (햄버거 버튼)의 내용이다.
1 메뉴 구성 화면 수정
나는 웹사이트를 방문하면 가장 먼저 첫화면의 구성과 메뉴 버튼을 클릭해본다. 그곳을 보면 사이트의 분위기나 디자인을 어느정도 예상할 수 있기도 하다. 그래서 이곳도 가장 신경쓰고 공들인 부분이 첫페이지이다. 이제 첫페이지를 완성해 놓고 나니 메뉴 화면이 마음에 걸린다.
기존에는 아래 그림과 같이 모바일에서 사용하는것과 동일한 작은 크기의 화면이었는데 화면 크기를 가득 채우고 대부분의 내용을 삭제하고 PC 화면과 모바일에서 모두 사용하기 용이하도록 반응형으로 카테고리 항목 몇개만 가져다가 간단 심플하게 변경했다. 큰 화면을 두고 작은 화면을 유지할 필요가 없어 보인다. 별도의 미디어 쿼리는 사용하지 않았다.
프로필 부분과 메뉴 링크 부분을 모두 삭제했고, 카테고리를 자바스크립트로 불러오던 것을 관련 된것을 모두 삭제하고 완전 새로운 모습으로 이번에 구성해서 꾸며 보았다.
기존 메뉴 구성 - 사용할때는 좋아 보였는데 변경한 화면과 비교해보니 너무 차이난다.
이번에 새로 구성한 메뉴 화면 - 핑크빛의 배경이 마음에 든다. 블링블링 ~~ 각 메뉴에 마우스를 가져다 대면 아이콘이 회전하는 애니메이션을 추가했다.
나중에 보면 이 화면도 별로라고 생각하게 될지도 모른다.
첫화면을 이걸로 쓸까 싶기도 하다. 너무 이뻐 !! ㅎㅎ
블로그에 사용된 선이나 박스들은 반드시 필요한게 아니라면 가능하면 사용하지 않으려고 한다. 구분 선들이 지저분해 보인다. 모두 삭제!!
2 아이콘 폰트 교체
이 블로그에 사용된 아이콘들은 모두 아이콘 폰트이다. 내가 사용할만한 것들만 엄선?하여 대략 150개 정도를 등록해 놓고 스킨과 포스팅의 내용에 활용하고 있다.
아이콘들을 구경하다가 마음에 드는 아이콘들을 발견해서 이번에 대부분을 새로운 아이콘들로 교체했다.
기존의 것을 교체하니 따로 아이콘명을 변경하지 않아도 자동으로 교체해주니 크게 어렵지 않게 모두 변경했다.
3 스킨 HTML / CSS / JS 정리
스킨의 HTML 에 삽입된 자바 스크립트를 별도 파일로 분리했다. 스킨 파일이 너무 길어지고 지저분해지는거 같아서 자바 스크립트와 CSS 들을 별도 파일로 만들었다.
4 티스토리 플러그인 최소화
블로그에 사용중이던 플러그인중에 활용도가 떨어지는 항목을 비활성화 했다.
현재는 아래 그림과 같이 필수적인 6개의 플러그인만 사용중이다.
나는 블로그의 속도에도 관심이 많다. 플러그인을 가능한 사용하지 않는것도 바로 그 이유이다. 아무리 좋은 기능이라 하더라도 속도에 치명적인 것이라면 포기하곤 한다. 혹시라도 이 블로그에 설치된 여러가지 기능들 때문에 블로그의 속도가 느릴거라는 생각을 할 수도 있다. 하지만 사이트 속도 테스트를 해보면 왠만한 블로그나 사이트들보다는 나은 속도를 보여줄것이다.
이제 어느 정도? 내 마음에 들게 정리가 된거 같다. ㅋㅋ
근데 이러다가 또 뭔가 마음에 들지 않아서 또 뭘 수정하게 될지도 모른다.
