웹사이트의 모바일 버전을 보는 방법: 단 3번의 클릭으로

웹사이트의 모바일 버전을 보는 방법이 어려우신가요?

글쎄, 한 가지 확실한 해결책은 휴대 전화를 꺼내 거기에서 웹 사이트를 여는 것입니다. 그러나 이 포스트를 읽고 있다면, 그것은 아마도 어떤 이유로 당신을 위한 옵션이 아닐 것입니다.

고맙게도 데스크톱 웹 브라우저에서 바로 모바일 버전의 웹 사이트를 볼 수 있는 다른 방법이 많이 있습니다. 따라서 휴대폰이 없어도 모바일 버전의 웹사이트는 무엇이든 쉽게 볼 수 있습니다.

이 게시물에서는 웹사이트의 모바일 버전을 미리 보는 방법에 대한 네 가지 간단한 방법을 공유할 것입니다.

• 처음 두 가지 방법은 귀하의 웹사이트이든 다른 사람의 사이트이든, WordPress, Shopify, Wix, Squarespace 등으로 구축되었는지 여부에 관계없이 모든 유형의 웹사이트에서 작동합니다.
• 마지막 두 가지 방법은 WordPress 사이트의 모바일 버전을 보는 방법을 보여주는 WordPress 전용 옵션입니다. 사이트를 소유한 경우에만 작동합니다.

브라우저에서 웹사이트의 모바일 버전을 보는 방법

웹사이트 소유 여부에 관계없이 인터넷에서 웹사이트의 모바일 버전을 쉽게 볼 수 있는 두 가지 방법이 있습니다.

1. 웹 브라우저의 개발자 도구를 사용합니다. Chrome은 이를 위해 훌륭하게 작동하지만 대부분의 다른 웹 브라우저는 유사한 도구를 제공합니다.
2. 전용 모바일 에뮬레이터 도구를 사용하십시오. 보고 싶은 URL을 입력하기만 하면 모바일 사용자처럼 탐색할 수 있습니다.

두 가지 방법을 모두 살펴보겠습니다. 그런 다음 나중에 자신이 구축하고 있는 웹사이트의 모바일 버전을 보는 방법(WordPress에서)도 보여줍니다.

웹 브라우저의 개발자 도구 사용

Google Chrome, Safari, Firefox, Microsoft 및 Brave와 같은 대부분의 브라우저는 다양한 장치에서 웹사이트가 어떻게 보이는지 확인하는 것을 포함하여 웹사이트를 자세히 살펴볼 수 있는 개발자 도구를 제공합니다.

개발자 도구를 사용하면 다양한 스마트폰, 태블릿 등에서 웹사이트가 어떻게 보이는지 빠르게 확인할 수 있습니다.

이 예에서는 Chrome(또는 Brave와 같은 Chromium 기반 브라우저)을 사용하고 있다고 가정합니다. 그러나 인터페이스는 다르지만 대부분의 다른 웹 브라우저는 유사한 기능을 제공합니다.

시작하려면 웹사이트의 프런트엔드를 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 검사 를 선택합니다.

그러면 개발자 도구가 시작되고 해당 페이지의 코딩 요소가 있는 오른쪽에 모듈이 표시됩니다.

주요 목표는 웹사이트의 모바일 버전을 보기 위해 전환하는 것이기 때문에 코딩에 대해 걱정할 필요가 없습니다. 작은 Toggle Device Toolbar 버튼(휴대전화 및 태블릿 아이콘 모양)을 찾아 클릭하여 모바일 보기를 활성화합니다.

그러면 에뮬레이션하려는 장치에 따라 장치 크기를 변경할 수 있는 반응형 모바일 보기가 자동으로 표시됩니다.

이 방법을 더욱 매력적으로 만들기 위해 기본 제공 장치 기본값이 있는 몇 안 되는 옵션 중 하나이며 실제 장치에서 웹 사이트가 어떻게 표시되는지 보다 정확하게 볼 수 있습니다.

예를 들어, iPad Pro를 선택하면 디스플레이의 크기를 iPad Pro의 크기로 즉시 조정할 수 있습니다.

또는 더 작은 Pixel 2 XL을 선택할 수 있습니다.

또는 더 작은 갤럭시 폴드. 목록에 있는 각 장치를 테스트하고 웹사이트가 각 장치에서 허용 가능한지 확인하십시오.

온라인 테스터 또는 에뮬레이터 사용

