hyozin.com

#2 티스토리 반응형 스킨 적용 후기 올려요 본문

모바일 IT

#2 티스토리 반응형 스킨 적용 후기 올려요

효진님 2016.03.11 16:28

반응형 티스토리 스킨 적용 후기.


모바일 화면과 PC 화면 둘 다 사용할 수 있는 반응형 스킨은 이미 대세를 넘어 기본으로 자리를 잡았더군요 2014년도 1월에 처음 반응형 스킨을 적용 했을 때는 반응형 스킨 사용자가 그렇게 까지는 많지 않았던 것으로 기억 됩니다.


그 때만해도 티스토리에서 기본으로 제공하는 반응형 스킨은 없었는데 이제는 기본 스킨으로 반응형 스킨을 제공하고 있습니다.


이 블로그에 마크쿼리 스파이더스웹 4.0 스킨을 적용했다가 티스토리에서 제공하는 #2 반응형 스킨을 살짝 수정하여 현재 사용 중 입니다.


#2 반응형 스킨이 100% 맘에 들지는 않지만 직접 스킨 만들기와 디자인 제작을 할 능력이 되지 않으니 그냥 입 다물고 감사히 사용해야겠죠 ^^




#2 반응형 스킨 커스터마이징 수정 부분.


구글 크롬 브라우저에 내장된 개발자 도구를 이용하여 #2 스킨 중에 맘에 안 드는 부분이나 바꾸고 싶은 것을 임의로 수정했습니다. 가장 먼저 PC 화면에서 보이는 기준으로 본문 폭을 728px로 변경 했습니다. 애드센스 배너 광고가 728px라서 거기에 맞춘 겁니다.



그 다음은 유튜브 동영상이 반응형으로 보이도록 CSS에 클래스를 몇 줄 추가했습니다. 그냥 링크로 넣으면 알아서 반응형으로 유튜브 동영상 플레이어 화면이 나올 줄 알았는데 모바일 모드에서 확인 해보니 플레이어 상하로 검은 여백이 나오면서 비율이 반응형으로 구현되지 않더군요



제이레빗 - Part of Your World


위의 링크 처럼 유튜브 플레이어 화면이 본문 폭에 꽉 찬 비율로 적용이 되며 모바일에서도 마찬가지 입니다.


#2 반응형 스킨에는 풋터에 별도의 글 더보기 박스가 있습니다. 썸네일 이미지 위에 해당 포스트 기사 제목이 오버레이 되어 페이지뷰 상승에 도움을 줍니다.


같은 기능으로 티스토리 관리자 메뉴에서 플러그인 중에 글 더보기가 있는데 이 플러그인을 사용하면 글 더 보기 박스가 본문 끝나고 바로 붙어서 보이기 때문에 애드센스 광고 배치와 레이아웃이 겹쳐 불편 했었는데 스킨 자체에서 글 더 보기를 지원하여 플러그인 글 더보기는 사용 안함으로 해지해버렸습니다.


글 더 보기 박스에서 기사 제목이 좀 더 명확하게 보이도록 폰트 크기를 살짝 키우고 CSS 스타일로 글꼴에 그림자를 넣었습니다.


마찬가지로 소셜 서비스 공유 기능도 플러그인 기능을 대신할 수 있도록 스킨 자체에서 제공을 합니다.


좌측 사이드바 상단의 서랍 메뉴 아이콘을 누르면 카테고리와 최근글, 댓글, 방문자 통계를 볼 수 있고 별도 "네이버 이웃 추가" 위젯을 달았습니다. 이웃이 한명 뿐이네요 이웃 추가 환영 합니다 ^^ 



#2 스킨을 저장하면 기본으로 설치되는 헤더 이미지 용량이 무려 3MB 정도 됩니다. 휴대폰에서 블로그 페이지를 열어 보려면 데이터도 소모되고 로딩이 느리고 무겁죠 그래서 아예 삭제를 해버리고 백그라운드 컬러로 바꿨습니다. 이렇게 하면 로딩 속도가 좀 더 빨라 집니다.


그 밖에 자잘한 것들, 영어로 된 각종 버튼이나 메뉴를 한글화 했습니다 ^^ 태그 스타일을 요즘 유행하는 # 해시태그 스타일로 살짝 고쳐 허세를 좀 부려 봤습니다 ㅎㅎ 아직 블로그에 글이 많지 않지만 포스팅이 늘어나면 페이지뷰 상승에 도움이 되지 않을까 싶네요


#2 스킨 디자인 요소 중 가장 맘에 안 드는 부분은 모바일 화면에서 페이지 상단에 내 블로그 제목이 노출되지 않는 것 입니다. 이 부분을 수정할려고 주말 내내 매달려 봤는데 Z-index 추가로 보이도록 하는데는 성공했지만 글 검색 인풋과 리스트 타이틀이 겹쳐버려 결국에는 포기했습니다. 이 문제는 내비게이션 메뉴를 완전히 새롭게 설계해야 해결되지 않을까 싶습니다. html5와 css3 공부를 틈틈이 해야겠습니다. -끝-

댓글 7
댓글쓰기 폼