티스토리 블로그 반응형 스킨 장점, 모바일과 PC를 동일하게

티스토리 블로그 반응형 스킨 장점, 모바일과 PC를 동일하게

티스토리 블로그를 시작하면서 어떤 스킨을 선택할 지, 어떠한 글을 쓸지를 정하는 것은 첫 단추를 꿰는 것과 같습니다. 스킨 선택은 단순히 디자인만 고려하는 것이 아니라 검색 엔진에 잘 노출되는지 문제가 없는 html, css 구조인지 적합성 여부도 중요한 부분입니다.

전문가가 아니라면 많은 사람들이 사용하였을 때 문제가 없는 스킨이 무엇인지 고민이 되실 수 있습니다. 어떠한 스킨을 선택할지 고민이 되신다면 티스토리에서 기본적으로 제공하는 스킨을 사용하는 것도 대안이 될 수 있습니다.

티스토리 스킨 바로가기

현재 이 블로그에 적용하고 있는 스킨은 오디세이 스킨입니다. 위의 url 링크에서 티스토리에서 제공하는 기본 스킨부터 일반 이용자가 만든 다양한 티스토리 스킨을 확인해보실 수 있습니다. 다양한 기능까지 추가한 유료 스킨도 있는데요. 무료 스킨도 쓸만한 것이 많습니다. 티스토리는 반응형 스킨을 적용하였는데요. 반응형 스킨은 무엇인지, 개인적으로 생각하는 장점에 대해서 정리해보았습니다.

 

티스토리 반응형 스킨이란?

과거에는 PC에서 보여지는 웹사이트를 기준으로 디자인 되어있었지만 현대는 모바일, 태블릿PC 등 다양한 액정 사이즈로 인터넷을 접속합니다. 모바일에서 접속하든지 PC 버전에서 접속하든지 사용하고 있는 디바이스에 맞춰서 하나의 스킨으로 스크린 사이즈를 인식하고 가독성있게 변화를 하는 스킨이 반응형 스킨입니다.

티스토리 관리자 화면에서 [꾸미기→모바일]에서 모바일 버전의 티스토리를 별도로 불러올 수 있습니다.

▲ 모바일 버전 티스토리 스킨

일반 스킨은 모바일웹에 최적화 되어있지 않기 때문에 PC 버전이 아닌 모바일 환경에 맞춘 티스토리에서 제공하는 모바일 버전 티스토리가 적용됩니다. 반응형 스킨을 사용할 경우 티스토리 모바일 자동 웹 연결을 사용하지 않습니다로 설정하시면됩니다. 반응형 스킨이 아닌 일반 스킨을 사용하신다면 티스토리 모바일 웹 자동연결을 적용하는 편이 좀 더 모바일 환경에 알맞게 노출이 됩니다.

 

반응형 스킨의 장점

기본 스킨이 좋은 것인지 반응형 스킨이 좋은 것인지에 대해서는 인터넷에서 여러 가지 의견이 있습니다. 개인적으로 생각하기에 반응형 스킨의 장점은 다음과 같습니다.

1. PC 버전과 모바일 버전 디자인을 통일
2. html과 css 편집시 모바일 화면까지 수정이 편리
3. 모바일 버전 주소에 자동 생성되는 티스토리주소/m 사용하지 않아도 된다
4. SEO에서 모바일 친화적인 요소를 중요하게 생각

 

1. PC버전과 모바일 버전 스킨 디자인을 통일

일반 스킨의 티스토리 모바일웹 버전은 별도로 스킨을 편집하거나 변경할 수 없고 동일하게 적용되는 공통된 디자인만 사용 가능합니다. 티스토리 모바일 스킨 속도나 가독성 등은 크게 문제가 없지만, 자신의 블로그를 PC버전처럼 모바일에서 보여지는 부분을 디자인하고 싶으시다면 반응형 스킨을 사용하여 html, css를 수정하여 모바일에서 보여지는 티스토리 블로그 디자인을 수정할 수 있습니다.

스마트폰으로 검색하는 사람이 점차 증가하고 있는 현 상황에서 모바일 유입자에게 보여지는 화면을 원하는 디자인으로 수정하지 못하는 것은 불편한 부분일 수 있습니다.

2. HTML과 CSS 편집을 모바일 화면까지 한번에 수정이 편리

1번과 같은 맥락으로 html, css를 수정하여 블로그 디자인을 완성하면 모바일 버전에서도 동일하게 적용되기 때문에 수정하기 편리한 부분이 있습니다. 예를 들면, 글 제목과 소제목의 글씨 크기를 일괄적으로 변경하고 싶을 경우 반응형 스킨에서는 css에서 수치만 수정 변경하여 PC버전과 모바일 버전에서 보여지는 모든 부분을 한번에 수정된 결과를 노출할 수 있지만, 반응형이 아닌 일반 스킨에서는 모바일 버전에서는 css가 적용되지 않기 때문에 페이지 하나하나 html을 수정해서 적용해야하는 단점이 있습니다.

장기적인 측면에서 블로그를 수정할 때 시간이 적게 들며, 문제가 되는 부분을 빠르게 수정하여 없앨 수 있어서 반응형 스킨이 유리한 측면이 있습니다.

3. 모바일 버전 주소에 자동 생성되는 티스토리 주소/m을 사용하지 않아도 된다

티스토리 블로그의 모바일 버전 주소는 자신의 블로그 주소에 /m을 붙이면 됩니다. 이 블로그 기준으로 interested-in.tistory.com/m으로 접속하면 모바일웹 버전이 나오게 됩니다.

▲ 티스토리 기본 모바일 웹 버전(좌)과 같은 페이지 반응형(우)

위와 같이 반응형 스킨에서는 원하는 css 수정을 통해 강조하고 싶은 부분을 꾸며줄 수 있고, 자동으로 목차를 생성하는 html, js, css를 별도로 적용하여 노출할 수 있습니다. 코드 편집을 통해 좀 더 편리한 기능도 추가할 수 있어서 반응형 스킨이 가독성 부분에 있어서 유리한 부분이 있습니다.

같은 내용이지만 다른 디자인으로 출력되는 것 외에도 url이 2개가 되는 문제도 있습니다. 글 주소가 여러가지인 것보다 1개인 것이 SEO에 좋다고 하는 의견도 일부 있었는데요. 테스트를 해보지 않았지만, 모바일 버전으로 접속하게 되면 URL이 티스토리주소/m버전으로 하나가 더 생기기 때문에 다른 사이트로 인식되어 분산될 가능성도 있다고 생각합니다.

4. SEO에서 모바일 친화적인 요소를 중요하게 생각

많은 사람들이 모바일에서 검색을 하고 있고, 그 수는 점차 증가하고 있습니다. 모바일에 친화적인 웹사이트, 블로그가 검색 엔진에도 영향을 미칠 수 밖에 없습니다. 모바일 웹사이트 구현과 관련된 몇가지 글들에서 반응형 디자인(동일한 URL, HTML을 스크린 크기에 따라 다르게 불러오는 디자인)을 구글에서 권장하고 있었습니다.

모바일 검색자에게 불편할 수 있는 요소를 없애는 것이 검색엔진 최적화에 더 도움이 될 것으로 예상됩니다.

참고 사이트: https://developers.google.com/search/mobile-sites?hl=ko