티스토리 | 티스토리 반응형 스킨의 뜻과 특징

반응형 웹 디자인 (Responsive Web design)

스마트폰이 나오기 전에는 인터넷 서핑은 PC에서 했습니다. 그래서 웹 디자인을 할 때 사람들이 주로 사용하는 모니터의 해상도만 고려했습니다.

그런데, 스마트폰이 나오면서 상황이 변했습니다. PC에 맞춘 디자인을 그대로 스마트폰에서 보여주기엔 스마트폰 화면이 너무 작았던 것이죠.

이를 해결하는 방법 중의 하나는 스마트폰용 사이트를 하나 더 만드는 것입니다.

지금도 이 방법은 널리 사용되고 있습니다. 예를 들어 스마트폰에서 네이버에 접속하면 https://m.naver.com/으로 이동하고, 그 사이트는 모바일에서 보기 좋게 디자인되어 있습니다.

또 다른 방법은 접속하는 기기의 해상도에 따라서 레이아웃이 변하게 만드는 것입니다.

예를 들어 사이트의 가로폭을 1024px로 설정하면 어떤 기기로 접속해도 가로폭이 1024px가 되는데, 가로폭을 100%로 설정하면 어떤 기기로 접속해도 좌우로 꽉 차게 나옵니다.

이러한 방식의 웹 디자인을 반응형 웹 디자인이라고 합니다.

티스토리 반응형 스킨

반응형 웹 디자인 방식으로 만든 티스토리 스킨을 보통 티스토리 반응형 스킨이라고 합니다.

지금 보시는 이 블로그도 티스토리 반응형 스킨이 적용되어 있습니다.

PC에서 접속하면 2단 레이아웃에, 글 목록도 2단으로 나옵니다.

스마트폰으로 접속하면 1단 레이아웃에, 글 목록도 1단으로 나옵니다.

티스토리 반응형 스킨의 장점

SEO

글 하나에 주소가 하나여서 SEO에 좋다고 합니다. (그런데, 티스토리의 경우 모바일웹을 사용하지 않는 것으로 설정해도 URL에 m을 붙이면 해당 글에 접속할 수 있습니다.)

디자인

티스토리가 제공하는 모바일웹을 사용하면 주어진 디자인을 그대로 사용해야 합니다. PC에서 글 제목이 파란색으로 나오게 스킨을 만들어도, 모바일웹에는 적용되지 않습니다.

하지만 반응형 스킨을 사용하면 모바일에서의 디자인도 원하는대로 만들 수 있습니다.

티스토리 반응형 스킨 선택할 때 고려할 점

디자인만 보고 스킨을 선택하면 안됩니다. 모바일로 접속했을 때 페이지에 열리는 데 걸리는 속도도 같이 고려해야 합니다.

반응형 웹 디자인은 출력 내용은 변하지 않고 모양만 변하는 것이어서, 크기가 큰 이미지를 사용하거나 스크립트를 과도하게 사용하면 로딩 속도가 느려집니다. PC에서는 체감하지 못해도 모바일에서는 차이가 클 수 있습니다.

참고 1

스킨 용량은 생각보다 크지 않습니다. 특히 반응형 스킨은 이미지 사용을 최대한 줄이기 때문에 1M가 안되는 경우가 대부분입니다.

로딩 속도에 영향을 미치는 것은 주로 글에 포함된 이미지입니다. 4M 짜리 고해상도 사진 몇 개 올리면 로딩 속도는 현격히 떨어집니다.

이미지는 본문 가로폭에 맞게 크기를 줄이고, 가능하다면 한 번 더 압축하는 게 좋습니다.

또한 애드센스 등 광고도 속도에 많은 영향을 미칩니다. 애드센스는 구글이 제공하는 거라 안 그럴 거 같지만, 광고를 넣을 때와 안 넣을 때 속도 차이가 큽니다.

참고 2

스킨에서 속도를 빠르게 하는 것은 한계가 있습니다. 근본적인 개선은 티스토리가 해야 합니다.

구글 PageSpeed Insights 점수와 블로그 속도를 참고하세요.

댓글(0)

Designed by JB FACTORY