2단 사이드바 또는 3단 레이아웃이라고 불리우는 스킨 형태가 있습니다. 티스토리 기본 제공 스킨 중에도 이런 형태가 있는데요, 사이드 바에 아주 많은 것을 넣거나 아니면 사이드바 길이 때문에 스크롤이 길어지는 것을 꺼리는 경우에 이런 레이아웃을 사용합니다. 그러나 반응형 웹 시대가 도래하면서 이런 형태의 레이아웃은 점차 사라지게 되었습니다. 첫번째 이유는 여러 부분으로 쪼개지기 때문에 반응형으로 만들기가 까다롭습니다. 두번째는 사이드 바 하나 만으로도 반응형 만들려면 머리가 아픈데 2개나 되니 더욱 두통이 심해지기 때문입니다.
그래서 반응형 초창기 도입 단계에 3단 레이아웃은 종말을 선언하였고, 얼마 지나지 않아 2단 레이아웃도 서서히 종적을 감추고 있으며, 현재는 1단 레이아웃을 넘어서 full screen layout 이라는 새로운 개념이 등장해서 웹 디자인의 대세가 되고 있습니다.
3단 레이아웃은 이런 고전적인 레이아웃이기는 하나, 이런 레이아웃도 구성만 잘 잡으면 반응형으로 문제 없이 사용할 수 있습니다. paper 스킨도 이러한 단순한 아이디어에서 출발했습니다. paper 스킨은 3단형 스킨을 만들되, 사이드바는 반응형을 넣지 않고 본문 영역에만 반응형이 적용됩니다. 그러나 이 방법으로는 3단 레이아웃을 모바일에서 표시하기에는 한계가 있기에 테블릿에서는 2단 레이아웃, 스마트 폰에서는 1단 레이아웃으로 자동 변경이 됩니다.
이런방식의 장점으로는 사이드바의 너비가 고정되어 있다보니 반응형에 최적화 되어있지 않은 구형 위젯들을 사용하기가 용이합니다. 소셜 네트워크 플러그인의 경우 반응형이 대부분 그럭저럭 지원되는 편이지만, 네이버나 다음에서 지원하는 블로그용 위젯들은 반응형이 아예 안되거나 반쪽 짜리인 경우가 대 다수 입니다. 2단 사이드 바를 놓고 쓰시는 분들은 대부분 화면에 아주 많은 위젯을 띄고 쓰시는 경향이 있기 때문에 반응형 스킨을 도입하기가 쉽지 않습니다.
본문 영역만 반응형으로 넣으면서 새로운 시도를 해보았습니다. 이전 작인 Life is a Journey나 Prototype 스킨은 반응형 스킨 임에도 화면 넓이 100%를 차지 하는 아주 독특한 형태를 취하고 있습니다. 이것을 만들면서 터득한 방법을 활용하여, paper 스킨은 최대 해상도의 제한이 없습니다. 최소 해상도는 320px이며 최대 해상도는 사용자의 모니터 크기 만큼이 곧 제한 해상도 입니다. 말 그대로 가로 폭이 2560이건 2880이건 전혀 문제가 없다는 겁니다. 스킨의 기본 글 넓이는 1920px으로 지정이 되어있으나 취향에 따라서 무한대로 늘여서 사용할 수 있습니다.
본 스킨에서는 반응형 스킨으로는 상상을 초월할 정도로 아주 적은 용량(0.07mb)과 매우 빠른 자바스크립트 플러그인 로딩속도를 구현했습니다. 자바스크립트 라이브러리는 YUI를 사용하여 비교적 간단한 기능을 보다 빠르게 구현하였습니다. 기존에 jQuery보다 기능은 적지만 필수 적인 것들을 아주 적은 용량으로 지원하고 야후 서버 cdn에서 끌어오므로 로딩 속도가 정말 빠릅니다. 일례로 이전 작인 Hare 스킨의 평균 로딩시간이 2.5초대 인데 비해, Paper 스킨은 1.5초대의 속도를 자랑합니다. 이전 작인 Hare를 가장 가벼운 반응형 스킨이라는 거창한 타이틀로 내어 놓았었는데, Paper 스킨이 그 자리를 뺏어와 버렸습니다. ㅎㅎ
2단 사이드 바는 두 곳에 모두 위젯을 넣을 수 있습니다. 첫번째 사이드 바의 가로 폭은 200px이며, 두번째 사이드 바의 가로 폭은 300px 입니다. 예를 들면 첫번째 사이드바에는 스카이 스크래퍼 광고를, 두번째 사이드바에는 정사각형 광고를 넣는 것도 나쁘지 않아 보입니다. 취향에 따라 원하는 위젯을 마음껏 넣어보세요.
스크린 샷
유의사항
베이스 css는 paper.css이며 기본 티스토리 스타일은 이것 보다 우선순위가 높기 때문에 이 위에 덮어쓰는 방식으로 수정을 하시면 됩니다. 베이스 css는 무분별한 수정으로 인하여 오류가 나는 것을 막기 위해 압축 처리되어 있습니다. 굳이 이 파일을 건드릴 필요 없이 Style.css만 수정하시면 됩니다.
IE9 이하 지원 안 합니다. 계획도 없으니 요청 금지.
개인 별 커스텀 수정 역시 요청 받지 않습니다. 수정 요청 금지.
첫번째 사이드바 저작권 표시 지우지 마세요.
티에디션은 반응형으로 지원하지 않습니다.
티에디션 기본 베이스 프레임 웍인 블루프린트와의 충돌 문제 때문에 티에디션을 반응형으로 만들기 매우 귀찮고 까다롭기에 별도로 반응형 지원을 하지 않습니다. 능력 되시는 분은 직접 수정해서 쓰시기 바랍니다.
스킨 설치 방법
Paper.zip첨부 파일을 다운로드 받습니다.
환경설정 → 스킨에서 스킨 등록
추가 버튼 클릭
파일 업로드 → images 폴더 안까지 싹 다 업로드 해줍니다.
스킨 저장명 지정하고 해당된 이름의 스킨을 스킨 보관함에서 선택 후 적용 완료 하면 됩니다.
반응형 스킨이기 때문에 모바일 웹 스킨은 반드시 꺼주셔야 합니다.
스킨 관련 문의/ 버그 신고
댓글 난에 해주시되, 답변은 첫 휴가 나오면 일괄로 해드리겠습니다. 방명록이나 메일로 요청시에는 가차없이 삭제합니다.