에뮬레이터는 일반적으로 기본 환경에서 앱을 테스트하는 데 사용되지만 대부분은 웹사이트 응답성에 사용할 수 있습니다. 또한 기본 테스터를 온라인에서 찾아 URL에 붙여넣고 소형 기기에서 어떻게 보이는지 확인할 수 있습니다.

ResponsivePX.com은 실행 가능한 옵션이지만 빠른 온라인 검색으로 다른 많은 것을 찾을 수 있습니다.

사람들에게 에뮬레이터와 시뮬레이터를 사용해 보라고 제안하는 이유는 사이트 크기를 훨씬 더 많이 제어할 수 있기 때문입니다. 그리고 종종 브라우저의 개발자 도구를 사용하는 것보다 더 간단합니다.

ResponsivePX.com을 예로 들 수 있습니다. 사이트로 이동하여 URL을 붙여넣으면 즉시 모바일 버전이 표시됩니다.

너비, 높이 및 스크롤 막대 가시성을 조정할 수 있습니다. 조직의 사람들과 결과를 공유할 수도 있습니다.

WordPress 웹사이트의 모바일 버전을 보는 방법

자신의 WordPress 사이트에서 작업하는 경우 WordPress는 사이트가 모바일 장치에서 어떻게 보이는지 확인하는 데 도움이 되는 몇 가지 기본 제공 옵션도 제공합니다.

WordPress 편집기에서 작업할 때 콘텐츠가 다른 장치에서 어떻게 보이는지 빠르게 확인할 수 있습니다. WordPress Customizer에서 테마를 사용자 정의하는 동안에도 동일한 작업을 수행할 수 있습니다.

이러한 방법을 살펴보자...

페이지 또는 포스트 에디터 미리보기를 통해 모바일 버전 보기

웹사이트의 모바일 버전을 페이지 단위로 볼 수 있습니다. 예를 들어 현재 블로그 게시물이 모바일 보기에서 표시 가능한지 확인하고 싶을 수 있습니다. 특히 디자인을 변경한 후에는 홈페이지에서 모바일 응답성을 확인하는 것이 좋습니다.

홈페이지부터 시작하겠습니다. 다음은 데스크탑 보기에서 다음 웹사이트가 어떻게 보이는지 보여줍니다.

WordPress 대시보드의 게시물 또는 페이지 탭으로 이동하여 개별 페이지 및 게시물 모바일 보기를 볼 수 있습니다.

이전에 만든 게시물 및 페이지의 경우 모든 게시물 또는 모든 페이지 로 이동합니다.

한 페이지부터 시작하겠습니다. 보다 구체적으로 홈페이지. 원하는 페이지를 선택하십시오.

WordPress 백엔드의 모든 페이지와 게시물은 오른쪽 상단에 미리보기 링크를 제공합니다. 해당 미리보기 버튼을 선택하여 다음 옵션이 있는 드롭다운 메뉴를 표시합니다.

기본적으로 WordPress에는 데스크톱 버전이 표시됩니다.

태블릿 또는 모바일 보기를 선택하면 웹사이트가 이미지, 비디오, 메뉴 및 텍스트 상자와 같은 요소를 더 작고 읽기 쉽고 클릭 가능한 형식으로 변환하는 것을 볼 수 있습니다.

다른 보기에서 사이트를 테스트할 때 링크가 클릭 가능한지(너무 작지 않음), 자산이 여전히 표시되는지, 사용자가 확대하지 않고도 모든 것이 명확하게 나오는지 확인하십시오.

시간을 내어 페이지를 아래로 스크롤하여 모든 콘텐츠를 확인하세요. 예를 들어 이 사이트는 이미지, 제품 이름 및 장바구니에 추가 버튼과 함께 홈페이지에 여러 전자 상거래 제품을 나열합니다.

보기에는 괜찮아 보이지만 제품 세부 정보를 더 크게 만들기 위해 2~3개의 제품 열로 전환하고 싶을 수도 있습니다.

이 방법을 사용하는 경우 게시물도 다르지 않습니다. 그들은 단순히 WordPress의 별도 섹션 아래에 있습니다(게시물 → 모든 게시물).

여기에 정적 웹페이지가 아닌 블로그 게시물이 포함되어 있으므로 모바일 친화성을 테스트하는 것이 훨씬 더 중요합니다. 왜요? 많은 회사에서 페이지에 대한 사소한 업데이트만 포함하여 매달 수십 개의 블로그 게시물을 게시하기 때문입니다. 블로그가 주요 콘텐츠 소스인 경우 게시하기 전에 모든 블로그가 모바일에 적합한지 확인해야 합니다.

