웹 개발자이거나 온라인 비즈니스를 소유하고 있다면 모바일 사이트가 데스크톱에서 어떻게 보이는지 궁금할 것입니다. 인터넷 트래픽의 절반 이상이 전화에서 발생하기 때문에 모바일 사이트의 모양과 기능이 중요할 수 있습니다. 고객은 사이트에 더 오래 머물거나 시각적으로 매력적이면 구매할 가능성이 더 큽니다. 데스크탑 보기는 또한 편집을 수행하고 가능한 문제를 더 빨리 수정하는 데 도움이 될 수 있습니다.
다행히도 이것은 비교적 간단한 프로세스입니다. 이 기사에서는 다양한 장치와 브라우저에서 웹사이트의 모바일 버전을 보는 방법을 보여줍니다.
Mac의 Chrome에서 웹사이트의 모바일 버전을 보는 방법
Chrome에서는 DevTools라는 내장 개발자 도구를 사용하여 프런트 엔드를 테스트하고 웹 사이트의 모든 구성 요소가 제대로 작동하는지 확인할 수 있습니다. 사전 정의된 장치 선택을 제공하기 때문에 DevTools는 개발자가 개발자 확장 없이 데스크톱에서 모바일로 또는 그 반대로 빠르게 보기를 전환할 수 있는 가장 좋은 방법입니다.
필요에 맞게 화면 크기를 변경하고 화면 너비와 높이를 조정하여 다양한 화면 크기에서 웹사이트가 어떻게 보이는지 확인할 수도 있습니다. Mac에서 그렇게 하려면 다음 단계를 따르세요.
- Chrome 브라우저를 실행하고 보고 싶은 사이트로 이동합니다.
- 키보드에서 F12 키를 눌러 DevTools에 액세스합니다.
- 모드가 켜져 있으면 Toggle Device Emulation 아이콘을 클릭합니다.
- iOS 및 Android 기기 목록에서 선택하여 에뮬레이트할 수 있습니다.
- 선택한 모바일 형식으로 웹사이트가 표시됩니다.
완료되면 개발자 도구 창을 닫아 웹 사이트의 모바일 버전을 닫습니다.
Windows PC의 Chrome에서 웹사이트의 모바일 버전을 보는 방법
Chrome의 Windows PC에서 웹사이트의 모바일 버전을 보려면 매우 유사한 프로세스입니다.
- 크롬 브라우저를 엽니다.
- 크롬에서 모바일 버전으로 보고 싶은 웹사이트로 이동합니다.
- 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 검사를 선택합니다.
- 개발자 도구로 이동하려면 추가 도구 탭을 클릭하고 개발자 도구를 선택하거나 F12 키를 눌러 DevTools를 엽니다.
- 개발자 도구 창이 열립니다.
- 모바일 사이트 보기 모드로 전환하려면 장치 토글 아이콘을 클릭하십시오.
- 에뮬레이션할 모바일 장치를 선택합니다(선택 사항).
- 이제 필요에 맞게 화면 크기를 수정할 수 있습니다.
Chromebook의 Chrome에서 웹사이트의 모바일 버전을 보는 방법
Chromebook을 사용하여 Chrome에서 웹사이트의 모바일 버전에 액세스하는 것은 처음 두 가지 방법과 매우 유사합니다.
- Google 크롬 웹 브라우저를 엽니다.
- 모바일 장치에서 액세스하려는 웹 페이지를 엽니다.
- 메뉴에 액세스하려면 세로로 된 세 개의 점 아이콘을 클릭합니다.
- 목록에서 추가 도구 항목 위로 마우스를 끕니다.
- 개발자 도구를 선택합니다.
- 브라우저의 개발자 도구 창이 열립니다.
- 장치 토글 아이콘을 클릭하여 모바일 사이트 보기 모드를 토글합니다.
그러면 모바일 사이트에 대한 사용자 인터페이스가 나타납니다. 드롭다운 상자에서 제조업체와 모델을 선택하여 선호하는 장치 환경을 선택할 수도 있습니다. 개발자 도구 콘솔을 닫을 때마다 웹 페이지가 데스크톱 사이트로 새로 고쳐집니다.
Mac의 Firefox에서 웹사이트의 모바일 버전을 보는 방법
Firefox와 같은 다른 웹 브라우저를 사용하여 Mac 데스크탑에서 모바일 사이트를 볼 수 있습니다. 브라우저 창 크기 조정은 대부분의 웹 개발자가 반응형 디자인 웹사이트를 평가하는 데 사용하는 방법 중 하나입니다. 그러나 대부분의 경우 이 대안은 수용할 수 없는 것처럼 보입니다.
바로 여기에서 Firefox 브라우저의 웹 개발 기능이 유용합니다. Firefox에서 웹 사이트의 모바일 버전에 액세스하는 방법을 알고 있다면 다양한 해상도로 웹 페이지를 탐색할 수 있습니다. 다음과 같이하세요:
- 보고 싶은 웹사이트의 모바일 버전을 엽니다.
- 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 검사 옵션을 선택합니다.
- 반응형 디자인 모드를 선택합니다.
- 웹사이트의 화면 크기를 선택합니다.
Windows PC의 Firefox에서 웹 사이트의 모바일 버전을 보는 방법
Windows PC에는 Firefox를 사용하여 웹 사이트의 모바일 버전을 볼 수 있는 옵션도 있습니다. 방법은 다음과 같습니다.
- PC에서 Firefox를 시작합니다.
- 모바일 버전으로 보고 싶은 웹사이트로 이동합니다.
- 가로 3개의 막대 아이콘을 클릭하여 설정으로 이동합니다.
- 웹 개발자 옵션을 선택해야 하는 드롭다운 메뉴가 표시됩니다.
- 반응형 디자인 모드를 선택합니다.
- 마지막으로 스마트폰 모델을 선택하여 해당 장치에서 사이트가 어떻게 표시되는지 확인할 수 있습니다.
Mac의 Safari에서 웹 사이트의 모바일 버전을 보는 방법
Chrome 및 Firefox를 사용하여 데스크톱에서 모바일 웹사이트를 보는 방법을 다루었습니다. 그러나 Mac 장치와 함께 제공되는 기본 브라우저인 Safari는 어떻습니까? 운 좋게도 Safari에서도 웹 사이트의 모바일 버전을 볼 수 있습니다.
- 사파리 브라우저를 실행합니다.
- 모바일 버전으로 보고 싶은 웹사이트로 이동합니다.
- 옵션을 클릭한 다음 개발 메뉴를 클릭합니다.
- 드롭다운 메뉴에서 반응형 디자인 모드 시작을 선택합니다.
- 이제 웹사이트의 모바일 버전을 볼 수 있습니다.
추가 FAQ
내 휴대폰에서 웹사이트의 데스크톱 버전을 볼 수 있습니까?
대답은 예입니다! 모바일 버전에서 데스크톱 버전으로 전환하여 컴퓨터를 사용하지 않고도 확인할 수 있습니다. Chrome에서 모바일 버전을 데스크톱 버전으로 전환하는 단계는 다음과 같습니다.
1. 데스크탑 보기에서 보고 싶은 웹사이트로 이동합니다.
2. 점 3개 아이콘을 눌러 메뉴에 액세스합니다.
3. 지금 데스크탑 보기 옵션을 선택하십시오.
이 단계는 사용 중인 휴대전화에 따라 다를 수 있습니다.
시작 메뉴 창 10에 액세스 할 수 없습니다.
모바일 웹 디자인을 더 쉽게 만들기
개발자 도구는 장치를 전환하지 않고도 데스크톱에서 웹사이트의 모바일 버전을 분석하고 수정하는 데 유용합니다. 화면 크기를 변경하여 구성 요소가 다양한 장치에서 어떻게 작동하는지 관찰할 수 있습니다. 반응형 모드를 사용하여 다양한 구성 요소를 조정하고 다양한 화면 크기에 맞는 웹사이트를 만들 수 있습니다.
웹사이트를 디자인할 때 디자이너는 항상 사이트의 프런트 엔드가 휴대폰, 태블릿 및 데스크톱에서 어떻게 표시되는지 염두에 두어야 합니다. 이 기사에 설명된 방법을 사용하면 개발자가 이를 수행하고 웹 사이트의 어떤 구성 요소가 문제를 해결하기 위해 문제를 일으키는지 식별하는 데 도움이 될 수 있습니다.
데스크톱에서 모바일 버전의 사이트를 본 적이 있습니까? 그렇게 하기 위해 어떤 브라우저를 사용하는 것을 선호합니까? 아래 의견 섹션에 알려주십시오.
