블로그 반응형 스킨과 일반 스킨 비교 (일반 고정형 스킨 VS 반응형 스킨)

안녕하세요. 보뇌르 입니다.

블로그를 한지는 얼마 안되었지만 여러가지 스킨을 써보면서 요즘 많이들 쓰고 있다는 반응형 스킨에 대해 궁금증이 생기기 시작했습니다. 3일정도를 꼬박 만져보면서 씨름한거같습니다. 

HTML/CSS 편집에 관해서 거의 지식이 없었기 때문에 이것저것 눌러보면서 변화를 살피며 하나하나 배워가는 중이었습니다.

스킨을 바꿔보면서 세팅해놓은것을 저장도 안한채 초기화가되고 웹페이지가 모양이 틀어지고 변형이 되는등 우여곡절이 많았습니다. 

먼저 제가 사용하던 일반 고정형 스킨입니다. Tistory 에서 무료로 배포해주는 스킨이며 2단형 스킨을 제가 약간 손본것입니다. 원래는 대문을 빨간색으로 해놨었는데 어찌된 영문인지 최종 변환된 스킨이 저장이 안되어있고 예전 스킨만 저장되어 있네요. 어쩔수 없이 변환전 것으로 사진을 첨부했습니다. ▼

저렇게 일반 스킨의 장점은 저같은 초보자들도 조금만 배워도 수정이 가능합니다. 티 에디션이나 스킨 위자드 때문입니다. 

포스팅 된 본문의 화면모습입니다. ▼

저렇게 티에디션을 통해 홈화면을 손쉽게 취향대로 변경이 가능하며 

홈 메인 화면의 애드 센스 광고 삽입도 손쉽게 할 수 있습니다. ▼

그리고 관리자 화면에서 플러그인을 통해 다양한 기능을 사용할 수 있습니다. 

반응형 스킨의 경우 플러그인과 티에디션, 스킨 위자드가 제대로 작동하지 않습니다. ▼

이런 장점에도 불구하고 반응형 스킨에 관심을 가지고 변경 하려는 생각을 하게 된 이유는 

첫째, 티스토리에서 제공하는 일반 스킨을 만져보다가 티스토리 유입로그를 살펴보니 아직까지 방문자는 많지 않지만 모바일의 유입이 많은 제 블로그의 특성상 한번 도전을 해봐야겠다는 생각에 어려운 도전을 하게 되었습니다.

둘째, 일반 스킨의 경우 PC와 모바일의 주소가 다르게 나타나며 검색엔진이 둘을 독립된 블로그로 인지할 수 있다는 글을 보고 하나의 통일된 블로그를 운영하고 싶어서였습니다.

셋째, 무엇보다도 세련되고 모던한 디자인의 스킨들이 많았기 때문에 일반 스킨에서 반응형 스킨으로 한번 바꿔볼까 생각을 했습니다.

반면에 걱정도 있었습니다.

1. 브라우저의 종류에 따라 블로그의 화면이 제대로 나타나지 않을 수 도 있다는 점.

2. 반응형 스킨에서의 애드센스 광고에 대한 고민. (플러그인을 이용하지 못하기 때문에 삽입시 어려움이 조금 있습니다.)

3. 인터넷 검색을 해보면서 알게된 로딩시간이 길어지면 방문자의 이탈이 많아질수도 있다는 점.

4. 직관적이고 정돈되어 보이는 일반 스킨에 비해 세련되고 화려하지만 기기사용에 미숙하신 분들이나 조금 연세가 있으신 분들의 거부감.

결국엔 3일밤을 고민과 시도를 거듭한 끝에 몇일을 씨름하다가 결국 오늘 스킨을 바꾸고 말았습니다. 

일단 일반 스킨은 2단형만을 고집해서 많은 착오를 거치다 정착을 하였는데 

반응형 스킨의 경우 모르는 부분이 너무 많았고 감이 안잡혔기 때문에 결국 인터넷 검색을 통해 유명하다는 스킨을 선정해서 만져보았습니다.

1. 프라치노 공간                                     - http://kaniwarispace.tistory.com/entry/introduce -

