티스토리를 이용해서 3년간 블로깅을 하면서 의외로 스킨은 약 3~4회만 교체를 했던것 같습니다. 스킨을 어느정도 내 입맛에 맞게 꾸밀수 있다는게 티스토리의 장점이긴 하지만 바쁜 직장인이다 보니 포스트 작성에도 시간을 할애하기 힘든데 스킨을 변경하면서 이런저런 손을 대는 과정이 스킨을 바꾸어서 얻는 만족감보다 귀찮음이 더 클때가 많아서 쉽지만은 않은 일이었습니다.
티스토리 블로그의 경우 모험심이 강한 많은 분들은 화면에 따라 구성이 변하는 반응형 스킨을 일찍 부터 적용하신 경우도 많이 있었지만 간혹 그 과정을 보면 많은 시행착오나 시간이 필요한 일들이었기에 엄두가 나지 않았고 티스토리가 정식으로 반응형 스킨들을 지원하기 시작했지만 어딘가 한 부분씩 마음에 안드는 부분들이 있고 꼭 한가지씩은 불편함이 있어서 언젠가는 반응형 스킨으로 교체해 봐야지 하면서 차일피일 미루어 왔었습니다.
그래도 반응형 스킨에 관심이 늘 있다 보니 이번에 티스토리의 정식으로 제공한 #1과 #2 중에 #2의 깔끔함이 마음에 들어서 오랜만에 쉬는날 마음을 강하게 먹고 스킨을 바꾸어 보았습니다. 스킨을 수정 할 때마다 세세하게 적용할 것들이 참 많았기에 걱정이 앞섰는데 의외로 스킨 변경후 할 일들이 많지 않았습니다.
그 이유는 그동안 애드센스나 구글 애널리틱스, 네이버 애널리틱스 등 수익이나 통계툴 등 여러가지 부가 항목들이 플러그인으로 제공되면서 대부분 스킨에 넣던 부분들을 플러그인으로 변경해 두었기 때문인것 같습니다. 스킨 변경을 하시기 전에 플러그인으로 변경가능한 부분은 미리 변경해 두시면 스킨 후 수정할 일들이 많이 줄어 듭니다.
#2 반응형으로 스킨을 교체하는 방법은 무척 간단합니다. 관리자 메뉴에서 스킨을 선택하고 하단에 적용을 누르면 바로 적용이 됩니다. 참 그전에 혹시 예전 스킨으로 돌아가고 싶을 수 있으니 스킨 메뉴에서 스킨저장을 눌러 기존 스킨을 백업해 두시기 바랍니다.
적용한 후 메인 이미지를 기본이미지에서 자신의 블로그에 맞는 이미지로 교체를 하시면 됩니다. HTML/CSS 수정 항목에서 파일업로드를 선택하고 "header_default.jpg" 라는 파일을 자신이 원하는 사진으로 교체해서 업로드 하시면 됩니다. 기본 이미지의 사이즈는 5184X3456 으로 저는 동일한 사이즈의 사진으로 교체를 했는데 꼭 해당 사이즈의 사진이 아니더라도 3:2 비율의 사진이면 문제되지 않는것 같습니다.
사진을 올리고 나시면 쿠키등을 삭제하거나 새로고침해서 보시지 않으면 브라우저에 따라서 사진이 교체되지 않은것 처럼 보일수도 있습니다.
반응형으로 고치고 나면 기존의 블로그 첫 화면을 꾸미는데 사용하던 티에디션이 문제가 되는 경우가 많습니다. 애초에 반응형을 고려하지 않은 툴이기 때문에 화면 사이즈에 따른 변화는 기대하기 어렵습니다. 블로그 글 목록을 바로 보여주셔도 좋지만 티에디션 같이 블로그 첫 화면에 입맛에 맞게 시각적으로 새 글들을 보여 줄 수 있는 기능이 아쉬울 수 있습니다.
다행히도 테터데스크 라는 플러그인이 티에디션을 대체할 수 있습니다. 우선 화면설정 메뉴에서 티에디션 기능을 끄시고 테터데스크로 블로그 첫화면을 꾸미시기 바랍니다.
테터데스크 플러그인을 활성화 하면 티에디션 처럼 화면 오른쪽 상단에 테터데스크 설정을 할 수 있는 작은 박스가 뜹니다.
먼저 첫 화면을 꾸밀 형태를 선택할 수 있습니다.
그 다음은 각각 배치 될 항목을 적절하게 아이템 배치를 선택하고 배치하면 됩니다. 티에디션에 비해 살짝 몇몇 기능상의 부족함이 보이지만 아쉬운대로 반응형의 첫화면을 꾸미기에 무리가 없습니다.
테터데스크에서 가장 아쉬운 부분은 카테고리별로만 선택이 가능하다는 점입니다. 물론 태그별 지정 기능도 제공하지만 많은 글들의 태그를 수정하는 것보다는 카테고리를 조정하는게 일이 적을듯 했습니다. 그래서 부득이하게 그동안 벌여놓은 카테고리를 통폐합 했습니다. 특별히 주제성을 가졌다기 보다 제가 좋아하는 주제들로 꾸미던 블로그이다 보니 카테고리가 꽤 벌려졌었습니다. 유사한 것들은 합치고 세세하게 나누었던 카테고리도 과감하게 합쳤습니다.
모바일에서도 동일한 스킨을 쓰는것이 애초의 목적이었기 때문에 설정을 하셨다면 티스토리의 기본 모바일웹 스킨 기능을 끄셔야 합니다. 다만 모바일등의 애드센스나 다른 기능을 넣어두셨다면 해당 모바일 플러그인들은 없애지 말고 그대로 유지하시기 바랍니다. 그 이유는 바로 티스토리앱의 경우는 모바일웹 스킨을 기반으로 블로그를 보여주기 때문 입니다.
반응형 스킨은 모두들 잘 아시겠지만 화면의 사이즈나 브라우저의 창 크기에 반응하여 화면 구성이 달라집니다. 위의 화면이 아마도 일반적으로 PC에서 보실때의 화면이 될 듯 합니다.
와이드가 아닌 태블릿이나 브라우저의 가로 폭을 줄인다면 아래와 같은 화면 구성이 됩니다.
약 5인치 중반이상 (아이폰 6+ 나 갤럭시 노트 같은) 화면이 큰 스마트폰이라면 아래와 같은 구성으로 화면이 바뀝니다. 제 스마트폰이 5.5인치의 아이폰 6S 플러스이다 보니 여기에 최적화를 하였습니다.
아이폰 6 이나 6S와 같은 4.7인치대의 스마트폰 이라면 이와 같은 화면 구성으로 변합니다. 과거의 스킨들 처럼 PC 따로 모바일 화면 따로 적용되지 않고 일관된 스킨 디자인과 인터페이스를 보여 줄 수 있다는 점이 가장 큰 장점 입니다.
반응형 스킨으로 교체하고 나면 일반적으로 티스토리 방문자수 카운터가 줄어 든다고 하는데 제 경우에는 큰 차이가 없었습니다. 스킨 교체후 두드러진 변화는 애드센스 수익이 소폭 상승했다는 점입니다. 이 부분은 반응형 스킨으로 교체 하면서 애드센스 배치를 조금 바꾸었기 때문인지 반응형 스킨으로 인한 효과인지는 기간이 짧아 파악이 어렵습니다.
티스토리 반응형 스킨 #2 의 가장 아쉬운 점은 글 목록에서 댓글수를 확인하기 어렵다는 점과 댓글에 작성자의 아이콘이나 파비콘을 볼 수 없는 점, 카테고리를 선택하고 이동 할 때의 속도가 상당히 느리다는 점 입니다. 기존 스킨에서 카테고리 이동시 보다 다른 처리가 있는 것인지 꽤 시간이 걸리는 편입니다. 이런 부분이 개선 된다면 제 개인적으로는 100% 만족스러운 스킨이 될것 같습니다.
