반응형 스킨이란?

반응형 스킨이란 무엇인가요?

기기 자체(PC, 태블릿, 스마트폰) 또는 브라우저의 크기가 바뀜에 따라 블로그 화면의 크기 또한 변하게 됩니다. 반응형 스킨이란 이렇게 시시각각 변하는 화면의 크기에 반응하여 자동으로 브라우저의 크기에 최적화되는 스킨을 말합니다. 기기가 작아지면 본문 영역이 그에 맞춰 좁아지고, 넓은 화면에서는 좌측 또는 우측에 위치하던 메뉴가 모바일에서는 위 또는 아래로 이동하거나 합니다. 참고로 기존의 일반적인 스킨의 방식은 웹용과 모바일 용이 따로 존재합니다. 그러므로 반응형 스킨을 사용하고자 할 때에는 블로그 설정에서 모바일 스킨은 사용 안 함으로 설정해야 합니다.

 

반응형 스킨을 쓰면 달라지는 것들이 더 있나요?

반응형 스킨을 사용하게 되면, PC와 모바일의 블로그 디자인이 통일되는 것뿐만 아니라 주소 또한 하나로 통일됩니다. 기본적으로 PC 버전 티스토리의 주소는 '○○○.tistory.com'입니다. (○○○는 본인이 블로그 주소로 직접 설정한 문자입니다.) 그리고 자신이 작성한 포스트는 '○○○.tistory.com/포스트고유주소' 방식으로 주소를 부여받습니다. 반응형 스킨을 사용하지 않는 블로그는 PC용 주소와 모바일 용 주소가 따로따로 설정됩니다. 모바일용 주소는 '○○○.tistory.com/m'이 됩니다. 작성한 포스트의 주소도 PC용 주소가 '○○○.tistory.com/포스트고유주소' 라면 모바일 용 주소는 '○○○.tistory.com/m/포스트고유주소' 가 됩니다. 반응형 스킨을 사용하는 경우는 PC든 모바일이든 블로그의 주소는 모두 '○○○.tistory.com' 이고, 작성한 포스트도 '○○○.tistory.com/포스트고유주소'의 주소를 갖습니다. 참고로 반응형 스킨을 사용하는 블로그인데 주소창에 수동으로 '○○○.tistory.com/m'를 입력할 경우, 자동으로 '○○○.tistory.com'주소로 연결됩니다.

 

반응형 스킨은 어떤 장점이 있나요?

- 애드센스 모바일 최초 크기에 100px 제한이 없습니다.

티스토리 블로그를 하는 분들은 애드센스로 수익 창출을 시도하는 경우가 많습니다. 애드센스로 모바일 사이트에서 최초로 광고를 넣을 시 높이가 100px을 초과하는 경우, 구글 애드센스는 이를 정책 위반사항으로 제재하고 있습니다. 광고가 너무 작으면 클릭률이 현저히 떨어지므로 수익을 창출하려는 입장에서는 좋은 상황은 아니지요. 그런데 반응형 스킨을 사용하면 모바일에서 보이는 사이트라고 해도 모바일 사이트가 아닌 웹사이트로 인식하므로 100px을 초과하는 광고를 넣을 수 있습니다.

- 네이버 검색 시 패널티를 방지할 수 있습니다.

위에도 언급했듯이 반응형 스킨을 사용하지 않는다면, 같은 내용의 포스팅이 PC용 주소, 모바일 용 주소의 총 2개 주소를 갖게 됩니다. 구글에서는 자동으로 모바일은 모바일로 연결하고 PC는 PC로 연계시키지만, 네이버는 2015년 기준으로 이 둘을 모두 검색했습니다. 결과적으로 같은 글이 쓰여있는 페이지를 2개를 검색하게 되어 네이버 검색에서는 불리한 결과를 가져오게 됩니다.

 

반응형 스킨의 단점은 뭔가요?

- 다음 애드핏을 사용할 수 없습니다.

블로그에 광고를 게재하여 수익을 창출하는 것은 애드센스 외에 다음 애드핏(Adfit)으로도 가능합니다. 그런데 현재 애드핏은 티스토리 블로그 메뉴의 관리 속의 메뉴인 모바일 플러그인 적용 항목으로만 광고를 게재하도록 하고 있습니다. 이는 모바일 웹이 ON 상태여야 의미가 있는 부분이므로 반응형 스킨에서는 애드핏을 이용할 수 없습니다. 적어도 PC 상태에서는 반응형 스킨을 사용하고, 모바일 웹을 ON 상태로 설정하여 모바일에서는 반응형 스킨이 아닌 Tistory 웹 기본 스킨이 보이도록 해야 합니다. 물론 이 경우 반응형 스킨을 사용하는 의미는 없어집니다.

 

반응형 스킨 사용 시 주의할 점이 있나요?

- 구글 검색엔진최적화(SEO)를 고려한다면, [관리-환경설정-기본정보-주소설정/개별글주소-문자] 설정을 합니다.

반응형 스킨을 적용하게 되면, 글 작성 후 글에 할당되는 주소(URL)가 숫자로 변해 있을 것입니다. '○○○.tistory.com/m/포스트고유주소'의 '포스트고유주소'에 해당하는 부분입니다. 즉 '○○○.tistory.com/m/1' 이런 식의 주소가 됩니다. 문자라면 이 부분에 포스트의 제목에 해당되는 문자가 위치합니다. 제목이 '오늘 내일 모레'라면 '○○○.tistory.com/m/오늘-내일-모레' 식으로 주소가 부여됩니다. 후자의 경우가 구글 검색엔진최적화 측면에서 1포인트 정도의 이득이 있습니다. 그러므로 구글 검색을 통한 유입을 고려한다면 반응형 스킨으로 변경 후, 포스팅 전에 관리 메뉴로 들어가서 [관리-환경설정-기본정보-주소설정/개별글주소-문자] 를 통해 '숫자'였던 항목을 '문자'로 바꾸면 됩니다. 참고로, 문자 주소를 사용하는 것이 불편한 측면은 있습니다. 포스트를 작성 시 블로그 내 다른 포스트의 링크를 사용할 때나, 워드 프로그램 등을 사용하여 블로그 포스트를 관리하거나 할 때에는 다소 불편한 점이 발생할 수 있으므로 본인의 개별적인 상황에 맞게 숫자 주소 또는 문자 주소를 사용하면 되겠습니다.