평소와 같이 미리보기로 이동한 다음 태블릿 또는 모바일을 클릭합니다.

바탕 화면 보기는 때때로 태블릿 보기와 매우 유사하므로 브라우저에서 확대하지 않았는지 확인하십시오.

태블릿 보기는 데스크톱 보기보다 다소 작게 나타나지만 사이트 콘텐츠 주위에 검은색 공간이 있어 보다 사실적인 태블릿 크기를 모방합니다.

WordPress Customizer에서 웹사이트의 모바일 버전 보기

WordPress Customizer는 WordPress 테마를 편집하는 훌륭한 방법을 제공할 뿐만 아니라 편집할 때 사이트를 시각적으로 미리 볼 수 있습니다.

운 좋게도 WordPress Customizer는 데스크탑 미리보기로 제한하지 않습니다. 실제로 휴대폰이나 태블릿 보기를 보면서 모든 편집을 완료할 수 있습니다.

이렇게 하려면 모양 → 사용자 지정 으로 이동하여 사용자 지정 프로그램을 시작합니다.

기본적으로 사용자 지정 프로그램의 모양은 다음과 같습니다. 왼쪽에는 조정할 설정이 있고 오른쪽에는 사이트 미리보기가 있는 표준 데스크탑 보기에 있습니다.

설정 목록의 맨 아래에서 세 개의 버튼 아이콘을 찾으십시오. 하나는 데스크탑 보기, 다른 하나는 태블릿 보기, 세 번째는 모바일 보기입니다.

태블릿 보기 버튼을 클릭하면 현재 편집 내용이 일반 태블릿 크기의 인터페이스에 어떻게 표시되는지 확인할 수 있습니다.

Mobile View 버튼은 인터페이스를 더 작게 만들어 모바일 스마트폰의 표준 창 크기에 더 가깝게 만듭니다.

참고: 이러한 백엔드 모바일 미리보기는 추정치입니다. 세상에는 수많은 장치 유형이 있으므로 아무도 똑같은 것을 보지 못할 것입니다.

메뉴를 잊지 마세요. 메뉴는 모바일 장치에서 매우 골칫거리입니다. 테마 개발자가 상당한 테스트를 거쳤는지 확인하십시오. 모바일 메뉴는 일반적으로 숨겨진 햄버거 메뉴(3개의 가로선)에 배치되고 두 개의 메뉴(이 테마가 화면 하단에 전자 상거래 버튼을 제공하는 방식과 같이)로 끝날 수 있음을 알 수 있습니다.

항상 그렇듯이 첫 페이지를 빠르게 살펴보고 전체 웹 사이트가 준비되었다고 가정하지 마십시오. 이는 전반적인 사용자 경험을 해치는 사소한 결함을 놓치기 위한 방법입니다.

제품 페이지에서 블로그 게시물, 장바구니에서 회사 소개 페이지에 이르기까지 모든 것을 포함하여 태블릿 보기에서 전체 웹 사이트를 실행합니다.

그리고 Mobile View에서도 동일한 과정을 완료합니다. 마지막으로 원하는 것은 작은 체크아웃 모듈 또는 장바구니에 추가 버튼이기 때문에 특히 전자 상거래 기능을 테스트하는 것이 좋습니다.

웹사이트의 모바일 버전을 쉽게 볼 수 있습니다.

가장 유연한 옵션은 브라우저의 개발자 도구를 사용하는 것입니다. 이것은 상관없이 작동합니다. 웹 사이트의 데스크톱 버전을 열 수 있는 한 개발자 도구를 사용하여 모바일 버전을 미리 볼 수 있습니다.

에뮬레이터 접근 방식은 대부분의 웹사이트에서도 작동하지만 에뮬레이터가 웹사이트를 가져올 수 있으려면 웹사이트에 공개적으로 액세스 가능한 URL이 있어야 합니다.

반면에 WordPress 사용자인 경우 WordPress에 내장된 반응형 미리보기 도구를 사용하여 사이트에서 작업하는 동안 작업을 완료할 수 있습니다. 또는 다른 방법도 WordPress 사이트에 적합합니다.

자신의 사이트에서 작업하기 위해 모바일 보기가 필요한 경우 모바일 친화적 웹사이트 만들기 가이드에서 사이트의 모바일 버전을 미리 볼 때 주의해야 할 사항에 대한 몇 가지 팁을 확인할 수도 있습니다.

웹사이트의 모바일 버전을 보는 방법에 대해 여전히 질문이 있습니까? 댓글로 알려주세요!