사실 현존하는 티스토리 스킨 중 쓸만한 스킨은 꽤 많은 편입니다. 반응형이라는 조건만 없다면요... -_- 사실 티스토리에 스킨은 많지만 쓸만한 반응형 스킨은 별로 없습니다.


저의 경우에도 약 1달 전까지는 반응형이 아닌 일반 스킨을 디자인을 바꾸고 임의로 수정해서 사용했었습니다.


(캡쳐 : 당시 스킨의 모습. 지금 스킨의 디자인과 별반 다를 바 없지만 조금 다르게 생겼습니다.)




근데 일반 스킨을 반응형으로 바꾸려니... 짜증나는 부분이 한두가지가 아니더군요. -_-+


그래서 반응형 스킨을 직접 처음부터 제작하게 되었습니다.


물론 다른 사람이 만든 스킨을 수정해서 사용하던 것을 다른 사람들에게 배포하게 되면 저작권 문제도 있어서... 처음부터 새로 만들어서 블로그에 공개하는 것이 차라리 낫겠다 라고 생각했던 것도 있습니다.




일반적으로 사람들이 반응형 스킨을 제작하려고 시도하는 이유는 다음과 같습니다.


주제에 따라서 조금씩 다르긴 하지만, 블로그 통계 분석시 일반적으로 모바일의 접속률은 상당히 높은 편입니다. 어떤 블로거분은 50% 이상이라고 말하더군요. 제 블로그는 그 정도는 아니지만, 그래도 20%정도 나와주니 무시할 정도는 아닙니다.


그런데 반응형이 아닌 일반적인 스킨으로는 모바일에 대응할 수가 없으니, 모바일에 대응하기 위해 일반적으로 다음과 같은 방법을 사용합니다.



티스토리의 모바일웹스킨을 따로 사용합니다.


근데 이 방법의 치명적인 문제가 하나 있습니다.


이거 쓰면 모바일에서 구글 애드센스를 효과적으로 노출시킬 수가 없습니다.-_- 이 말인 즉슨, 블로그의 스킨이 블로그의 직접적인 수익구조에 영향을 줄 수도 있다는 뜻입니다.


이 문제를 해결할 수 있는 방법이 반응형 스킨을 사용하는 것입니다. 반응형 스킨을 사용하면 모바일에서도 구글 애드센스를 제대로 노출시킬 수 있고, 모바일에서 광고를 노출시킴으로써 수익구조에 큰 변화를 일으킬 수 있습니다.


이런 이유 때문에 상업적인 블로거라면 반응형 블로그에 대한 생각을 진지하게 해 보셨을 분들이 꽤 많을거라 생각됩니다.






아직 반응형이 시기상조라고 이야기하는 분들도 꽤 많습니다. 물론 이런 주장을 펼치는 분들 중 전문가들도 상당수입니다. 왜냐하면 우리나라의 웹환경 때문입니다. 우리나라는 유독 익스플로러 구버전을 사용하는 사람이 많은데(전체 PC 사용자의 50% 이상이라는 통계가 있습니다.), 익스플로러 구버전에서는 반응형을 동작시킬 수가 없습니다. -_- 반응형이라 함은 html5와 css3를 사용해야 하는데, 익스플로러 구버전에서는 html5, css3 그 무엇도 작동하지 않습니다. 오히려 html5, css3를 함부로 썼다가는 익스플로러 구버전에서 블로그의 레이아웃 자체가 깨질 우려가 큽니다. 그래서 모바일을 신경썼다가 자칫하면 구버전 익스플로러를 써서 PC로 접속하는 또다른 많은 방문자들을 잃게 만들 수도 있습니다. 사실 이 문제 때문에 구글 애드센스가 끊기는 것은 아닙니다만,(외국은 우리나라와는 사정이 달라서 익스플로러 구버전 사용자를 거의 고려하지 않습니다.) 익스플로러 구버전 사용자에게 구글 애드센스가 제대로 노출되지 않으므로 수익구조에 또다른 문제가 생길 수 있습니다.


설마 티스토리로 외국 사용자들을 노리는 영어블로그 하는거 아니잖아요?




그래서 많은 이들의 접근성을 위해서 뿐만 아니라 수익적인 부분을 생각한다면, 우리나라 웹환경에서는 티스토리 반응형 스킨을 제작하면서도 익스플로러 구버전과 호환되게 만들어야 합니다. -_- 참 짜증나는 일이죠. 




이 문제에 대처할 수 있는 좋은 방법이 몇가지 있습니다.




1. html5shiv와 같은 자바스크립트 플러그인을 사용


html5shiv는 익스플로러 구버전에서 html5의 레이아웃이 깨지지 않게 만드는 일종의 플러그인입니다. 이런 종류의 플러그인은 이 것 말고도 몇가지 있는 것으로 알려져 있습니다. 기본 원리는 간단합니다.


