요즘 사진기를 빌려주고 나니 농사일이나 일상 사진을 찍을 수 없어 블로그 관련 글들만 주구장창 쓰고 있다.
특히 요즘에 나는 오래전부터 해보고 싶었던 스킨 만들기에 빠져 있다. 이제 거의 완성형에 가까워진듯 해서 그동안 스킨 만드는 과정에 대해서 간단히 글을 남겨 놓으려고 한다.
이번에 만들어 본 스킨의 기본 베이스는 티스토리에서 제공하는 #1 스킨이다. 개인이 배포하는 스킨의 경우 수정 배포를 금지하는 경우가 많다. 워드프레스의 무료 테마를 활용해보려고 생각했는데 뭔가 찝찝해서 관뒀다. #1 스킨은 1단형 스킨으로 수정이나 배포에 별다른 조건이나 제약이 없어서 선택하게 되었다. 최근에는 사이드바가 없는 1단형 화면이 대세인듯 하기도 하다.
개인적으로는 사이드바가 항상 보이는 화면을 좋아한다.
#1 스킨은 기본적으로 컴퓨터 PC 화면이 기본으로 되어 있다. 모바일 화면은 미디어 쿼리를 사용해 화면 구성을 하게 된다. 사용자가 모바일이 아무리 많아졌다고 해도 모바일은 모바일이다. 집중도를 생각하면 기본이 PC로 되어 있는 구성이 아무래도 관리하기에 편리하고 좋다.
1 첫화면 & 카테고리 선택 화면
스킨 만들기의 재료인 #1 스킨을 일단 블로그에 설치하고 첫화면과 카테고리 선택시 화면을 먼저 수정했다. 이미지 그리드 방식의 맨소니를 행님댁님의 스킨에서 참고해서 블로그에 적용했다.
첫화면과 카테고리 선택화면만 해도 뭔가 다 한것 같은 기분이 든다.
2 카테고리 메뉴 버튼 화면
기존의 카테고리 화면이 너무 밋밋한 느낌이 들어 기존의 부분은 모두 제거하고 좀 더 눈에 띄는 효과를 사용했다. 메뉴 버튼은 상단 한 가운데에 위치하도록 했다. 반드시 왼쪽 상단이나 오른쪽 상단에 위치하란 법은 없으니..
메뉴 버튼
메뉴 버튼 클릭시 카테고리 화면
3 관리 메뉴 화면
글쓰기, 설정 등 관리 메뉴 화면도 드랍 다운 방식의 애니메이션 효과를 이용했다.
블로그 타이틀을 클릭하면 메뉴 화면이 드랍다운되면서 나타난다.
블로그 타이틀 클릭시 관리 메뉴 화면
4 검색 버튼 화면
검색 버튼도 스킨에서 제공되는 부분은 모두 제거하고 완전히 새로 추가했다. 코드랍에 검색 버튼이 괜찮아 보이길래 이 스킨에 맞도록 수정했다.
검색 부분을 클릭하면 전체 검색 화면이 짜잔하고 나타난다. ㅡ,.ㅡ;
검색 클릭시 화면
5 사이드 메뉴 화면
#1 스킨의 사이드바는 하단에 위치하고 있다.
기존의 구성을 2단으로 배치하고 글자 크기가 너무 작아 크게 조정했다.
그리고 메뉴의 각 아이콘을 제목 옆에 사용하려다가 좀 더 크게 눈에 띄도록 오른편에 배치하여 강조했다.
하단의 메뉴를 숨겨서 버튼을 클릭하여 보이게 하는것도 좋을 듯 하다. (버튼이 너무 많아지는것도 불편할듯하고 큰 의미는 없는것 같아서 그냥 두기로 ...)
하단 사이드 메뉴
6 카테고리 관련글
카테고리 관련글 부분은 이미지를 원형으로 만들어 보았다. 남들 다하는 네모 모양에서 벗어나자!!
카테고리 다른글
7 기타 수정 사항
아직 약간씩 다듬어야 할 필요가 있는 부분들이 있고 이외에도 여기저기 소소하게 조금씩 수정한 곳들이 많지만 모두 기억하기도 어려워 생략;;;
스킨 만드는것도 처음 한번이 어렵지 해보고 나면 다음번에 시도할때는 좀 더 손쉽게 할 수 있을것 같은 생각이 든다. 미리 겁먹지 말자!!
수정을 시도해 보다 포기한 부분들도 있다. 이미지 그리드 배치를 좀 더 다른 모양으로 구성해 보려고 했는데 적용이 되지 않는다. -.-; 아무래도 아직은 내게 무리인듯 싶다.
