티스토리로 옮겨온지도 거진 1년이 다 되어 가고 있습니다. 늘 사용하면서 느끼는 것인데, 베포용 스킨이나, 아니면 개인이 제작한 스킨을 보면 정말 독특한 몇몇 블로그를 제외하고는 그저 그런 2단,또는 3단형 레이아웃의 스킨이 대부분이며 흔히 볼수 있는 그런 지루하고 따분한 디자인 일색이었습니다. 혹자들은 티스토리의 구조가 가지는 한계성 때문에 요즘 유행하는 웹디자인 요소를 적용한 스킨이 나올수 없다고들 합니다. 그러나 제 생각은 다릅니다. 기본적으로 오로지 기능을 위한 티스토리 스킨만이 존재할 뿐이지 디자인에 중점을 두고 만들어진 티스토리 스킨은 그렇게 많지 않습니다. 물론 블로그는 컨텐츠가 주 목적이기 때문에 간단 명료 해도 된다고 하지만, 적어도 간단하고 심플한 범위내에서 남들보다 튀어볼만한 요소를 넣는 것은 어느정도 용인이 가능하다고 봅니다.
일단 ‘독특한 구조의 스킨은 적용이 힘들다’라는 고정관념을 깨고 싶었습니다. 보통 구조가 일반적이지 않으면서도 설치나 사용이 불편한 스킨들은 감히 만드는 사람의 실력 문제라고 평하고 싶습니다. 물론 저도 고작 6개월 스킨 만든 쪼랩이긴 하지만, 원터치 인스톨이 가능한 범위 내에서도 얼마든지 화려하고 독창적인 스킨을 만들 수 있다고 생각합니다. 그래서 그 생각을 실제로 보여드리고자 Dynamite 스킨을 제작하게 되었습니다.
앞서 말씀드렸듯 이 스킨의 최대 목표는 첫번째가 독특한 디자인입니다. 그러나 디자인에 지나치게 치우쳐 퍼포먼스를 희생하는 여타 스킨과는 달리 두마리 토끼를 다 잡기 위해서 노력하였습니다. 그 결과로 스킨의 총 용량은 불과 0.28mb입니다. 전작인 Hare 스킨이 0.27mb이고, 스크립트 까지 적용된 것을 감안하면 엄청나게 가벼운 축에 듭니다.
페럴랙스 기법은 현재 유행하는 디자인 요소입니다. 사전적 의미로 페럴랙스는 ‘시차'를 의미하는 것인데, 스크롤할때 배경이 고정되어 있는 것이 아니라 스크롤 속도의 절반정도 되는 속도로 따라서 움직이게 되어있는 구조 입니다. 평면적인 웹 페이지가 더욱 입체적이고 생동감 있게 해주는 요소로서 적절하게 사용할시에 아주 독특하고 차별화된 느낌을 낼 수 있습니다. 특히 제가 나름 자랑스럽게 생각하는 부분의 하나는 이 페럴랙스 부분을 커스터마이징 하는 부분입니다. 커스터마이징이 가능한 요소들은 style.css에 상주하며, 이 부분의 코드를 수정하면 스킨의 다른요소에 영향없이 아주 빠르게 원하는데로 스타일 수정이 가능하게 하였습니다. 특히 페럴랙스 베너 부분은 페이지 별로 각각 다른 이미지를 넣는 것이 가능하기 때문에 원하는데로 꾸밀 수 있습니다.
독특한 구조임에도 반응형 스펙을 완벽히 지원합니다. 모든 요소들은 각각의 스크린 사이즈에 맞게 최적화 되어있기 때문에 별다른 수정이 필요 없습니다. 특히 제작 과정 중에 티스토리 에디터에서 본문에 넣을 수 있는 요소를 모두 테스트하여 화면크기 별로 작동에 문제가 없는지도 테스트를 하였습니다.
스크린 샷
주요기능
상단의 메뉴 바는 플로팅 메뉴로서, 하단 부까지 끝까지 따라오는 것이 아니라 본문 영역에서만 움직이도록 해놓았습니다.
HTML5 Semantic 구조 적용으로 검색엔진 최적화가 되어있습니다.
스킨의 기본 설정은 index.xml에 다 되어있기 때문에 수정해줘야 할 항목은 상단 티스토리 툴바의 색상 밖에 없습니다. 배경색은 투명에, 글자색은 흰색으로 맞춰주시면 됩니다.
티스토리 설정 > 화면출력 > 메뉴바 스킨에서 글자색상은 흰색, 배경색은 투명으로 해주시면 됩니다.
완벽한 반응형을 위해서 본 스킨에서는 몇 가지 부가 기능을 지원합니다.
종횡비 일치 외부 동영상 플레이어
<div class="youtube video">
<iframe width="1280" height="720" src="//www.youtube.com/embed/JN2QUhaKN2Q" frameborder="0" allowfullscreen=""></iframe>
</div>
유투브, 비미오와 같은 영상에는 각각 youtube, vimeo 라는 클래스를 추가하면 종횡비가 변동되지 않고 반응형 영상이 적용 됩니다. 그래서 영상의 기본비율을 유지한체로 크기가 줄어들기 때문에 PC 해상도로 영상을 업로드해도 문제 없이 모바일에서 축소되어 출력 됩니다.
- 스킨 전체에 황금비 적용 (폰트, 그리드 전부 1:1.618 황금비율 입니다.)
- 티스토리 모든 요소지원
- 티스토리 기본 기능은 누락없이 모두 지원합니다.
페럴랙스 베너 커스텀 하기
style.css에 보시면 각각의 부위 별로 페럴랙스 베너를 넣을 수 있게 해 놓았습니다. 자신이 원하는 배경을 해당 부분의 background url에 넣어주시면 됩니다. 특히 주의 하실 점은 배경 크기가 너무 작으면 페럴랙스 적용시에 짤릴 우려가 있으니 충분히 큰 사이즈(1920x1080 이상)를 적용해주셔야 합니다. 원활한 스크롤링 속도를 위해서 페럴랙스 이미지는 장당 100kb 이하의 JPEG 이미지를 권장합니다.
유의사항
베이스 css는 dynamite.css이며 기본 티스토리 스타일은 이것 보다 우선순위가 높기 때문에 이 위에 덮어쓰는 방식으로 수정을 하시면 됩니다. 베이스 css는 무분별한 수정으로 인하여 오류가 나는 것을 막기 위해 압축 처리되어 있습니다. 굳이 이 파일을 건드릴 필요 없이 Style.css만 수정하시면 됩니다.
IE9 이하 지원 안 합니다. 계획도 없으니 요청금지.
개인 별 커스텀 수정 역시 요청 받지 않습니다. 수정 요청 금지.
하단 부 저작권 표시 지우지 마세요.
모든 기능은 jQuery 위주로 돌아갑니다. jQuery 빼지 마세요.
티에디션은 반응형으로 지원하지 않습니다.
티에디션 기본 베이스 프레임 웍인 블루프린트와의 충돌 문제 때문에 티에디션을 반응형으로 만들기 매우 귀찮고 까다롭기에 별도로 반응형 지원을 하지 않습니다. 능력 되시는 분은 직접 수정해서 쓰시기 바랍니다.
스킨 설치 방법
Dynamite 1.0.1.zip첨부파일을 다운로드 받습니다.
환경설정 → 스킨에서 스킨 등록
추가 버튼 클릭
파일 업로드 → images 폴더 안까지 싹다 업로드 해줍니다.
스킨 저장명 지정하고 해당된 이름의 스킨을 스킨 보관함에서 선택 후 적용 완료 하면 됩니다.
반응형 스킨이기 때문에 모바일웹 스킨은 반드시 꺼주셔야 합니다.
스킨관련 문의/버그신고
댓글 난에 해주시되, 그외 방명록이나 개인 메일로 요청시에는 가차없이 삭제합니다.
※ 페럴랙스에 사용된 이미지는 Unsplash에서 제공하는 무료 이미지 입니다.
16.9.11 - 폰트 엘리어싱 코드 삭제