html5 요소에 document.createElement()를 씁니다.


(좀 더 자세한 원리는 링크 참고 - 주의 : 영어입니다.)

http://www.developerdrive.com/2011/12/the-usefulness-of-the-document-createelement/


이 방법의 문제점은 자바스크립트를 안쓰는 사용자에게는 무용지물이라는 사실입니다. 특히 익스플로러는 사이트 접속 시 "이 사이트에서 javascript를 실행하겠습니까?" 라고 묻는 경우가 많은데 이 때 NO를 선택하면 다 소용없다는 뜻입니다. -_-




2. xhtml1.0에 css3 입히기


사실 이건 웹표준에 어긋나는 일이지만, 실무에서 꽤 많이 사용합니다. 제가 소개하려는 스킨에서도 사용한 방법이지만, 기업체 사이트에서 종종 사용하는 방법이기도 합니다. 정말 그런지 궁금하시다면 아래 사이트 방문해 보시길 권장합니다. 아래 기업사이트는 xhtml인데 웹폰트와 미디어쿼리를 씁니다.(...)


http://www.gift-car.kr/Board/PostView.aspx?categoryIdx=3&idx=2902






물론 이 방법들 만으로 익스플로러 구버전을 완벽 대응할 수 있는 건 아닙니다. 무엇보다 css3로 웹사이트의 가독성을 위한 핵심 요소를 넣을 때에는 css3가 동작하지 않을 때 어떤 모습으로 보여지게 만들지 대체할 수 있는 속성을 같이 기재해줘야 익스플로러 구버전에서도 정상 동작합니다. 


단순히 장식적인 요소로 css3를 쓸 때에는 익스플로러 구버전은 가볍게 무시해주시면 되겠습니다. 그렇게 하면 익스플로러 구버전에서는 좀 안예뻐 보이겠지만 레이아웃이 깨져 보인다거나 하는 큰 문제는 발생하지 않습니다.


이렇게 해도 해결되지 않는 문제들도 좀 있긴 합니다. 왜냐하면 익스플로러 구버전의 자체적인 버그 때문입니다. -_- 쩝... 그래서 웹사이트를 만들고 나서는 익스플로러 구버전에서 실행시켜 보고 발생하는 문제를 해결하는 것이 필요합니다. 때로는 웹표준에 어긋나는 핵을 써야 하는 경우가 생길 수도 있습니다.






사실 저의 경우는 블로그의 수익적인 부분 때문에 반응형 스킨을 생각한 것은 아닙니다. 그것보단 오히려 프론트엔드 개발 분야에 취직하기 위한 포트폴리오로 활용하기 위해서 만드는 것입니다. 일반 웹에이전시 쪽에서는 별로 플러스 요소가 되지 않을 가능성이 높습니다만, 워드프레스 등의 CMS를 커스텀 제작해주는 에이전시나 바이럴마케팅 회사(이런 곳에서도 웹사이트 제작을 병행하는 경우 종종 프론트엔드 개발자를 뽑습니다.)에 취직할 경우 상당한 플러스요소가 될 수 있기 때문입니다.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 달빛천사7 2014.12.29 09:22 신고  댓글주소  수정/삭제  댓글쓰기

    업데이트 기다리게요 ㅋㅋ

  2. 이바구™ 2014.12.29 16:50 신고  댓글주소  수정/삭제  댓글쓰기

    저는 50% 정도가 모바일 접속인데 요새 반응형 스킨 필요하더라구요.

  3. G.J. 제이 2014.12.29 22:14 신고  댓글주소  수정/삭제  댓글쓰기

    반응형스킨도 몇몇개 말고는 마음에 드는게 없어서 ㅡ.ㅡ;;

  4. rhyshan 2014.12.29 23:22 신고  댓글주소  수정/삭제  댓글쓰기

    화영님 덕분에 다시 반응형 스킨을 고민중입니다.. ^^;

  5. 효진님 2015.03.13 11:37 신고  댓글주소  수정/삭제  댓글쓰기

    많은 부분에서 공감 하는 글이네요 ^^구버전 IE 호환성 문제로 여러가지 알려진 방법을 써봤는데 완벽하지는 않더라구요 그냥 포기하고 공지사항으로 최신 브라우저로의 업그레이드 필요성을 알리고 있습니다.

    • 책덕후 화영 2015.03.13 13:49 신고  댓글주소  수정/삭제

      제 블로그 스킨도 사실 유명한 다른 스킨처럼 CSS3 애니메이션 효과 같은거 좀 넣어서 만들었다면 IE 구버전과의 호환성은 버려야 했을 것 같아요. 실제로도 IE구버전을 지원하지 않는 반응형 스킨도 많다지요. 제 스킨도 IE8, 7까지는 지원하는데 IE6은 아쉽게도 지원이 안되네요.

티스토리 툴바