듀륏체리님께서 댓글에 tistory-spidersweb이라는 반응형 스킨이 있다는 내용을 적어주신 걸 보고 탐이 나서 몇 번 시도한 끝에 스킨을 바꿨습니다.

반응형 스킨을 사용하는 게 정말 어려울 거라고 생각했는데, 의외로 쉬웠어요. 그냥 그대로 쓰면 돼요. 안되는 건 그냥 포기하면 되니까요. 따지고 보면 굳이 필요한 게 아니거든요.  다음뷰 손가락같은 추천 위젯 넣기 어려워서 배경 그림 넣기 어려워서 반응형 스킨을 망설이던 분들에게는 바꿔보라고 적극 추천해드려요. 모바일이 대세가 된 지금에 별로 필요하지도 않은 것에 미련때문에 더 이상 미루지마세요. 그냥 가져다가 그대로 얻기만 하면 됩니다.

정 맘에 안들면 스킨 저장해뒀다가 클릭 한 번이면 바로 복구되니까 시험삼아 해보세요.

반응형 스킨

이번에 사용한 반응형 스킨은 Tistory skeleton이라는 스킨이에요. 다운로드도 받을 수 있고 사용법과 몇 가지 팁들이 다 모여 있어요.

지금까지 사용했던 스킨은 xhtml, css2로 된 스킨이라 수정을 하거나 추가하고 싶을 게 있을 때 별 어려움없이 바꿀 수 있었는데, 반응형 스킨은 css가 다르더라고요. 게다가 css 파일이 style.css와 bootstrap.css 두 군데로 나뉘어 있어서 더 복잡하고요.

반응형 스킨을 사용하되 바꾼지 얼마 안되는 현재 사용하는 스킨과 외형적으로는 똑같이 만들려고 했는데 실패했어요. 지금 사용하는 스킨은 본문의 넓이와 사이드바의 넓이, 그 간격 등을 px값으로 정확하게 지정해서 사용했는데 반응형 스킨은 그게 안되거든요. 얼추 됐다고 생각하고 테스트해보니 브라우저가 다르거나 해상도가 달라지면 레이아웃이 깨지는 문제가 있었어요.

사실은 지난 주에 계속 작업을 해도 이 문제가 해결되지 않는 바람에 그냥 포기하기로 했어요. 이거 하나 포기하니까 나머지는 술술 풀리더라고요.

본문 영역과 댓글 영역을 꾸미는 등의 내용은 기존의 것들을 복사, 붙여넣기해서 해결했습니다. class만 바꿨어요. 애드센스 광고도 화면의 가로 길이에 따라 변화하도록 반응형 광고로 새로 작성했고요. 되는 건 되게 하고 안되는 건 하지 말자라는 생각으로 하나씩 바꿔가니 지금의 모습이 되었네요.

반응형 스킨은 기존의 스킨에 비해 예쁘지 않아요. 하지만 꾸미던 것들이 사라지니 훨씬 더 깔끔해졌네요.

물론 아직도 해결하지 못한 것들이 있지요.

사이드바 왼쪽으로 옮기기
사이드바의 글 목록 앞에 bullet
사이드바 태그 목록을 가로로
하단의 페이지 영역 가운데 배치
기존에 본문에 직접 삽입했던 광고들

 

반응형 스킨 적용하고 가장 좋은 건 구글 웹분석도구의 통계를 모바일에서도 이용할 수 있다는 점이에요.

바꾼지 하루밖에 안되서 통계로서의 의미는 없지만 며칠 지나다 보면 쓸만한 통계가 될 거예요.

최근에 스킨과 애드센스 배치에 열중하면서 블로그에 수학 컨텐츠도 거의 올리지 못하고 있어요. 이번에 반응형 스킨으로 바꾼 다음에는 스킨에 대한 관심은 좀 꺼두고 자중해야 겠네요.

함께 보면 좋은 글

애드센스 A/B테스트을 쉽게 - 실험 베타 서비스
블로그 왼쪽 사이드바의 효과
애드센스 최적화 배치 방법, 히트맵(headtmap)