모바일에서 pc화면 그대로 보기 - mobail-eseo pchwamyeon geudaelo bogi

PC에서 크롬 브라우저를 사용할 때 특정 사이트가 모바일 화면에서는 어떻게 보일까 궁금할 수 있습니다. 예를 들어 자신이 운영하는 웹사이트가 PC 화면에서 보이는 것과 모바일 기기에서 보이는 것이 어떻게 다른지 확인해야 할 때 굳이 모바일 기기로 실제로 접속하지 않더라도 PC에서 확인하는 방법이 있습니다.

PC 크롬에서 모바일 화면 모드로 보는 방법

컴퓨터 PC에서 크롬 브라우저를 실행한 후 모바일 기기 모드로 웹사이트 화면을 변경하는 방법입니다. 우측 상단의 점 세개 아이콘을 클릭한 후 '도구 더보기' - '개발자 도구'를 클릭합니다.

개발자 도구에서는 말 그대로 웹 사이트 개발자에게 다양한 옵션을 제공하는 기능인데요. 개발자 도구 메뉴를 클릭했을 때 크롬 브라우저 우측에 아래와 같은 창이 별도로 표시됩니다. 해당 창 상단에 휴대폰 모양의 아이콘이 있습니다. 이를 눌러줍니다.

휴대폰 모양의 아이콘을 누르면 좌측에 있던 사이트 화면이 휴대폰 기기 사이즈로 변경이 됩니다. 하지만 아직 휴대폰 기기의 모바일앱 버전이 아니라 PC 모드 기준으로 화면이 표시되어 있습니다.

모바일 기기의 앱 화면처럼 변경하려면 좌측 화면에서 새로 고침 버튼을 클릭하거나, 'www'를 지우고 주소만 주소표시줄에 입력을 다시 하시면 됩니다. 예를 들어 네이버의 경우 'naver.com'이라고 다시 주소표시줄에 검색을 하시면 모바일 기기 화면으로 자동으로 전환되어 표시가 됩니다.

네이버뿐만 아니라 다른 웹 사이트들도 모두 모바일 버전 화면으로 표시가 되는데요. 예를 들어 다음 포털 사이트의 경우에도 새로 고침을 하거나 'daum.net'이라고 'www'부분을 지우고 주소표시줄에 입력하니 모바일 기기에서 접속한 것처럼 표시되는 것을 확인할 수 있었습니다. 이와 같은 방법을 이용하면 PC 컴퓨터에서도 모바일 기기로 접속했을 때의 화면을 볼 수 있어 사이트 개발자 입장에서는 실제 고객이 방문했을 때의 상황을 확인할 수 있는 장점이 있습니다.

※ 연관 있는 다른 게시글

크롬 브라우저 표시 언어 변경하는 방법

크롬 사이트 여러 개 한 번에 여는 방법 (시작페이지 및 북마크)

아이폰 크롬 즐겨찾기 추가하는 방법 (아이콘 추가)

크롬 브라우저 호환성보기 설정 (IE Tab)

크롬 브라우저 인터넷사용기록 및 쿠키 삭제 방법

마카오 레터(과제)를 만들때 모든 디바이스에서 봐도 어색하지 않도록 화면 사이즈에 맞게 조정하는 작업이 필요했다.

그럼 그냥 만들고 모바일 화면만큼 줄였을 때 어떻게 될지만 예상해서 만들면 되는거 아닌가?

결과는 실패.

→ 원하는 화면이 아니라 pc 화면이 그대로 줄어들어서 글씨가 잘안보이고 이상함

⇒ 비율이 맞지 않음 (비율을 바꾸고 싶은데 어떻게 해야할지 모르겠음)

찾아보니 뷰 포트라는 게 있었다

뷰 포트(viewport)

먼저 뷰포트는 웹페이지가 사용자에게 보여지는 영역을 말한다. 데스크탑 pc에서는 브라우저의 크기를 마음대로 바꾸면서 뷰포트를 바꿀 수 있다. (인터넷 창 크기를 변경하는 것)

하지만 모바일에서는 크기를 변경할 수 없다. (보통 그렇다?) 또한 모바일 화면의 크기는 기기마다 다르다.

그렇기 때문에 아무런 처리를 해주지 않는다면 웹페이지를 모바일 화면에서 봤을 때 어떻게든 꾸겨넣은 형태가 된다.

(모바일 웨브라우저의 기본정책은 전체를 보여주기 위해 화면을 줄여서 보여주는 것)

이 사진들은 갤럭시 s8 기준으로 웹브라우저를 살펴본 것이다.

뷰포트를 설정하지 않은 사진

첫번째 사진을 보면 한 눈에 봐도 글씨가 너무 작고 보기 어렵다는 걸 알 수 있다.(전체를 보여줌) 하지만 두번째 사진은 모바일 화면에서 보기 적당하게 바뀐걸 볼 수 있다.(일부분을 보여줌)

(이미지는 크기를 따로 지정해줘야 변경된다.)

코드 설명

HTML5에서 뷰포트 태그를 사용하면 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기를 조절할 수 있다고 한다. 또한 줌 레벨도 조정 가능하다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

내가 사용한 코드이다. 가장 일반적으로 사용되는 설정이라고 한다.

각각의 속성들은 이런 의미를 가진다.

• width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정한다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 준다.
• initial-scale=1.0 : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 한다. 0~10 사이의 값을 가진다.

(1이 원래크기이고, 2라면 2배)

이 부분은 어제의 액션플랜대로 과제를 완성한 뒤, 트레이너님의 코드를 살펴보고 추가로 찾아본 속성이다.

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,viewport-fit=cover">

• minimum-scale : 줄일 수 있는 최소 크기를 지정한다. 0~10 사이의 값을 가진다.
• maximum-scale : 늘릴 수 있는 최대 크기를 지정한다. 0~10 사이의 값을 가진다.
• user-scalable : yes 또는 no 값을 가지며 사용자가 화면을 확대/축소 할 수 있는지는 지정한다.
• viewport-fit : viewport 속성에 추가된 새로운 속성으로 단순한 사각형 모양의 디스플레이가 아닌 디스플레이를 위한 속성이다.
  • 지정하지 않으면 기본값은 auto로 콘텐츠를 모두 보여줄 수 있도록 콘텐츠를 축소하여 보여준다.
  • cover로 지정하면 viewport를 스크린의 전체로 확대한다.

오늘은 문제를 해결한 뒤, 더 좋은 코드와 비교하고 의도를 파악하는 작업을 해봤다.

필요한 정보를 찾아보고 내가 사용한 방법과 다른코드를 비교해서 더 폭넓은 지식을 얻을 수 있다는 점에서 재밌었다.

적다보니 길어져서 다른부분을 많이 살펴보지 못했지만 그래도 확실히 얻어간 기분!

앞으로도 이렇게 문제가 생겼을 때마다 필요한 정보를 찾아보고 정리하는 시간을 가져봐야겠다.

참고자료

https://www.w3schools.com/css/css_rwd_viewport.asp