최근 반응형웹이 떠오르고 있습니다. 스마트폰, 테블릿PC, 노트북, 데스크탑 등 다양한 디스플레이 환경이 있다보니, 웹페이지 모습은 한결같을 수가 없는 시대가 온 것이죠. 블로그도 마찬가지입니다. 300*500 픽셀의 모바일 디스플레이서부터 700픽셀대의 아이패드나 갤럭시노트, 1000 픽셀대의 12인치 노트북, 2000 픽셀대의 데스크탑에 어떻게 하면 적절하게 DP를 할까 고민하게 되었습니다.
내 티스토리 스킨, 반응형웹으로 바꾸자!
아직 티스토리에서는 반응형 웹에 대비한 공식 스킨은 없습니다만, 티스토리 스킨으로 반응형웹 스킨을 찾을 수 있었습니다. Ungki, H 이라는 분이 운영하는 블로그(http://markquery.github.io/)에서 다운받을 수 있습니다.
좌측 SKELETONS 스킨 메뉴에서 Tistory 를 클릭하면 됩니다.
반응형웹 스킨의 두 가지 버전, Spider's Web vs Doo Be Doo
반응형웹 스킨으로는 두 종류가 있습니다. Spider's Web 버전과 Doo Be Doo 버전 두 가지인데요. 설명에도 나와있다시피, Spider's web 버전은 2단 구조, 그러니깐 상단의 헤더부분, 좌측의 컨텐츠, 우측의 카테고리 영역으로 나누어져 있는 스킨이고, Doo Be Doo 버전은 1단 구조, 즉, 상단에 헤더, 그리고 컨텐츠, 하단에 카테고리 영역이 있는 스킨입니다. 원하는 버전을 클릭하면 다음 화면이 나옵니다.
데모 버전을 보시면 더 확연하게 차이를 알 수 있습니다. Download 를 버튼을 누르면 각각의 반응형웹 티스토리 스킨을 다운 받을 수 있습니다.
다운받은 파일은 압축되어있으며 압축을 풀면 다음과 같습니다.
빨간색 테두리 되어있는 파일을 티스토리 블로그 스킨함에 업로드만 하면 됩니다.
티스토리 관리자 화면에서 '꾸미기>스킨'에서 우측의 스킨등록 버튼을 눌러준 다음, 추가 버튼을 눌러 압축푼 파일들을 차례대로 업로드 시켜줍니다. 하위폴더까지 한꺼번에 업로드 되지 않으니 전체파일 한번 업로드 해주고, images 폴더 들어가서 따로따로 업로드해주면 아래와 같이 되죠.
스킨명 입력한 뒤에 '저장'버튼을 눌러줍니다. 참, 중요한 사실한가지가 있는데요, 비록 티스토리 반응형웹으로 바꿔볼려고 마음먹으셨더라도 혹시 모르니 기존에 사용하던 스킨은 미리 저장해 놓으시는게 좋습니다. 뭔가 마음에 안들 땐, 기존 스킨으로 돌아갈려면 귀찮고 번거롭더라고요. 작업전 저장은 필수! 입니다.
그렇게해서 저장을 하시고, 스킨을 선택하신다면, 티스토리 반응형웹 스킨으로 변신성공하셨을 껍니다. 반응형웹 스킨이 정상 작동한 것을 확인하셨다면, 이후 몇 가지 작업을 더 하셔야 하는데, 그건 다음 포스팅으로 남겨두겠습니다. ^^
