PC에서 웹 사이트의 모바일 버전을 보는 방법

웹 개발자이거나 온라인 비즈니스를 소유하고 있다면 데스크톱에서 모바일 사이트가 어떻게 보이는지 궁금할 것입니다. 인터넷 트래픽의 절반 이상이 전화에서 발생하므로 모바일 사이트의 모양과 기능이 중요할 수 있습니다. 고객은 사이트에 더 오래 머물거나 시각적으로 매력적일 경우 무언가를 구매할 가능성이 더 큽니다. 데스크톱 보기는 또한 편집을 수행하고 가능한 문제를 더 빨리 수정하는 데 도움이 될 수 있습니다.

다행히도 이것은 비교적 간단한 프로세스입니다. 이 기사에서는 다양한 장치 및 브라우저에서 웹 사이트의 모바일 버전을 보는 방법을 보여줍니다.

Mac의 Chrome에서 웹 사이트의 모바일 버전을 보는 방법

Chrome에서는 DevTools라는 기본 제공 개발자 도구를 사용하여 프런트 엔드를 테스트하고 웹사이트의 모든 구성요소가 제대로 작동하는지 확인할 수 있습니다. 사전 정의된 장치 선택을 제공하기 때문에 DevTools는 개발자 확장 없이 데스크톱에서 모바일로 또는 그 반대로 보기를 빠르게 전환할 수 있는 가장 좋은 방법입니다.

필요에 맞게 화면 크기를 변경하고 화면 너비와 높이를 조정하여 다양한 화면 크기에서 웹 사이트가 어떻게 보이는지 확인할 수도 있습니다. Mac에서 이렇게 하려면 다음 단계를 따르세요.

1. Google Chrome 브라우저를 실행하고 보려는 사이트로 이동합니다.
   
2. DevTools에 액세스하려면 키보드에서 F12를 누르십시오.
   
3. 모드가 켜져 있으면 "장치 에뮬레이션 전환" 아이콘을 클릭합니다.
   
4. iOS 및 Android 장치 목록에서 선택하여 에뮬레이션할 수 있습니다.
   
5. 선택한 모바일 형식으로 웹사이트가 표시됩니다.
   

완료되면 개발자 도구 창을 닫아 웹사이트의 모바일 버전을 닫습니다.

Windows PC의 Chrome에서 웹 사이트의 모바일 버전을 보는 방법

Chrome의 Windows PC에서 웹사이트의 모바일 버전을 보려면 다음과 같은 프로세스가 매우 유사합니다.

1. 크롬 브라우저를 엽니다.
   
2. Chrome에서 모바일 버전에서 보고 싶은 웹 사이트로 이동합니다.
3. 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 "검사"를 선택합니다.
   
4. 개발자 도구로 이동하려면 "추가 도구" 탭을 클릭하고 "개발자 도구"를 선택하거나 F12를 눌러 DevTools를 엽니다.
   
5. 개발자 도구 창이 열립니다.
6. 장치 전환 아이콘을 클릭하여 모바일 사이트 보기 모드로 전환합니다.
   
7. 에뮬레이션하려는 모바일 장치를 선택합니다(선택 사항).
   
8. 이제 필요에 맞게 화면 크기를 수정할 수 있습니다.

Chromebook의 Chrome에서 웹사이트의 모바일 버전을 보는 방법

Chromebook을 사용하여 Chrome에서 웹사이트의 모바일 버전에 액세스하는 것은 처음 두 가지 방법과 매우 유사합니다.

1. Google 크롬 웹 브라우저를 엽니다.
   
2. 휴대기기에서 액세스하려는 웹페이지를 엽니다.
   
3. 메뉴에 액세스하려면 세 개의 세로 점 아이콘을 클릭합니다.
   
4. 목록에서 추가 도구 항목 위로 마우스를 끕니다.
   
5. "개발자 도구"를 선택합니다.
   
6. 브라우저의 개발자 도구 창이 열립니다.
   
7. 장치 전환 아이콘을 클릭하여 모바일 사이트 보기 모드를 전환합니다.
   

그러면 모바일 사이트의 사용자 인터페이스가 나타납니다. 드롭다운 상자에서 제조업체와 모델을 선택하여 선호하는 장치 환경을 선택할 수도 있습니다. 웹페이지는 개발자 도구 콘솔을 닫을 때마다 데스크톱 사이트로 새로고침됩니다.

Mac의 Firefox에서 웹사이트의 모바일 버전을 보는 방법

