반응형 스킨이 나오고 처음에는 그냥 스쳐 보내다 점점 반응형 스킨으로의 사용이 많아지면서 슬슬 나도 적용해보고 싶다라는 생각이 일어나기 시작했네요 생각만 가지고 3달 가까이 유명한 스킨도 찾아보고 반응형 스킨에 장단점을 살펴보면서 여러가지 고민 끝에 드디어 제 블로그에도 반응형 스킨을 적용하기로 결심! 어떤 스킨을 사용할까하고 이것저것 마음에 드는 스킨을 적용해보기 시작! 최종으로 확정된 반응형 스킨은 '마크쿼리 스파이더웹 4.0!' 아쉽게도 개발자분의 작업은 중단되었지만 여러가지 스킨을 적용해본 결과 제가 생각했던 스타일에 가장 부합되는 스킨이라 선택하게 되었습니다. 단 업데이트와 커뮤니티등의 문의를 할수 없는 관계로 개인적으로 다양한 테스트와 공부를 직접 해야할꺼같네요! 반응형 스킨 설치후 이것저것 건드려보느라 2주정도 정신없이 보내고 지금은 그나마 어느정도의 셋팅으로 만족하며 사용중에 있습니다!
※ 마크쿼리 스마이더웹 4.0 설치방법!
(스파이더웹4.0 설치 파일들은 많은 분들이 블로그에 올려두셔서 별도 첨부하지는 않았습니다! 검색으로 쉽게 찾으실수 있으세요!)
1. 제일먼저 티스토리 관리자 페이지로 가셔서 좌측 메뉴에서 스킨(1) 클릭후 오른쪽 상단에 스킨등록(2) 버튼 클릭!
2. 스킨등록 버튼을 누르시면 위와같이 새스킨 등록 화면이 나오고 +추가 버튼을 누르셔서 스파이더웹4.0 파일들을 업로드 합니다!
3. 스파이더웹 4.0 설치파일 목록입니다. 추가 버튼을 누르신후 두번에 나눠서 1차업로드 파일을 먼저 올리신후에 2차로 images 폴더안에 있는 파일들을 모두 추가해주세요! 다른폴더는 업로드하실 필요 없습니다!
5. 두번에 나눠서 올린 스파이더웹 반응형 스킨 파일들의 모습입니다. 1차업로드는 파일명으로 나타나고 2차 images 포더 안에 파일들은 'images/' 부분이 자동으로 생성되어 업로드된 모습입니다. 모두 잘 올라갔는지 확인하신후 원하시는 스킨이름 (예:spiderweb4.0) 을 입력후 저장버튼 클릭!
6. 반응형 스킨을 저작하셨다면 관리자 페이지 좌측메뉴의 '스킨(1)' 항목으로 돌아가서 상단 '보관함(2)' 을 클릭해보시면 '스파이더웹4'라는 이름의 스킨항목이 만들어진걸 확인하실수 있습니다. 여기서 해당 스킨의 '적용(3)' 버튼을 누르시면 마크쿼리 스파이더웹 4.0 반응형 스킨이 적용됩니다!
※ 스킨 적용시 기존 사용하던 티스토리 스킨은 반드시 저장하신후 새로운 스킨을 적용해주세요!
※ 개인적으로 변경한 부분!
1. 제일 처음 변경한 부분은 원래 마크쿼리 이미지로 롤링배너가 있었던 부분을 단독이미지로 롤링없이 변경하였습니다. 상단메뉴도 변경해 주었네요!
2. 메인페이지를 티에디션으로 적용하여 꾸며 보았습니다. 마크쿼리 스파이더웹 4.0의 경우 티에디션을 적용하시려면 설치파일중에 test폴더 에서 tiedition폴더로 들어가시면 horizontal, thumb-list, vertical 3가지 스타일로 코딩소스가 들어있습니다. 그 코딩을 복사하여 티에디션에서 HTML로 직접 작업해서 적용해주시면 됩니다.
3. 사이드바에 달력이 없어서 별도 코딩으로 추가하였습니다.
4. 페이지가 나타날때 로딩화면이 잠깐씩 보였는데요 그부분도 제거해 주었습니다.
5. 아이폰에서 페이지가 안보이는 문제가 있어서 jquery.animsition.min.js를 최신버전으로 교체!
※ 그외 전체적인 레이아웃은 스파이더웹 4.0 그대로 사용중에 있습니다!
※ 웹 & 모바일 적용된 모습!
웹브라우저에서 보이는 제 블로그의 모습을 캡쳐해 보았습니다.
웹브라우저를 모바일 사이즈로 줄여서 모바일에서 보여지는 모습도 캡쳐해 보았습니다.
※ 반응형 스킨 적용후 느낌점!
1. 티스토리 반응형 스킨을 사용하면 방문자수가 줄어든다는 이야기가 있었는데요 개인적으로는 큰 변화없이 기존 그대로 유지되고 있습니다.
2. IE7.0이하 버전은 지원 X (시간이 해결해주는 문제!)
3. 스킨을 원하는 디자인으로 바꾸려면 CSS를 잘 알아야 자유롭게 변형가능 (공부와 테스트가 계속 필요할꺼같네요!)
4. 웹과 모바일이 동일한 페이지이기때문에 모바일에서는 사이드바 메뉴에 따라 페이지가 길어질수도 있다는점! 적당한 개수가 중요하네요! 또는 코딩으로 제어!
★ 그외 특별히 불편함이나 문제점들은 발견하지 못하고 사용중에 있습니다. 개인적으로는 매우 만족!
copyright @ xinsound (씬사운드) all rights reserved.