반응형 갤러리 스킨 FastBoot v1.4 배포

FastBoot v1.4를 적용하신 어재영님 블로그

http://eohjae.tistory.com/

Faster, Responsive, Gallery Type Category Skin

  FastBoot은 티스토리 블로그 스킨입니다. 반응형이고, 이번 버전부터 갤러리형으로 Default 값이 정해져 있습니다. 다만 원하시지 않는 경우 소스코드에서 변수 하나만 바꾸시면 기존 버전처럼 기본 List형태로 Category가 노출됩니다.

---

New Major Features

1. Bootstrap Customize, Library included

  FastBoot은 Bootstrap 기반 스킨입니다. Bootstrap은 기본적으로 방대한 양의 라이브러리를 가지고 있는데, FastBoot에서 사용하지 않는 부분들이 많아 이번 버전에서는 다 제거하였습니다. 이 작업으로 인해 Bootstrap 라이브러리의 용량이 CSS는 전 버전의 60%, JS는 전 버전의 무려 20% 수준입니다. 이로 인해 전 버전에 비해 상당한 수준의 속도 차이가 나게 되었습니다(크롬에서는 어차피 날아다니지만.. IE에서요). 또한 이 외에도 jQuery Library를 외부 서버에서 가져오던 것을 아예 포함시켜버렸습니다. 타 서버로부터 가져오지 않으므로 이 역시 로딩속도 향상에 영향을 미치게 되었습니다. 

2. Gallery Type Category

  이번 버전의 가장 큰 특징인데, 방문자가 갤러리형 / 리스트형 / 심플타이틀형 세가지로 글 목록을 열람할 수 있게 해두었습니다. 이 선택여부는 방문자의 브라우저 쿠키에 저장되어 다음 방문시에도 설정이 유지됩니다. 또한 블로그 관리자는 변수 하나만 수정하면 방문자가 보게 될 기본설정을 선택할 수 있습니다. 기본값 수정은,

	
rMode = getCookie('rMode');
if (rMode == '') {
	rMode = 0; // Deafault Mode
}
if (rMode == 0) {
	document.getElementById('search_gallery').style.display = 'block';
	document.getElementById('search_list').style.display = 'none';
	document.getElementById('search_title').style.display = 'none';
} else if (rMode == 1) {
	document.getElementById('search_gallery').style.display = 'none';
	document.getElementById('search_gallery').className = '';
	document.getElementById('search_list').style.display = 'block';
	document.getElementById('search_title').style.display = 'none';
} else if (rMode == 2) {
	document.getElementById('search_gallery').style.display = 'none';
	document.getElementById('search_gallery').className = '';
	document.getElementById('search_list').style.display = 'none';
	document.getElementById('search_title').style.display = 'block';
}
	

 위 코드에서 Default Mode라고 주석처리해놓은 부분에서 기본값 설정을 하시면 됩니다. 0이 기본값 갤러리형, 1이 기본값 리스트형, 2가 기본값 심플타이틀형입니다. v1.3버전처럼 쓰실 분들은 1로 해주시면 됩니다.

v1.4 버그 공지

  Soulkey님이 제보해주신 것인데, 0이 아닌 다른 값으로 하면 쿠키값이 저장이 안된 처음 방문하는 방문자의 경우에는 현재 리스트가 보이지 않는 버그가 있는 것으로 보입니다. 위에서처럼 수정하신 다음에, 다시말하면 rMode = 1 or 2; 로 하신다음 그 바로 밑줄에 아래 코드를 추가해주세요. rMode를 2로 한 예를 들면,

  rMode = 2;

  setCookie('rMode', rMode, 365);

  이런식으로 될 것입니다. 기본값을 방문자의 컴퓨터 브라우저 쿠키에 저장하는 코드입니다.

(갤러리형으로 쓰고 계신 분들은 상관 없습니다.)

  갤러리형으로 나오게 하기 위해서는 위 그림처럼 화면출력 설정을 '목록만'으로 해주시기 바랍니다.

3. IE7 일부 지원

  v1.3.5로 반응형 스킨으로서는 드물게 IE8을 지원하였었는데, 국내 웹 환경상 IE7을 완전히 무시할 수는 없어서 IE7 사용자들에게도 경고메시지와 함께 글 내용은 볼 수 있게(본문에 삽입된 애드센스도 보입니다) 해두었습니다. 검색엔진으로 들어오는 사람들을 위한 배려이고, v1.4에서는 글 내용까지는 볼 수 있게(그 이전까지는 경우에따라 내용이 아예 안보일 때도 있었습니다) 하였습니다. 궁극적으로는 IE7에서도 잘 보이게 하는게 목표이지만 버전업을 바라시는 분들이 많아서 불완전하지만 포스팅내용만이라도 볼 수 있게 패치하였습니다. (사이드바나 메뉴는 깨지는 원인이기 때문에 출력되지 않습니다. 본문 내용만 출력됩니다.)

---

FastBoot v1.4

반응형 / 모바일, PC, 태블릿 겸용

FastBoot v1.3.5(참고)

http://blog.readiz.com/151

테스트 블로그

http://fastboot.tistory.com/

Download

FastBoot v1.4.zip (406KB)

  파일크기는 다소 커졌습니다만 Masonry 갤러리 때문이고 평소에는 로딩속도가 오히려 더 빨라졌고 오로지 갤러리형으로 글 목록을 볼 때만 영향이 갑니다. 그나마도 Bootstrap 최적화로 인해 아마 느려진건 체감이 별로 안되실것이라고 봅니다. 적용과정에 문제 있으신 분들은 이 글 코멘트나 방명록 활용하시면 됩니다. 다만 비밀글로 하시면 정보공유에 도움될 것이 없으니 자제 부탁드립니다.

+ 스킨 저작권 관련..

  저도 이 스킨제작하면서 오픈소스를 굉장히 많이 사용하였고, 이 오픈소스들에 관련된 저작권은 skin.html에 잘 나타내려고 노력하였습니다. 다만 그런만큼 제 스킨을 사용하시는 분들도 스킨을 누가 만들었는지, 어디가서 받을 수 있는지에 관한 정보는 제거하지 않으셨으면 좋겠습니다. 오픈소스 저작권 표기부분도 마찬가지입니다. 별것 아니라고 생각하실 수 있고 footer가 이쁘지 않아서 없애시는 분들도 계신거 같긴 한데.. 그래도 앞으로도 무료로 공개하고 꾸준히 업데이트할 스킨인 만큼.. 이 부분은 지켜주셨으면 합니다. 스킨관련 정보표기는 단순히 스킨 제작자가 뿌듯해하기 위한 것이 아니라 스킨이 퍼져나가는 원동력입니다. 저는 제 스킨이 널리 퍼지기를 원하고 있구요. 그런만큼.. 저작물에 대한 저작권표시는 최소한의 예의라고 생각합니다.

   저번부터 밀고있는 슬로건이지만 FastBoot은 티스토리 정복이 목표인 스킨입니다. 티스토리를 정복하여 아예 티스토리 블로그 서비스 자체가 반응형 서비스를 구현할 때까지 버전업은 계속됩니다.

  그리고 다운로드 받아가실 때 밑에 추천버튼이랑 댓글 달아주시면 정말로 큰 힘이 됩니다.