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

반응형

반응형 웹 디자인 (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 점수와 블로그 속도를 참고하세요.

반응형

댓글(1)

  • 2020.03.11 14:18 신고

    https://roachsblog.tistory.com/ 여기블로그들어가면

    Software Hardware Game Technology 카테고리 검색창 직접만들고싶는데

    자세히 답변부탁드립니다 어캐만드는지 잘모르겠어용 ㅠ


    'Technology' 관련 글



    'Software' 관련 글

    'Software' 검색 결과

    'Hardware' 검색 결과
    Copyright 바퀴의 블로그. All Right Reserved.
    1/6
    ◀ PREV NEXT ▶


    Reply Edit



    이름 비밀번호 비밀 댓글 등록

    빠른 질문, 답변 & 방명록
    비밀글로 쓴 글에 대한 답변에는 닉네임을 언급하지 않아 "익명성"을 보장합니다. 편안하게 글을 써주세요.
    이 곳은 방명록 역할도 함께 합니다.
    개인정보가 들어가지 않을 경우 가능하면 "공개글"로 적어주세요.
    질문은 가능하면 이메일 문의 말고 이곳에 질문을 해주세요. 질문답변의 수는 31,420개를 넘었습니다.
    https://cdmanii.com/guestbook 이블로그[이미지넣기] [링크넣기] 태그 사이에 이미지나 링크 주소를 넣어주세요.
    Submit 이미지 업로드
    이매의 블로그은 티스토리 앱 알람을 켜놓았기 때문에 질문이 올라오면 거의 곧 바로 답변 드립니다.( 특정 사정이 있는 경우 제외 )
    전화상담이 필요한 경우 비밀글로 전화번호를 남겨주시면 전화를 드립니다. 단 제가 시간이 가능할때만 허용

    [이미지넣기] [링크넣기] 태그 사이에 이미지나 링크 주소를 넣어주세요.
    Submit 이미지 업로드

Designed by JB FACTORY