모바일 지원 - 뷰포트가 올바르게 구성되지 않았을 경우의 해결 방법
- IT/티스토리
- 2019. 12. 7.
티스토리 블로그를 개설하고 나면 제일 먼저 하는 것이 사이트맵을 만들고 구글, 네이버, 빙의 순서로 웹마스터에 등록하는 일입니다.
그런데 요즘은 구글도 그렇고 모바일 친화성을 굉장히 중요하게 여기는 쪽으로의 흐름들이 있습니다.
대세는 pc보다는 모바일이고 블로그가 얼마나 모바일에서 부드럽게 로딩되고 각각의 크기에 따른 잘림이나 이상현상 없이 잘 반응하느냐 하는 문제가 중요해졌습니다.
우리가 사이트맵을 빙에도 등록했다면 빙 웹마스터에 진입한 뒤, 진단 및 도구 항목에 들어가 보면 모바일 지원 수준 테스트라는 세부 항목이 보입니다.
URL 입력란에 자신의 블로그 중 테스트할 임의의 페이지 URL을 입력하고 분석을 클릭하거나 탭 하여 Bingbot이 페이지가 모바일 친화적인 것으로 간주되는지 여부를 확인할 수 있습니다.
분석을 클릭하면 Bingbot 모바일 크롤러가 웹 사이트에서 페이지를 가져와 모바일 친화성 분류기로 보내 실시간 판단을 위해 전송합니다.
모바일 기기에서 결과를 표시할 때 Bing은 모바일 친화적인 것으로 간주되는 페이지에 '모바일 친화적인' 라벨을 정기적으로 추가합니다.
이제 테스트를 위해 저의 티스토리 블로그 중 임의의 페이지를 진단해 보겠습니다.
결과에서 경고표시가 하나 뜨고 있습니다.
뷰포트가 올바로 구성되지 않았다고 하면서 아래와 같이 권고하고 있습니다.
모바일 장치 <meta name="viewport" content="width=device-width, initial-scale=1">에서 페이지가 제대로 작동할 수 있도록 다음 뷰포트 설정을 사용하는 것이 좋습니다.
뷰포트란 일종의 모바일 화면용 가상 랜더링 화면이라고 할 수 있는데 모바일 브라우저는 "가상 창"(뷰포트)으로 설명할 수 있는 웹 페이지를 렌더링 합니다.
웹 개발자는 뷰포트 메타 태그를 사용하여 뷰포트의 크기와 배율을 제어할 수 있습니다.
모바일에 최적화된 페이지는 일반적으로 페이지의 <head> 섹션에 뷰포트 메타 태그를 사용해야 합니다.
결론적으로 모바일 화면에서의 한쪽으로의 쏠림이나, 잘림 등의 현상을 방지하기 위하여 어떠한 크기의 모바일 화면에서라도 정상적인 모습으로 보이게 만드는 뷰포트 태그를 HTML의 head 섹션에서 선언해 주어야 합니다.
아래의 태그를 드래그하여 복사한 뒤 티스토리의 HTML 편집 화면으로 들어간 뒤 head 섹션에 붙여 넣기 해줍니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
티스토리의 HTML 편집창에서 <head>와 </head> 사이에 위의 태그를 드래그 복사해서 붙여 넣기 했으면 저장하고 완료합니다.
다시 빙 웹마스터 도구의 모바일 지원 수준 테스트 페이지로 간 뒤 좀 전에 테스트 한 페이지를 다시 한번 테스트합니다. 이제 결함이 없는 모바일 친화적인 페이지로 표시될 것입니다.
'IT > 티스토리' 카테고리의 다른 글
| Fastboot 스킨 본문 폰트크기, 자간, 줄바꿈의 설정 변경하기 (0) | 2020.04.23 |
|---|---|
| 티스토리 블로그 로딩 속도 최적화 : html, css, 이미지 (5) | 2020.04.20 |
| 티스토리 표만들기에 의해 만들어진 표 잘리는 현상 해결 방법 (0) | 2019.12.06 |
| 티스토리 수식입력 메뉴에 의한 첨자입력 오류 (0) | 2019.11.29 |