에드센스 스킨의 특징
- 티스토리/스킨배포
- 2013. 5. 7. 10:29
여러가지 의도와 목적을 가지고 제작되었던 스킨이니만큼 많은 특징이 있습니다.
그 특징을 참고하시고 사용하시기 바랍니다.
1. 가벼움.
애초의 계획대로 에드센스 스킨은 가벼운것을 목적으로 제작되었습니다.
이미지를 거의 사용하지 않고, css로 많은 부분을 대신했습니다. 그래서 다른 스킨에 비해 무척 가볍습니다.
가벼움을 유지하기 위해서는 이미지 사용을 최대한 배제해야 했습니다.
다양한 컬러셋에 맞는 스킨을 제작하기 위해서는 웹폰트 아이콘이 최고의 선택이였죠.
하지만 티스토리에서는 웹폰트 아이콘을 100% 지원하지 않았습니다. 예전에 부트스트랩에서 사용하던 웹폰트 아이콘도 많은 실패를 거듭했지요.
허나 마침내 사용방법을 알아냈고, 웹폰트 아이콘을 사용함으로써 각각의 컬러셋에 맞는 아이콘을 만들수 있었습니다.
웹폰트 아이콘 -> http://icomoon.io/app/
2. 레이아웃.
많은 스킨을 제작해본 경험으로 볼때 정말 사용자들의 입맛은 다양합니다.
단 한사람이라도 꼭 원하는데....바로 그런 스킨이 없을때 아쉬움은 제가 잘 압니다.
그래서 되도록이면 다양한 레이아웃을 제작하게 되었습니다.
다양한 레이아웃이야말로 에드센스 스킨의 목적인 다양한 광고를 탑제할 수 있다는 점입니다.
거의 모든 구글광고를 탑재할 수 있습니다.
본문과 사이드바 어느곳에서나 탑재할 수 있고, html, css 를 잘 모르는분을 위해 이미지로 제가 대신 삽입해 놓았고, 되도록 주석으로 많이 표기하도록 노력하였습니다.
테스트 해본결과 거의 모든 구글광고를 삽입할 수 있었습니다. 구글광고가 가장 많기 때문에 구지 구글광고가 아니더라도 다른 회사의 광고도 넣을 수 있다는 결론을 짐작해봅니다.
3. 컬러셋.
애초에 말씀드렸듯 에드센스 스킨의 컬러셋은 부트스트랩의 css 버튼 스타일을 모태로 시작하였습니다.
http://charliepark.org/bootstrap_buttons/
15개의 컬러셋을 제작하였고 자바스크립트가 포함된 버젼에는 좀 더 추가되서 총 18개의 컬러셋을 가지고 있습니다.
15개의 컬러셋은 모든 레이아웃마다 포함이 되었기때문에 어떤 스타일의 레이아웃을 사용하든 컬러셋은 15개 모두 사용할 수 있습니다.
html,css 를 모르시는분들을 위해 컬러셋을 변경하는것도 css 파일만 하나 업로드하는것으로 작업이 끝납니다.
자세한 방법은 에드센스 스킨 사용하는 방법에 보시면 있고, 해당 동영상도 따로 첨부하였으니 누구나 컬러셋을 변경할 수 있을겁니다.
4. 글꼴.
본인의 컴퓨터에 나눔고딕이 설치되어 있다면 웹폰트를 로드하지 않고 바로 나눔고딕으로 보여집니다.
하지만 사용자 컴퓨터에 나눔고딕이 설치되어 있지 않다면 나눔고딕 웹폰트를 사용합니다.
이 스킨을 제작하는 동안 제가 사용하던 모빌리스 웹폰트가 유료로 변경됨에 따라 다른 이전에 작업해두었던 스킨을 모두 수정해야만 했습니다.
현재는 구글에서 제공하는 나눔고딕 웹폰트를 사용합니다.
구글 웹폰트 (나눔고딕) -> http://www.google.com/fonts/earlyaccess
물론 모든것은 스킨위자드나 css 에서 수정 또는 변경 가능합니다.
5. 스킨위자드.
티스토리 스킨의 장점이자 단점이 스킨 위자드입니다.
초보자들에게는 무척 용이하고 편리한 기능이지만 어느정도 사용하는 사용자에게는 필요없는 기능이지요.
에드센스 스킨의 목적인 많은 사람들에게 사용하는것이기에 스킨 위자드를 지원하도록 제작되었습니다.
다양한 레이아웃을 지원하기에 각각에 맞는 스킨 위자드 기능을 작성해야만 했습니다.
다양한 환경에 맞게 less 로 작성하여서 일을 덜 수 있었습니다.
많은 테스트를 해보지 못한점은 이해해주시기 바랍니다.
6. 블로그메뉴.
에드센스 특징중 하나가 바로 메인메뉴입니다.
메인메뉴와 하단의 푸터메뉴는 동일한 스타일을 가지고 있습니다.
그래서 상단 메인메뉴에는 블로그메뉴를, 하단 푸터메뉴에는 사용자정의 메뉴를....또는 반대로, 또는 카테고리 메뉴를 메인메뉴로 사용하고, 푸터메뉴를 메인메로.... 등등 얼마든지 두개의 스타일이 같기 때문에 사용자가 약간만 수정하면 원하는 형식으로 이용이 가능합니다
즉 메인메뉴가 두개라고 생각하시고 상단 메인메뉴에 뭘 사용할것인지 결정만 하면 됩니다.
사용방법을 잘 모르시면 역시 동영상 시청을 해주세요.
7. 티에디션.
티스토리 기능인 티에디션 기능도 가능합니다.
정말 많은 테스트를 해보지는 못했습니다. 시간과 테스트할 레이아웃이 너무 많기에 개인이 하기에는 시간이 많이 모자랐고, 빨리 여러분들과 같이 사용하면서 업데이틀 할 생각이였기 때문입니다.
8. 고급형(자바스크립트)
자바스크립트를 포함함으로써 스킨으로써 부족했던 부분을 매웠습니다.
자바스크립트는 8가지 기능을 가지고 있습니다.
- 플로팅메뉴.
- 본문과 사이드바를 접었다펴는 기능.
- 큰 그림을 본문폭에 맞추는 기능.
- 메인메뉴에 하위메뉴가 있을때 아이콘을 표시하는 기능.
- 사이드바의 카테고리 모듈에서 각각의 카테고리를 접거나 펼수 있는 기능.
- 스무스하게 상하단으로 움직이는 기능.
- 사이드바의 모듈 제목을 클릭하면 각 모듈을 접거나 펴는 기능.
- 본문에서 새창과 현재창을 표시해주는 기능.
이전에 유저분들에게 스킨에 포함했으면 하는 기능들을 물어보고 거기서 필요하다고 판단되는것들만 모아서 포함시켰습니다.
사용하지 않을때는 간단이 주석처리만 하면 되게 제작되었습니다.
에드센스(Adsense)스킨의 제작목적과 동기 -> http://demun.tistory.com/2305
에드센스 스킨의 특징 -> http://demun.tistory.com/2306
에드센스 스킨 고급버젼에 포함된 기능과 설명 -> http://demun.tistory.com/2308
에드센스 스킨의 미리보기와 사용방법 -> http://demun.tistory.com/2323
에드센스 스킨 배포 -> http://demun.tistory.com/2324