반응형 티스토리 스킨 수정작업 겨우 완료 했네요

작년 말 크리스마스 때 쯤, 그때까지 사용하던 티스토리 스킨을 버리고 새롭게 적용하여 블로그 스킨을 변경했었는데 설 연휴인 오늘에서야 마무리가 되었습니다.


스킨은 마크쿼리 스파이더스웹을 설치 했습니다. 그 전에 사용했었던 스킨과 같은 것인데 그 전 것은 너무 과하게 수정을 하며 단순화 시켜 스킨 디자인이 너무 이상해 진 느낌이 들었습니다 ^^


스파이더스웹 스킨은 부트스트랩이 적용된 반응형 스킨으로 많은 분들이 사용하는 반응형 티스토리 스킨 입니다. 반응형 스킨은 아이폰, 아이패드 같은 모바일 기기와 PC 화면, 휴대폰 화면에 맞게 자동 반응하여 스킨 하나로 여러 디바이스에서 블로그 콘텐츠를 화면에 알맞게 보여 줄 수 있는 장점이 있습니다.


특히, 요즘은 블로그 방문자의 상당수가 휴대전화를 통한 무선 인터넷 연결로 방문을 하기 때문에 모바일 환경에 탁월한 반응형 스킨을 설치하는 것이 필수 입니다.


구글 아날리틱스 분석 보고서를 보니 제 블로그 방문자 분들의 화면 해상도는 PC 기준으로 제 노트북 화면 해상도인 1600 x 900 보다 높은 1920 x 1080이 5배에 이를 정도로 가장 많았습니다. 1024 x 768 해상도는 1920 x 1080 해상도의 1/10 수준이더군요 2년 전에 비해 1024 x 768 해상도의 모니터를 이용하는 방문자가 크게 줄었습니다.


그 동안 최소 1024 x 768 화면 해상도로 방문하는 분들을 고려하여 블로그 레이아웃과 폰트 크기를 결정 했었는데 이제는 1920 x 1080 화면 해상도를 기준으로 블로그 레이아웃을 결정해야겠다는 생각이 들었습니다.


그래서 반응형 스킨을 수정하면서 콘텐츠 본문의 넓이를 1920 x 1080 화면 해상도에서 볼 때 안정감 있게 보이도록 가로 폭을 넓혔습니다. 아직 1600 화면 해상도로 방문하는 분들도 많이 있어 답답해 보이지 않을 정도로만 넓혔습니다.



ohharu.com 메인 페이지는 티에디션으로 꾸몄고 스킨 상단에는 글 검색을 위한 고정식 네비게이션 바를 적용했습니다. 오프캔버스 스타일의 메뉴 링크는 번잡스럽게 느껴져 빼버렸습니다. 제 블로그에서 제공하는 카테고리 같은 메뉴가 많은 것도 아니고 모바일에서는 사이드바가 하단에 배치 되기 때문에 굳이 메뉴 링크를 네비게이션바 처럼 고정식으로 둘 필요는 없다고 판단했습니다.


본문 넓이는 bootstrap.css를 편집하여 Col-sm-9, 사이드바는 Col-sm-3의 퍼센트 값을 조절하여 합이 100%가 되도록 맞추면 되는데 사이드바 넓이 퍼센트를 먼저 맞춘 후 본문 넓이를 미세조절 하시면 됩니다.


아래 예의 코드 처럼 미디어쿼리 부분의 max-width 수치를 조절하면 됩니다.



@media (min-width: 1200px) {

  .container {

    max-width: 964px;


제가 사용하고 있는 스킨은 마크쿼리 스파이더스웹 1.2.2 버전 입니다. 현재의 4.0 버전 보다는 구버전이라 코드 적용은 맞지 않을 수도 있습니다.


이번에 티스토리 반응형 스킨을 새로 적용하여 수정 작업을 하면서 미흡하나마 CSS3를 많이 공부하게 됐는데 skin.html 파일에서 스타일 관련 코드는 css 파일로 옮겨 놓는 것이 여러모로 편리하다는 생각이 들었습니다.


Class와 ID의 차이와 inline-block의 편리성도 알게 되었고 overflow 속성으로 화면 처리 방법도 알게 되었습니다. Css의 가장 기본적인 것들인데도 이제까지 모르고 있었다니 ^^ skin.html과 style.css 편집은 노트패드 ++를 이용하여 수정했습니다. 전용 에디터를 사용하는 것이 크롬 브라우저에서 수정하는 것 보다 생산성도 높고 편리 합니다.


아무튼 매일 수정 작업에 매달린 것은 아니지만 반응형 스킨 새로 적용 후 거의 2개월 가까이 이것저것 자잘하게 손대면서 제 나름대로 스킨을 최적화하여 테스트를 해보니 이전보다 아주 조금이나마 페이지 로딩 속도도 빨라진 것 같고 모바일 상에서도 로딩 속도가 빨라진 기분이 듭니다.


이제 당분간은 더 이상 스킨에는 손대고 싶지 않네요 ㅎㅎ 스킨 수정 작업은 저에게는 정말 골치 아프고 힘든 일 입니다. 제가 스킨 관련 전문가가 아니다 보니 수정 작업은 주로 크롬 브라우저의 요소검사를 통해 디버깅 하듯 하나씩 찾아 코드를 살짝 바꿔 보고 추가하면서 변경할 부분을 찾아 내는 방식으로 작업하여 글꼴 색상 하나 바꾸는데도 많은 시간이 들었답니다. 아직 반응형 스킨을 설치 하지 않았다면 반응형 스킨 적용을 고려해보시길 바랍니다. 반응형 스킨은 사용자가 비교적 많은 스파이더스웹 스킨을 추천 합니다. 새해 복 많이 받으세요 !! -끝-