티스토리 블로그 반응형 웹 스킨으로 바꾼 후 좋은 것과 불편한 점
약 5년간 사용해오던 하츠의꿈 블로그 스킨을 뒤로하고 티스토리가 제공하는 '반응형 웹 디자인' 스킨으로 블로그 디자인을 변경했다.
그동안 사용하던 디자인은 티스토리의 기본 스킨을 상당 부분 수정해서 이용했었다. 5년전 스킨이다보니 부족한 점들이 많았기 때문이다.
한참전부터 반응형 웹 스킨을 사용하고 싶었지만 구글 애드센스 설정도 그렇고, 귀찮기도 해서 미뤄오다가 어젯밤에 무작정 바꿔버렸다.
<반응형 웹으로 변경한 '하츠의 꿈' 블로그 모습>
'반응형 웹 디자인(Responsive Web Design)'이란 PC나 모바일 등 웹을 이용하는 기기(디바이스)나 웹브라우저의 화면 크기에 최적으로 보일 수 있도록 스스로 반응하여 형태를 바꾸는 것을 말한다.
즉, 가로 1920 해상도로 웹 화면을 볼때나 800의 해상도로 볼 때, 스마트폰으로 볼 때 아무런 문제없이 웹 컨텐츠가 보여질 수 있도록 화면 구성이 자동으로 바뀌게 된다. 화면이 작을 때 축소해서 보여지는 것과는 다르다.
티스토리 블로그는 '반응형 웹 디자인'으로 바꾸는 것은 아주 간단하다. 관리자 -> 스킨 메뉴에 들어가서 티스토리에서 준비해 놓은 반응형 스킨 중에서 원하는 것을 선택한 후 [적용]을 누르면 바로 내 블로그에 적용이 된다.
티스토리 블로그 반응형 스킨 적용 후 해야 할 작업
티스토리 블로그는 상당히 다양한 플러그인이 존재하고 수동으로 html과 css 영역의 수정이 가능하다. 그렇다보니 다른 스킨으로 변경할 경우 고려해야 할 것들이 있다.
반응형 웹 디자인은 PC와 모바일 등 어떤 환경에서도 이용이 가능하기 때문에 굳이 '모바일 웹 스킨'을 이용할 필요가 없다. 티스토리 블로그는 기본으로 '모바일 웹 스틴'이 사용으로 설정되어 있어서 수정이 필요하다.
'관리자' -> '꾸미기'의 '모바일웹 스킨' -> 상단의 'OFF'을 선택한 후 하단의 [저장]을 클릭하면 된다.
티스토리 블로그의 첫페이지를 홈페이지 처럼 구성하는 '티에디션'을 사용 중이라면 해제를 해야 한다. 반응형 스킨에는 티에디션의 디자인이 잘 맞지 않는 경우가 많기 때문이다.
'관리자' -> 꾸미기의 '화면 설정' -> 티에디션 탭에서 [해제하기]를 클릭하면 바로 티에디션 사용이 중단된다.
티에디션 해제는 필수는 아니므로 반응형 스킨을 적용하고 블로그 첫 페이지를 확인한 후 필요 시 작업을 한다.
블로그 첫페이지를 '티에디션'으로 사용하지 않는 경우 첫페이지는 글 목록이 나타나게 된다. 초기 설정은 글 1개가 보여지는 것이고 그렇게되면 첫페이지가 상당히 비어 보이므로 글 개수 설정이 필요하다.
'관리자' -> '꾸미기'의 '화면 설정' -> 블로그 화면 영역에서 글 개수를 조정하면 된다.
내가 선택한 반응형 스킨은 #2 이다. 이 스킨을 적용하니 하단에 SNS 공유 버튼이 자동으로 추가되었다. 기존에 'SNS 글 보내기' 플러그인을 사용 중이어서 중복으로 표시가 되어서 이를 제거해야 했다.
'관리자' -> '플러그인' -> '플러그인 설정' 목록에서 'SNS 글보내기' 를 클릭한 후 하단의 [설정해지]를 클릭하면 글 하단에 나타나던 SNS 버튼들은 사라진다.
<반응형 웹 스킨 적용 후 다양한 환경에서의 모습>
스킨을 변경하면 기존에 사용하던 메인 이미지도 변경될 수 있다. 이것은 블로그의 아이덴티티를 보여주는 것이기도 하기 때문에 원하는 이미지로 변경해주는 것이 좋다.
'관리자' -> '꾸미기'의 'HTML/CSS 편집'을 클릭하면 새창에서 소스 편집이 가능하도록 기능이 실행된다. 우측창 상단에 '파일업로드'를 클릭하면 블로그에 임의로 파일을 등록할 수 있다.
내가 적용한 '#2' 스킨의 경우 'header_default.jpg'라는 이름으로 파일을 등록하는 경우 자동으로 메인 이미지가 변경된다.
나는 저작권없이 이용할 수 있는 사진을 제공하는 픽사베이(www.pixabay.com) 에서 사진을 다운로드하여 적용하였다.
반응형 웹 스킨의 경우 메인 이미지도 화면의 크기에 따라 자동 적용되기 때문에 가능하면 큰 사지의 이미지를 사용하는 것이 좋다. 적어도 1920x1080 이상의 해상도 이미지를 권장한다.
아직 반응형 웹 스킨으로 변경한 후 해야 할 작은 작업들이 꽤 있다. 기존에 사용하던 html과 css 소스 수정을 해야 하고, 구글 애드센스도 수동으로 사용하던 것이 있어서 조정이 필요하다.
'사이드바'라는 개념이 없기 때문에 측면에 사용하던 광고를 사용할 수 없게 되었고, 카테고리 등 박스가 좌측 상단의 메뉴 버튼 안으로 숨어서 사용자가 한번 더 클릭을 해야 블로그의 추가 정보를 확인할 수 있다.
또한, 반응형 웹 스킨으로 변경한 후 각 검색 포탈에서 어떻게 반응을 하게 되는 지, 애드센스에는 어떤 영향이 있는 지 지켜볼 필요가 있겠다.