2. 마크쿼리 스파이더 웹 (이 웹의 경우 사용해보고 싶었는데 이상하게 홈페이지가 접속이 안되는거 같더라구요. 개발자 분이 더이상 지원을 안하시는 건지 개인적인 사정에 의한 것인지는 모르겠는데 다운로드를 받을 수가 없었습니다. github에도 없는 파일로 뜨더군요. 

3. 티스토리 2015 공모전 대상 Square     - http://wallel.com/179 -

4.Tistory 2015 공모전 금상 Dynamite     - http://est0que.tistory.com/2114 -

5. 티스토리 2015 공모전 은상 Flatinum   - http://flatinum.tistory.com/13 - 

6. FastBoot V1.6.1                                - http://blog.readiz.com -

전부 능력자분들이 만드신거라 저같은 놈이 감히 평가를 내릴수 없을 정도로 다 잘만드신 스킨이었습니다. 이것저것 지워보고 설치해보고 바꿔보고 고민을 하다가 결국 fastboot로 결정을 하였습니다.

제가 선택한 반응형 스킨의 제작자 분 사이트 화면의 모습입니다. ▼

제가 이 스킨을 선택한 이유는

Readiz 님의 패스트부트 스킨이 제가 찾고자하는 용도와 가장 잘맞았기 때문입니다. 저의 경우 사이드바가 필요했고 일단 제가 이런 방면에는 거의 무지했기 때문에 수정하기 편한 스킨을 찾고 있는 중이었습니다. Readiz 님의 블로그를 가보면 알기쉽게 설명도 잘해놓으셨고 딱 제가 필요한 부분만을 콕콕 찝어서 수정에 관한 글을 올려놓으셨더라구요. 그래서 이 패스트부트 스킨을 선택하게 된것입니다.

나머지 스킨들은 제가 감히 주제넘게 평가내릴 처지도 아니고 너무 잘만드셨기 때문에 제가 쓰던 일반 스킨과 FastBoot V1.6.1 반응형 스킨에 대해서만 비교해 보겠습니다.

FastBoot V1.6.1 의 경우 Bootstrap 기반의 스킨으로서 매우 가볍고 직관성이 뛰어난 스킨입니다. 

모바일로 변경된 화면을 보아도 매우 만족스러운 형식이었고 깔끔하고 아기자기한 디자인이 마음에 들었습니다. 

개발자 분께서 게시 해주신 주요 스펙입니다. ▼

0. FastBoot은 반응형 스킨입니다. 모바일, 태블릿, PC 가리지 않고 블로그를 기기에 최적화시켜 출력시켜 줍니다.

1. IE7이상 지원

  IE7은 읽기 전용이며 레이아웃은 조금 달라집니다. 덧글 쓰기 및 일부 기능은 제한됩니다. IE8부터는 레이아웃이 달라지는 것 없이 똑같이 지원됩니다.

2. Offcanvas 지원

  Offcanvas는 특정 버튼을 누르면 화면한쪽이 밀러나면서 메뉴가 나타나는 기능입니다. 별다른 설정 없이도 Offcanvas기능이 지원되어 모바일에서 편하게 블로그를 볼 수 있습니다. 

3. 갤리리형 카테고리 지원

  기본적으로 갤러리형 카테고리를 지원하여 카테고리 화면에서 썸네일을 보실 수 있습니다.

이것은 제가 오늘 반응형 스킨으로 변경한 제 블로그의 모습입니다. ▼

화면에서 보시다시피 저렇게 창을 늘였다 줄였다 해도 가변적으로 창의 넓이를 감지해서 최적의 크기로 알아서 변경을 해줍니다.

제가 수정을 조금했습니다. 제 홈화면의 모습입니다.

제작자 분 홈페이지 보시면 잘 나와있기 때문에 따라만 하시면 쉽게 변경이 가능합니다. ▼

제 카테고리 화면입니다. 저렇게 사이드바를 오른쪽에 위치시켰습니다. ▼

 

대분의 일반 고정형 스킨과 반응형 스킨 사이에서 고민하시는분들의 경우에

아직 생소하기 때문에  수정시에 일반 스킨에 비해 반응형은 손이 많이 가고 까다롭다는 점과

일반형 스킨보다 브라우저 호환성이 떨어지기 때문에 스킨이 지원하지 않는 브라우저를 쓰는 방문자의 유입에 대한 걱정, 구글 애드센스를 사용하는 것에 대한 걱정이 가장 클 것입니다.

그래도 제가 적용한  FastBoot 스킨의 경우 IE7 이상을 지원한다고 하니 안심입니다.

제 본문 화면의 모습입니다. 광고는 스킨이 반응형이고 제가 아직 반응형 스킨에 대해 잘 모르기 때문에 구글 애드 센스 정책에 위반이 될까봐 두려워 사이드바에 반응형 애드 센스, 상단과 하단에 반응형 애드 센스를 삽입하였습니다. 그리고 다음 애드핏 모바일 광고도 상단에 배치하였습니다.

한 페이지당 구글의 광고는 3개를 넘을 수가 없는데 인터넷 검색을 해보니까 다른 업체의 광고는 상관이 없다고 벌써 Google AdSense 와 Daum AdFit 광고를 같이 사용하고 계시는 분들이 있으시더라구요.

저도 그래서 다음 애드핏 광고를 상단에 넣었습니다. 

정확한 정책은 저도 잘 모르기 때문에 구글 애드 센스와 다음 애드핏 정책을 잘 알아보시고 광고 삽입하시길 바랍니다. 혹시나 저와 같이 하시다가 피해를 보실수도 있기 때문에 저야 상관은 없지만 다른 분들께는 피해가 가는것을 원치 않습니다. AdSense와 AdFit을 같이 사용하실 분은 꼭 본인이 잘 알아보시고 검토하신 후에 삽입하시기 바랍니다.   

제 포스팅 본문 화면입니다. ▼

내가 적용한 반응형 스킨이 모바일 기기에서 잘 적용이 되는지 알아보기 위한 

사이트를 소개합니다.

➞ http://troy.labs.daum.net

삼성꺼부터 애플, 샤오미, 엘지, 구글, 팬텍, HTC, 소니, 화웨이, 레보노, ZTE, PC 까지 모조리 다 체크가 가능합니다. 

보시면 저렇게 기기종류를 고르고 화면에서 복수의 기기들을 비교해보면서 체크하실 수 있습니다. ▼

저의 경우 아이폰 6, 아이폰 6 플러스, 갤럭시 노트4 를 비교해보았습니다. ▼

아무이상없이 잘 나오고 있습니다.

지금까지 일반 스킨과 반응형 스킨을 비교해보고 장단점에 대해서 살펴보았습니다. 오늘 제가 반응형 스킨을 처음 적용시켜 본것이라 반응형 스킨이 일반 스킨보다 좋다 나쁘다는 말씀은 못드리겠습니다. 

차후에 사용을 해보면서 익숙해지면 다음번에는 좀더 자세한 내용에 대해 포스팅을 해보겠습니다.

---

일반 스킨이 나쁘다 반응형 스킨이 좋다고는 절대 말할 수 없습니다. 스킨마다의 특장점이 존재하고 사용자마다 추구하는 특징들이 다르기 때문에 선택은 사용하시는 분들의 용도에 맞게 선택하시면 될것같습니다.

두 종류의 스킨이 머가 맞다, 틀리다 가 아니라 다르다 라고 해야 맞는 말 같습니다.

오늘 하루 반응형 스킨을 써본 제 생각으로는

일반 스킨 장단점

1. 일단 수정이 용이합니다. 

다양한 스킨들이 나와있고 안정화가 되어 있기 때문에 초보자들도 손쉽게 블로그를 꾸밀 수 있습니다.

2. 직관적이고 익숙한 형태의 디자인이기 때문에  광고 삽입뿐만 아니라 글씨 폰트나 세부 디자인을 변경시에도 쉽게 변경이 가능합니다. 

3. 각각의 다양한 브라우저에 대해  호환성이 좋기 때문에 다양한 환경의 방문자에 대한 걱정이 없습니다. 

4. 반응형 스킨에 비해 가볍고 빠릅니다.(제가 느껴보니 반응형 애드 센스도 일반 애드센스에 비해 속도가 조금 느린거 같습니다.)

5. 아직도 익스플로러8 이하를 사용하시는 분들이 많기 때문에 그에 대한 대응이 가능합니다.

반응형 스킨 장단점

1. 세련되고 산뜻한 디자인이 눈길을 끕니다.

2. 수정이 쉽지 않고 아직 일반 스킨에 비해서 안정화가 덜 되어 있습니다.

3. 모바일 기기에 대해 강점을 가지고 있습니다.

4. 일반 고정형 스킨에 비해 확실히 조금 무거운 느낌은 있습니다. (반응형 애드 센스의 탓도 있는거 같습니다.)

5. 반응형 애드센스가 아직 안정적이지 않고, 사용하기가 쉽지 않습니다. 

보다 안정적이고 간편한 사용을 원하시면 일반 스킨을 자신이 스킨에 대해 수정이 가능하고 문제점에 대해 자가 대처가 가능하신분은 반응형 스킨을 쓰셔도 좋을 것 같습니다. 

그럼 포스팅을 마치겠습니다. 부족한 글 끝까지 읽어주셔서 감사합니다.