Firefox와 같은 다른 웹 브라우저를 사용하여 Mac 데스크톱에서 모바일 사이트를 볼 수 있습니다. 브라우저 창 크기 조정은 대부분의 웹 개발자가 반응형 디자인 웹 사이트를 평가하는 데 사용하는 방법 중 하나입니다. 그러나 대부분의 경우 이 대안은 수용할 수 없는 것으로 보입니다.

여기에서 Firefox 브라우저의 웹 개발 기능이 유용합니다. Firefox에서 웹 사이트의 모바일 버전에 액세스하는 방법을 알고 있다면 여러 해상도로 웹 페이지를 탐색할 수 있습니다. 다음과 같이하세요:

1. 보려는 웹 사이트의 모바일 버전을 엽니다.
2. 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 "검사" 옵션을 선택합니다.
   
3. "반응형 디자인 모드"를 선택합니다.
   
4. 웹 사이트의 화면 크기를 선택합니다.
   

Windows PC의 Firefox에서 웹 사이트의 모바일 버전을 보는 방법

Windows PC에는 Firefox를 사용하여 웹 사이트의 모바일 버전을 볼 수 있는 옵션도 있습니다. 방법은 다음과 같습니다.

1. PC에서 Firefox를 시작합니다.
   
2. 모바일 버전으로 보고 싶은 웹사이트로 이동합니다.
   
3. 가로 3줄 아이콘을 클릭하여 "설정"으로 이동합니다.
   
4. "웹 개발자" 옵션을 선택해야 하는 드롭다운 메뉴가 표시됩니다.
   
5. "반응형 디자인 모드"를 선택합니다.
   
6. 마지막으로 스마트폰 모델을 선택하여 해당 장치에서 사이트가 어떻게 표시되는지 확인할 수 있습니다.
   

Mac의 Safari에서 웹 사이트의 모바일 버전을 보는 방법

Chrome 및 Firefox를 사용하여 데스크탑에서 모바일 웹사이트를 보는 방법을 다루었습니다. 그러나 Mac 장치와 함께 제공되는 기본 브라우저인 Safari는 어떻습니까? 다행히 Safari에서도 웹사이트의 모바일 버전을 볼 수 있습니다.

1. 사파리 브라우저를 실행합니다.
   
2. 모바일 버전으로 보고 싶은 웹사이트로 이동합니다.
   
3. "옵션"을 클릭한 다음 "개발" 메뉴를 클릭합니다.
   
4. 드롭다운 메뉴에서 "반응형 디자인 모드 시작"을 선택합니다.
   
5. 이제 웹사이트의 모바일 버전을 볼 수 있습니다.
   

추가 FAQ

내 전화에서 웹 사이트의 데스크탑 버전을 볼 수 있습니까?

대답은 '예'입니다! 모바일 버전에서 데스크톱 버전으로 전환하여 컴퓨터를 사용하지 않고도 확인할 수 있습니다. Chrome에서 모바일 버전을 데스크톱 버전으로 전환하는 단계는 다음과 같습니다.

1. 데스크톱 보기에서 보고 싶은 웹사이트로 이동합니다.

2. 점 3개 아이콘을 탭하여 메뉴에 액세스합니다.

3. 지금 "데스크탑 보기" 옵션을 선택합니다.

이 단계는 사용 중인 전화에 따라 다를 수 있습니다.

모바일 웹 디자인을 더 쉽게 만들기

개발자 도구는 장치를 전환하지 않고 데스크톱에서 웹사이트의 모바일 버전을 분석하고 수정하는 데 유용합니다. 화면 크기를 변경하여 다양한 장치에서 구성 요소가 어떻게 작동하는지 관찰할 수 있습니다. 반응형 모드를 사용하여 여러 구성 요소를 조정하고 여러 화면 크기에 맞게 웹 사이트를 만들 수 있습니다.

웹사이트를 디자인할 때 디자이너는 사이트의 프런트 엔드가 휴대폰, 태블릿 및 데스크톱에 어떻게 표시되는지 항상 염두에 두어야 합니다. 기사에 설명된 방법을 사용하면 개발자가 이를 수행하고 웹 사이트의 어떤 구성 요소가 문제를 일으켜 문제를 해결하는지 식별하는 데 도움이 될 수 있습니다.

데스크톱에서 사이트의 모바일 버전을 보려고 시도한 적이 있습니까? 이를 위해 어떤 브라우저를 선호하십니까? 아래 의견란에 알려주십시오.