현재 티스토리 블로그가 커스텀 모바일 스킨을 지원하지 않고 모든 포털 사이트의 블로그가 그렇지만 모바일로 접속하면 일방적인 디자인으로 나타나고 있습니다. 저는 워드프레스 책을 쓰고 있는데 9월에 워드프레스 책이 쏟아져 나온다고 합니다. 제 책도 그 즈음에 나올 것이고 자유로운 디자인이 가능한 워드프레스 블로그가 많이 출현할 듯 합니다. 티스토리도 하루 빨리 커스텀 모바일 스킨이 가능한 제도 변경을 바라면서 워드프레스에 적용할 디자인을 공개합니다. 물론 워드프레스는 페이지도 만들 수 있기 때문에 블로그가 아닌 일반 웹사이트도 만들 수 있어서 디자인이 아주 달라질 것입니다. 티스토리는 제한이 있기에 위와같은 모양으로 밖에 나오지 못합니다.
이 스킨에 사용된 트위터 부트스트랩은 하나의 플랫폼입니다. 웹디자인에서 사용되는 각종 요소에 대해서 미리 아이콘 이미지와 CSS를 만들어 놓고 HTML 페이지에 코드와 스타일시트 선택자만 삽입하면 디자인이 만들어지며 CSS에 숙달된 분이 아니더라도 멋진 디자인을 만들 수 있습니다. 기존의 스킨에서 사용된 모든 CSS를 지우고 HTML코드에 선택자만 삽입하더라도 추가적인 CSS는 필요없을 정도입니다. 다만 내가 원하는 디자인을 만들기 위해서는 조정이 필요하여 스타일시트를 추가해주면 됩니다.
부트스트랩은 모바일 디자인을 겸하고 있습니다. 스타일스트가 두개 있는데 하나는 기본 디자인용이고 하나는 모바일 전용이므로 스크린 사이즈에 따라서 웹페이지의 내용도 달라지도록 설계돼서 반응형(Responsive) 디자인이 바로 가능합니다. 이러한 반응형 디자인이 가능한 것은 HTML5와 CSS3로 인한 것입니다.
HTML5가 발표될 때 2022년에 가서야 표준으로 승인될 예정이었으나 스마트폰의 영향으로 2014년에 표준으로 승인될 전망입니다. 표준으로 승인되기 위해서는 최소한 두개의 웹브라우저가 HTML5의 요건을 만족해야하는데 현재 구글 크롬과 파이어폭스가 계속 버전업되면서 작년 이후로 열단계 이상의 업그레이드 됐습니다.
그래서 소개하는 스킨도 HTML5와 CSS3를 기준으로 만들어졌고 인터넷 익스플로러 7,8 버전에서는 작동이 원활하지 않습니다. 하지만 이들 브라우저에서도 최소한의 기본 레이아웃은 나타나도록 하기 위해서 IE 핵을 삽입했습니다.
트위터 부트스트랩은 사용해보면 참 놀라운 도구입니다. 앵커태그에 정해진 클래스 선택자만 삽입해도 버튼이 만들어지고 <i class="icon-home"></i>만 삽입해도 아이콘이 추가됩니다. HTML코드에 이미지태그를 삽입하고 이미지를 추가만 해도 애니메이션 배너가 만들어집니다. 이외에도 툴팁, 탭기능 등 웹디자인에 필요한 모든 기능이 이미 만들어진 자바스크립트와 CSS로 가능해졌습니다. 외국에서는 이미 대세로 자리를 잡아가고 있어서 혹자는 이러한 디자인은 진정한 디자인이 아니고 웹디자이너를 게으르게 만든다고 우려의 목소리도 나올 정도입니다.
트위터 부트스트랩으로 만든 디자인은 버튼 색상이나 아이콘이 같아서 웹 페이지를 보면 부트스트랩으로 만든 것이라는게 바로 눈에 띕니다. 그래서 색상을 원하는 대로 변경할 수 있는 웹사이트도 생겨나고 이 플랫폼과 관련된 여러가지 부수적인 현상이 나타나고 있습니다. 이제는 CSS의 기초지식만 있어도 블로그 스킨 만들기가 쉬워질 것 같습니다. 저도 몇시간만에 스킨을 만들었고 원하는 디자인을 만들기 위해 튜닝하느라고 며칠은 걸렸습니다.
소개드리는 스킨을 사용하시려면 이전(http://martian36.tistory.com/950)글을 참고하시고 이전 글에 없는 내용에 대해 설명드립니다.
데모 블로그입니다.--> http://explorer36.tistory.com/
이곳에 사용 조건이 있습니다. --> http://martian36.tistory.com/1069
1. 캐러젤 슬라이딩 배너
블로그 상단에 슬라이드 배너가 있습니다. 이미지가 회전목마처럼 순차적으로 나타난다고 해서 캐러젤이라고 합니다. 배너의 하단에는 이미지의 제목을 넣을 수 있습니다. HTML편집창 상단 부분에서 2의 h4태그를 수정하면 되고 설명을 넣으려면 3의 빈칸에 <p>태그를 이용해서 글을 입력합니다. 이미지를 추가하려면 4의 코드를 복사해서 5의 빈칸에 붙여넣은 다음 이미지를 가로 1170*180픽셀로 만들어 파일을 업로드한 다음에 파일이름을 변경해줍니다. 파일이름은 어떤 것으로 해도 상관없지만 관리의 편의를 위해 banner4로 합니다.
위 배너를 사용하지 않으려면 1의 빨간색 박스 부분을 제거하거나 주석처리하고 6과 7의 주석처리부분을 제거하고 스타일시트에 .head-container {padding:20px;}를 입력하면 블로그 이름이 나타나면서 공간이 만들어집니다.
2. 이동하는 뷰온 버튼
본문의 좌측에 보면 스크롤하면 따라다니는 뷰온 버튼이 있습니다 HTML편집창에서 Ctrl+F키를 눌러 id="floating-box"으로 검색해서 찾은 다음 2부분에 자신의 블로그 아이디를 입력합니다. 뷰온 버튼 추가하기는 이곳(http://martian36.tistory.com/656)을 참고하세요. 뷰온 버튼과 같이 있는 화살표는 페이지의 상하로 이동할 수 있습니다. 이 뷰온 버튼은 넓은 화면의 모니터에서만 나타나도록 했고 좁은 화면에서는 보이지 않을 수도 있으므로 나타나지 않으니 오류는 아닙니다.
3. 구글 광고 삽입
이 스킨에는 본문에 구글광고를 두개 삽입할 수 있습니다. 1의 728*90에 해당하는 광고 코드를 삽입하고 주석처리를 제거합니다. 2에는 해당 사이즈의 광고를 넣고 마찬가지로 주석처리를 제거하면 광고가 나타납니다. 사이드바에도 300*250 사이즈의 광고를 넣을 수 있으며 이전 글을 참고하세요. 리더보드 광고는 화면 사이즈가 줄어들면 사라집니다.
4. 모바일 글쓰기
이 스킨은 모바일 겸용 스킨이므로 모바일 글쓰기 링크를 추가했습니다. 글쓰기 메뉴에서 모바일 글쓰기를 선택하면 모바일 전용 글쓰기 화면이 나옵니다. PC화면에서는 입력이 안되는데 모바일에서 실험은 안해봤습니다.
pc화면에서 글쓰기 화면은 화면이 커서 글쓰기에는 적당하지 않기 때문에 모바일 글쓰기를 삽입했습니다. 실험해보시고 이상이 있으면 댓글을 달아주세요.
스킨 파일 -->
Venusian(2013-08-11)ts-2.zip
