티스토리 모바일 화면 PC, 노트북 웹에서 확인하는 3가지 방법

블로그의 검색은 모바일이 더 많죠. 물론 블로그의 주제에 따라 다르겠지만 대부분은 모바일을 더 중요하게 보실 것입니다. 모바일 화면을 확인해야 하는 이유와 확인방법을 알아보겠습니다.

모바일 화면 확인하는 이유

티스토리 앱으로 글을 작성하면 이상한 html 코드가 들어가서 불편하고, 기능도 충분하지 않습니다. 특히 이전 글 쓰기나 저장한 서식 같은 기능을 지원하지 않아서 잘 사용하지 않습니다. 사용하더라도 글과 필요한 사진을 넣고 나서 결국 마무리 작업은 웹에서 진행하게 됩니다.

모바일 화면 확인하는 3가지 방법

 

 

티스토리 에디터, Devtools, Mobile simulator를 소개시켜 드리겠습니다.

Moblie Simulator 다운로드 및 사용

 

 

모바일 시뮬레이터는 크롬 확장 프로그램입니다. 크롬이나 크롬에 호환되는 웨일 사용 시 적용하실 수 있습니다. 크롬 웹 스토어에서 Moblie Simulator를 검색하여 설치합니다. 개발자가 'webmobilefirst.com'인 확장 프로그램입니다.

 

설치하면 크롬 브라우저 상단에 확장 프로그램 창에서 찾으실 수 있습니다. 확장 프로그램을 클릭하면 모바일 화면으로 전환됩니다. 모바일 기기 화면으로 전환된 뒤 우측의 스크린 샷 기능과 모바일 기기 종류 변경 등 다양한 기능을 지원합니다. 특히 블로그를 하면서 휴대폰 화면 붙여 넣기 밍밍했던 분들은 테두리도 나타나 개인적으로 더 보기 좋아 보입니다. 최신 기기로 선택하는 경우는 유료 사용자에게만 제공됩니다.

 

모바일 시뮬레이터 스크린 샷

 

또한 가로 모드로 변경 시 어떻게 보이는지 까지 확인할 수 있습니다. 좌측 메뉴바에서 화살표 있는 동그라미('Chage the orientation)를 클릭하시면 토글 됩니다.

티스토리 에디터에서 확인하기

웹에서 글을 작성하다 미리 보기로 글의 스킨과 가독성을 확인하실 수 있습니다. 미리 보기는 좌측 하단에 위치하고 있습니다.

 

미리 보기 상단에 스마트폰 표시를 선택하면 모바일 화면에서 어떻게 보이는 지 확인할 수 있는데, 완벽하진 않습니다. 그래서 이 방식은 간편하지만 추천하지 않습니다.

Devtools 사용

이 방식도 대부분 아시겠지만 HTML 구조를 확인할 때 웹에서 사용하는 Devtools입니다. 한국어로는 개발자 도구인데 요즘은 개발자 아니고 스마트 스토어, 블로거, 유튜버 등등 비개발자들이 더 많이 사용하는 것 같습니다.

 

저는 거의 크롬만 사용하는데 웨일이나 사파리, 파이어폭스, 엣지와 같이 최신 버전 웹브라우저에서는 대부분 지원하는 것으로 알고 있습니다. 만약 지원하지 않는다면 크롬으로 옮겨 오시는 것을 추천드립니다.

 

크롬을 기준으로 알려드리면 F12를 누르시면 됩니다. 그럼 화면 우측으로 개발자 도구 창이 새롭게 생성되고, 그 창의 좌측 상단에 휴대폰과 태블릿이 함께 있는 아이콘을 토글 하시기 바랍니다. 대략 좌우 반전된 devices 이런 아이콘과 닮았습니다.

 

아이콘을 찾기 어렵다면 CTRL+SHIF+M을 눌러도 됩니다. 이때 개발자 도구 창을 한번 클릭해서 활성화시켜 놔야 합니다. 글 발행 후에 사용하며 에디터에서 사용 시 글 발행 수 모습을 확인할 수 없습니다. 실제 모바일 디바이스의 화면과 거의 동일한 화면을 확인할 수 있습니다. 사실 이 방법이 가장 간단하여 저도 주로 사용하고 있습니다.

 

다만 화면 크기를 선택할 때 고르는 옵션이 최신 기기를 지원하지 않습니다. 기기를 고르는 방법은 모바일로 토글 한 뒤 상단의 기기 이름을 선택하는 것입니다. 그러나 화면 픽셀 수를 알고 있다면 responsive를 선택하고 수동으로 입력할 수 있고, Edit를 눌러 새롭게 디바이스를 추가할 수 도 있습니다.