티스토리 반응형 스킨 FastBoot 1.6 적용 방법 및 필수 설정

엑스진 블로그 스킨(http://www.xjin.kr)을 유명한 티스토리 반응형 스킨으로 바꾸었다. 여러 버전이 있었지만, 나는 FastBoot v1.6을 선택했다. 처음에는 최신 버전인 1.6.2를 적용 시켰는데 모바일 페이지에서 카테고리 메뉴가 작동하지 않아 1.6으로 다운그레이드 하였다.

엑스진 블로그에서 사용하던 예전 스킨이다. 이 스킨도 마음에 들었지만, 대세가 반응형 스킨이기에 변경을 결심했다.

FastBoot v1.6으로 스킨을 변경한 후 조금 손 본 후의 모습이다. 시간 날 때마다 조금씩 손 볼 생각이다.

나에겐 조금 말썽을 부리긴 하였지만, 이 스킨은 스킨 소스를 수정할 곳이 별로 없어 쉽게 적용 시킬 수 있다. 티스토리 블로그 운영 경험이 전무하다면 어려울 수도 있겠지만, 운영경험이 있다면 큰 어려움 없이 티스토리 블로그를 반응형 스킨 FastBoot으로 변경할 수 있다.

스킨 변경 직후의 모습은 이랬다. 썸네일이 나와야 할 자리에 구멍이 생겼고, 상단 메뉴바가 아래로 터져버렸다. 보기 흉한 셈네일 자리 구멍과 메뉴바가 터지는 것은 간단하게 고칠 수 있다. 블로그 스킨을 FastBoot으로 변경하고 싶어 하는 사람들을 위해 티스토리 반응형 스킨 FastBoot의 적용 방법과 필수로 설정해야 하는 것들을 알려주도록 하겠다.

티스토리 반응형 스킨 FastBoot은 http://blog.readiz.com/214 블로그에서 다운로드 받을 수 있다. 최신 버전을 다운로드 받으면 된다. 다운로드 받은 티스토리 스킨은 압축 파일로 되어 있는데, 미리 압축을 풀어 준비해 놓는다. 스킨 변경 작업을 할 때 혹시 모를 상황에 대비해 기존의 스킨은 미리 백업해 놓고 진행하길 바란다.

티스토리 블로그 관리자 페이지에서 스킨 메뉴로 들어간다. 우측 상단에 있는 스킨 등록 버튼을 클릭한다. 스킨에서 현재 사용하고 있는 스킨을 저장 할 수 있다. 사용 중인 스킨의 썸네일 우측에 스킨 저장 버튼이 있다. 이 버튼을 클릭하면 사용 중인 스킨이 저장 된다. 저장된 스킨은 클릭 한번으로 다시 적용 시켜 사용 할 수 있으니 스킨 저장으로 사용하던 스킨을 백업 후 새로운 스킨 등록 작업을 진행하는 것이 좋다.

스킨등록 버튼을 클릭하면 위와 같은 새스킨 등록 화면이 나온다. 파일 목록이 비어 있고, 스킨 저장명도 비어 있는 아무것도 없는 상태로 나온다. 스킨 저장명을 입력한 후 추가 버튼을 클릭하여 미리 준비해둔 티스토리 반응형 스킨 FastBoot의 파일들을 업로드 해주면 된다.

스킨 파일을 업로드 할 때 주의해야 할 부분이 있다. 티스토리 버그인지 의도된 것인지는 모르겠지만, 티스토리 스킨 파일을 업로드 할 때는 2번에 나눠 업로드 해야 한다. images폴더 밖에 있는 파일을 우선 먼저 업로드 해준 후 2차로 폴더 안에 있는 파일을 업로드해줘야 한다.

다시 말하지만 새스킨 등록 화면에서 추가 버튼을 클릭한 후 1차로 이미지 폴더 밖에 있는 파일을 업로드 해줘야 하고, 2차로 위에 캡쳐 이미지와 같이 이미지 폴더 안에 있는 파일들을 등록해야 한다.

스킨 파일을 모두 업로드 하였다면, 스킨 저장명을 다시 확인한 후 저장 버튼을 클릭하면 된다.

새스킨 등록을 통해 업로드한 스킨은 보관함에 등록된다.

등록되어 있는 스킨 우측에 적용 버튼을 클릭하면 블로그 스킨이 티스토리 반응형 스킨 FastBoot으로 변경된다.

티스토리 반응형 스킨 FastBoot을 사용하려면 블로그 카테고리를 5개 미만으로 줄이는 것이 좋다. 카테고리가 많으면 상단 메뉴바가 보기에도 흉해지고, 아래로 터져 나온다.

블로그 카테고리를 5개 미만으로 줄일 때 최상위 바로 아래에 있는 상위카테고리만 정리하면 된다. 블로그명>상위카테고리>하위카테고리로 되어 있는 것을 아래처럼 상위카테고리가 5개 이하로 되게 줄이면 된다. 만약 카테고리명이 길다면 더 3~4개로 줄여야 할 수도 있다.

3~4 글자로 된 카테고리 명을 사용한다면 5개~6개 정도의 카테고리를 사용해도 된다.

카테고리 갯수를 줄이면 상단 메뉴바가 깔끔해져 보기 편안해진다. 카테고리가 많으면 상단메뉴바가 터지기도 하지만 정신 사납게 보기에도 좋지 못하다.

화면 왼쪽편에 있는 삼각형 아이콘을 클릭하면 숨겨져 있던 카테고리 메뉴가 나타난다. 이곳 카테고리 메뉴는 모바일에서 보여지게 되기에 카테고리명이 짧고 적은 것이 보기에도 좋고 이용하기에도 좋다.

FastBoot 스킨은 화면 크기에 따라 스킨의 크기와 모양이 변형되는 반응형 스킨이기에 티스토리 모바일웹 스킨은 꺼도 된다. 솔직히 반응형 스킨을 사용하는 이유 중의 하나가 티스토리 모바일 스킨을 사용하지 않기 위함이니 모바일 스킨은 필수로 off로 변경한 후 저장 시켜줘야 한다.

블로그 글 환경에서 발행 글이 전체 공개로 되어 있다면 티스토리 반응형 스킨 FastBoot의 메인 화면을 사용해도 된다. 티에디션은 해제하고 스킨에 있는 기능을 사용하면 된다.

하지만 반대로 엑스진 블로그처럼 블로그 발행글이 부분 공개로 설정 되어 있다면 티에디션을 사용하는 것이 좋다. 티스토리 반응형 스킨 FastBoot을 사용할 때 발행 글이 부분 공개로 되어 있다면 글 목록이나 메인 화면에에서 썸네일이 나오지 않기 때문이다.

FastBoot 스킨으로 티스토리 블로그 스킨을 변경하게 되면 스마트폰 등으로 접속했을 때 이렇게 보여진다. 티스토리 기본 모바일웹 스킨은 더 이상 사용할 이유가 없다.